From 558a4e74a1ed5c911e99f7c456e07b0dd0c5fb19 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 23 Jun 2023 19:14:34 -0700
Subject: [PATCH] Fix segmented control styles

---
 .../common/SegmentedControl/index.module.scss | 162 +++++++++---------
 components/common/SegmentedControl/index.tsx  |  14 +-
 .../PartySegmentedControl/index.module.scss   |  26 +--
 .../party/PartySegmentedControl/index.tsx     |   9 +-
 .../reps/CharacterRep/index.module.scss       |  96 +++++------
 components/reps/CharacterRep/index.tsx        |  12 +-
 components/reps/RepSegment/index.module.scss  |  15 +-
 components/reps/RepSegment/index.tsx          |   6 +-
 components/reps/SummonRep/index.module.scss   |  24 +--
 components/reps/SummonRep/index.tsx           |   8 +-
 components/reps/WeaponRep/index.module.scss   |  24 +--
 components/reps/WeaponRep/index.tsx           |   9 +-
 12 files changed, 200 insertions(+), 205 deletions(-)

diff --git a/components/common/SegmentedControl/index.module.scss b/components/common/SegmentedControl/index.module.scss
index 6a357216..d6aa0078 100644
--- a/components/common/SegmentedControl/index.module.scss
+++ b/components/common/SegmentedControl/index.module.scss
@@ -1,104 +1,112 @@
-.SegmentedControlWrapper {
+.wrapper {
   display: flex;
   justify-content: center;
 
   @include breakpoint(phone) {
     width: 100%;
   }
-}
 
-.SegmentedControl {
-  // border-radius: $unit * 3;
-  display: inline-flex;
-  padding: 3px;
-  position: relative;
-  user-select: none;
-  overflow: hidden;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  .segmentedControl {
+    // border-radius: $unit * 3;
+    display: inline-flex;
+    padding: 3px;
+    position: relative;
+    user-select: none;
+    overflow: hidden;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  @include breakpoint(phone) {
-    background: var(--card-bg);
-    border-radius: 100px;
-  }
-
-  &.Blended {
-    background: var(--input-bound-bg);
-    border-radius: $full-corner;
-
-    .Segment input:checked + label {
+    @include breakpoint(phone) {
       background: var(--card-bg);
-    }
-  }
-
-  &.fire {
-    .Segment input:checked + label {
-      background: var(--fire-bg);
-      color: var(--fire-text);
+      border-radius: 100px;
     }
 
-    .Segment:hover label {
-      background: var(--fire-hover-bg);
-      color: var(--fire-hover-text);
-    }
-  }
+    &.blended {
+      background: var(--input-bound-bg);
+      border-radius: $full-corner;
 
-  &.water {
-    .Segment input:checked + label {
-      background: var(--water-bg);
-      color: var(--water-text);
+      .Segment input:checked + label {
+        background: var(--card-bg);
+      }
     }
 
-    .Segment:hover label {
-      background: var(--water-hover-bg);
-      color: var(--water-hover-text);
-    }
-  }
-
-  &.earth {
-    .Segment input:checked + label {
-      background: var(--earth-bg);
-      color: var(--earth-text);
+    &.grow {
+      flex-grow: 1;
     }
 
-    .Segment:hover label {
-      background: var(--earth-hover-bg);
-      color: var(--earth-hover-text);
-    }
-  }
-
-  &.wind {
-    .Segment input:checked + label {
-      background: var(--wind-bg);
-      color: var(--wind-text);
+    &.gap {
+      gap: $unit;
     }
 
-    .Segment:hover label {
-      background: var(--wind-hover-bg);
-      color: var(--wind-hover-text);
-    }
-  }
+    &.fire {
+      .Segment input:checked + label {
+        background: var(--fire-bg);
+        color: var(--fire-text);
+      }
 
-  &.light {
-    .Segment input:checked + label {
-      background: var(--light-bg);
-      color: var(--light-text);
+      .Segment:hover label {
+        background: var(--fire-hover-bg);
+        color: var(--fire-hover-text);
+      }
     }
 
-    .Segment:hover label {
-      background: var(--light-hover-bg);
-      color: var(--light-hover-text);
-    }
-  }
+    &.water {
+      .Segment input:checked + label {
+        background: var(--water-bg);
+        color: var(--water-text);
+      }
 
-  &.dark {
-    .Segment input:checked + label {
-      background: var(--dark-bg);
-      color: var(--dark-text);
+      .Segment:hover label {
+        background: var(--water-hover-bg);
+        color: var(--water-hover-text);
+      }
     }
 
-    .Segment:hover label {
-      background: var(--dark-hover-bg);
-      color: var(--dark-hover-text);
+    &.earth {
+      .Segment input:checked + label {
+        background: var(--earth-bg);
+        color: var(--earth-text);
+      }
+
+      .Segment:hover label {
+        background: var(--earth-hover-bg);
+        color: var(--earth-hover-text);
+      }
+    }
+
+    &.wind {
+      .Segment input:checked + label {
+        background: var(--wind-bg);
+        color: var(--wind-text);
+      }
+
+      .Segment:hover label {
+        background: var(--wind-hover-bg);
+        color: var(--wind-hover-text);
+      }
+    }
+
+    &.light {
+      .Segment input:checked + label {
+        background: var(--light-bg);
+        color: var(--light-text);
+      }
+
+      .Segment:hover label {
+        background: var(--light-hover-bg);
+        color: var(--light-hover-text);
+      }
+    }
+
+    &.dark {
+      .Segment input:checked + label {
+        background: var(--dark-bg);
+        color: var(--dark-text);
+      }
+
+      .Segment:hover label {
+        background: var(--dark-hover-bg);
+        color: var(--dark-hover-text);
+      }
     }
   }
 }
diff --git a/components/common/SegmentedControl/index.tsx b/components/common/SegmentedControl/index.tsx
index 09467f2b..d45f02fc 100644
--- a/components/common/SegmentedControl/index.tsx
+++ b/components/common/SegmentedControl/index.tsx
@@ -6,6 +6,8 @@ interface Props {
   className?: string
   elementClass?: string
   blended?: boolean
+  grow?: boolean
+  gap?: boolean
   tabIndex?: number
 }
 
@@ -13,19 +15,23 @@ const SegmentedControl: React.FC<Props> = ({
   className,
   elementClass,
   blended,
+  grow,
+  gap,
   tabIndex,
   children,
 }) => {
   const classes = classNames(
     {
-      SegmentedControl: true,
-      Blended: blended,
+      [styles.segmentedControl]: true,
+      [styles.blended]: blended,
+      [styles.grow]: grow,
+      [styles.gap]: gap,
     },
     className,
     elementClass
   )
   return (
-    <div className="SegmentedControlWrapper" tabIndex={tabIndex}>
+    <div className={styles.wrapper} tabIndex={tabIndex}>
       <div className={classes}>{children}</div>
     </div>
   )
@@ -33,6 +39,8 @@ const SegmentedControl: React.FC<Props> = ({
 
 SegmentedControl.defaultProps = {
   blended: false,
+  grow: false,
+  gap: false,
 }
 
 export default SegmentedControl
diff --git a/components/party/PartySegmentedControl/index.module.scss b/components/party/PartySegmentedControl/index.module.scss
index c58ebcc8..c3aba796 100644
--- a/components/party/PartySegmentedControl/index.module.scss
+++ b/components/party/PartySegmentedControl/index.module.scss
@@ -1,4 +1,4 @@
-.PartyNavigation {
+.nav {
   align-items: center;
   box-sizing: border-box;
   display: flex;
@@ -43,27 +43,3 @@
     }
   }
 }
-
-.ExtraSwitch {
-  color: #888;
-  display: flex;
-  font-weight: $normal;
-  gap: $unit;
-  line-height: 34px;
-  height: 100%;
-  position: absolute;
-  right: 0px;
-  top: 1px;
-
-  // prettier-ignore
-  @media only screen 
-    and (max-width: 550px) 
-    and (max-height: 920px) 
-    and (-webkit-min-device-pixel-ratio: 2) {
-    position: static;
-
-    .Text {
-      display: none;
-    }
-  }
-}
diff --git a/components/party/PartySegmentedControl/index.tsx b/components/party/PartySegmentedControl/index.tsx
index 85c810b0..36732890 100644
--- a/components/party/PartySegmentedControl/index.tsx
+++ b/components/party/PartySegmentedControl/index.tsx
@@ -106,18 +106,17 @@ const PartySegmentedControl = (props: Props) => {
   }
 
   return (
-    <div
+    <nav
       className={classNames({
-        PartyNavigation: true,
-        Editable: party.editable,
+        [styles.nav]: true,
       })}
     >
-      <SegmentedControl elementClass={getElement()}>
+      <SegmentedControl gap={true} grow={true} elementClass={getElement()}>
         {characterSegment()}
         {weaponSegment()}
         {summonSegment()}
       </SegmentedControl>
-    </div>
+    </nav>
   )
 }
 
diff --git a/components/reps/CharacterRep/index.module.scss b/components/reps/CharacterRep/index.module.scss
index acaf25ab..38502054 100644
--- a/components/reps/CharacterRep/index.module.scss
+++ b/components/reps/CharacterRep/index.module.scss
@@ -1,15 +1,27 @@
-.CharacterRep {
+.rep {
   aspect-ratio: 2/0.99;
   border-radius: $card-corner;
   grid-gap: $unit-half; /* add a gap of 8px between grid items */
   height: $rep-height;
+  transition: $duration-opacity-fade opacity ease-in;
+  opacity: 0.5;
 
-  .Character {
+  .character,
+  .protagonist {
+    aspect-ratio: 16 / 33;
     background: var(--card-bg);
     border-radius: 4px;
+    box-sizing: border-box;
+    display: grid;
+    overflow: hidden;
+
+    img[src*='jpg'] {
+      border-radius: 4px;
+      width: 100%;
+    }
   }
 
-  .GridCharacters {
+  .characters {
     display: grid; /* make the right-images container a grid */
     grid-template-columns: repeat(
       4,
@@ -18,58 +30,46 @@
     gap: $unit-half;
   }
 
-  .Grid.Character {
-    aspect-ratio: 16 / 33;
-    box-sizing: border-box;
-    display: grid;
-    overflow: hidden;
+  .protagonist {
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    aspect-ratio: 32 / 66;
 
-    &.MC {
-      border-color: transparent;
-      border-width: 1px;
-      border-style: solid;
-      aspect-ratio: 32 / 66;
+    img {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
 
-      img {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
+    &.fire {
+      background: var(--fire-hover-bg);
+      border-color: var(--fire-bg);
+    }
 
-      &.fire {
-        background: var(--fire-hover-bg);
-        border-color: var(--fire-bg);
-      }
+    &.water {
+      background: var(--water-hover-bg);
+      border-color: var(--water-bg);
+    }
 
-      &.water {
-        background: var(--water-hover-bg);
-        border-color: var(--water-bg);
-      }
+    &.wind {
+      background: var(--wind-hover-bg);
+      border-color: var(--wind-bg);
+    }
 
-      &.wind {
-        background: var(--wind-hover-bg);
-        border-color: var(--wind-bg);
-      }
+    &.earth {
+      background: var(--earth-hover-bg);
+      border-color: var(--earth-bg);
+    }
 
-      &.earth {
-        background: var(--earth-hover-bg);
-        border-color: var(--earth-bg);
-      }
+    &.light {
+      background: var(--light-hover-bg);
+      border-color: var(--light-bg);
+    }
 
-      &.light {
-        background: var(--light-hover-bg);
-        border-color: var(--light-bg);
-      }
-
-      &.dark {
-        background: var(--dark-hover-bg);
-        border-color: var(--dark-bg);
-      }
+    &.dark {
+      background: var(--dark-hover-bg);
+      border-color: var(--dark-bg);
     }
   }
-
-  .Grid.Character img[src*='jpg'] {
-    border-radius: 4px;
-    width: 100%;
-  }
 }
diff --git a/components/reps/CharacterRep/index.tsx b/components/reps/CharacterRep/index.tsx
index abbe757e..0d34a753 100644
--- a/components/reps/CharacterRep/index.tsx
+++ b/components/reps/CharacterRep/index.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next'
 import 'fix-date'
 
 import styles from './index.module.scss'
+import classNames from 'classnames'
 
 interface Props {
   job?: Job
@@ -109,17 +110,20 @@ const CharacterRep = (props: Props) => {
 
   // Render
   return (
-    <div className="CharacterRep Rep">
-      <ul className="GridCharacters">
+    <div className={styles.rep}>
+      <ul className={styles.characters}>
         <li
           key="characters-job"
-          className={`Grid Character MC ${numberToElement()}`}
+          className={classNames({
+            [styles.protagonist]: true,
+            [styles[`${numberToElement()}`]]: true,
+          })}
         >
           {generateMCImage()}
         </li>
         {Array.from(Array(CHARACTERS_COUNT)).map((x, i) => {
           return (
-            <li key={`characters-${i}`} className="Grid Character">
+            <li key={`characters-${i}`} className={styles.character}>
               {generateGridImage(i)}
             </li>
           )
diff --git a/components/reps/RepSegment/index.module.scss b/components/reps/RepSegment/index.module.scss
index e6cedb46..2e63d57a 100644
--- a/components/reps/RepSegment/index.module.scss
+++ b/components/reps/RepSegment/index.module.scss
@@ -1,4 +1,4 @@
-.RepSegment {
+.segment {
   border-radius: $card-corner;
   color: $grey-55;
   cursor: pointer;
@@ -10,7 +10,7 @@
     background: var(--button-bg);
     color: var(--text-primary);
 
-    .Wrapper .Rep {
+    .wrapper > * {
       opacity: 1;
     }
   }
@@ -22,7 +22,7 @@
       background: var(--button-bg);
       color: var(--text-primary);
 
-      .Rep {
+      .wrapper > * {
         opacity: 1;
       }
     }
@@ -50,15 +50,10 @@
       padding-bottom: $unit;
     }
 
-    .Wrapper {
+    .wrapper {
       display: flex;
       flex-direction: column;
       gap: $unit;
-
-      .Rep {
-        transition: $duration-opacity-fade opacity ease-in;
-        opacity: 0.5;
-      }
     }
   }
 
@@ -66,7 +61,7 @@
     min-width: initial;
     width: 100%;
 
-    .Rep {
+    .rep {
       display: none;
     }
   }
diff --git a/components/reps/RepSegment/index.tsx b/components/reps/RepSegment/index.tsx
index da012c91..1d459df7 100644
--- a/components/reps/RepSegment/index.tsx
+++ b/components/reps/RepSegment/index.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const RepSegment = ({ children, ...props }: PropsWithChildren<Props>) => {
   return (
-    <div className="RepSegment">
+    <div className={styles.segment}>
       <input
         name={props.controlGroup}
         id={props.inputName}
@@ -22,9 +22,9 @@ const RepSegment = ({ children, ...props }: PropsWithChildren<Props>) => {
         onChange={props.onClick}
       />
       <label htmlFor={props.inputName}>
-        <div className="Wrapper">
+        <div className={styles.wrapper}>
           {children}
-          <div className="Title">{props.name}</div>
+          <div className={styles.title}>{props.name}</div>
         </div>
       </label>
     </div>
diff --git a/components/reps/SummonRep/index.module.scss b/components/reps/SummonRep/index.module.scss
index 58e4a4cf..6149e46e 100644
--- a/components/reps/SummonRep/index.module.scss
+++ b/components/reps/SummonRep/index.module.scss
@@ -1,23 +1,31 @@
-.SummonRep {
+.rep {
   aspect-ratio: 2/1.045;
   border-radius: $card-corner;
   display: grid;
   grid-template-columns: 1fr 2.25fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
   grid-gap: $unit-half; /* add a gap of 8px between grid items */
   height: $rep-height;
+  transition: $duration-opacity-fade opacity ease-in;
+  opacity: 0.5;
 
-  .Summon {
+  .summon,
+  .mainSummon {
     background: var(--card-bg);
     border-radius: 4px;
+
+    img[src*='jpg'] {
+      border-radius: 4px;
+      width: 100%;
+    }
   }
 
-  .Main.Summon {
+  .mainSummon {
     aspect-ratio: 56/97;
     display: grid;
     grid-column: 1 / 2; /* spans one column */
   }
 
-  .GridSummons {
+  .summons {
     display: grid; /* make the right-images container a grid */
     grid-template-columns: repeat(
       2,
@@ -32,14 +40,8 @@
     // row-gap: $unit-2x;
   }
 
-  .Grid.Summon {
+  .summon {
     aspect-ratio: 184 / 138;
     display: grid;
   }
-
-  .Main.Summon img[src*='jpg'],
-  .Grid.Summon img[src*='jpg'] {
-    border-radius: 4px;
-    width: 100%;
-  }
 }
diff --git a/components/reps/SummonRep/index.tsx b/components/reps/SummonRep/index.tsx
index cebd4106..0ed63c0b 100644
--- a/components/reps/SummonRep/index.tsx
+++ b/components/reps/SummonRep/index.tsx
@@ -151,12 +151,12 @@ const SummonRep = (props: Props) => {
 
   // Render
   return (
-    <div className="SummonRep Rep">
-      <div className="Main Summon">{generateMainImage()}</div>
-      <ul className="GridSummons">
+    <div className={styles.rep}>
+      <div className={styles.mainSummon}>{generateMainImage()}</div>
+      <ul className={styles.summons}>
         {Array.from(Array(SUMMONS_COUNT)).map((x, i) => {
           return (
-            <li key={`summons-${i}`} className="Grid Summon">
+            <li key={`summons-${i}`} className={styles.summon}>
               {generateGridImage(i)}
             </li>
           )
diff --git a/components/reps/WeaponRep/index.module.scss b/components/reps/WeaponRep/index.module.scss
index 65f6b487..fb76f59e 100644
--- a/components/reps/WeaponRep/index.module.scss
+++ b/components/reps/WeaponRep/index.module.scss
@@ -1,23 +1,31 @@
-.WeaponRep {
+.rep {
   aspect-ratio: 2/0.955;
   border-radius: $card-corner;
   display: grid;
   grid-template-columns: 1fr 3.39fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
   grid-gap: $unit-half; /* add a gap of 8px between grid items */
   height: $rep-height;
+  transition: $duration-opacity-fade opacity ease-in;
+  opacity: 0.5;
 
-  .Weapon {
+  .mainhand,
+  .weapon {
     background: var(--card-bg);
     border-radius: 4px;
+
+    img[src*='jpg'] {
+      border-radius: 4px;
+      width: 100%;
+    }
   }
 
-  .Mainhand.Weapon {
+  .mainhand {
     aspect-ratio: 73/153;
     display: grid;
     grid-column: 1 / 2; /* spans one column */
   }
 
-  .GridWeapons {
+  .weapons {
     display: grid; /* make the right-images container a grid */
     grid-template-columns: repeat(
       3,
@@ -32,14 +40,8 @@
     // row-gap: $unit-2x;
   }
 
-  .Grid.Weapon {
+  .weapon {
     aspect-ratio: 280 / 160;
     display: grid;
   }
-
-  .Mainhand.Weapon img[src*='jpg'],
-  .Grid.Weapon img[src*='jpg'] {
-    border-radius: 4px;
-    width: 100%;
-  }
 }
diff --git a/components/reps/WeaponRep/index.tsx b/components/reps/WeaponRep/index.tsx
index fba18518..7bd39bf0 100644
--- a/components/reps/WeaponRep/index.tsx
+++ b/components/reps/WeaponRep/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
 import styles from './index.module.scss'
+import classNames from 'classnames'
 
 interface Props {
   grid: {
@@ -85,12 +86,12 @@ const WeaponRep = (props: Props) => {
 
   // Render
   return (
-    <div className="WeaponRep Rep">
-      <div className="Mainhand Weapon">{generateMainhandImage()}</div>
-      <ul className="GridWeapons">
+    <div className={styles.rep}>
+      <div className={styles.mainhand}>{generateMainhandImage()}</div>
+      <ul className={styles.weapons}>
         {Array.from(Array(WEAPONS_COUNT)).map((x, i) => {
           return (
-            <li key={`weapons-${i}`} className="Grid Weapon">
+            <li key={`weapons-${i}`} className={styles.weapon}>
               {generateGridImage(i)}
             </li>
           )