Convert ConfigElement to CSS modules

Author: shepmaster

ui/frontend/ConfigElement.module.css

@@ -0,0 +1,68 @@
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.name {
+  flex: 1;
+  font-size: 13px;
+}
+
+.notDefault {
+  composes: name;
+  color: var(--header-tint);
+  font-weight: 600;
+}
+
+.value {
+  flex: 1;
+}
+
+.select {
+  width: 100%;
+}
+
+.toggle {
+  display: flex;
+
+  & label {
+    $border: 1px solid #bbb;
+
+    flex: 1;
+    padding: 0 1em;
+    border: $border;
+    border-right-width: 0;
+    border-bottom-left-radius: var(--header-border-radius);
+    border-top-left-radius: var(--header-border-radius);
+    color: #777;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+    text-transform: uppercase;
+
+    & ~ label {
+      border-right-width: 1px;
+      border-left: $border;
+      border-radius: 0 var(--header-border-radius) var(--header-border-radius) 0;
+    }
+
+    &:hover {
+      background: hsla(208, 100%, 43%, 0.1);
+    }
+  }
+
+  & input {
+    display: none;
+
+    &:checked + label {
+      border-color: var(--header-tint);
+      background: var(--header-tint);
+      color: #fff;
+
+      & ~ label {
+        border-left-width: 0;
+      }
+    }
+  }
+}

ui/frontend/ConfigElement.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import MenuItem from './MenuItem';
 
+import styles from './ConfigElement.module.css';
+
 interface EitherProps extends ConfigElementProps {
   id: string;
   a: string;
@@ -15,7 +17,7 @@ interface EitherProps extends ConfigElementProps {
 export const Either: React.SFC<EitherProps> =
   ({ id, a, b, aLabel = a, bLabel = b, value, onChange, ...rest }) => (
     <ConfigElement {...rest}>
-      <div className="config-element__toggle">
+      <div className={styles.toggle}>
         <input id={`${id}-a`}
           name={id}
           value={a}
@@ -41,7 +43,7 @@ interface SelectProps extends ConfigElementProps {
 
 export const Select: React.SFC<SelectProps> = ({ value, onChange, children, ...rest }) => (
   <ConfigElement {...rest}>
-    <select className="config-element__select" value={value} onChange={e => onChange(e.target.value)}>
+    <select className={styles.select} value={value} onChange={e => onChange(e.target.value)}>
       {children}
     </select>
   </ConfigElement>
@@ -54,9 +56,9 @@ interface ConfigElementProps {
 
 const ConfigElement: React.SFC<ConfigElementProps> = ({ name, isNotDefault, children }) => (
   <MenuItem>
-    <div className="config-element">
-      <span className={`config-element__name ${isNotDefault ? 'config-element__name--not-default' : ''}`}>{name}</span>
-      <div className="config-element__value">
+    <div className={styles.container}>
+      <span className={isNotDefault ? styles.notDefault : styles.name}>{name}</span>
+      <div className={styles.value}>
         {children}
       </div>
     </div>

ui/frontend/index.scss

@@ -262,77 +262,6 @@ $header-transition: 0.2s ease-in-out;
   }
 }
 
-.config-element {
-  display: flex;
-  align-items: center;
-
-  &__name {
-    flex: 1;
-    font-size: 13px;
-
-    &--not-default {
-      font-weight: 600;
-      color: $header-tint;
-    }
-  }
-
-  &__value {
-    flex: 1;
-  }
-
-  &__select {
-    width: 100%;
-  }
-
-  &__toggle {
-    display: flex;
-
-    input {
-      display: none;
-    }
-
-    label {
-      $border: 1px solid #bbb;
-
-      flex: 1;
-      padding: 0 1em;
-
-      text-transform: uppercase;
-      font-size: 11px;
-      font-weight: 600;
-      color: #777;
-      text-align: center;
-
-      cursor: pointer;
-
-      border: $border;
-      border-top-left-radius: $header-border-radius;
-      border-bottom-left-radius: $header-border-radius;
-      border-right-width: 0;
-
-      ~ label {
-        border-right-width: 1px;
-        border-left: $border;
-        border-radius: 0 $header-border-radius $header-border-radius 0;
-      }
-
-      &:hover {
-        background: hsla(208, 100%, 43%, 0.1);
-      }
-    }
-
-    :checked + label {
-      border-color: $header-tint;
-      background: $header-tint;
-      color: #fff;
-
-      ~ label {
-        border-left-width: 0;
-      }
-    }
-  }
-}
-
 :root {
   --border-color: #{$border-color};
   --header-main-border: #{$header-main-border};