update colors

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.91",
+  "version": "0.9.92",
   "type": "commonjs",
   "engines": {
     "node": ">=20",

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">

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();

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>

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>

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;

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';

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>

tailwind.config.ts

@@ -4,28 +4,25 @@ import type { Config } from 'tailwindcss';
 
 export const baseColors = {
   primary: {
-    main: '#3E7D78',
+    main: '#78A083',
-    dark: '#2D5F5B',
+    dark: '#608069',
   },
   secondary: {
-    main: '#284F4C',
+    main: '#5D7965',
-    dark: '#1B3B38',
+    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',
+    primary: '#F9FFE3',
-    secondary: '#76A6A5',
+    secondary: '#c7ccb6',
-  },
-  action: {
-    disabled: '#234A47',
   },
   common: {
     white: '#F9FFE3',