Settings Styling (#10)

* add border radius

* fix settings styling a little

src/Components/LifeCounter/LifeCounter.tsx

@@ -9,6 +9,7 @@ import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import { OutlinedText } from '../Misc/OutlinedText';
 import PlayerMenu from '../PlayerMenu/PlayerMenu';
 import { Skull } from '../../Icons/generated';
+
 const LifeCounterContentWrapper = styled.div<{
   backgroundColor: string;
 }>`
@@ -24,6 +25,9 @@ const LifeCounterContentWrapper = styled.div<{
     max-width: 100vmax;
     max-height: 100vmin;
   }
+
+  border-radius: 8px;
+  overflow: hidden;
 `;
 
 const LifeCounterWrapper = styled.div<{
@@ -186,7 +190,13 @@ export const LoseGameButton = styled.button<{ rotation: Rotation }>`
   top: 12vmin;
   right: 6vmax;
   background-color: #43434380;
-  border-radius: 15px;
+  border-radius: 8px;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 
   ${(props) => {
     if (props.rotation === Rotation.SideFlipped) {
@@ -246,8 +256,8 @@ const LifeCounter = ({
     setKey(Date.now());
   };
 
-  const setGameLost = () => {
-    const updatedPlayer = { ...player, hasLost: true };
+  const toggleGameLost = () => {
+    const updatedPlayer = { ...player, hasLost: !player.hasLost };
     onPlayerChange(updatedPlayer);
   };
 
@@ -289,14 +299,14 @@ const LifeCounter = ({
   const fontSize =
     player.settings.rotation === Rotation.SideFlipped ||
     player.settings.rotation === Rotation.Side
-      ? `${size}vmax`
-      : `${size}vmin`;
+      ? `clamp(6rem, ${size}vmax, 10rem)`
+      : `clamp(6rem, ${size}vmin, 10rem)`;
 
   const strokeWidth =
     player.settings.rotation === Rotation.SideFlipped ||
     player.settings.rotation === Rotation.Side
-      ? `${size / 20}vmax`
-      : `${size / 20}vmin`;
+      ? `clamp(0.4rem, ${size / 20}vmax, 12rem)`
+      : `clamp(0.4rem, ${size / 20}vmin, 12rem)`;
 
   return (
     <LifeCounterContentWrapper backgroundColor={backgroundColor}>
@@ -333,7 +343,7 @@ const LifeCounter = ({
         {(player.lifeTotal < 1 || hasCommanderDamageReached21(player)) && (
           <LoseGameButton
             rotation={player.settings.rotation}
-            onClick={setGameLost}
+            onClick={toggleGameLost}
           >
             <Skull size="5vmin" color="black" opacity={0.5} />
           </LoseGameButton>

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -3,6 +3,7 @@ import Settings from './Settings';
 import styled from 'styled-components';
 import { css } from 'styled-components';
 import { Rotation } from '../../Types/Player';
+import { Button } from '@mui/material';
 
 const PlayerMenuWrapper = styled.div<{
   rotation: Rotation;
@@ -29,15 +30,17 @@ const PlayerMenuWrapper = styled.div<{
   }};
 `;
 
-const CloseButton = styled.button<{
+const CloseButton = styled.div<{
   rotation: Rotation;
 }>`
   position: absolute;
   top: 5%;
   right: 5%;
+  border: none;
+  outline: none;
   cursor: pointer;
-  user-select: none;
-  color: black;
+  background-color: transparent;
+
   ${(props) => {
     if (props.rotation === Rotation.Side) {
       return css`
@@ -79,8 +82,17 @@ const PlayerMenu = ({
 
   return (
     <PlayerMenuWrapper rotation={player.settings.rotation}>
-      <CloseButton rotation={player.settings.rotation} onClick={handleOnClick}>
+      <CloseButton rotation={player.settings.rotation}>
+        <Button
+          style={{
+            padding: '0 8px',
+            minWidth: '0',
+          }}
+          variant="outlined"
+          onClick={handleOnClick}
+        >
           X
+        </Button>
       </CloseButton>
       <Settings
         player={player}

src/Components/PlayerMenu/Settings.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from '@mui/material';
+import { Button, Checkbox } from '@mui/material';
 import styled, { css } from 'styled-components';
 import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
@@ -15,6 +15,7 @@ const SettingsContainer = styled.div<{
   rotation: Rotation;
 }>`
   display: flex;
+  position: relative;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
@@ -29,11 +30,6 @@ const SettingsContainer = styled.div<{
         flex-direction: column-reverse;
         height: 100%;
         width: 100%;
-        /* padding-top: 36px; */
-      `;
-    } else {
-      return css`
-        /* padding-top: 36px; */
       `;
     }
   }}
@@ -41,9 +37,9 @@ const SettingsContainer = styled.div<{
 
 const TogglesSection = styled.div<{ rotation: Rotation }>`
   display: flex;
+  position: absolute;
   flex-direction: row;
   justify-content: space-evenly;
-  flex-wrap: wrap;
   gap: 0.5rem;
 
   ${(props) => {
@@ -59,18 +55,22 @@ const TogglesSection = styled.div<{ rotation: Rotation }>`
 `;
 
 const ButtonsSections = styled.div<{ rotation: Rotation }>`
+  position: absolute;
   display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
   gap: 1rem;
+  bottom: 16px;
 
   ${(props) => {
-    if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
-    ) {
+    if (props.rotation === Rotation.Side) {
       return css`
+        bottom: auto;
+        right: -6rem;
+        rotate: ${props.rotation - 180}deg;
+      `;
+    } else if (props.rotation === Rotation.SideFlipped) {
+      return css`
+        bottom: auto;
+        left: -6rem;
         rotate: ${props.rotation - 180}deg;
       `;
     }
@@ -111,12 +111,6 @@ const ColorPicker = styled.input<{
   }}
 `;
 
-const Button = styled.button`
-  cursor: pointer;
-  user-select: none;
-  color: #000000;
-`;
-
 const CheckboxContainer = styled.div<{ rotation: Rotation }>`
   ${(props) => {
     if (
@@ -269,11 +263,41 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
           />
         </CheckboxContainer>
       </TogglesSection>
-
       <ButtonsSections rotation={player.settings.rotation}>
-        <Button onClick={handleNewGame}>Back to Start</Button>
-        <Button onClick={toggleFullscreen}>Fullscreen</Button>
-        <Button onClick={handleWakeLock}>
+        <Button
+          variant="outlined"
+          style={{
+            cursor: 'pointer',
+            userSelect: 'none',
+            fontSize: '0.6rem',
+            padding: '0 4px 0 4px',
+          }}
+          onClick={handleNewGame}
+        >
+          Back to Start
+        </Button>
+        <Button
+          variant="outlined"
+          style={{
+            cursor: 'pointer',
+            userSelect: 'none',
+            fontSize: '0.6rem',
+            padding: '0 4px 0 4px',
+          }}
+          onClick={toggleFullscreen}
+        >
+          Fullscreen
+        </Button>
+        <Button
+          variant="outlined"
+          style={{
+            cursor: 'pointer',
+            userSelect: 'none',
+            fontSize: '0.6rem',
+            padding: '0 4px 0 4px',
+          }}
+          onClick={handleWakeLock}
+        >
           {released === false ? 'Release' : 'Request'} nosleep
         </Button>
       </ButtonsSections>