From e5386d08a4b6a225649fbe32c9d339d5094e8c31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <thevikeo@gmail.com>
Date: Sun, 17 Mar 2024 19:01:15 +0100
Subject: [PATCH] fix settings cog color

---
 package.json                               |  2 +-
 src/Components/LifeCounter/LifeCounter.tsx | 25 +++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 91c6c51..51981cd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.6.9",
+  "version": "0.7.0",
   "type": "commonjs",
   "engines": {
     "node": ">=18",
diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx
index 90791b5..b826505 100644
--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { twc } from 'react-twc';
+import { baseColors } from '../../../tailwind.config';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { Cog } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
+import { checkContrast } from '../../Utils/checkContrast';
 import {
   RotationButtonProps,
   RotationDivProps,
@@ -15,7 +17,6 @@ import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import { Paragraph } from '../Misc/TextComponents';
 import PlayerMenu from '../Players/PlayerMenu';
 import Health from './Health';
-import { baseColors } from '../../../tailwind.config';
 
 const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
   'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none  webkit-user-select-none',
@@ -27,16 +28,33 @@ const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
 type SettingsButtonProps = {
   onClick: () => void;
   rotation: Rotation;
+  color: string;
 };
 
-const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
+const SettingsButton = ({ onClick, rotation, color }: SettingsButtonProps) => {
+  const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark');
+
+  useEffect(() => {
+    const contrast = checkContrast(color, '#00000080');
+
+    if (contrast === 'Fail') {
+      setIconColor('light');
+    } else {
+      setIconColor('dark');
+    }
+  }, [color]);
+
   return (
     <SettingsButtonTwc
       onClick={onClick}
       $rotation={rotation}
       aria-label={`Settings`}
     >
-      <Cog size="5vmin" color="black" opacity="0.3" />
+      <Cog
+        size="5vmin"
+        data-contrast={iconColor}
+        className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+      />
     </SettingsButtonTwc>
   );
 };
@@ -264,6 +282,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
               setShowPlayerMenu(!showPlayerMenu);
             }}
             rotation={player.settings.rotation}
+            color={player.color}
           />
         )}
         {playerCanLose(player) && (