From 739048044cccbd08dfb24781d8086b3cf11ffa3a Mon Sep 17 00:00:00 2001
From: Vikeo <thevikeo@gmail.com>
Date: Wed, 22 May 2024 10:49:03 +0200
Subject: [PATCH] update colors

---
 package.json                                 |  2 +-
 src/Components/Dialogs/Dialog.tsx            |  6 +--
 src/Components/Dialogs/SettingsDialog.tsx    |  4 +-
 src/Components/Players/PlayerMenu.tsx        |  6 +--
 src/Components/PreStartGame/Games/Trivia.tsx |  4 +-
 src/Icons/generated/Close.tsx                | 45 ++++++++++++++++++++
 src/Icons/generated/index.ts                 |  1 +
 src/Icons/svgs/Close.svg                     |  5 +++
 tailwind.config.ts                           | 19 ++++-----
 9 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 src/Icons/generated/Close.tsx
 create mode 100644 src/Icons/svgs/Close.svg

diff --git a/package.json b/package.json
index 66894ee..6f2bc12 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.91",
+  "version": "0.9.92",
   "type": "commonjs",
   "engines": {
     "node": ">=20",
diff --git a/src/Components/Dialogs/Dialog.tsx b/src/Components/Dialogs/Dialog.tsx
index 0a88ce7..66c3643 100644
--- a/src/Components/Dialogs/Dialog.tsx
+++ b/src/Components/Dialogs/Dialog.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Cross } from '../../Icons/generated';
+import { Close } from '../../Icons/generated';
 import { useAnalytics } from '../../Hooks/useAnalytics';
 import { Separator } from '../Misc/Separator';
 
@@ -42,9 +42,9 @@ export const Dialog: React.FC<{
           analytics.trackEvent(`${id}_cross_clicked`);
           dialogRef.current?.close();
         }}
-        className="flex absolute -top-2 right-2 z-10 w-10 h-10 bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
+        className="flex absolute -top-2 right-2 z-10 w-10 h-10 bg-background-default rounded-full"
       >
-        <Cross size="16px" className="text-text-primary" />
+        <Close className="text-primary-main size-full" />
       </button>
 
       <div className="bg-background-default rounded-2xl max-w-[548px] max-h-[80vh] flex flex-col">
diff --git a/src/Components/Dialogs/SettingsDialog.tsx b/src/Components/Dialogs/SettingsDialog.tsx
index 58eb5f0..332c4d9 100644
--- a/src/Components/Dialogs/SettingsDialog.tsx
+++ b/src/Components/Dialogs/SettingsDialog.tsx
@@ -135,7 +135,7 @@ export const SettingsDialog = ({
             name="pre-start-modes"
             id="pre-start-modes"
             value={settings.preStartMode}
-            className="bg-primary-main border-none outline-none text-text-primary rounded-md p-1 text-xs disabled:bg-primary-dark"
+            className="bg-secondary-main border-none outline-none text-text-primary rounded-md p-1 text-xs disabled:saturate-50 font-semibold"
             onChange={(e) => {
               setSettings({
                 ...settings,
@@ -223,7 +223,7 @@ export const SettingsDialog = ({
       <Separator height="1px" />
       <div className="flex w-full justify-center">
         <button
-          className="mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"
+          className="mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark font-bold"
           onClick={() => {
             analytics.trackEvent('settings_save_clicked');
             dialogRef.current?.close();
diff --git a/src/Components/Players/PlayerMenu.tsx b/src/Components/Players/PlayerMenu.tsx
index 5ec5b7b..15f65fc 100644
--- a/src/Components/Players/PlayerMenu.tsx
+++ b/src/Components/Players/PlayerMenu.tsx
@@ -5,7 +5,7 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { useSafeRotate } from '../../Hooks/useSafeRotate';
 import {
-  Cross,
+  Close,
   Energy,
   Exit,
   Experience,
@@ -193,9 +193,9 @@ const PlayerMenu = ({
             analytics.trackEvent('close_player_menu_button');
             setShowPlayerMenu(false);
           }}
-          className="flex absolute top-0 right-2 z-10 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2 p-[0.2rem]"
+          className="flex absolute top-2 right-2 z-10"
         >
-          <Cross size={buttonFontSize} className="text-primary-main " />
+          <Close size={buttonFontSize} className="text-primary-main " />
         </button>
 
         <BetterRowContainer>
diff --git a/src/Components/PreStartGame/Games/Trivia.tsx b/src/Components/PreStartGame/Games/Trivia.tsx
index f49b549..beb4245 100644
--- a/src/Components/PreStartGame/Games/Trivia.tsx
+++ b/src/Components/PreStartGame/Games/Trivia.tsx
@@ -122,7 +122,7 @@ export const Trivia = () => {
 
   return (
     <div
-      className="absolute flex justify-center items-center w-full h-full portrait:h-[100dvw] portrait:w-[100dvh] z-50 bg-primary-main overflow-hidden"
+      className="absolute flex justify-center items-center w-full h-full portrait:h-[100dvw] portrait:w-[100dvh] z-50 bg-primary-dark overflow-hidden"
       onClick={() => setPlaying(true)}
     >
       <button
@@ -146,7 +146,7 @@ export const Trivia = () => {
       <div className="size-full flex flex-col  justify-between items-center whitespace-nowrap pointer-events-none webkit-user-select-none text-wrap text-center py-[10vmin] px-[10vmax]">
         <div className="text-[6vmin]">Decide who starts by answering:</div>
         <div className="flex flex-col">
-          <div className="text-[8vmin] rotate-180 text-text-primary opacity-40">
+          <div className="text-[8vmin] rotate-180 text-text-primary opacity-60">
             {randomQuestion}
           </div>
           <div className="text-[8vmin]">{randomQuestion}</div>
diff --git a/src/Icons/generated/Close.tsx b/src/Icons/generated/Close.tsx
new file mode 100644
index 0000000..71da5c2
--- /dev/null
+++ b/src/Icons/generated/Close.tsx
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const Close = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      fill="currentColor"
+      viewBox="0 0 52 52"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        fillRule="evenodd"
+        d="M26 48c12.15 0 22-9.85 22-22S38.15 4 26 4 4 13.85 4 26s9.85 22 22 22m0 4c14.36 0 26-11.64 26-26S40.36 0 26 0 0 11.64 0 26s11.64 26 26 26"
+        clipRule="evenodd"
+      />
+      <path
+        fillRule="evenodd"
+        d="M15.586 15.586a2 2 0 0 1 2.828 0l18 18a2 2 0 1 1-2.828 2.828l-18-18a2 2 0 0 1 0-2.828"
+        clipRule="evenodd"
+      />
+      <path
+        fillRule="evenodd"
+        d="M36.414 15.586a2 2 0 0 1 0 2.828l-18 18a2 2 0 1 1-2.828-2.828l18-18a2 2 0 0 1 2.828 0"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+Close.propTypes = {
+  title: PropTypes.string,
+};
+export default Close;
diff --git a/src/Icons/generated/index.ts b/src/Icons/generated/index.ts
index 7bdaae0..62064eb 100644
--- a/src/Icons/generated/index.ts
+++ b/src/Icons/generated/index.ts
@@ -1,3 +1,4 @@
+export { default as Close } from './Close';
 export { default as Cog } from './Cog';
 export { default as CommanderTax } from './CommanderTax';
 export { default as Cross } from './Cross';
diff --git a/src/Icons/svgs/Close.svg b/src/Icons/svgs/Close.svg
new file mode 100644
index 0000000..da9cac9
--- /dev/null
+++ b/src/Icons/svgs/Close.svg
@@ -0,0 +1,5 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 48C38.1503 48 48 38.1503 48 26C48 13.8497 38.1503 4 26 4C13.8497 4 4 13.8497 4 26C4 38.1503 13.8497 48 26 48ZM26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5858 15.5858C16.3668 14.8047 17.6332 14.8047 18.4142 15.5858L36.4142 33.5858C37.1953 34.3668 37.1953 35.6332 36.4142 36.4142C35.6332 37.1953 34.3668 37.1953 33.5858 36.4142L15.5858 18.4142C14.8047 17.6332 14.8047 16.3668 15.5858 15.5858Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4142 15.5858C37.1953 16.3668 37.1953 17.6332 36.4142 18.4142L18.4142 36.4142C17.6332 37.1953 16.3668 37.1953 15.5858 36.4142C14.8047 35.6332 14.8047 34.3668 15.5858 33.5858L33.5858 15.5858C34.3668 14.8047 35.6332 14.8047 36.4142 15.5858Z" fill="currentColor"/>
+</svg>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9e2aa4b..15ce7c2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,28 +4,25 @@ import type { Config } from 'tailwindcss';
 
 export const baseColors = {
   primary: {
-    main: '#3E7D78',
-    dark: '#2D5F5B',
+    main: '#78A083',
+    dark: '#608069',
   },
   secondary: {
-    main: '#284F4C',
-    dark: '#1B3B38',
+    main: '#5D7965',
+    dark: '#4a6151',
   },
   background: {
-    default: '#08253B',
+    default: '#35374B',
     backdrop: 'rgba(0, 0, 0, 0.3)',
     settings: 'rgba(0, 0, 0, 0.8)',
   },
   icons: {
     dark: '#00000080',
-    light: '#ffffff4f',
+    light: '#F9FFE34f',
   },
   text: {
-    primary: '#F5F5F5',
-    secondary: '#76A6A5',
-  },
-  action: {
-    disabled: '#234A47',
+    primary: '#F9FFE3',
+    secondary: '#c7ccb6',
   },
   common: {
     white: '#F9FFE3',