Fix star styles

components/uncap/TranscendenceStar/index.module.scss

@@ -1,4 +1,4 @@
-.TranscendenceStar {
+.star {
   $size: 18px;
   position: relative;
 
@@ -6,35 +6,35 @@
     transform: scale(1.2);
   }
 
-  &.Immutable {
+  &.immutable {
     pointer-events: none;
   }
 
-  &.Empty {
+  &.empty {
     @include hidpiImage('/icons/transcendence/0/stage-0', png, $size, $size);
   }
 
-  &.Stage1 {
+  &.stage1 {
     @include hidpiImage('/icons/transcendence/1/stage-1', png, $size, $size);
   }
 
-  &.Stage2 {
+  &.stage2 {
     @include hidpiImage('/icons/transcendence/2/stage-2', png, $size, $size);
   }
 
-  &.Stage3 {
+  &.stage3 {
     @include hidpiImage('/icons/transcendence/3/stage-3', png, $size, $size);
   }
 
-  &.Stage4 {
+  &.stage4 {
     @include hidpiImage('/icons/transcendence/4/stage-4', png, $size, $size);
   }
 
-  &.Stage5 {
+  &.stage5 {
     @include hidpiImage('/icons/transcendence/5/stage-5', png, $size, $size);
   }
 
-  .Figure {
+  .figure {
     $size: 18px;
     background-repeat: no-repeat;
     background-size: 54px 54px;
@@ -42,7 +42,7 @@
     height: $size;
     width: $size;
 
-    &.Interactive.Base {
+    &.interactive.base {
       $size: $unit-6x;
 
       @include hidpiImage(

components/uncap/TranscendenceStar/index.tsx

@@ -36,18 +36,18 @@ const TranscendenceStar = ({
 
   // Classes
   const starClasses = classnames({
-    TranscendenceStar: true,
-    Immutable: immutable,
-    Empty: stage === 0,
-    Stage1: stage === 1,
-    Stage2: stage === 2,
-    Stage3: stage === 3,
-    Stage4: stage === 4,
-    Stage5: stage === 5,
+    [styles.star]: true,
+    [styles.immutable]: immutable,
+    [styles.empty]: stage === 0,
+    [styles.stage1]: stage === 1,
+    [styles.stage2]: stage === 2,
+    [styles.stage3]: stage === 3,
+    [styles.stage4]: stage === 4,
+    [styles.stage5]: stage === 5,
   })
 
   const baseImageClasses = classnames(className, {
-    Figure: true,
+    [styles.figure]: true,
   })
 
   useEffect(() => {

components/uncap/UncapIndicator/index.module.scss

@@ -1,8 +1,7 @@
-.UncapWrapper {
+.wrapper {
   position: relative;
-}
 
-.UncapIndicator {
+  .indicator {
     display: flex;
     flex-direction: row;
     align-content: center;
@@ -15,4 +14,5 @@
     &:hover {
       cursor: pointer;
     }
+  }
 }

components/uncap/UncapIndicator/index.tsx

@@ -150,8 +150,8 @@ const UncapIndicator = (props: Props) => {
   }
 
   return (
-    <div className="UncapWrapper">
-      <ul className="UncapIndicator">
+    <div className={styles.wrapper}>
+      <ul className={styles.indicator}>
         {Array.from(Array(numStars)).map((x, i) => {
           if (props.type === 'character' && i > 4) {
             if (props.special) return ulb(i)

components/uncap/UncapStar/index.module.scss

@@ -1,4 +1,4 @@
-.UncapStar {
+.star {
   $size: 18px;
   background-repeat: no-repeat;
   background-size: $size;

components/uncap/UncapStar/index.tsx

@@ -18,12 +18,12 @@ interface Props
 
 const UncapStar = (props: Props) => {
   const classes = classnames({
-    UncapStar: true,
-    empty: props.empty,
-    special: props.special,
-    mlb: !props.special,
-    flb: props.flb,
-    ulb: props.ulb,
+    [styles.star]: true,
+    [styles.empty]: props.empty,
+    [styles.special]: props.special,
+    [styles.mlb]: !props.special,
+    [styles.flb]: props.flb,
+    [styles.ulb]: props.ulb,
   })
 
   function clicked() {