From f98de184275c47adf204f391b16ed889e055d773 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 10 Aug 2021 16:45:56 +0100
Subject: [PATCH] Add blue beta dot to the space panel create button

---
 res/css/structures/_SpacePanel.scss        | 10 ++++++++++
 src/components/views/spaces/SpacePanel.tsx | 10 +++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 0931ec6119..876a04c4f5 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -100,6 +100,16 @@ $activeBorderColor: $secondary-fg-color;
         }
     }
 
+    .mx_SpaceItem_new {
+        position: relative;
+
+        .mx_BetaDot {
+            position: absolute;
+            left: 33px;
+            top: -5px;
+        }
+    }
+
     .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
         margin-left: $gutterSize;
         min-width: 40px;
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 58e1db4b1d..43d8105b51 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -138,11 +138,18 @@ const CreateSpaceButton = ({
     }
 
     const onNewClick = menuDisplayed ? closeMenu : () => {
+        // persist that the user has interacted with this, use it to dismiss the beta dot
+        localStorage.setItem("mx_seenSpaces", "1");
         if (!isPanelCollapsed) setPanelCollapsed(true);
         openMenu();
     };
 
-    return <li className={classNames("mx_SpaceItem", {
+    let betaDot: JSX.Element;
+    if (!localStorage.getItem("mx_seenSpaces")) {
+        betaDot = <div className="mx_BetaDot" />;
+    }
+
+    return <li className={classNames("mx_SpaceItem mx_SpaceItem_new", {
         "collapsed": isPanelCollapsed,
     })}>
         <SpaceButton
@@ -153,6 +160,7 @@ const CreateSpaceButton = ({
             onClick={onNewClick}
             isNarrow={isPanelCollapsed}
         />
+        { betaDot }
 
         { contextMenu }
     </li>;