console: Fix styling

Author: ryaplots

pkg/webui/components/panel/index.js

@@ -37,8 +37,8 @@ const Panel = ({
   <div className={styles.panel}>
     <div className="d-flex j-between mb-cs-xl">
       <div className="d-flex gap-cs-xs al-center">
-        {icon && <Icon icon={icon} className={styles.icon} />}
-        <Message content={title} className={styles.title} />
+        {icon && <Icon icon={icon} className={styles.panelHeaderIcon} />}
+        <Message content={title} className={styles.panelHeaderTitle} />
       </div>
       {toggleOptions ? (
         <Toggle options={toggleOptions} active={activeToggle} onToggleChange={onToggleClick} />

pkg/webui/components/panel/panel.styl

@@ -21,6 +21,12 @@
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09)
   padding: $cs.xl
 
+  &-header
+    &-title
+      font-weight: $fwv2.bold
+      font-size: $fsv2.l
+      line-height: 1
+
   .button
     reset-button()
     color: #1E5DFF
@@ -29,10 +35,5 @@
     &:hover
       text-decoration: underline
 
-  .icon
-    font-size: 1.5rem !important
-
-  .title
-    font-weight: $fwv2.bold
-    font-size: $fsv2.l
-    line-height: 1
+span.panel-header-icon
+  font-size: 1.5rem

pkg/webui/components/panel/toggle/index.js

@@ -24,8 +24,8 @@ import styles from './toggle.styl'
 const Toggle = ({ options, onToggleChange, active }) => (
   <div className={classnames(styles.toggle, 'd-flex j-center al-center gap-cs-xxs p-cs-xxs')}>
     {options.map(({ label, value }) => {
-      const buttonClassName = classnames(styles.button, {
-        [styles.buttonActive]: value === active,
+      const buttonClassName = classnames(styles.toggleButton, {
+        [styles.toggleButtonActive]: value === active,
       })
 
       return (

pkg/webui/components/panel/toggle/toggle.styl

@@ -17,7 +17,7 @@
   border: 1px solid $c.grey-200
   background: $c-focus
 
-  .button
+  &-button
     reset-button()
     border-radius: $br.m
     padding: 0 $cs.s
@@ -28,5 +28,5 @@
       background: $c.white
       font-weight: $fwv2.regular
 
-    &:hover:not(.button-active)
-      background: $c.grey-100
+    &:hover:not(.toggle-button-active)
+      background: $c.grey-100

pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl

@@ -22,12 +22,12 @@
   font-size: $fs.s
   font-weight: $fwv2.semibold
 
-  .icon
-    font-size: 2rem !important
+  span.icon
+    font-size: 2rem
     display: block
 
-  .add-icon
-    font-size: 2.5rem !important
+  span.add-icon
+    font-size: 2.5rem
     display: none
 
   .title
@@ -39,10 +39,10 @@
     .title
       display: none
 
-    .icon
-      font-size: 2rem !important
+    span.icon
+      font-size: 2rem
       display: none
 
-    .add-icon
-      font-size: 2.5rem !important
-      display: block
+    span.add-icon
+      font-size: 2.5rem
+      display: block