diff --git a/src/Components/Views/StartMenu/LayoutOptions.tsx b/src/Components/Views/StartMenu/LayoutOptions.tsx index 88244fe..931e60d 100644 --- a/src/Components/Views/StartMenu/LayoutOptions.tsx +++ b/src/Components/Views/StartMenu/LayoutOptions.tsx @@ -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 = ({ gridAreas, onChange, }) => { + const iconSize = '33vmin'; + const renderLayoutOptions = () => { switch (numberOfPlayers) { case 1: @@ -42,13 +45,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -63,13 +66,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -89,13 +92,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -110,13 +113,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -131,13 +134,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -157,13 +160,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -178,13 +181,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -205,13 +208,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -226,13 +229,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -253,13 +256,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -274,13 +277,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -301,13 +304,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -322,13 +325,13 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } @@ -353,6 +356,7 @@ const LayoutOptions: React.FC = ({ onChange(value as GridTemplateAreas); }} value={gridAreas} + style={{ justifyContent: 'center' }} > {renderLayoutOptions()} diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index 6a785ed..036fac6 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -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,76 +142,74 @@ const Start = ({ }, [playerOptions.numberOfPlayers]); return ( - - -

Game Setup

- - Number of Players - { - setPlayerOptions({ - ...playerOptions, - numberOfPlayers: value as number, - }); - }} - /> - Starting Health - - setPlayerOptions({ - ...playerOptions, - startingLifeTotal: value as number, - }) - } - /> - Commander - - setPlayerOptions({ - ...playerOptions, - useCommanderDamage: value, - }) - } - /> + +

Game Setup

+ + Number of Players + { + setPlayerOptions({ + ...playerOptions, + numberOfPlayers: value as number, + }); + }} + /> + Starting Health + + setPlayerOptions({ + ...playerOptions, + startingLifeTotal: value as number, + }) + } + /> + Commander + + setPlayerOptions({ + ...playerOptions, + useCommanderDamage: value, + }) + } + /> - Layout + Layout - - setPlayerOptions({ ...playerOptions, gridAreas }) - } - /> - - -
-
+ + setPlayerOptions({ ...playerOptions, gridAreas }) + } + /> + + + ); }; diff --git a/src/Data/theme.ts b/src/Data/theme.ts index af72303..7dd2f7b 100644 --- a/src/Data/theme.ts +++ b/src/Data/theme.ts @@ -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: {}, + }, + }, }, });