Merge pull request #5525 from mozilla/RemoveToolBar

Remove tool bar UI background
Hubs-Foundation · Jul 12, 2022 · 1113bc1 · 1113bc1
2 parents cfa9fbf + 8491f58
commit 1113bc1
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 59 deletions.
diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
@@ -12,8 +12,11 @@
     cursor: pointer;
     color: theme.$text1-color;
     margin-top: 8px;
-    margin-bottom: 3px;
+    margin-bottom: 1px;
     white-space: nowrap;
+    background-color: theme.$background1-color;
+    padding: 2px 4px 2px 4px;
+    border-radius: 9999px;
   }
 }
 
@@ -29,6 +32,7 @@
   background-color: theme.$transparent;
 
   transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
+  pointer-events: auto;
 
   svg {
     *[stroke=\#000] {
@@ -48,10 +52,10 @@
   height: 96px;
 }
 
-:local(.basic), :local(.transparent) {
+:local(.basic) {
   :local(.icon-container) {
     border-color: theme.$toolbar-basic-border-color;
-    background-color: transparent;
+    background-color: theme.$toolbar-basic-color;
     svg {
       *[stroke=\#000] {
         stroke: theme.$toolbar-basic-icon-color;
@@ -64,18 +68,18 @@
   }  
 
   &:hover :local(.icon-container) {
-    border: 1px solid theme.$toolbar-basic-border-color;
-    background-color: theme.$basic-color-hover;
+    border: 1px solid theme.$toolbar-basic-border-color-hover;
+    background-color: theme.$toolbar-basic-color-hover;
   }
 
   &:active :local(.icon-container) {
-    border-color: theme.$basic-color-pressed;
-    background-color: theme.$basic-color-pressed;
+    border-color: theme.$toolbar-basic-border-color-pressed;
+    background-color: theme.$toolbar-basic-color-pressed;
   }
 
   &:local(.selected) {
     :local(.icon-container) {
-      border-color: transparent;
+      border-color: theme.$toolbar-basic-border-color;
       background-color: theme.$toolbar-icon-selected-bg;
     }
     svg {
@@ -106,7 +110,7 @@
   }
 }
 
-:local(.transparent) :local(.icon-container) {
+:local(.icon-container) {
   border-color: theme.$transparent;
 }
 
@@ -181,30 +185,30 @@
 
 :local(.accept) {
   :local(.icon-container) {
-    background-color: theme.$accept-color;
-    border-color: theme.$accept-border-color;
+    background-color: theme.$toolbar-accept-color;
+    border-color: theme.$toolbar-accept-border-color;
   }  
 
   &:hover :local(.icon-container) {
-    background-color: theme.$accept-color-hover;
+    background-color: theme.$toolbar-accept-color-hover;
   }
 
   &:active :local(.icon-container) {
-    background-color: theme.$accept-color-pressed;
+    background-color: theme.$toolbar-accept-color-pressed;
   }
 
   &:local(.selected) {
     :local(.icon-container) {
-      border-color: theme.$accept-color;
+      border-color: theme.$toolbar-accept-color;
       background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
-          stroke: theme.$accept-color;
+          stroke: theme.$toolbar-accept-color;
         }
 
         *[fill=\#000] {
-          fill: theme.$accept-color;
+          fill: theme.$toolbar-accept-color;
         }
       }
     }
@@ -215,31 +219,31 @@
 
     &:hover {
       :local(.icon-container) {
-        border-color: theme.$accept-color-hover;
+        border-color: theme.$toolbar-accept-border-color-hover;
 
         svg {
           *[stroke=\#000] {
-            stroke: theme.$accept-color-hover;
+            stroke: theme.$toolbar-accept-color-hover;
           }
 
           *[fill=\#000] {
-            fill: theme.$accept-color-hover;
+            fill: theme.$toolbar-accept-color-hover;
           }
         }
       }
     }
 
     &:active {
       :local(.icon-container) {
-        border-color: theme.$accept-color-pressed;
+        border-color: theme.$toolbar-accept-border-color-pressed;
 
         svg {
           *[stroke=\#000] {
-            stroke: theme.$accept-color-pressed;
+            stroke: theme.$toolbar-accept-color-pressed;
           }
 
           *[fill=\#000] {
-            fill: theme.$accept-color-pressed;
+            fill: theme.$toolbar-accept-color-pressed;
           }
         }
       }
@@ -330,7 +334,7 @@
 
   &:local(.selected) {
     :local(.icon-container) {
-      border-color: theme.$accent1-color;
+      border-color: theme.$accent1-border-color;
       background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
@@ -350,7 +354,7 @@
 
     &:hover {
       :local(.icon-container) {
-        border-color: theme.$accent1-color-hover;
+        border-color: theme.$accent1-border-color-hover;
 
         svg {
           *[stroke=\#000] {
@@ -366,7 +370,7 @@
 
     &:active {
       :local(.icon-container) {
-        border-color: theme.$accent1-color-pressed;
+        border-color: theme.$accent1-border-color-pressed;
 
         svg {
           *[stroke=\#000] {
@@ -398,7 +402,7 @@
 
   &:local(.selected) {
     :local(.icon-container) {
-      border-color: theme.$accent2-color;
+      border-color: theme.$accent2-border-color;
       background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
@@ -418,7 +422,7 @@
 
     &:hover {
       :local(.icon-container) {
-        border-color: theme.$accent2-color-hover;
+        border-color: theme.$accent2-border-color-hover;
 
         svg {
           *[stroke=\#000] {
@@ -434,7 +438,7 @@
 
     &:active {
       :local(.icon-container) {
-        border-color: theme.$accent2-color-pressed;
+        border-color: theme.$accent2-border-color-pressed;
 
         svg {
           *[stroke=\#000] {
@@ -466,7 +470,7 @@
 
   &:local(.selected) {
     :local(.icon-container) {
-      border-color: theme.$accent3-color;
+      border-color: theme.$accent3-border-color;
       background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
@@ -486,7 +490,7 @@
 
     &:hover {
       :local(.icon-container) {
-        border-color: theme.$accent3-color-hover;
+        border-color: theme.$accent3-border-color-hover;
 
         svg {
           *[stroke=\#000] {
@@ -502,7 +506,7 @@
 
     &:active {
       :local(.icon-container) {
-        border-color: theme.$accent3-color-pressed;
+        border-color: theme.$accent3-border-color-pressed;
 
         svg {
           *[stroke=\#000] {
@@ -534,7 +538,7 @@
 
   &:local(.selected) {
     :local(.icon-container) {
-      border-color: theme.$accent4-color;
+      border-color: theme.$accent4-border-color;
       background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
@@ -554,7 +558,7 @@
 
     &:hover {
       :local(.icon-container) {
-        border-color: theme.$accent4-color-hover;
+        border-color: theme.$accent4-border-color-hover;
 
         svg {
           *[stroke=\#000] {
@@ -570,7 +574,7 @@
 
     &:active {
       :local(.icon-container) {
-        border-color: theme.$accent4-color-pressed;
+        border-color: theme.$accent4-border-color-pressed;
 
         svg {
           *[stroke=\#000] {
@@ -602,7 +606,7 @@
 
   &:local(.selected) {
     :local(.icon-container) {
-      border-color: theme.$accent5-color;
+      border-color: theme.$accent5-border-color;
       background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
@@ -622,7 +626,7 @@
 
     &:hover {
       :local(.icon-container) {
-        border-color: theme.$accent5-color-hover;
+        border-color: theme.$accent5-border-color-hover;
 
         svg {
           *[stroke=\#000] {
@@ -638,7 +642,7 @@
 
     &:active {
       :local(.icon-container) {
-        border-color: theme.$accent5-color-pressed;
+        border-color: theme.$accent5-border-color-pressed;
         svg {
           *[stroke=\#000] {
             stroke: theme.$accent5-color-pressed;
@@ -700,4 +704,4 @@
     border-top-right-radius: 9999px;
     border-bottom-right-radius: 9999px;
   }
-}
+}
diff --git a/src/react-components/input/ToolbarButton.stories.js b/src/react-components/input/ToolbarButton.stories.js
@@ -71,7 +71,7 @@ export const RoomToolbar = () => (
     toolbarRight={
       <>
         <ToolbarButton icon={<LeaveIcon />} label="Leave" preset="accent1" />
-        <ToolbarButton icon={<MoreIcon />} label="More" preset="transparent" />
+        <ToolbarButton icon={<MoreIcon />} label="More" preset="basic" />
       </>
     }
   />
@@ -86,6 +86,6 @@ export const EntryToolbar = () => (
         <ToolbarButton icon={<ChatIcon />} label="Chat" preset="accent4" />
       </>
     }
-    toolbarRight={<ToolbarButton icon={<MoreIcon />} label="More" preset="transparent" />}
+    toolbarRight={<ToolbarButton icon={<MoreIcon />} label="More" preset="basic" />}
   />
 );
diff --git a/src/react-components/layout/RoomLayout.js b/src/react-components/layout/RoomLayout.js
@@ -21,7 +21,11 @@ export function RoomLayout({
   ...rest
 }) {
   return (
-    <div className={classNames(styles.roomLayout, { [styles.objectFocused]: objectFocused }, className)} {...rest}>
+    <div
+      className={classNames(styles.roomLayout, { [styles.objectFocused]: objectFocused }, className)}
+      ref={viewportRef}
+      {...rest}
+    >
       {sidebar && <div className={classNames(styles.sidebar, sidebarClassName)}>{sidebar}</div>}
       <div className={classNames(styles.modalContainer, styles.viewport)}>{modal}</div>
       {(toolbarLeft || toolbarCenter || toolbarRight) && (
@@ -34,7 +38,6 @@ export function RoomLayout({
       )}
       <div
         className={classNames(styles.main, styles.viewport, { [styles.streaming]: streaming }, viewportClassName)}
-        ref={viewportRef}
       >
         {viewport}
       </div>

diff --git a/src/react-components/layout/Toolbar.scss b/src/react-components/layout/Toolbar.scss
@@ -4,8 +4,7 @@
   height: 96px;
   display: flex;
   padding: 12px;
-  background-color: theme.$background1-color;
-  border-top: 1px solid theme.$border1-color;
+  pointer-events: none;
 
   @media (min-width: theme.$breakpoint-lg) {
     padding: 12px 24px;