fix styling

src/Components/Misc/InfoModal.tsx

@@ -1,6 +1,7 @@
 import { Modal } from '@mui/material';
-import { theme } from '../../Data/theme';
 import { twc } from 'react-twc';
+import { Separator } from './Separator';
+import { Paragraph } from './TextComponents';
 
 export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`;
 
@@ -14,14 +15,14 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
     <Modal open={isOpen} onClose={closeModal}>
       <ModalWrapper>
         <div>
-          <h2 style={{ textAlign: 'center' }}>📋 Usage Guide</h2>
+          <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
-          <p>
+          <Separator height="1px" />
+          <Paragraph className="my-4">
             There are some controls that you might not know about, so here's a
             short list of them.
-          </p>
+          </Paragraph>
-
+          <h3 className="text-lg font-bold mb-2">Life counter</h3>
-          <h3>Life counter</h3>
+          <ul className="list-disc ml-6 mb-4">
-          <ul>
             <li>
               <strong>Tap</strong> on a player's + or - button to add or
               subtract <strong>1 life</strong>.
@@ -32,8 +33,10 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
             </li>
           </ul>
 
-          <h3>Commander damage and other counters</h3>
+          <h3 className="text-lg font-bold mb-2">
-          <ul>
+            Commander damage and other counters
+          </h3>
+          <ul className="list-disc ml-6 mb-4">
             <li>
               <strong>Tap</strong> on the counter to add{' '}
               <strong>1 counter</strong>.
@@ -44,33 +47,21 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
             </li>
           </ul>
 
-          <h3>Other</h3>
+          <h3 className="text-lg font-bold mb-2">Other</h3>
-          <p>
+          <Paragraph className="mb-4">
             When a player is <strong>at or below 0 life</strong>, has taken{' '}
             <strong>21 or more Commander Damage</strong> or has{' '}
             <strong>10 or more poison counters</strong>, a button with a skull
-            will appear on that player's card.
+            will appear on that player's card. Tapping it will dim the player's
-          </p>
-          <p>
-            Tap on the button to mark that player as lost, dimming their player
             card.
-          </p>
+          </Paragraph>
         </div>
-        <br />
+        <div className="text-center mt-4">
-        <div
-          style={{
-            textAlign: 'center',
-            marginTop: '1rem',
-          }}
-        >
           Visit my
           <a
             href="https://github.com/Vikeo/LifeTrinket"
             target="_blank"
-            style={{
+            className="text-text-secondary underline"
-              textDecoration: 'none',
-              color: theme.palette.primary.light,
-            }}
           >
             {' '}
             GitHub{' '}

src/Components/Misc/SettingsModal.tsx

@@ -69,7 +69,8 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
     <Modal open={isOpen} onClose={closeModal}>
       <ModalWrapper>
         <Container>
-          <h2 style={{ textAlign: 'center' }}>⚙️ Settings ⚙️</h2>
+          <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
+          <Separator height="1px" />
           <SettingContainer>
             <ToggleContainer>
               <FormLabel>Show Start Player</FormLabel>

src/Components/Views/StartMenu/StartMenu.tsx

@@ -20,7 +20,7 @@ import { LayoutOptions } from './LayoutOptions';
 
 const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`;
 
-const StartButtonFooter = twc.div`fixed bottom-4 z-1`;
+const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`;
 
 const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`;
 
@@ -174,7 +174,8 @@ const Start = () => {
         Life Trinket
       </h1>
 
-      <FormControl focused={false} style={{ width: '80vw' }}>
+      <div className="overflow-hidden items-center flex flex-col max-w-[548px] mb-8 px-4">
+        <FormControl focused={false}>
           <FormLabel>Number of Players</FormLabel>
           <Slider
             title="Number of Players"
@@ -277,21 +278,21 @@ const Start = () => {
             }}
           />
         </FormControl>
-
         {!isPWA && (
-        <p className="text-center, max-w-[75%] text-xs text-text-primary">
+          <p className="text-center text-xs text-text-primary w-11/12 mt-4">
             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>.
           </p>
         )}
+      </div>
 
       <StartButtonFooter>
         <Button
           size="large"
           variant="contained"
           onClick={doStartGame}
-          style={{ width: '90dvw' }}
+          fullWidth
         >
           START GAME
         </Button>

tailwind.config.ts

@@ -95,15 +95,3 @@ export default {
   },
   plugins: [tailwindcssGridAreas],
 } satisfies Config;
-
-// const fadeOut = keyframes`
-//   0% {
-//     opacity: 1;
-//   }
-//   33% {
-//     opacity: 0.6;
-//   }
-//   100% {
-//     opacity: 0;
-//   }
-// `;