diff --git a/src/Components/Views/StartMenu/LayoutOptions.tsx b/src/Components/Views/StartMenu/LayoutOptions.tsx index 1d2beca..c1a30ad 100644 --- a/src/Components/Views/StartMenu/LayoutOptions.tsx +++ b/src/Components/Views/StartMenu/LayoutOptions.tsx @@ -18,7 +18,7 @@ import { twc } from 'react-twc'; import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape'; import { Orientation } from '../../../Types/Settings'; -const LayoutWrapper = twc.div`flex flex-row justify-between self-center`; +const LayoutWrapper = twc.div`flex flex-row justify-center items-center self-center w-full`; type LayoutOptionsProps = { numberOfPlayers: number; @@ -31,14 +31,16 @@ export const LayoutOptions: React.FC = ({ selectedOrientation, onChange, }) => { - const iconHeight = '30vmin'; - const iconWidth = '20vmin'; + const iconWidth = '21vmin'; + const iconHeight = '40vmin'; + const iconMaxWidth = '124px'; + const iconMaxHeight = '196px'; const renderLayoutOptions = () => { switch (numberOfPlayers) { case 1: return ( - <> +
= ({ /> } TouchRippleProps={{ style: { display: 'none' } }} + style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }} /> } label="" @@ -81,11 +84,12 @@ export const LayoutOptions: React.FC = ({ /> } TouchRippleProps={{ style: { display: 'none' } }} + style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }} /> } label="" /> - +
); case 2: return ( @@ -94,6 +98,7 @@ export const LayoutOptions: React.FC = ({ value={Orientation.Landscape} control={ = ({ value={Orientation.Portrait} control={ = ({ value={Orientation.OppositeLandscape} control={ = ({ value={Orientation.Landscape} control={ = ({ value={Orientation.Portrait} control={ = ({ value={Orientation.Landscape} control={ = ({ value={Orientation.Portrait} control={ = ({ value={Orientation.Landscape} control={ = ({ value={Orientation.Landscape} control={ {
- + Number of Players - { - setPlayerOptions({ - ...playerOptions, - numberOfPlayers: value as number, - orientation: Orientation.Landscape, - }); - }} - /> + + { + setPlayerOptions({ + ...playerOptions, + numberOfPlayers: value as number, + orientation: Orientation.Landscape, + }); + }} + /> + + Starting Health - - setPlayerOptions({ - ...playerOptions, - startingLifeTotal: value as number, - orientation: Orientation.Landscape, - }) - } - /> + + + setPlayerOptions({ + ...playerOptions, + startingLifeTotal: value as number, + orientation: Orientation.Landscape, + }) + } + /> +