Merge branch 'main' into dev

src/components/AllStatsOverview/components/WN8Display/index.tsx

@@ -37,7 +37,7 @@ export function WN8Display({ WN8 }: WN8DisplayProps) {
         gap: -16,
       }}
     >
-      <Glow color={PERCENTILE_COLORS[percentile]} />
+      <Glow color={color} />
 
       <div
         style={{
@@ -71,7 +71,7 @@ export function WN8Display({ WN8 }: WN8DisplayProps) {
         </span>
       </div>
 
-      <Glow color={PERCENTILE_COLORS[percentile]} direction="reverse" />
+      <Glow color={color} direction="reverse" />
     </div>
   );
 }

src/components/Breakdown/components/Row.tsx

@@ -18,6 +18,7 @@ export interface RowStatItem {
 
 interface RowProps {
   type?: 'tank' | 'summary';
+  naked?: boolean;
   title: string;
   minimized?: boolean;
   treeType?: TreeType;
@@ -33,18 +34,23 @@ export function Row({
   minimized,
   tankType,
   treeType,
+  naked = false,
   type,
 }: RowProps) {
-  const theme = createColors(PALETTES[`${color}Dark`]);
+  const palette = PALETTES[`${color}Dark`];
+  const theme = createColors(palette);
 
   return (
     <div
       className="session-tracker-row"
       style={{
+        maxWidth: naked ? 600 : undefined,
         display: 'flex',
         flexDirection: 'column',
         borderRadius: 4,
-        backgroundColor: theme.appBackground2,
+        backgroundColor: naked
+          ? `${theme.appBackground2}c0`
+          : theme.appBackground2,
         overflow: 'hidden',
       }}
     >
@@ -55,7 +61,9 @@ export function Row({
           justifyContent: 'center',
           padding: 8,
           gap: 4,
-          backgroundColor: theme.componentInteractive,
+          backgroundColor: naked
+            ? `${theme.componentInteractive}c0`
+            : theme.componentInteractive,
         }}
       >
         {type === 'tank' && tankType !== undefined && (

src/components/PercentileIndicator.tsx

@@ -1,4 +1,5 @@
 import {
+  amber,
   blue,
   green,
   lime,
@@ -8,7 +9,6 @@ import {
   red,
   slate,
   teal,
-  yellow,
 } from '@radix-ui/colors';
 import { Percentile } from '../constants/percentiles';
 
@@ -20,7 +20,7 @@ export const PERCENTILE_COLORS = {
   [Percentile.VeryBad]: slate.slate9,
   [Percentile.Bad]: red.red9,
   [Percentile.BelowAverage]: orange.orange9,
-  [Percentile.Average]: yellow.yellow9,
+  [Percentile.Average]: amber.amber10,
   [Percentile.AboveAverage]: lime.lime8,
   [Percentile.Good]: green.green9,
   [Percentile.VeryGood]: teal.teal9,

src/components/Tanks/components/Item.tsx

@@ -12,7 +12,6 @@ export const TANK_TYPES = [
   'tankDestroyer',
 ] as const;
 
-// TODO: remove hyphen for underscore
 export const TREE_TYPES = ['researchable', 'premium', 'collector'] as const;
 
 export type TankType = (typeof TANK_TYPES)[number];

src/components/TitleBar.tsx

@@ -36,6 +36,8 @@ export default function TitleBar({ name, image, description }: TitleBarProps) {
             style={{
               display: 'flex',
               gap: 4,
+              alignItems: 'center',
+              justifyContent: 'center',
             }}
           >
             <span
@@ -51,9 +53,21 @@ export default function TitleBar({ name, image, description }: TitleBarProps) {
             </span>
           </div>
 
-          <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
-            {description}
-          </span>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: image ? 'flex-start' : 'center',
+            }}
+          >
+            <span
+              style={{
+                color: theme.colors.textLowContrast,
+                fontSize: 16,
+              }}
+            >
+              {description}
+            </span>
+          </div>
         </div>
       </div>
     </div>