POC: follow mode indicator styling

src/components/App.tsx

@@ -331,6 +331,7 @@ import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { activeEyeDropperAtom } from "./EyeDropper";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
+import FollowMode from "./FollowMode/FollowMode";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -549,6 +550,7 @@ class App extends React.Component<AppProps, AppState> {
     const canvasHeight = canvasDOMHeight * canvasScale;
     if (viewModeEnabled) {
       return (
+        <FollowMode width={canvasDOMWidth} height={canvasDOMHeight}>
           <canvas
             className="excalidraw__canvas"
             style={{
@@ -570,9 +572,11 @@ class App extends React.Component<AppProps, AppState> {
           >
             {t("labels.drawingCanvas")}
           </canvas>
+        </FollowMode>
       );
     }
     return (
+      <FollowMode width={canvasDOMWidth} height={canvasDOMHeight}>
         <canvas
           className="excalidraw__canvas"
           style={{
@@ -594,6 +598,7 @@ class App extends React.Component<AppProps, AppState> {
         >
           {t("labels.drawingCanvas")}
         </canvas>
+      </FollowMode>
     );
   }
 

src/components/Avatar.scss

@@ -32,10 +32,8 @@
       border-radius: 100%;
     }
 
-    &--is-followed {
-      &::before {
-        border-color: red;
-      }
+    &--is-followed::before {
+      border-color: var(--color-primary-hover);
     }
   }
 }

src/components/FollowMode/FollowMode.scss

@@ -0,0 +1,45 @@
+.excalidraw {
+  .follow-mode {
+    position: absolute;
+    box-sizing: border-box;
+    pointer-events: none;
+    border: 2px solid var(--color-primary-hover);
+    z-index: 9999;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    &__badge {
+      background-color: var(--color-primary-hover);
+      color: var(--color-primary-light);
+      padding: 0.25rem 0.5rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.5rem;
+      pointer-events: all;
+      font-size: 0.75rem;
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    &__disconnect-btn {
+      all: unset;
+      cursor: pointer;
+      border-radius: 0.25rem;
+
+      &:hover {
+        background-color: var(--color-primary-darker);
+      }
+
+      &:active {
+        background-color: var(--color-primary-darkest);
+      }
+
+      svg {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}

src/components/FollowMode/FollowMode.tsx

@@ -0,0 +1,24 @@
+import { CloseIcon } from "../icons";
+import "./FollowMode.scss";
+
+interface FollowModeProps {
+  width: number;
+  height: number;
+  children: React.ReactNode;
+}
+
+const FollowMode = ({ children, height, width }: FollowModeProps) => {
+  return (
+    <div style={{ position: "relative" }}>
+      <div className="follow-mode" style={{ width, height }}>
+        <div className="follow-mode__badge">
+          <span>Following Handsome Swan</span>
+          <button className="follow-mode__disconnect-btn">{CloseIcon}</button>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default FollowMode;

src/css/theme.scss

@@ -81,6 +81,7 @@
   --color-primary-darkest: #4a47b1;
   --color-primary-light: #e3e2fe;
   --color-primary-light-darker: #d7d5ff;
+  --color-primary-hover: #5753d0;
 
   --color-gray-10: #f5f5f5;
   --color-gray-20: #ebebeb;
@@ -193,6 +194,7 @@
     --color-primary-darkest: #beb9ff;
     --color-primary-light: #4f4d6f;
     --color-primary-light-darker: #43415e;
+    --color-primary-hover: #bbb8ff;
 
     --color-text-warning: var(--color-gray-80);