feat: updated evolution from figma

src/commands/evolution.tsx

@@ -20,7 +20,7 @@ import { AccountInfo } from '../types/accountInfo.js';
 
 export const evolutionCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
+  inDevelopment: true,
   inPublic: true,
 
   command: addStatTypeSubCommandGroups(

src/components/Graph/components/Margin.tsx

@@ -37,7 +37,7 @@ export function Margin({
           key={index}
           style={{
             fontSize: 16,
-            color: theme.colors.textLowContrast,
+            color: theme.colors.textHighContrast,
           }}
         >
           {`${(

src/components/Graph/components/Root.tsx

@@ -20,6 +20,7 @@ export interface RootProps {
   separations?: number;
   xMinLabel: string;
   xMaxLabel: string;
+  xTitle: string;
 }
 
 export function Root({
@@ -29,6 +30,7 @@ export function Root({
   separations = 5,
   xMinLabel,
   xMaxLabel,
+  xTitle,
 }: RootProps) {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
@@ -39,10 +41,10 @@ export function Root({
           justifyContent: 'space-between',
         }}
       >
-        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+        <span style={{ fontSize: 16, color: theme.colors.textHighContrast }}>
           {xMinLabel}
         </span>
-        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+        <span style={{ fontSize: 16, color: theme.colors.textHighContrast }}>
           {xMaxLabel}
         </span>
       </div>
@@ -88,6 +90,19 @@ export function Root({
           orientation={MarginOrientation.Horizontal}
         />
       )}
+
+      <div
+        style={{
+          paddingLeft: 64,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+          {xTitle}
+        </span>
+      </div>
     </div>
   );
 }

src/renderers/evolution.tsx

@@ -96,6 +96,7 @@ export default async function evolution<Type extends StatType>(
       {/* goofy ahh bug forces me to call them as functions */}
       {plot.length > 0 && (
         <Graph.Root
+          xTitle="Battles"
           verticalMargin={{
             min: minY,
             max: maxY,