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

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

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

19
src/Data/theme.ts
View File

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