Convert SelectableMenuItem to CSS modules

Author: shepmaster

ui/frontend/SelectableMenuItem.module.css

@@ -0,0 +1,42 @@
+.container {
+  composes: -menuItemFullButton from './shared.module.css';
+
+  &:hover {
+    color: var(--header-tint);
+  }
+}
+
+.selected {
+  composes: container;
+  color: var(--header-tint);
+  font-weight: 600;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.name {
+  composes: -menuItemTitle from './shared.module.css';
+}
+
+.description {
+  padding-left: 2em;
+}
+
+.checkmark {
+  margin-right: 0.5em;
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.selected .checkmark,
+.selected:hover .checkmark {
+  opacity: 1;
+}
+
+.container:hover .checkmark {
+  color: var(--header-tint);
+  opacity: 0.5;
+}

ui/frontend/SelectableMenuItem.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { CheckmarkIcon } from './Icon';
 import MenuItem from './MenuItem';
 
+import styles from './SelectableMenuItem.module.css';
+
 type Button = JSX.IntrinsicElements['button'];
 
 interface SelectableMenuItemProps extends Button {
@@ -12,14 +14,14 @@ interface SelectableMenuItemProps extends Button {
 
 const SelectableMenuItem: React.SFC<SelectableMenuItemProps> = ({ name, selected, children, ...props }) => (
   <MenuItem>
-    <button className={`selectable-item ${selected ? 'selectable-item--selected' : ''}`} {...props}>
-      <div className="selectable-item__header">
-        <span className="selectable-item__checkmark">
+    <button className={selected ? styles.selected : styles.container} {...props}>
+      <div className={styles.header}>
+        <span className={styles.checkmark}>
           <CheckmarkIcon />
         </span>
-        <span className="selectable-item__name">{name}</span>
+        <span className={styles.name}>{name}</span>
       </div>
-      <div className="selectable-item__description">{children}</div>
+      <div className={styles.description}>{children}</div>
     </button>
   </MenuItem>
 );

ui/frontend/index.scss

@@ -356,62 +356,6 @@ $header-transition: 0.2s ease-in-out;
   }
 }
 
-@mixin menu-item-title {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-@mixin full-menu-button {
-  @include button-reset;
-
-  width: 100%;
-  transition: color $header-transition;
-  user-select: text;
-}
-
-.selectable-item {
-  @include full-menu-button;
-
-  &__header {
-    display: flex;
-    align-items: center;
-  }
-
-  &__name {
-    @include menu-item-title;
-  }
-
-  &__description {
-    padding-left: 2em;
-  }
-
-  &:hover {
-    color: $header-tint;
-  }
-
-  &--selected {
-    font-weight: 600;
-    color: $header-tint;
-  }
-
-  &__checkmark {
-    margin-right: 0.5em;
-
-    opacity: 0;
-    transition: opacity 0.15s ease-in-out;
-  }
-
-  &:hover &__checkmark {
-    opacity: 0.5;
-    color: $header-tint;
-  }
-
-  &--selected &__checkmark,
-  &--selected:hover &__checkmark {
-    opacity: 1;
-  }
-}
-
 .config-element {
   display: flex;
   align-items: center;