Button: Fix Spinner styles (#6750)

src/components/ui/Spinner.module.scss

@@ -0,0 +1,97 @@
+@layer ui.spinner {
+  .root {
+    --spinner-size: 2rem;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+  }
+
+  .withBackground {
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.125rem;
+      border-radius: 50%;
+    }
+
+    &.darkBg::before {
+      background: rgba(0, 0, 0, 0.25);
+    }
+
+    &.lightBg::before {
+      background: rgba(255, 255, 255, 0.4);
+    }
+  }
+
+  .white {
+    .inner {
+      background-image: var(--spinner-white-data);
+    }
+
+    &.withBackground {
+      .inner {
+        background-image: var(--spinner-white-thin-data);
+      }
+    }
+  }
+
+  .blue .inner {
+    background-image: var(--spinner-blue-data);
+
+    :global(.theme-dark) & {
+      background-image: var(--spinner-dark-blue-data);
+    }
+  }
+
+  .black .inner {
+    background-image: var(--spinner-black-data);
+  }
+
+  .green .inner {
+    background-image: var(--spinner-green-data);
+  }
+
+  .gray .inner {
+    background-image: var(--spinner-gray-data);
+  }
+
+  .yellow .inner {
+    background-image: var(--spinner-yellow-data);
+  }
+
+  .inner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    animation-name: spin;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    :global(body.in-background) & {
+      animation-play-state: paused;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

src/components/ui/Spinner.scss

@@ -1,110 +0,0 @@
-.Spinner {
-  --spinner-size: 2rem;
-
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: var(--spinner-size);
-  height: var(--spinner-size);
-
-  &.with-background {
-    &::before {
-      content: '';
-
-      position: absolute;
-      top: -0.125rem;
-      right: -0.125rem;
-      bottom: -0.125rem;
-      left: -0.125rem;
-
-      border-radius: 50%;
-    }
-
-    &.bg-dark::before {
-      background: rgba(0, 0, 0, 0.25);
-    }
-
-    &.bg-light::before {
-      background: rgba(255, 255, 255, 0.4);
-    }
-  }
-
-  &.white {
-    .Spinner__inner {
-      background-image: var(--spinner-white-data);
-    }
-
-    &.with-background {
-      .Spinner__inner {
-        background-image: var(--spinner-white-thin-data);
-      }
-    }
-  }
-
-  &.blue {
-    .Spinner__inner {
-      background-image: var(--spinner-blue-data);
-
-      .theme-dark & {
-        background-image: var(--spinner-dark-blue-data);
-      }
-    }
-  }
-
-  &.black {
-    .Spinner__inner {
-      background-image: var(--spinner-black-data);
-    }
-  }
-
-  &.green {
-    .Spinner__inner {
-      background-image: var(--spinner-green-data);
-    }
-  }
-
-  &.gray {
-    .Spinner__inner {
-      background-image: var(--spinner-gray-data);
-    }
-  }
-
-  &.yellow {
-    .Spinner__inner {
-      background-image: var(--spinner-yellow-data);
-    }
-  }
-}
-
-.Spinner__inner {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  background-repeat: no-repeat;
-  background-size: 100%;
-
-  animation-name: spin;
-  animation-duration: 1s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-
-  :global(body.in-background) & {
-    animation-play-state: paused;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}

src/components/ui/Spinner.tsx

@@ -1,6 +1,6 @@
 import buildClassName from '../../util/buildClassName';
 
-import './Spinner.scss';
+import styles from './Spinner.module.scss';
 
 type OwnProps = {
   color?: 'blue' | 'white' | 'black' | 'green' | 'gray' | 'yellow';
@@ -15,10 +15,15 @@ const Spinner = ({
 }: OwnProps) => {
   return (
     <div className={buildClassName(
-      'Spinner', className, color, backgroundColor && 'with-background', backgroundColor && `bg-${backgroundColor}`,
+      'Spinner',
+      styles.root,
+      color && styles[color],
+      backgroundColor && styles.withBackground,
+      backgroundColor && styles[`${backgroundColor}Bg`],
+      className,
     )}
     >
-      <div className="Spinner__inner" />
+      <div className={buildClassName('Spinner__inner', styles.inner)} />
     </div>
   );
 };

src/index.html

@@ -53,6 +53,9 @@
   <script src="./redirect.js"></script>
   <style>
     @layer reset, variables, ui, components;
+    @layer ui {
+      @layer spinner, button;
+    }
   </style>
 </head>