start menu styling

This commit is contained in:
Vikeo
2024-04-01 00:28:17 +02:00
parent c381b87c48
commit 71321e98dc
2 changed files with 16 additions and 15 deletions

View File

@@ -6,7 +6,7 @@ import { Cross } from '../../Icons/generated';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useAnalytics } from '../../Hooks/useAnalytics'; import { useAnalytics } from '../../Hooks/useAnalytics';
export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary w-[95vw] max-w-[548px]`; export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[47.5%] h-[95%] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary w-[95vw] max-w-[548px]`;
type InfoModalProps = { type InfoModalProps = {
isOpen: boolean; isOpen: boolean;

View File

@@ -19,9 +19,9 @@ import { SettingsModal } from '../../Misc/SettingsModal';
import { SupportMe } from '../../Misc/SupportMe'; import { SupportMe } from '../../Misc/SupportMe';
import { LayoutOptions } from './LayoutOptions'; import { LayoutOptions } from './LayoutOptions';
const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`; const MainWrapper = twc.div`w-[100dvw] h-fit pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`;
const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row px-4 z-10`; const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`;
const SliderWrapper = twc.div`mx-8`; const SliderWrapper = twc.div`mx-8`;
@@ -350,23 +350,24 @@ const Start = () => {
</div> </div>
<StartButtonFooter> <StartButtonFooter>
<Button <button
size="large" className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-main px-3 py-2 rounded-md text-text-primary min-w-[150px]"
variant="contained"
onClick={doStartNewGame} onClick={doStartNewGame}
fullWidth
> >
START GAME NEW GAME
</Button> </button>
{savedGame && ( {savedGame && (
<Button <button
size="large" className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-dark px-3 py-2 rounded-md text-text-primary min-w-[150px]"
variant="contained"
onClick={doResumeGame} onClick={doResumeGame}
fullWidth
> >
RESUME GAME RESUME&nbsp;
</Button> <span className="text-xs">
({savedGame.players.length}&nbsp;
{savedGame.players.length > 1 ? 'players' : 'player'})
</span>
</button>
)} )}
</StartButtonFooter> </StartButtonFooter>
</MainWrapper> </MainWrapper>