Fix party header styles

components/party/PartyHeader/index.module.scss

@@ -1,4 +1,4 @@
-.DetailsWrapper {
+.wrapper {
   display: flex;
   flex-direction: column;
   gap: $unit-2x;
@@ -16,7 +16,7 @@
     }
   }
 
-  .PartyDetails {
+  .details {
     box-sizing: border-box;
     display: block;
     line-height: 1.4;
@@ -40,14 +40,6 @@
       white-space: pre-line;
     }
 
-    .Tokens {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: $unit;
-      margin-bottom: $unit-2x;
-    }
-
     .YoutubeWrapper {
       background-color: var(--card-bg);
       border-radius: $card-corner;
@@ -133,7 +125,7 @@
     }
   }
 
-  .PartyInfo {
+  .info {
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
@@ -148,15 +140,10 @@
       padding: 0 $unit;
     }
 
-    & > .Right {
+    & > .left {
-      display: flex;
-      gap: $unit-half;
-    }
-
-    & > .Left {
       flex-grow: 1;
 
-      .Header {
+      .header {
         align-items: center;
         display: flex;
         gap: $unit;
@@ -186,6 +173,11 @@
           height: 26px;
         }
 
+        & > *:not(:last-child):after {
+          content: ' · ';
+          margin: 0 calc($unit / 2);
+        }
+
         time {
           font-size: $font-small;
         }
@@ -202,39 +194,34 @@
           color: $blue;
         }
 
-        & > *:not(:last-child):after {
-          content: ' · ';
-          margin: 0 calc($unit / 2);
-        }
-      }
-    }
-
         .user {
           align-items: center;
           display: inline-flex;
           gap: calc($unit / 2);
           margin-top: 1px;
 
-      img,
+          img {
-      .no-user {
             $diameter: 24px;
 
             border-radius: calc($diameter / 2);
             height: $diameter;
             width: $diameter;
           }
-
+        }
-      img.gran {
+      }
-        background-color: #cee7fe;
     }
 
-      img.djeeta {
+    & > .right {
-        background-color: #ffe1fe;
+      display: flex;
+      gap: $unit-half;
+    }
   }
 
-      .no-user {
+  .tokens {
-        background: $grey-80;
+    display: flex;
-      }
+    flex-direction: row;
-    }
+    flex-wrap: wrap;
+    gap: $unit;
+    margin-bottom: $unit-2x;
   }
 }

components/party/PartyHeader/index.tsx

@@ -62,13 +62,9 @@ const PartyHeader = (props: Props) => {
   const [turnCount, setTurnCount] = useState<number | undefined>(undefined)
   const [clearTime, setClearTime] = useState(0)
 
-  const classes = classNames({
-    PartyDetails: true,
-  })
-
   const userClass = classNames({
-    user: true,
+    [styles.user]: true,
-    empty: !party.user,
+    [styles.empty]: !party.user,
   })
 
   const linkClass = classNames({
@@ -243,13 +239,7 @@ const PartyHeader = (props: Props) => {
 
   // Render: Tokens
   const chargeAttackToken = (
-    <Token
+    <Token active={party.chargeAttack} className="chargeAttack">
-      className={classNames({
-        ChargeAttack: true,
-        On: party.chargeAttack,
-        Off: !party.chargeAttack,
-      })}
-    >
       {`${t('party.details.labels.charge_attack')} ${
         party.chargeAttack ? 'On' : 'Off'
       }`}
@@ -257,13 +247,7 @@ const PartyHeader = (props: Props) => {
   )
 
   const fullAutoToken = (
-    <Token
+    <Token active={party.fullAuto} className="fullAuto">
-      className={classNames({
-        FullAuto: true,
-        On: party.fullAuto,
-        Off: !party.fullAuto,
-      })}
-    >
       {`${t('party.details.labels.full_auto')} ${
         party.fullAuto ? 'On' : 'Off'
       }`}
@@ -271,13 +255,7 @@ const PartyHeader = (props: Props) => {
   )
 
   const autoGuardToken = (
-    <Token
+    <Token active className="autoGuard">
-      className={classNames({
-        AutoGuard: true,
-        On: party.autoGuard,
-        Off: !party.autoGuard,
-      })}
-    >
       {`${t('party.details.labels.auto_guard')} ${
         party.autoGuard ? 'On' : 'Off'
       }`}
@@ -285,13 +263,7 @@ const PartyHeader = (props: Props) => {
   )
 
   const autoSummonToken = (
-    <Token
+    <Token active={party.autoSummon} className="autoSummon">
-      className={classNames({
-        AutoSummon: true,
-        On: party.autoSummon,
-        Off: !party.autoSummon,
-      })}
-    >
       {`${t('party.details.labels.auto_summon')} ${
         party.autoSummon ? 'On' : 'Off'
       }`}
@@ -348,15 +320,16 @@ const PartyHeader = (props: Props) => {
 
   function renderTokens() {
     return (
-      <section className="Tokens">
+      <>
+        {' '}
         {chargeAttackToken}
         {fullAutoToken}
-        {autoGuardToken}
         {autoSummonToken}
+        {autoGuardToken}
         {party.turnCount ? turnCountToken : ''}
         {party.clearTime > 0 ? clearTimeToken() : ''}
         {buttonChainToken()}
-      </section>
+      </>
     )
   }
 
@@ -394,17 +367,18 @@ const PartyHeader = (props: Props) => {
 
   return (
     <>
-      <section className="DetailsWrapper">
+      <header className={styles.wrapper}>
-        <div className="PartyInfo">
+        <section className={styles.info}>
-          <div className="Left">
+          <div className={styles.left}>
-            <div className="Header">
+            <div className={styles.header}>
               <h1 className={party.name ? '' : 'empty'}>
                 {party.name ? party.name : t('no_title')}
               </h1>
               {party.remix && party.sourceParty ? (
                 <Tooltip content={t('tooltips.source')}>
                   <Button
-                    className="IconButton Blended"
+                    className="IconButton"
+                    blended={true}
                     leftAccessoryIcon={<RemixIcon />}
                     text={t('tokens.remix')}
                     onClick={() => goTo(party.sourceParty?.shortcode)}
@@ -414,12 +388,12 @@ const PartyHeader = (props: Props) => {
                 ''
               )}
             </div>
-            <div className="attribution">
+            <div className={styles.attribution}>
               {renderUserBlock()}
               {appState.party.raid ? linkedRaidBlock(appState.party.raid) : ''}
               {party.created_at != '' ? (
                 <time
-                  className="last-updated"
+                  className={styles.lastUpdated}
                   dateTime={new Date(party.created_at).toString()}
                 >
                   {formatTimeAgo(new Date(party.created_at), locale)}
@@ -430,7 +404,7 @@ const PartyHeader = (props: Props) => {
             </div>
           </div>
           {party.editable ? (
-            <div className="Right">
+            <div className={styles.right}>
               <EditPartyModal
                 party={props.party}
                 updateCallback={props.updateCallback}
@@ -447,14 +421,14 @@ const PartyHeader = (props: Props) => {
               />
             </div>
           ) : (
-            <div className="Right">
+            <div className={styles.right}>
               {saveButton()}
               {remixButton()}
             </div>
           )}
-        </div>
-        <section className={classes}>{renderTokens()}</section>
         </section>
+        <section className={styles.tokens}>{renderTokens()}</section>
+      </header>
 
       <RemixTeamAlert
         creator={props.editable}