Don't reference the notification levels by colour (#12138)

* Don't reference the notification levels by colour

We're about to change what colours they are so either we'd have to rename
a bunch of constants. We may as well make things not reference what colour
anything is in the actual UI. Hopefully these constants are clear enough.

 * Rename NotificationColor -> NotificationLevel
 * Red -> Highlight
 * Grey -> Notification
 * Bold -> Activity
 * Anywhere else that calls it 'color' -> 'level'

Also fixes some weird mixes of US & UK English.

It turns out this is referenced in... quite a lot of places, so this is
quite a large PR. It can't really be much smaller, sorry.

* One test rename & some hiding due to ts-ignore

* More hiding behind ts-ignore

* Damn you, @ts-ignore...

* Fix test CSS values

* Missed some colour -> level

Co-authored-by: Florian Duros <florianduros@element.io>

* Change other instances of variables renamed in suggestion

* Update new test for renames

---------

Co-authored-by: Florian Duros <florianduros@element.io>

src/hooks/useUnreadNotifications.ts

@@ -19,7 +19,7 @@ import { useCallback, useEffect, useState } from "react";
 
 import type { NotificationCount, Room } from "matrix-js-sdk/src/matrix";
 import { determineUnreadState } from "../RoomNotifs";
-import { NotificationColor } from "../stores/notifications/NotificationColor";
+import { NotificationLevel } from "../stores/notifications/NotificationLevel";
 import { useEventEmitter } from "./useEventEmitter";
 
 export const useUnreadNotifications = (
@@ -28,11 +28,11 @@ export const useUnreadNotifications = (
 ): {
     symbol: string | null;
     count: number;
-    color: NotificationColor;
+    level: NotificationLevel;
 } => {
     const [symbol, setSymbol] = useState<string | null>(null);
     const [count, setCount] = useState<number>(0);
-    const [color, setColor] = useState<NotificationColor>(NotificationColor.None);
+    const [level, setLevel] = useState<NotificationLevel>(NotificationLevel.None);
 
     useEventEmitter(
         room,
@@ -50,10 +50,10 @@ export const useUnreadNotifications = (
     useEventEmitter(room, RoomEvent.MyMembership, () => updateNotificationState());
 
     const updateNotificationState = useCallback(() => {
-        const { symbol, count, color } = determineUnreadState(room, threadId);
+        const { symbol, count, level } = determineUnreadState(room, threadId);
         setSymbol(symbol);
         setCount(count);
-        setColor(color);
+        setLevel(level);
     }, [room, threadId]);
 
     useEffect(() => {
@@ -63,6 +63,6 @@ export const useUnreadNotifications = (
     return {
         symbol,
         count,
-        color,
+        level,
     };
 };