ryan/LifeTrinket
1
0
Fork 0
forked from external-repos/LifeTrinket
Code Pull Requests Activity

update start menu styling

Browse Source
This commit is contained in:
Viktor Rådberg
2023-08-04 11:48:23 +02:00
parent 7e5b389919
commit 0af87ceb5e
3 changed files with 112 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/Components/Views/StartMenu/LayoutOptions.tsx
View File

@@ -18,6 +18,7 @@ import { theme } from '../../../Data/theme';
const LayoutWrapper = styled.div` const LayoutWrapper = styled.div`
flex-direction: row; flex-direction: row;
display: flex; display: flex;
justify-content: space-evenly;
`; `;
type LayoutOptionsProps = { type LayoutOptionsProps = {
@@ -31,6 +32,8 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
gridAreas, gridAreas,
onChange, onChange,
}) => { }) => {
const iconSize = '33vmin';
const renderLayoutOptions = () => { const renderLayoutOptions = () => {
switch (numberOfPlayers) { switch (numberOfPlayers) {
case 1: case 1:
@@ -42,13 +45,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<OnePlayerLandscape <OnePlayerLandscape
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<OnePlayerLandscape <OnePlayerLandscape
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -63,13 +66,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<OnePlayerPortrait <OnePlayerPortrait
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<OnePlayerPortrait <OnePlayerPortrait
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -89,13 +92,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<TwoPlayersOppositeLandscape <TwoPlayersOppositeLandscape
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<TwoPlayersOppositeLandscape <TwoPlayersOppositeLandscape
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -110,13 +113,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<TwoPlayersOppositePortrait <TwoPlayersOppositePortrait
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<TwoPlayersOppositePortrait <TwoPlayersOppositePortrait
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -131,13 +134,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<TwoPlayersSameSide <TwoPlayersSameSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<TwoPlayersSameSide <TwoPlayersSameSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -157,13 +160,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<ThreePlayers <ThreePlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<ThreePlayers <ThreePlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -178,13 +181,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<ThreePlayersSide <ThreePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<ThreePlayersSide <ThreePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -205,13 +208,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FourPlayers <FourPlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FourPlayers <FourPlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -226,13 +229,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FourPlayersSide <FourPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FourPlayersSide <FourPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -253,13 +256,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FivePlayers <FivePlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FivePlayers <FivePlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -274,13 +277,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FivePlayersSide <FivePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FivePlayersSide <FivePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -301,13 +304,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<SixPlayers <SixPlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<SixPlayers <SixPlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -322,13 +325,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<SixPlayersSide <SixPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<SixPlayersSide <SixPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -353,6 +356,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
onChange(value as GridTemplateAreas); onChange(value as GridTemplateAreas);
}} }}
value={gridAreas} value={gridAreas}
style={{ justifyContent: 'center' }}
> >
{renderLayoutOptions()} {renderLayoutOptions()}
</RadioGroup> </RadioGroup>

8
src/Components/Views/StartMenu/StartMenu.tsx
View File

@@ -15,13 +15,9 @@ const H2 = styled.h2`
color: ${theme.palette.text.primary}; color: ${theme.palette.text.primary};
`; `;
export const Wrapper = styled.div` const MainWrapper = styled.div`
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
`;
const MainWrapper = styled.div`
padding-top: 58px;
padding-bottom: 58px; padding-bottom: 58px;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
@@ -146,7 +142,6 @@ const Start = ({
}, [playerOptions.numberOfPlayers]); }, [playerOptions.numberOfPlayers]);
return ( return (
<Wrapper>
<MainWrapper> <MainWrapper>
<H2>Game Setup</H2> <H2>Game Setup</H2>
<FormControl focused={false} style={{ width: '80vw' }}> <FormControl focused={false} style={{ width: '80vw' }}>
@@ -215,7 +210,6 @@ const Start = ({
</Button> </Button>
</FormControl> </FormControl>
</MainWrapper> </MainWrapper>
</Wrapper>
); );
}; };

19
src/Data/theme.ts
View File

@@ -27,10 +27,10 @@ export const theme = createTheme({
MuiSlider: { MuiSlider: {
styleOverrides: { styleOverrides: {
root: { root: {
marginBottom: '4em', marginBottom: '2.5em',
}, },
markLabel: { markLabel: {
fontSize: '1.5em', fontSize: '1.2em',
color: '#F5F5F5', color: '#F5F5F5',
}, },
valueLabel: { valueLabel: {
@@ -45,11 +45,10 @@ export const theme = createTheme({
height: '1em', height: '1em',
}, },
mark: { mark: {
markerStart: 'none',
markerEnd: 'none',
width: '0.5em', width: '0.5em',
height: '0.5em', height: '0.5em',
borderRadius: '50%', borderRadius: '50%',
display: 'none',
}, },
thumb: { thumb: {
width: '1.7em', width: '1.7em',
@@ -57,5 +56,17 @@ export const theme = createTheme({
}, },
}, },
}, },
MuiFormControlLabel: {
styleOverrides: {
root: {
margin: '0',
},
},
},
MuiFormGroup: {
styleOverrides: {
root: {},
},
},
}, },
}); });