clean up overlay

Hubs-Foundation · Jul 24, 2023 · 3da53de · 3da53de
1 parent 64d574f
commit 3da53de
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 30 deletions.
diff --git a/src/react-components/layout/List.scss b/src/react-components/layout/List.scss
@@ -25,11 +25,11 @@
   width: 100%;
 
   &:hover {
-    background-color: theme.$list-bg-color-hover;
+    background-color: theme.$basic-color-hover;
   }
 
   &:active {
-    background-color: theme.$list-bg-color-pressed;
+    background-color: theme.$basic-color-pressed;
   }
 
   :global(body.keyboard-user) &:focus {
@@ -47,7 +47,7 @@
     &:hover {
       background-color: theme.$active-color-hover;
     }
-  
+
     &:active {
       background-color: theme.$active-color-pressed;
     }

diff --git a/src/react-components/popover/ImageGridPopover.scss b/src/react-components/popover/ImageGridPopover.scss
@@ -1,6 +1,5 @@
 @use "../styles/theme.scss";
 
-
 :local(.image-grid-popover) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
@@ -19,12 +18,11 @@
     min-height: 56px;
 
     &:hover {
-      background-color: theme.$list-bg-color-hover;
+      background-color: theme.$basic-color-hover;
     }
 
     &:active {
-      background-color: theme.$list-bg-color-pressed;
+      background-color: theme.$basic-color-pressed;
     }
   }
 }
-
diff --git a/src/react-components/room/ObjectMenu.scss b/src/react-components/room/ObjectMenu.scss
@@ -1,6 +1,7 @@
 @use "../styles/theme.scss";
 
-:local(.back-button), :local(.lights-button) {
+:local(.back-button),
+:local(.lights-button) {
   position: absolute;
   top: 16px;
   pointer-events: auto;
@@ -9,7 +10,7 @@
     color: theme.$overlay-text-color;
   }
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     display: none;
   }
 }
@@ -51,7 +52,7 @@
   align-items: center;
   justify-content: center;
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     display: flex;
   }
 }
@@ -66,12 +67,11 @@
   right: 16px;
 }
 
-
 :local(.menu) {
   display: flex;
   padding: 16px;
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     padding-top: 0;
   }
 }
@@ -100,13 +100,14 @@
     color: theme.$overlay-text-color;
   }
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     display: none;
   }
 }
 
-:global(.keyboard-user)  {
-  :local(.back-button):focus, :local(.object-menu-container) :focus {
-    box-shadow: 0 0 0 3px theme.$overlay-outline-color;
+:global(.keyboard-user) {
+  :local(.back-button):focus,
+  :local(.object-menu-container) :focus {
+    box-shadow: 0 0 0 3px theme.$white;
   }
 }
diff --git a/src/react-components/room/PeopleSidebar.scss b/src/react-components/room/PeopleSidebar.scss
@@ -14,7 +14,7 @@
 }
 
 :local(.moderator-icon) {
-  color: theme.$admin-color;
+  color: theme.$accent1-color;
 }
 
 :local(.presence) {

diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
@@ -113,9 +113,6 @@
   --input-border-color-hover: var(--primary-color-hover);
   --input-outline-color: var(--primary-color);
 
-  --list-bg-color-hover: var(--basic-color-hover);
-  --list-bg-color-pressed: var(--basic-color-pressed);
-
   --dropdown-bg-color: var(--background1-color);
   --dropdown-border-color: var(--border1-color);
   --dropdown-shadow-color: var(--shadow-color);
@@ -139,16 +136,13 @@
 
   --favorite-color: #{theme.$yellow};
 
-  --admin-color: var(--accent1-color);
-
   --error-color: var(--cancel-color);
   --error-color-hover: var(--cancel-color-hover);
   --error-color-pressed: var(--cancel-color-pressed);
 
   --overlay-bg-color: rgba(0, 0, 0, 0.5);
   --overlay-text-color: #{theme.$white};
   --overlay-border-color: #{theme.$grey};
-  --overlay-outline-color: #{theme.$white};
 
   --toolbar-icon-color: var(--text5-color);
   --toolbar-icon-selected-bg: var(--transparent);

diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
@@ -199,9 +199,6 @@ $input-border-color: var(--input-border-color);
 $input-border-color-hover: var(--input-border-color-hover);
 $input-outline-color: var(--input-outline-color);
 
-$list-bg-color-hover: var(--list-bg-color-hover);
-$list-bg-color-pressed: var(--list-bg-color-pressed);
-
 $dropdown-bg-color: var(--dropdown-bg-color);
 $dropdown-border-color: var(--dropdown-border-color);
 $dropdown-shadow-color: var(--dropdown-shadow-color);
@@ -225,16 +222,13 @@ $chat-bubble-bg-color-received: var(--chat-bubble-bg-color-received);
 
 $favorite-color: var(--favorite-color);
 
-$admin-color: var(--admin-color);
-
 $error-color: var(--error-color);
 $error-color-hover: var(--error-color-hover);
 $error-color-pressed: var(--error-color-pressed);
 
 $overlay-bg-color: var(--overlay-bg-color);
 $overlay-text-color: var(--overlay-text-color);
 $overlay-border-color: var(--overlay-border-color);
-$overlay-outline-color: var(--overlay-outline-color);
 
 $toolbar-icon-color: var(--toolbar-icon-color);
 $toolbar-icon-selected-bg: var(--toolbar-icon-selected-bg);

diff --git a/themes.json b/themes.json
@@ -40,7 +40,6 @@
       "accent5-border-color": "#13a4ed",
       "accent5-color-hover": "#5D646C",
       "accent5-color-pressed": "#21242C",
-      "admin-color": "#13a4ed",
       "text1-color": "#ffffff",
       "text1-color-hover": "#E7E7E7",
       "text1-color-pressed": "#DBDBDB",