fix styling

2024-01-14 12:31:57 +01:00
parent f5a80e573e
commit d25da5d97b
4 changed files with 115 additions and 134 deletions
--- a/src/Components/Misc/InfoModal.tsx
+++ b/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>
-          <p>
+          <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
+          <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>
-
-          <h3>Life counter</h3>
-          <ul>
+          </Paragraph>
+          <h3 className="text-lg font-bold mb-2">Life counter</h3>
+          <ul className="list-disc ml-6 mb-4">
            <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>
-          <ul>
+          <h3 className="text-lg font-bold mb-2">
+            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>
-          <p>
+          <h3 className="text-lg font-bold mb-2">Other</h3>
+          <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.
-          </p>
-          <p>
-            Tap on the button to mark that player as lost, dimming their player
+            will appear on that player's card. Tapping it will dim the player's
            card.
-          </p>
+          </Paragraph>
        </div>
-        <br />
-        <div
-          style={{
-            textAlign: 'center',
-            marginTop: '1rem',
-          }}
-        >
+        <div className="text-center mt-4">
          Visit my
          <a
            href="https://github.com/Vikeo/LifeTrinket"
            target="_blank"
-            style={{
-              textDecoration: 'none',
-              color: theme.palette.primary.light,
-            }}
+            className="text-text-secondary underline"
          >
            {' '}
            GitHub{' '}
--- a/src/Components/Misc/SettingsModal.tsx
+++ b/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>
--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/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,87 +174,88 @@ const Start = () => {
        Life Trinket
      </h1>

-      <FormControl focused={false} style={{ width: '80vw' }}>
-        <FormLabel>Number of Players</FormLabel>
-        <Slider
-          title="Number of Players"
-          max={6}
-          min={1}
-          aria-label="Custom marks"
-          value={playerOptions?.numberOfPlayers ?? 4}
-          getAriaValueText={valuetext}
-          step={null}
-          marks={playerMarks}
-          onChange={(_e, value) => {
-            setPlayerOptions({
-              ...playerOptions,
-              numberOfPlayers: value as number,
-              orientation: Orientation.Landscape,
-            });
-          }}
-        />
-        <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
-        <Slider
-          title="Starting Health"
-          max={60}
-          min={20}
-          aria-label="Custom marks"
-          value={playerOptions?.startingLifeTotal ?? 40}
-          getAriaValueText={valuetext}
-          step={10}
-          marks={healthMarks}
-          onChange={(_e, value) =>
-            setPlayerOptions({
-              ...playerOptions,
-              startingLifeTotal: value as number,
-              orientation: Orientation.Landscape,
-            })
-          }
-        />
+      <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"
+            max={6}
+            min={1}
+            aria-label="Custom marks"
+            value={playerOptions?.numberOfPlayers ?? 4}
+            getAriaValueText={valuetext}
+            step={null}
+            marks={playerMarks}
+            onChange={(_e, value) => {
+              setPlayerOptions({
+                ...playerOptions,
+                numberOfPlayers: value as number,
+                orientation: Orientation.Landscape,
+              });
+            }}
+          />
+          <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
+          <Slider
+            title="Starting Health"
+            max={60}
+            min={20}
+            aria-label="Custom marks"
+            value={playerOptions?.startingLifeTotal ?? 40}
+            getAriaValueText={valuetext}
+            step={10}
+            marks={healthMarks}
+            onChange={(_e, value) =>
+              setPlayerOptions({
+                ...playerOptions,
+                startingLifeTotal: value as number,
+                orientation: Orientation.Landscape,
+              })
+            }
+          />

-        <ToggleButtonsWrapper className="mt-4">
-          <ToggleContainer>
-            <FormLabel>Commander</FormLabel>
-            <Switch
-              checked={
-                playerOptions.useCommanderDamage ??
-                initialGameSettings?.useCommanderDamage ??
-                true
-              }
-              onChange={(_e, value) => {
-                if (value) {
+          <ToggleButtonsWrapper className="mt-4">
+            <ToggleContainer>
+              <FormLabel>Commander</FormLabel>
+              <Switch
+                checked={
+                  playerOptions.useCommanderDamage ??
+                  initialGameSettings?.useCommanderDamage ??
+                  true
+                }
+                onChange={(_e, value) => {
+                  if (value) {
+                    setPlayerOptions({
+                      ...playerOptions,
+                      useCommanderDamage: value,
+                      numberOfPlayers: 4,
+                      startingLifeTotal: 40,
+                      orientation: Orientation.Landscape,
+                    });
+                    return;
+                  }
                  setPlayerOptions({
                    ...playerOptions,
                    useCommanderDamage: value,
-                    numberOfPlayers: 4,
-                    startingLifeTotal: 40,
+                    numberOfPlayers: 2,
+                    startingLifeTotal: 20,
                    orientation: Orientation.Landscape,
                  });
-                  return;
-                }
-                setPlayerOptions({
-                  ...playerOptions,
-                  useCommanderDamage: value,
-                  numberOfPlayers: 2,
-                  startingLifeTotal: 20,
-                  orientation: Orientation.Landscape,
-                });
+                }}
+              />
+            </ToggleContainer>
+            <Button
+              variant="contained"
+              style={{ height: '2rem' }}
+              onClick={() => {
+                setOpenSettingsModal(true);
              }}
-            />
-          </ToggleContainer>
-          <Button
-            variant="contained"
-            style={{ height: '2rem' }}
-            onClick={() => {
-              setOpenSettingsModal(true);
-            }}
-          >
-            <Cog /> &nbsp; Other settings
-          </Button>
-        </ToggleButtonsWrapper>
+            >
+              <Cog /> &nbsp; Other settings
+            </Button>
+          </ToggleButtonsWrapper>

-        <FormLabel>Layout</FormLabel>
-        {/* <LayoutOptions
+          <FormLabel>Layout</FormLabel>
+          {/* <LayoutOptions
          numberOfPlayers={playerOptions.numberOfPlayers}
          gridAreas={playerOptions.gridAreas}
          onChange={(gridAreas) =>
@@ -266,32 +267,32 @@ const Start = () => {
            })
          }
        /> */}
-        <LayoutOptions
-          numberOfPlayers={playerOptions.numberOfPlayers}
-          selectedOrientation={playerOptions.orientation}
-          onChange={(orientation) => {
-            setPlayerOptions({
-              ...playerOptions,
-              orientation,
-            });
-          }}
-        />
-      </FormControl>
-
-      {!isPWA && (
-        <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>.
-        </p>
-      )}
+          <LayoutOptions
+            numberOfPlayers={playerOptions.numberOfPlayers}
+            selectedOrientation={playerOptions.orientation}
+            onChange={(orientation) => {
+              setPlayerOptions({
+                ...playerOptions,
+                orientation,
+              });
+            }}
+          />
+        </FormControl>
+        {!isPWA && (
+          <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>
--- a/tailwind.config.ts
+++ b/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;
-//   }
-// `;