Merge pull request #6173 from mozilla/color-variable-sweep

Update components to use color variables
Hubs-Foundation · Jul 25, 2023 · 78f91f9 · 78f91f9
2 parents b524853 + 94c96fd
commit 78f91f9
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 44 deletions.
diff --git a/src/react-components/input/Button.scss b/src/react-components/input/Button.scss
@@ -23,6 +23,16 @@
   }
 }
 
+:local(.basic) {
+  border: 2px solid theme.$basic-border-color;
+  background-color: theme.$basic-color;
+}
+
+:local(.transparent) {
+  border-color: theme.$background1-color;
+  background-color: theme.$background1-color;
+}
+
 :local(.basic),
 :local(.transparent) {
   color: theme.$text2-color;
@@ -44,11 +54,6 @@
   }
 }
 
-:local(.transparent) {
-  border-color: theme.$transparent;
-  background-color: theme.$transparent;
-}
-
 :local(.primary) {
   color: theme.$text5-color;
   background-color: theme.$primary-color;

diff --git a/src/react-components/input/RadioInput.scss b/src/react-components/input/RadioInput.scss
@@ -30,6 +30,7 @@
   align-self: center;
   position: relative;
   appearance: none;
+  cursor: pointer;
   -moz-appearance: none;
   -webkit-appearance: none;
 

diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
@@ -1,4 +1,4 @@
-@use '../styles/theme';
+@use "../styles/theme";
 
 :local(.toolbar-button) {
   border: none;
@@ -43,11 +43,11 @@
   svg {
     color: theme.$toolbar-icon-color;
 
-    *[stroke=\#000] {
+    *[stroke="\#000"] {
       transition: stroke 0.1s ease-in-out;
     }
 
-    *[fill=\#000] {
+    *[fill="\#000"] {
       transition: fill 0.1s ease-in-out;
     }
   }
@@ -58,17 +58,18 @@
   height: 96px;
 }
 
-:local(.basic), :local(.transparent) {
+:local(.basic),
+:local(.transparent) {
   :local(.icon-container) {
     border-color: theme.$toolbar-basic-border-color;
-    background-color: theme.$transparent;;
+    background-color: theme.$background1-color;
     svg {
       color: theme.$toolbar-basic-icon-color;
     }
 
     &:disabled,
     &[disabled] {
-      border-color: theme.$transparent;
+      border-color: theme.$background1-color;
       background-color: theme.$disabled-bg-color;
       svg {
         color: theme.$disabled-icon-color;
@@ -113,7 +114,7 @@
         background-color: theme.$toolbar-basic-color-hover;
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         background-color: theme.$toolbar-basic-color-pressed;
@@ -186,7 +187,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$primary-color-pressed;
@@ -199,7 +200,6 @@
   }
 }
 
-
 :local(.accept) {
   :local(.icon-container) {
     background-color: theme.$accept-color;
@@ -211,7 +211,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accept-color-hover;
@@ -251,7 +251,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accept-color-pressed;
@@ -274,7 +274,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$cancel-color-hover;
@@ -314,7 +314,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$cancel-color-pressed;
@@ -338,7 +338,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent1-color-hover;
@@ -383,7 +383,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent1-color-pressed;
@@ -407,7 +407,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent2-color-hover;
@@ -447,7 +447,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent2-color-pressed;
@@ -471,7 +471,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent3-color-hover;
@@ -511,7 +511,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent3-color-pressed;
@@ -575,7 +575,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent4-color-pressed;
@@ -599,7 +599,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent5-color-hover;
@@ -627,7 +627,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent5;   
+      color: theme.$toolbar-label-accent5;
     }
 
     &:hover {
@@ -639,7 +639,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent5-color-pressed;
@@ -667,7 +667,6 @@
   background-color: theme.$status-disabled-color;
 }
 
-
 :local(.status-unread) {
   background-color: theme.$status-unread-color;
 }
@@ -682,7 +681,7 @@
     border-radius: 0px;
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
-  } 
+  }
 }
 
 :local(.middle) {

diff --git a/src/react-components/room/MicSetupModal.js b/src/react-components/room/MicSetupModal.js
@@ -90,7 +90,11 @@ export function MicSetupModal({
                         checked={isMicrophoneMuted}
                         onChange={onChangeMicrophoneMuted}
                       />
-                      <ToolTip category="primary" description="Toggle mic on/off anytime after you enter the room (M)">
+                      <ToolTip
+                        location="right"
+                        category="primary"
+                        description="Toggle mic on/off anytime after you enter the room (M)"
+                      >
                         <InfoIcon className={styles.infoIcon} />
                       </ToolTip>
                     </>

diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
@@ -74,8 +74,6 @@
   --primary-color-pressed: #{theme.$blue-pressed};
 
   --secondary-color: #{theme.$lightgrey};
-  --secondary-color-hover: #{theme.$lightgrey-hover};
-  --secondary-color-pressed: #{theme.$lightgrey-pressed};
 
   --background1-color: #{theme.$white};
   --background2-color: #{theme.$recessed-bg};
@@ -149,8 +147,6 @@
   --admin-color: var(--accent1-color);
 
   --error-color: var(--cancel-color);
-  --error-color-hover: var(--cancel-color-hover);
-  --error-color-pressed: var(--cancel-color-pressed);
 
   --status-unread-color: #{theme.$orange};
   --status-recording-color: #{theme.$red};

diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
@@ -163,8 +163,6 @@ $primary-color-hover: var(--primary-color-hover);
 $primary-color-pressed: var(--primary-color-pressed);
 
 $secondary-color: var(--secondary-color);
-$secondary-color-hover: var(--secondary-color-hover);
-$secondary-color-pressed: var(--secondary-color-pressed);
 
 $background1-color: var(--background1-color);
 $background2-color: var(--background2-color);
@@ -238,8 +236,6 @@ $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);
 
 $status-unread-color: var(--status-unread-color);
 $status-recording-color: var(--status-recording-color);

diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
@@ -1167,7 +1167,7 @@ class UIRoot extends Component {
             onClick: () =>
               this.showNonHistoriedDialog(LeaveRoomModal, {
                 destinationUrl: "/",
-                reason: LeaveReason.createRoom,
+                reason: LeaveReason.createRoom
               })
           },
           !isLockedDownDemo && {
@@ -1254,7 +1254,7 @@ class UIRoot extends Component {
               onClick: () => {
                 this.showNonHistoriedDialog(LeaveRoomModal, {
                   destinationUrl: "/",
-                  reason: LeaveReason.leaveRoom,
+                  reason: LeaveReason.leaveRoom
                 });
               }
             },
@@ -1678,13 +1678,13 @@ class UIRoot extends Component {
                         preset="cancel"
                         selected={!!this.state.leaving}
                         onClick={() => {
-                          this.setState({leaving: true})
+                          this.setState({ leaving: true });
                           this.showNonHistoriedDialog(LeaveRoomModal, {
                             destinationUrl: "/",
                             reason: LeaveReason.leaveRoom,
                             onClose: () => {
-                              this.setState({leaving: false})
-                              this.closeDialog()
+                              this.setState({ leaving: false });
+                              this.closeDialog();
                             }
                           });
                         }}