Convert PopButton to CSS modules

Author: shepmaster

ui/frontend/PopButton.module.css

@@ -0,0 +1,42 @@
+$fg-color: #222;
+$bg-color: white;
+$arrow-size: 10px;
+$vertical-border-color: #cacaca;
+
+.container {
+  z-index: 10;
+
+  /* Prevents the popper from shifting when adding it to the DOM
+   * triggers showing the scrollbars.
+   * https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
+   */
+  top: 0;
+  font-size: 12px;
+
+  button:enabled {
+    cursor: pointer;
+  }
+}
+
+.arrow {
+  position: absolute;
+  border: $arrow-size solid transparent;
+  margin: $arrow-size;
+}
+
+.container[data-placement^='bottom'] .arrow {
+  border-top-width: 0;
+  border-bottom-color: $bg-color;
+  margin-top: 0;
+}
+
+.content {
+  border-right: 1px solid $vertical-border-color;
+  border-bottom: 1px solid var(--header-accent-border);
+  border-left: 1px solid $vertical-border-color;
+  margin: $arrow-size;
+  background: $bg-color;
+  border-radius: var(--header-border-radius);
+  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 white;
+  color: $fg-color;
+}

ui/frontend/PopButton.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 import { Portal } from 'react-portal';
 
+import styles from './PopButton.module.css';
+
 const POPPER_MODIFIERS = [
   // Issue #303
   { name: 'computeStyles', options: { gpuAcceleration: false } },
@@ -47,17 +49,17 @@ const PopButton: React.SFC<NewPopProps> = ({ Button, Menu }) => {
         <Popper placement="bottom" innerRef={menuRef} modifiers={POPPER_MODIFIERS}>
           {({ ref, style, arrowProps, placement }) => (
             <div
-              className="popper"
+              className={styles.container}
               ref={ref}
               style={style}
               data-placement={placement}
             >
               <div
-                className="popper__arrow"
+                className={styles.arrow}
                 ref={arrowProps.ref}
                 style={arrowProps.style}
               />
-              <div className="popper__content">
+              <div className={styles.content}>
                 <Menu close={close} />
               </div>
             </div>

ui/frontend/index.scss

@@ -285,52 +285,6 @@ $header-transition: 0.2s ease-in-out;
   }
 }
 
-.popper {
-  z-index: 10;
-  font-size: 12px;
-
-  // Prevents the popper from shifting when adding it to the DOM
-  // triggers showing the scrollbars.
-  // https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
-  top: 0;
-
-  $fg-color: #222;
-  $bg-color: white;
-  $arrow-size: 10px;
-  $vertical-border-color: #cacaca;
-
-  &__arrow {
-    position: absolute;
-    margin: $arrow-size;
-    border: $arrow-size solid transparent;
-  }
-
-  &[data-placement^="bottom"] &__arrow {
-    margin-top: 0;
-    border-top-width: 0;
-    border-bottom-color: $bg-color;
-  }
-
-  &__content {
-    background: $bg-color;
-    color: $fg-color;
-
-    margin: $arrow-size;
-
-    border-radius: $header-border-radius;
-
-    box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0px white;
-
-    border-left: 1px solid $vertical-border-color;
-    border-right: 1px solid $vertical-border-color;
-    border-bottom: 1px solid $header-accent-border;
-  }
-
-  button:enabled {
-    cursor: pointer;
-  }
-}
-
 .config-element {
   display: flex;
   align-items: center;
@@ -407,4 +361,6 @@ $header-transition: 0.2s ease-in-out;
   --header-main-border: #{$header-main-border};
   --header-transition: #{$header-transition};
   --header-tint: #{$header-tint};
+  --header-border-radius: #{$header-border-radius};
+  --header-accent-border: #{$header-accent-border};
 }