Make presence icons & colours consistent throughout the app

Update WithPresenceIndicator to use the new AvatarPresenceIconView
component rather than its own one with old presece icons / colours.

apps/web/res/css/views/avatars/_WithPresenceIndicator.pcss

@@ -13,34 +13,10 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_WithPresenceIndicator_icon {
         position: absolute;
+        /* PresenceIconView has its own idea of where it should be positioned which it probably shouldn't */
+        top: initial;
+        left: initial;
         right: -2px;
         bottom: -2px;
     }
-
-    .mx_WithPresenceIndicator_icon::before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-        border: 2px solid var(--cpd-color-bg-canvas-default);
-        border-radius: 50%;
-    }
-
-    .mx_WithPresenceIndicator_icon_offline::before {
-        background-color: $presence-offline;
-    }
-
-    .mx_WithPresenceIndicator_icon_online::before {
-        background-color: $accent;
-    }
-
-    .mx_WithPresenceIndicator_icon_away::before {
-        background-color: $presence-away;
-    }
-
-    .mx_WithPresenceIndicator_icon_busy::before {
-        background-color: $presence-busy;
-    }
 }

apps/web/src/components/views/avatars/WithPresenceIndicator.tsx

@@ -23,22 +23,22 @@ import DMRoomMap from "../../../utils/DMRoomMap";
 import { getJoinedNonFunctionalMembers } from "../../../utils/room/getJoinedNonFunctionalMembers";
 import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import { BUSY_PRESENCE_NAME } from "../rooms/PresenceLabel";
+import AvatarPresenceIconView from "../rooms/MemberList/tiles/common/PresenceIconView";
 
 interface Props {
     room: Room;
-    size: string; // CSS size
-    tooltipProps?: {
-        tabIndex?: number;
-    };
     children: ReactNode;
 }
 
 export enum Presence {
-    // Note: the names here are used in CSS class names
+    // This class used to have its own presence indicator and has been
-    Online = "ONLINE",
+    // updated to use the new one so presence colours / icons match across the app.
-    Away = "AWAY",
+    // These values are the ones from the wire that PresenceIconView expects,
-    Offline = "OFFLINE",
+    // but really some of the logic here could be deduplicated.
-    Busy = "BUSY",
+    Online = "online",
+    Away = "unavailable",
+    Offline = "offline",
+    Busy = "busy",
 }
 
 function tooltipText(variant: Presence): string {
@@ -117,22 +117,13 @@ export const usePresence = (room: Room, member: RoomMember | null): Presence | n
     return presence;
 };
 
-const WithPresenceIndicator: React.FC<Props> = ({ room, size, tooltipProps, children }) => {
+const WithPresenceIndicator: React.FC<Props> = ({ room, children }) => {
     const dmMember = useDmMember(room);
     const presence = usePresence(room, dmMember);
 
     let icon: JSX.Element | undefined;
     if (presence) {
-        icon = (
+        icon = <AvatarPresenceIconView presenceState={presence} className="mx_WithPresenceIndicator_icon" />;
-            <div
-                tabIndex={tooltipProps?.tabIndex ?? 0}
-                className={`mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_${presence.toLowerCase()}`}
-                style={{
-                    width: size,
-                    height: size,
-                }}
-            />
-        );
     }
 
     if (!presence) return <>{children}</>;