feat: significant change colors

src/app/tools/compare/page.tsx

@@ -20,10 +20,13 @@ import { tankCharacteristics } from '../../../core/blitzkrieg/tankCharacteristic
 import { tankDefinitions } from '../../../core/blitzkrieg/tankDefinitions';
 import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
 import { tankToCompareMember } from '../../../core/blitzkrieg/tankToCompareMember';
+import { theme } from '../../../stitches.config';
 import mutateCompare, { useCompare } from '../../../stores/compare';
 import { TankSearch } from '../tankopedia/components/TankSearch';
 import { TankControl } from './components/TankControl';
 
+const SIGNIFICANT_CHANGE_THRESHOLD = 0.15;
+
 export default function Page() {
   const pathname = usePathname();
   const router = useRouter();
@@ -131,8 +134,34 @@ export default function Page() {
           </Flex>
         </Table.RowHeaderCell>
 
-        {values.map((value, index) => (
+        {values.map((value, index) => {
-          <Table.Cell key={index}>
+          const deltaPercentage = (value ?? 1) / (values[0] ?? 1) - 1;
+          const significantChange =
+            Math.abs(deltaPercentage) >= SIGNIFICANT_CHANGE_THRESHOLD;
+
+          return (
+            <Table.Cell
+              key={index}
+              style={{
+                backgroundColor:
+                  index === 0 ||
+                  value === undefined ||
+                  values[0] === undefined ||
+                  value === values[0]
+                    ? undefined
+                    : (
+                          deltaType === 'higherIsBetter'
+                            ? value > values[0]
+                            : value < values[0]
+                        )
+                      ? significantChange
+                        ? theme.colors.componentInteractiveActive_green
+                        : theme.colors.componentInteractive_green
+                      : significantChange
+                        ? theme.colors.componentInteractiveActive_red
+                        : theme.colors.componentInteractive_red,
+              }}
+            >
               <Flex
                 align="center"
                 justify="center"
@@ -145,26 +174,13 @@ export default function Page() {
                   style={{
                     textAlign: 'center',
                   }}
-                color={
-                  index === 0 ||
-                  value === undefined ||
-                  values[0] === undefined ||
-                  value === values[0]
-                    ? undefined
-                    : (
-                          deltaType === 'higherIsBetter'
-                            ? value > values[0]
-                            : value < values[0]
-                        )
-                      ? 'green'
-                      : 'red'
-                }
                 >
                   {display ? display(stats[index]) : value}
                 </Text>
               </Flex>
             </Table.Cell>
-        ))}
+          );
+        })}
       </Table.Row>
     );
   }