Fix segmented control styles

components/common/SegmentedControl/index.module.scss

@@ -1,13 +1,12 @@
-.SegmentedControlWrapper {
+.wrapper {
   display: flex;
   justify-content: center;
 
   @include breakpoint(phone) {
     width: 100%;
   }
-}
 
-.SegmentedControl {
+  .segmentedControl {
     // border-radius: $unit * 3;
     display: inline-flex;
     padding: 3px;
@@ -21,7 +20,7 @@
       border-radius: 100px;
     }
 
-  &.Blended {
+    &.blended {
       background: var(--input-bound-bg);
       border-radius: $full-corner;
 
@@ -30,6 +29,14 @@
       }
     }
 
+    &.grow {
+      flex-grow: 1;
+    }
+
+    &.gap {
+      gap: $unit;
+    }
+
     &.fire {
       .Segment input:checked + label {
         background: var(--fire-bg);
@@ -102,3 +109,4 @@
       }
     }
   }
+}

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,
+      [styles.segmentedControl]: true,
-      Blended: blended,
+      [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

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;
-    }
-  }
-}

components/party/PartySegmentedControl/index.tsx

@@ -106,18 +106,17 @@ const PartySegmentedControl = (props: Props) => {
   }
 
   return (
-    <div
+    <nav
       className={classNames({
-        PartyNavigation: true,
+        [styles.nav]: true,
-        Editable: party.editable,
       })}
     >
-      <SegmentedControl elementClass={getElement()}>
+      <SegmentedControl gap={true} grow={true} elementClass={getElement()}>
         {characterSegment()}
         {weaponSegment()}
         {summonSegment()}
       </SegmentedControl>
-    </div>
+    </nav>
   )
 }
 

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,13 +30,7 @@
     gap: $unit-half;
   }
 
-  .Grid.Character {
+  .protagonist {
-    aspect-ratio: 16 / 33;
-    box-sizing: border-box;
-    display: grid;
-    overflow: hidden;
-
-    &.MC {
     border-color: transparent;
     border-width: 1px;
     border-style: solid;
@@ -67,9 +73,3 @@
     }
   }
 }
-
-  .Grid.Character img[src*='jpg'] {
-    border-radius: 4px;
-    width: 100%;
-  }
-}

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">
+    <div className={styles.rep}>
-      <ul className="GridCharacters">
+      <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>
           )

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;
     }
   }

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>

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%;
-  }
 }

components/reps/SummonRep/index.tsx

@@ -151,12 +151,12 @@ const SummonRep = (props: Props) => {
 
   // Render
   return (
-    <div className="SummonRep Rep">
+    <div className={styles.rep}>
-      <div className="Main Summon">{generateMainImage()}</div>
+      <div className={styles.mainSummon}>{generateMainImage()}</div>
-      <ul className="GridSummons">
+      <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>
           )

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%;
-  }
 }

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={styles.rep}>
-      <div className="Mainhand Weapon">{generateMainhandImage()}</div>
+      <div className={styles.mainhand}>{generateMainhandImage()}</div>
-      <ul className="GridWeapons">
+      <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>
           )