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,12 +550,38 @@ class App extends React.Component<AppProps, AppState> {
     const canvasHeight = canvasDOMHeight * canvasScale;
     if (viewModeEnabled) {
       return (
+        <FollowMode width={canvasDOMWidth} height={canvasDOMHeight}>
+          <canvas
+            className="excalidraw__canvas"
+            style={{
+              width: canvasDOMWidth,
+              height: canvasDOMHeight,
+              cursor: CURSOR_TYPE.GRAB,
+            }}
+            width={canvasWidth}
+            height={canvasHeight}
+            ref={this.handleCanvasRef}
+            onContextMenu={(event: React.PointerEvent<HTMLCanvasElement>) =>
+              this.handleCanvasContextMenu(event)
+            }
+            onPointerMove={this.handleCanvasPointerMove}
+            onPointerUp={this.handleCanvasPointerUp}
+            onPointerCancel={this.removePointer}
+            onTouchMove={this.handleTouchMove}
+            onPointerDown={this.handleCanvasPointerDown}
+          >
+            {t("labels.drawingCanvas")}
+          </canvas>
+        </FollowMode>
+      );
+    }
+    return (
+      <FollowMode width={canvasDOMWidth} height={canvasDOMHeight}>
         <canvas
           className="excalidraw__canvas"
           style={{
             width: canvasDOMWidth,
             height: canvasDOMHeight,
-            cursor: CURSOR_TYPE.GRAB,
           }}
           width={canvasWidth}
           height={canvasHeight}
@@ -562,38 +589,16 @@ class App extends React.Component<AppProps, AppState> {
           onContextMenu={(event: React.PointerEvent<HTMLCanvasElement>) =>
             this.handleCanvasContextMenu(event)
           }
+          onPointerDown={this.handleCanvasPointerDown}
+          onDoubleClick={this.handleCanvasDoubleClick}
           onPointerMove={this.handleCanvasPointerMove}
           onPointerUp={this.handleCanvasPointerUp}
           onPointerCancel={this.removePointer}
           onTouchMove={this.handleTouchMove}
-          onPointerDown={this.handleCanvasPointerDown}
         >
           {t("labels.drawingCanvas")}
         </canvas>
-      );
+      </FollowMode>
-    }
-    return (
-      <canvas
-        className="excalidraw__canvas"
-        style={{
-          width: canvasDOMWidth,
-          height: canvasDOMHeight,
-        }}
-        width={canvasWidth}
-        height={canvasHeight}
-        ref={this.handleCanvasRef}
-        onContextMenu={(event: React.PointerEvent<HTMLCanvasElement>) =>
-          this.handleCanvasContextMenu(event)
-        }
-        onPointerDown={this.handleCanvasPointerDown}
-        onDoubleClick={this.handleCanvasDoubleClick}
-        onPointerMove={this.handleCanvasPointerMove}
-        onPointerUp={this.handleCanvasPointerUp}
-        onPointerCancel={this.removePointer}
-        onTouchMove={this.handleTouchMove}
-      >
-        {t("labels.drawingCanvas")}
-      </canvas>
     );
   }
 

src/components/Avatar.scss

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

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);