diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx index 21eebf7..78e233c 100644 --- a/src/Components/Buttons/CommanderDamage.tsx +++ b/src/Components/Buttons/CommanderDamage.tsx @@ -51,7 +51,7 @@ const CommanderDamageButton = styled.button<{ props.rotation === Rotation.Side ) { return css` - width: 10vmin; + width: 6vmax; height: auto; `; } diff --git a/src/Components/Buttons/LifeCounterButton.tsx b/src/Components/Buttons/LifeCounterButton.tsx index dd112ab..93e63ed 100644 --- a/src/Components/Buttons/LifeCounterButton.tsx +++ b/src/Components/Buttons/LifeCounterButton.tsx @@ -9,7 +9,6 @@ export const StyledLifeCounterButton = styled.button` width: 100%; height: 100%; color: rgba(0, 0, 0, 0.4); - font-size: 4rem; font-weight: 600; background-color: transparent; border: none; @@ -35,6 +34,7 @@ const TextContainer = styled.div<{ rotation: number; }>` position: relative; + top: -10%; ${(props) => { if ( @@ -45,10 +45,13 @@ const TextContainer = styled.div<{ return css` rotate: -90deg; bottom: 25%; + left: -10%; + top: auto; `; } return css` rotate: -90deg; + left: -10%; top: 25%; `; } @@ -111,6 +114,11 @@ const LifeCounterButton = ({ setHasPressedDown(false); }; + const fontSize = + rotation === Rotation.SideFlipped || rotation === Rotation.Side + ? '10vmax' + : '20vmin'; + return ( ) => { e.preventDefault(); }} + style={{ fontSize }} > diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index 3711916..36f7946 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/src/Components/PlayerMenu/Settings.tsx @@ -156,6 +156,12 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { } }; + const buttonFontSize = + player.settings.rotation === Rotation.SideFlipped || + player.settings.rotation === Rotation.Side + ? '1.3vmax' + : '2.5vmin'; + return ( { style={{ cursor: 'pointer', userSelect: 'none', - fontSize: '0.6rem', + fontSize: buttonFontSize, padding: '0 4px 0 4px', }} onClick={handleNewGame} @@ -281,7 +287,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { style={{ cursor: 'pointer', userSelect: 'none', - fontSize: '0.6rem', + fontSize: buttonFontSize, padding: '0 4px 0 4px', }} onClick={toggleFullscreen} @@ -293,7 +299,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { style={{ cursor: 'pointer', userSelect: 'none', - fontSize: '0.6rem', + fontSize: buttonFontSize, padding: '0 4px 0 4px', }} onClick={handleWakeLock}