mirror of
https://github.com/Vikeo/LifeTrinket.git
synced 2025-11-11 21:56:25 +00:00
start menu styling
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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
|
||||||
</Button>
|
<span className="text-xs">
|
||||||
|
({savedGame.players.length}
|
||||||
|
{savedGame.players.length > 1 ? 'players' : 'player'})
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
</StartButtonFooter>
|
</StartButtonFooter>
|
||||||
</MainWrapper>
|
</MainWrapper>
|
||||||
|
|||||||
Reference in New Issue
Block a user