From 23e18f8f416a6800064444399fd72333305cc4f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <thevikeo@gmail.com>
Date: Wed, 27 Dec 2023 21:29:28 +0100
Subject: [PATCH] fix styling

---
 src/Components/Views/StartMenu/StartMenu.tsx | 12 ++++++------
 tailwind.config.js                           |  6 ++++++
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx
index 14f2053..95a1460 100644
--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/src/Components/Views/StartMenu/StartMenu.tsx
@@ -17,7 +17,6 @@ import { InfoModal } from '../../Misc/InfoModal';
 import { SettingsModal } from '../../Misc/SettingsModal';
 import { Spacer } from '../../Misc/Spacer';
 import { SupportMe } from '../../Misc/SupportMe';
-import { H1, Paragraph } from '../../Misc/TextComponents';
 import { LayoutOptions } from './LayoutOptions';
 
 const MainWrapper = styled.div`
@@ -194,7 +193,10 @@ const Start = () => {
 
       <SupportMe />
 
-      <H1>Life Trinket</H1>
+      <h1 className="text-3xl block font-bold mt-6 mb-5 text-text-primary">
+        Life Trinket
+      </h1>
+
       <FormControl focused={false} style={{ width: '80vw' }}>
         <FormLabel>Number of Players</FormLabel>
         <Slider
@@ -302,13 +304,11 @@ const Start = () => {
       </FormControl>
 
       {!isPWA && (
-        <Paragraph
-          style={{ textAlign: 'center', maxWidth: '75%', fontSize: '0.7rem' }}
-        >
+        <p className="text-center, max-w-[75%] text-xs text-text-primary">
           If you're on iOS, this page works better if you{' '}
           <strong>hide the toolbar</strong> or{' '}
           <strong>add the app to your home screen</strong>.
-        </Paragraph>
+        </p>
       )}
 
       <StartButtonFooter>
diff --git a/tailwind.config.js b/tailwind.config.js
index 23cd326..2224a52 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,6 +35,12 @@ export default {
           'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
         ],
       },
+      colors: {
+        text: {
+          primary: '#F5F5F5',
+          secondary: '#b3b39b',
+        },
+      },
     },
   },
   plugins: [tailwindcssGridAreas],