feat: updated /today with figma

src/components/Breakdown/components/Row.tsx

@@ -1,6 +1,7 @@
 import getWN8Percentile from '../../../core/blitz/getWN8Percentile';
+import { TankType } from '../../../core/blitz/tankopedia';
 import { theme } from '../../../stitches.config';
-import { RowDiscriminator } from './RowDiscriminator';
+import { TREE_TYPE_ICONS, TreeTypeEnum } from '../../Tanks';
 import { RowStat } from './RowStat';
 
 export interface RowProps {
@@ -13,14 +14,14 @@ export interface RowProps {
   careerDamage: number;
   battles: number;
   careerBattles: number;
-  icon?: string;
   minimized: boolean;
-  isListing: boolean;
-  naked?: boolean;
+  isTank: boolean;
+  treeType?: TreeTypeEnum;
+  tankType?: TankType;
 }
 
 export function Row({
-  isListing,
+  isTank,
   minimized,
   name,
   winrate,
@@ -31,45 +32,85 @@ export function Row({
   careerDamage,
   battles,
   careerBattles,
-  icon,
-  naked,
+  treeType,
+  tankType,
 }: RowProps) {
   return (
     <div
       style={{
         display: 'flex',
+        flexDirection: 'column',
         borderRadius: 4,
-        backgroundColor: isListing
-          ? theme.colors.componentInteractive
-          : theme.colors.appBackground2,
-        padding: 8,
+        backgroundColor: theme.colors.appBackground2,
+        overflow: 'hidden',
       }}
     >
-      <RowDiscriminator minimized={minimized} name={name} icon={icon} />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 8,
+          gap: 4,
+          backgroundColor: theme.colors.componentInteractive,
+        }}
+      >
+        {isTank && treeType !== undefined && tankType !== undefined && (
+          <img
+            src={TREE_TYPE_ICONS[treeType][tankType]}
+            style={{ width: 16, height: 16 }}
+          />
+        )}
+        <span
+          style={{
+            color: isTank
+              ? treeType === TreeTypeEnum.Collector
+                ? theme.colors.textLowContrast_blue
+                : treeType === TreeTypeEnum.Premium
+                ? theme.colors.textLowContrast_amber
+                : theme.colors.textHighContrast
+              : theme.colors.textLowContrast,
+            fontWeight: 900,
+            fontSize: 16,
+          }}
+        >
+          {name}
+        </span>
+      </div>
 
-      <RowStat
-        minimized={minimized}
-        name={`Winrate • ${(careerWinrate * 100).toFixed(2)}%`}
-        value={`${(winrate * 100).toFixed(2)}%`}
-        delta={winrate - careerWinrate}
-      />
-      <RowStat
-        minimized={minimized}
-        name={`WN8 • ${careerWN8 === undefined ? '--' : careerWN8.toFixed(0)}`}
-        value={WN8 === undefined ? '--' : WN8.toFixed(0)}
-        percentile={WN8 === undefined ? undefined : getWN8Percentile(WN8)}
-      />
-      <RowStat
-        minimized={minimized}
-        name={`Damage • ${careerDamage.toFixed(0)}`}
-        value={damage.toFixed(0)}
-        delta={damage - careerDamage}
-      />
-      <RowStat
-        minimized={minimized}
-        name={`Battles • ${careerBattles.toFixed(0)}`}
-        value={battles.toFixed(0)}
-      />
+      <div
+        style={{
+          display: 'flex',
+          paddingTop: 8,
+          paddingBottom: 8,
+        }}
+      >
+        <RowStat
+          minimized={minimized}
+          name={`Battles • ${careerBattles.toFixed(0)}`}
+          value={battles.toFixed(0)}
+        />
+        <RowStat
+          minimized={minimized}
+          name={`Winrate • ${(careerWinrate * 100).toFixed(2)}%`}
+          value={`${(winrate * 100).toFixed(2)}%`}
+          delta={winrate - careerWinrate}
+        />
+        <RowStat
+          minimized={minimized}
+          name={`WN8 • ${
+            careerWN8 === undefined ? '--' : careerWN8.toFixed(0)
+          }`}
+          value={WN8 === undefined ? '--' : WN8.toFixed(0)}
+          percentile={WN8 === undefined ? undefined : getWN8Percentile(WN8)}
+        />
+        <RowStat
+          minimized={minimized}
+          name={`Damage • ${careerDamage.toFixed(0)}`}
+          value={damage.toFixed(0)}
+          delta={damage - careerDamage}
+        />
+      </div>
     </div>
   );
 }

src/components/Breakdown/components/RowDiscriminator.tsx

@@ -1,51 +0,0 @@
-import { theme } from '../../../stitches.config';
-
-export interface RowDiscriminatorProps {
-  name: string;
-  icon?: string;
-  minimized: boolean;
-}
-
-export function RowDiscriminator({
-  name,
-  icon,
-  minimized,
-}: RowDiscriminatorProps) {
-  return (
-    <div
-      style={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        boxSizing: 'border-box',
-        width: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {!minimized && icon && (
-        <img
-          src={icon}
-          height={0}
-          style={{ flex: 1, width: '100%', objectFit: 'contain' }}
-        />
-      )}
-
-      <span
-        style={{
-          color: theme.colors.textLowContrast,
-          fontSize: 16,
-          textAlign: 'center',
-          display: 'block',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'clip',
-          maxWidth: '100%',
-        }}
-      >
-        {name}
-      </span>
-    </div>
-  );
-}

src/components/Breakdown/components/RowStat.tsx

@@ -53,6 +53,7 @@ export function RowStat({
         <span
           style={{
             color: theme.colors.textHighContrast,
+            fontWeight: 'bold',
             fontSize: 16,
           }}
         >

src/components/Breakdown/index.ts

@@ -1,4 +1,4 @@
 export * from './components/Root';
 export * from './components/Row';
-export * from './components/RowDiscriminator';
 export * from './components/RowStat';
+