finish up tailwind

package.json

@@ -23,7 +23,6 @@
     "react-dom": "^18.2.0",
     "react-screen-wake-lock": "^3.0.2",
     "react-twc": "^1.3.0",
-    "styled-components": "^6.0.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/Components/Buttons/CommanderDamage.tsx

@@ -1,9 +1,9 @@
 import { useRef, useState } from 'react';
+import { TwcComponentProps, twc } from 'react-twc';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { Player, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
-import { TwcComponentProps, twc } from 'react-twc';
 
 export type RotationDivProps = TwcComponentProps<'div'> & {
   $rotation?: number;

src/Components/Buttons/ExtraCounter.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, useRef, useState } from 'react';
+import { twc } from 'react-twc';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { CounterType, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
-import { twc } from 'react-twc';
 import { RotationDivProps } from './CommanderDamage';
 
 const ExtraCounterContainer = twc.div`
@@ -13,7 +13,7 @@ const ExtraCounterContainer = twc.div`
   flex-grow
 `;
 
-const StyledExtraCounterButton = twc.button`
+const ExtraCounterButton = twc.button`
   flex
   justify-center
   items-center
@@ -103,7 +103,7 @@ const ExtraCounter = ({
 
   return (
     <ExtraCounterContainer>
-      <StyledExtraCounterButton
+      <ExtraCounterButton
         onPointerDown={handleDownInput}
         onPointerUp={handleUpInput}
         onPointerLeave={handleLeaveInput}
@@ -124,7 +124,7 @@ const ExtraCounter = ({
             </OutlinedText>
           </TextContainer>
         </IconContainer>
-      </StyledExtraCounterButton>
+      </ExtraCounterButton>
     </ExtraCounterContainer>
   );
 };

src/Components/Buttons/LifeCounterButton.tsx

@@ -1,7 +1,6 @@
 import { useRef, useState } from 'react';
-import { lifeLongPressMultiplier } from '../../Data/constants';
-
 import { TwcComponentProps, twc } from 'react-twc';
+import { lifeLongPressMultiplier } from '../../Data/constants';
 import { Rotation } from '../../Types/Player';
 
 type RotationButtonProps = TwcComponentProps<'div'> & {
@@ -9,7 +8,7 @@ type RotationButtonProps = TwcComponentProps<'div'> & {
   $rotation?: number;
 };
 
-const StyledLifeCounterButton = twc.button`
+const LifeCounterButtonTwc = twc.button`
   h-full
   w-full
   flex
@@ -92,7 +91,7 @@ const LifeCounterButton = ({
       : '12vmin';
 
   return (
-    <StyledLifeCounterButton
+    <LifeCounterButtonTwc
       onPointerDown={handleDownInput}
       onPointerUp={handleUpInput}
       onPointerLeave={handleLeaveInput}
@@ -108,7 +107,7 @@ const LifeCounterButton = ({
       >
         {operation === 'add' ? '\u002B' : '\u2212'}
       </TextContainer>
-    </StyledLifeCounterButton>
+    </LifeCounterButtonTwc>
   );
 };
 

src/Components/Buttons/LoseButton.tsx

@@ -7,9 +7,9 @@ const LoseButton = twc.div<RotationDivProps>((props) => [
   'absolute flex-grow border-none outline-none cursor-pointer bg-interface-loseButton-background rounded-lg select-none z-[1] webkit-user-select-none',
 
   props.$rotation === Rotation.SideFlipped
-    ? `right-auto top-[15%] left-[27%] rotate-[${props.$rotation}deg]`
+    ? `right-auto top-[15%] left-[27%]`
     : props.$rotation === Rotation.Side
-    ? `right-auto top-[15%] left-[27%] rotate-[${props.$rotation - 180}deg]`
+    ? `right-auto top-[15%] left-[27%]`
     : 'right-[15%] top-1/4',
 ]);
 
@@ -19,8 +19,20 @@ type LoseButtonProps = {
 };
 
 export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
+  const calcRotation =
+    rotation === Rotation.SideFlipped
+      ? rotation
+      : rotation === Rotation.Side
+      ? rotation - 180
+      : rotation;
+
   return (
-    <LoseButton $rotation={rotation} onClick={onClick} aria-label={`Lose Game`}>
+    <LoseButton
+      $rotation={rotation}
+      onClick={onClick}
+      aria-label={`Lose Game`}
+      style={{ rotate: `${calcRotation}deg` }}
+    >
       <Skull size="5vmin" color="black" opacity={0.5} />
     </LoseButton>
   );

src/Components/Buttons/SettingsButton.tsx

@@ -3,7 +3,7 @@ import { Cog } from '../../Icons/generated';
 import { Rotation } from '../../Types/Player';
 import { RotationButtonProps } from './CommanderDamage';
 
-const StyledSettingsButton = twc.button<RotationButtonProps>((props) => [
+const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
   'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none  webkit-user-select-none',
   props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped
     ? `right-auto top-[1vmax] left-[27%]`
@@ -17,13 +17,13 @@ type SettingsButtonProps = {
 
 const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
   return (
-    <StyledSettingsButton
+    <SettingsButtonTwc
       onClick={onClick}
       $rotation={rotation}
       aria-label={`Settings`}
     >
       <Cog size="5vmin" color="black" opacity="0.3" />
-    </StyledSettingsButton>
+    </SettingsButtonTwc>
   );
 };
 

src/Components/LifeCounter/LifeCounter.tsx

@@ -1,137 +1,36 @@
 import { useEffect, useState } from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import { twc } from 'react-twc';
-import { theme } from '../../Data/theme';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { usePlayers } from '../../Hooks/usePlayers';
 import { Player, Rotation } from '../../Types/Player';
+import { RotationDivProps } from '../Buttons/CommanderDamage';
 import { LoseGameButton } from '../Buttons/LoseButton';
 import SettingsButton from '../Buttons/SettingsButton';
 import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import PlayerMenu from '../Player/PlayerMenu';
 import Health from './Health';
-import { usePlayers } from '../../Hooks/usePlayers';
-import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 
-const LifeCounterContentWrapper = styled.div<{
+const LifeCounterContentWrapper = twc.div`
-  $backgroundColor: string;
+  relative flex flex-grow flex-col items-center w-full h-full overflow-hidden`;
-}>`
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  background-color: ${(props) => props.$backgroundColor || 'antiquewhite'};
-  @media (orientation: landscape) {
-    max-width: 100vmax;
-    max-height: 100vmin;
-  }
 
-  overflow: hidden;
+const LifeCounterWrapper = twc.div<RotationDivProps>((props) => [
-`;
+  'relative flex items-center w-full h-full z-[1]',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? `flex-row`
+    : `flex-col`,
+]);
 
-const LifeCounterWrapper = styled.div<{
+const StartingPlayerNoticeWrapper = twc.div`z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-primary-main`;
-  $rotation: Rotation;
-}>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
 
-  z-index: 1;
+const PlayerLostWrapper = twc.div<RotationDivProps>((props) => [
+  'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? `rotate-[${props.$rotation - 90}deg]`
+    : '',
+]);
 
-  ${(props) => {
+const DynamicText = twc.div`text-[8vmin]`;
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: row;
-        rotate: ${props.$rotation - 90}deg;
-      `;
-    }
-
-    return css`
-      flex-direction: column;
-      rotate: ${props.$rotation}deg;
-    `;
-  }}
-`;
-
-const PlayerNoticeWrapper = styled.div<{
-  $rotation: Rotation;
-  $backgroundColor: string;
-}>`
-  z-index: 1;
-  display: flex;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  background: ${(props) => props.$backgroundColor};
-  pointer-events: none;
-  -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 ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: ${props.$rotation - 90}deg;
-      `;
-    }
-  }}
-`;
-
-const DynamicText = styled.div<{ $rotation: Rotation }>`
-  font-size: 8vmin;
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    }
-  }}
-`;
-
-const fadeOut = keyframes`
-  0% {
-    opacity: 1;
-  }
-  33% {
-    opacity: 0.6;
-  }
-  100% {
-    opacity: 0;
-  }
-`;
-
-export const RecentDifference = styled.span`
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-shadow: none;
-  background-color: rgba(255, 255, 255, 0.6);
-  font-variant-numeric: tabular-nums;
-  border-radius: 50%;
-  padding: 5px 10px;
-  font-size: 8vmin;
-  color: #333333;
-  animation: ${fadeOut} 3s 1s ease-out forwards;
-`;
 
 const hasCommanderDamageReached21 = (player: Player) => {
   const commanderDamageTotals = player.commanderDamage.map(
@@ -208,27 +107,38 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
     updatePlayer(updatedPlayer);
   };
 
+  const calcRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 90
+      : player.settings.rotation;
+
+  const calcTextRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 180
+      : player.settings.rotation;
+
   return (
-    <LifeCounterContentWrapper $backgroundColor={player.color}>
+    <LifeCounterContentWrapper style={{ background: player.color }}>
-      <LifeCounterWrapper $rotation={player.settings.rotation}>
+      <LifeCounterWrapper
+        $rotation={player.settings.rotation}
+        style={{ rotate: `${calcRotation}deg` }}
+      >
         {settings.showStartingPlayer &&
           player.isStartingPlayer &&
           player.showStartingPlayer && (
-            <PlayerNoticeWrapper
+            <StartingPlayerNoticeWrapper
-              $rotation={player.settings.rotation}
+              style={{ rotate: `${calcRotation}deg` }}
-              $backgroundColor={theme.palette.primary.main}
             >
-              <DynamicText $rotation={player.settings.rotation}>
+              <DynamicText style={{ rotate: `${calcTextRotation}deg` }}>
                 You start!
               </DynamicText>
-            </PlayerNoticeWrapper>
+            </StartingPlayerNoticeWrapper>
           )}
 
         {player.hasLost && (
-          <PlayerNoticeWrapper
+          <PlayerLostWrapper $rotation={player.settings.rotation} />
-            $rotation={player.settings.rotation}
-            $backgroundColor={'#00000070'}
-          />
         )}
         <CommanderDamageBar
           opponents={opponents}
@@ -256,11 +166,10 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
           handleLifeChange={handleLifeChange}
         />
         <ExtraCountersBar player={player} />
+        {showPlayerMenu && (
+          <PlayerMenu player={player} setShowPlayerMenu={setShowPlayerMenu} />
+        )}
       </LifeCounterWrapper>
-
-      {showPlayerMenu && (
-        <PlayerMenu player={player} setShowPlayerMenu={setShowPlayerMenu} />
-      )}
     </LifeCounterContentWrapper>
   );
 };

src/Components/Misc/InfoModal.tsx

@@ -1,21 +1,8 @@
 import { Modal } from '@mui/material';
 import { theme } from '../../Data/theme';
-import styled from 'styled-components';
+import { twc } from 'react-twc';
 
-export const ModalWrapper = styled.div`
+export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 80vw;
-  height: 85vh;
-  background-color: ${theme.palette.background.default};
-  padding: 1rem;
-  overflow: scroll;
-  border-radius: 1rem;
-  color: ${theme.palette.text.primary};
-  border: none;
-`;
 
 type InfoModalProps = {
   isOpen: boolean;

src/Components/Misc/OutlinedText.tsx

@@ -1,58 +1,30 @@
-import styled, { css } from 'styled-components';
-import { theme } from '../../Data/theme';
 import { Rotation } from '../../Types/Player';
 
-const Container = styled.div`
+import { twc } from 'react-twc';
-  display: flex;
+//TODO Create provider for this
-  position: relative;
+import tailwindConfig from './../../../tailwind.config';
-  width: 100%;
+import resolveConfig from 'tailwindcss/resolveConfig';
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`;
 
-const CenteredText = styled.div<{
+const fullConfig = resolveConfig(tailwindConfig);
-  strokeWidth?: string;
-  strokeColor?: string;
-  fillColor?: string;
-  fontSize?: string;
-  fontWeight?: string;
-  $rotation?: Rotation;
-}>`
-  position: absolute;
-  font-weight: ${(props) => props.fontWeight || ''};
-  font-variant-numeric: tabular-nums;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
-  -moz-user-select: -moz-none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
 
-  color: ${(props) => props.fillColor || theme.palette.common.black};
+const Container = twc.div`
-  font-size: ${(props) => props.fontSize || '6vmin'};
+  flex
-  -webkit-text-stroke: ${(props) => props.strokeWidth || '1vmin'}${(props) => props.strokeColor || theme.palette.common.white};
+  relative
-  -webkit-text-fill-color: ${(props) =>
+  w-full
-    props.fillColor || theme.palette.common.black};
+  h-full
+  items-center
+  justify-center
+  `;
 
-  ${(props) => {
+const CenteredText = twc.div`absolute select-none text-common-black text-[6vmin] stroke-common-white
-    if (
+webkit-user-select-none tabular-nums`;
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: 270deg;
-      `;
-    }
-  }}
-`;
 
-const CenteredTextOutline = styled.span`
+const CenteredTextOutline = twc.span`
-  position: absolute;
+  absolute
-  left: 0;
+  left-0
-  -webkit-text-stroke: 0;
+  stroke-none
-  pointer-events: none;
+  pointer-events-none
-`;
+  `;
 
 type OutlinedTextProps = {
   children?: React.ReactNode;
@@ -73,18 +45,33 @@ export const OutlinedText: React.FC<OutlinedTextProps> = ({
   fillColor,
   rotation,
 }) => {
+  const calcRotation =
+    rotation === Rotation.Side
+      ? rotation - 180
+      : rotation === Rotation.SideFlipped
+      ? rotation
+      : 0;
+
   return (
     <Container>
       <CenteredText
-        fontSize={fontSize}
+        style={{
-        fontWeight={fontWeight}
+          fontSize,
-        strokeWidth={strokeWidth}
+          fontWeight,
-        strokeColor={strokeColor}
+          strokeWidth: strokeWidth || '1vmin',
-        fillColor={fillColor}
+          color: fillColor || fullConfig.theme.colors.common.black,
-        $rotation={rotation}
+          WebkitTextStroke: `${strokeWidth || '1vmin'} ${
+            strokeColor || fullConfig.theme.colors.common.white
+          }`,
+          WebkitTextFillColor:
+            fillColor || fullConfig.theme.colors.common.black,
+          rotate: `${calcRotation}deg`,
+        }}
       >
         {children}
-        <CenteredTextOutline aria-hidden>{children}</CenteredTextOutline>
+        <CenteredTextOutline aria-hidden style={{ WebkitTextStroke: 0 }}>
+          {children}
+        </CenteredTextOutline>
       </CenteredText>
     </Container>
   );

src/Components/Misc/Separator.tsx

@@ -1,13 +1,3 @@
-import styled from 'styled-components';
-import { Spacer } from './Spacer';
-
-const SeparatorContainer = styled.div<{ width?: string; height?: string }>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  background-color: #00000025;
-  border-radius: 50px;
-`;
-
 export const Separator = ({
   width = '100%',
   height = '100%',
@@ -16,10 +6,9 @@ export const Separator = ({
   height?: string;
 }) => {
   return (
-    <>
+    <div
-      <Spacer height="0.5rem" />
+      className={`bg-common-black bg-opacity-30 rounded-full mt-2 mb-2`}
-      <SeparatorContainer width={width} height={height} />
+      style={{ width, height }}
-      <Spacer height="0.5rem" />
+    />
-    </>
   );
 };

src/Components/Misc/SettingsModal.tsx

@@ -1,38 +1,17 @@
 import { Button, FormLabel, Modal, Switch } from '@mui/material';
-import { ModalWrapper } from './InfoModal';
+import { twc } from 'react-twc';
-import styled from 'styled-components';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
-import { theme } from '../../Data/theme';
+import { ModalWrapper } from './InfoModal';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
 
-const SettingContainer = styled.div`
+const SettingContainer = twc.div`w-full flex flex-col`;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`;
 
-const ToggleContainer = styled.div`
+const ToggleContainer = twc.div`flex flex-row justify-between items-center`;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`;
 
-const Container = styled.div`
+const Container = twc.div`flex flex-col items-center w-full`;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-`;
 
-const Description = styled.p`
+const Description = twc.p`mr-16 text-xs text-left text-text-secondary`;
-  margin-top: -0.25rem;
-  margin-right: 3.5rem;
-  font-size: 0.8rem;
-  text-align: left;
-  color: ${theme.palette.text.secondary};
-`;
 
 type SettingsModalProps = {
   isOpen: boolean;
@@ -100,7 +79,7 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
           </SettingContainer>
           {!isPWA && (
             <>
-              <Separator height="2px" />
+              <Separator height="1px" />
               <SettingContainer>
                 <ToggleContainer>
                   <Paragraph>
@@ -110,19 +89,19 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                     normal app!
                   </Paragraph>
                 </ToggleContainer>
-                <Description>
+                <Description className="mt-1">
                   If you do, this app will work offline and the toolbar will be
                   automatically hidden.
                 </Description>
               </SettingContainer>
             </>
           )}
-          <Separator height="2px" />
+          <Separator height="1px" />
           <SettingContainer>
             {/* @ts-expect-error is defined in vite.config.ts*/}
             <Paragraph>Version: {APP_VERSION}</Paragraph>
           </SettingContainer>
-          <Separator height="2px" />
+          <Separator height="1px" />
 
           <Button variant="contained" onClick={closeModal}>
             Save and Close

src/Components/Misc/Spacer.tsx

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-
-export const Spacer = styled.div<{ width?: string; height?: string }>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-`;

src/Components/Misc/SupportMe.tsx

@@ -1,43 +1,30 @@
 import { Button, Drawer } from '@mui/material';
 import { useState } from 'react';
-import styled from 'styled-components';
-import { theme } from '../../Data/theme';
 import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
 import { Paragraph } from './TextComponents';
 import LittleGuy from '../../Icons/generated/LittleGuy';
 import { useAnalytics } from '../../Hooks/useAnalytics';
+import { twc } from 'react-twc';
 
-// import { ButtonBase } from '@mui/material';
+const SupportContainer = twc.div`flex flex-col items-center justify-center gap-4 mt-4 mb-4`;
 
-const SupportContainer = styled.div`
+const SupportButton = twc.button`
-  display: flex;
+  flex
-  flex-direction: column;
+  flex-row
-  align-items: center;
+  items-center
-  justify-content: center;
+  justify-left
-  gap: 1rem;
+  border-none
-  margin: 16px 0;
+  cursor-pointer
-`;
+  bg-primary-main
-
+  rounded-md
-const SupportButton = styled.button`
+  w-10/12
-  display: flex;
+  mx-4
-  flex-direction: row;
+  px-4
-  align-items: center;
+  py-2
-  justify-content: center;
+  transition-colors duration-200 ease-in-out
-  border: none;
+  shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)]
-  background-color: transparent;
+  hover:bg-primary-dark
-  cursor: pointer;
+  `;
-  padding: 0;
-  margin: 0;
-  background-color: ${theme.palette.primary.main};
-  border-radius: 4px;
-  margin: 0 1rem;
-  padding: 0 1rem;
-  transition: background-color 0.2s ease-in-out;
-  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
-  &:hover {
-    background-color: ${theme.palette.primary.dark};
-  }
-`;
 
 export const SupportMe = () => {
   const analytics = useAnalytics();
@@ -87,13 +74,7 @@ export const SupportMe = () => {
       <LittleGuy
         height={'4rem'}
         width={'2.5rem'}
-        style={{
+        className="pointer-events-none absolute top-10 right-0 text-text-primary"
-          pointerEvents: 'none',
-          position: 'absolute',
-          top: '2.5rem',
-          right: '0',
-          color: theme.palette.text.primary,
-        }}
       />
 
       <Drawer
@@ -104,22 +85,12 @@ export const SupportMe = () => {
       >
         <SupportContainer>
           <SupportButton onClick={handleOpenBuyMeCoffee}>
-            <BuyMeCoffee
+            <BuyMeCoffee height="1.5rem" width="1.5rem" className="mr-2" />
-              height={'1.5rem'}
+            <Paragraph className="text-xs">Buy him a tea</Paragraph>
-              width={'1.5rem'}
-              style={{ marginRight: '0.5rem' }}
-            />
-            <Paragraph style={{ fontSize: '0.7rem' }}>Buy him a tea</Paragraph>
           </SupportButton>
           <SupportButton onClick={handleOpenKoFi}>
-            <KoFi
+            <KoFi height="1.5rem" width="1.5rem" className="mr-2" />
-              height={'1.5rem'}
+            <Paragraph className="text-xs">Buy him a ko-fi</Paragraph>
-              width={'1.5rem'}
-              style={{ marginRight: '0.5rem' }}
-            />
-            <Paragraph style={{ fontSize: '0.7rem' }}>
-              Buy him a ko-fi
-            </Paragraph>
           </SupportButton>
         </SupportContainer>
       </Drawer>

src/Components/Misc/TextComponents.tsx

@@ -1,11 +1,6 @@
-import styled from 'styled-components';
+import { twc } from 'react-twc';
-import { theme } from '../../Data/theme';
 
-export const Paragraph = styled.p`
+export const Paragraph = twc.p`text-text-primary;`;
-  color: ${theme.palette.text.primary};
-`;
 
 // eslint-disable-next-line react-refresh/only-export-components
-export const H1 = styled.h1`
+export const H1 = twc.h1`text-text-primary;`;
-  color: ${theme.palette.text.primary};
-`;

src/Components/Player/PlayerMenu.tsx

@@ -1,168 +1,96 @@
 import { Button, Checkbox } from '@mui/material';
-import styled, { css } from 'styled-components';
+import { useRef } from 'react';
-import { Player, Rotation } from '../../Types/Player';
+import { twc } from 'react-twc';
 import { theme } from '../../Data/theme';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
+import { useSafeRotate } from '../../Hooks/useSafeRotate';
 import {
-  PartnerTax,
+  Cross,
-  Poison,
   Energy,
-  Experience,
   Exit,
+  Experience,
   FullscreenOff,
   FullscreenOn,
-  Cross,
+  PartnerTax,
+  Poison,
   ResetGame,
 } from '../../Icons/generated';
-import { useRef } from 'react';
+import { Player, Rotation } from '../../Types/Player';
-import { Spacer } from '../Misc/Spacer';
+import {
-import { useSafeRotate } from '../../Hooks/useSafeRotate';
+  RotationButtonProps,
+  RotationDivProps,
+} from '../Buttons/CommanderDamage';
 
-const SettingsContainer = styled.div<{
+const BetterRowContainer = twc.div`
-  $rotation: Rotation;
+  flex
-}>`
+  flex-col
-  display: flex;
+  flex-grow
-  flex-direction: row;
+  w-full
-  flex-wrap: wrap;
+  h-full
-  height: 100%;
+  justify-end
-  width: 100%;
+  items-stretch
-
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column-reverse;
-        height: 100%;
-        width: 100%;
-      `;
-    }
-  }}
-  ${(props) => {
-    if (props.$rotation === Rotation.Side) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    } else if (props.$rotation === Rotation.SideFlipped) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    }
-  }}
 `;
 
-const BetterRowContainer = styled.div`
+const TogglesSection = twc.div`
-  display: flex;
+  flex
-  flex-direction: column;
+  relative
-  flex-grow: 1;
+  flex-row
-  width: 100%;
+  gap-2
-  height: 100%;
+  justify-evenly
-  justify-content: end;
-  align-items: stretch;
 `;
 
-const TogglesSection = styled.div`
+const ButtonsSections = twc.div`
-  display: flex;
+  flex
-  position: relative;
+  max-w-full
-  flex-direction: row;
+  gap-4
-  gap: 0.5rem;
+  justify-between
-  justify-content: space-evenly;
+  p-[3%]
+  items-center
 `;
 
-const ButtonsSections = styled.div`
+const ColorPicker = twc.input`
-  display: flex;
+  absolute
-  max-width: 100%;
+  top-[5%]
-  gap: 1rem;
+  left-[5%]
-  justify-content: space-between;
+  h-[8vmax]
-  padding: 3% 3%;
+  w-[8vmax]
-  align-items: center;
+  border-none
+  outline-none
+  cursor-pointer
+  bg-transparent
+  user-select-nonetext-common-white
 `;
 
-const ColorPicker = styled.input`
+const SettingsContainer = twc.div<RotationDivProps>((props) => [
-  position: absolute;
+  'flex flex-wrap h-full w-full',
-  top: 5%;
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-  left: 5%;
+    ? 'flex-col'
-  height: 8vmax;
+    : 'flex-row',
-  width: 8vmax;
+]);
-  border: none;
+
-  outline: none;
+const CheckboxContainer = twc.div``;
-  cursor: pointer;
+
-  background-color: transparent;
+const PlayerMenuWrapper = twc.div`
-  user-select: none;
+  flex
-  color: #ffffff;
+  flex-col
+  absolute
+  w-full
+  h-full
+  bg-background-settings
+  items-center
+  justify-center
+  z-[2]
 `;
 
-const CheckboxContainer = styled.div<{ $rotation: Rotation }>`
+const CloseButton = twc.button<RotationButtonProps>((props) => [
-  ${(props) => {
+  'absolute border-none outline-none cursor-pointer bg-transparent z-[99]',
-    if (
+  props.$rotation === Rotation.Side
-      props.$rotation === Rotation.SideFlipped ||
+    ? `top-[5%] right-auto left-[5%]`
-      props.$rotation === Rotation.Side
+    : props.$rotation === Rotation.SideFlipped
-    ) {
+    ? 'top-auto left-auto bottom-[5%] right-[5%]'
-      return css`
+    : 'top-[15%] right-[5%]',
-        /* rotate: ${props.$rotation - 180}deg; */
+]);
-      `;
-    }
-  }}
-`;
-
-const PlayerMenuWrapper = styled.div<{
-  $rotation: Rotation;
-}>`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(20, 20, 20, 0.9);
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return;
-    }
-    return css`
-      rotate: ${props.$rotation}deg;
-    `;
-  }};
-`;
-
-const CloseButton = styled.div<{
-  $rotation: Rotation;
-}>`
-  position: absolute;
-  top: 15%;
-  right: 5%;
-  z-index: 9999;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background-color: transparent;
-
-  ${(props) => {
-    if (props.$rotation === Rotation.Side) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-        top: 5%;
-        right: auto;
-        left: 5%;
-      `;
-    } else if (props.$rotation === Rotation.SideFlipped) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-        top: auto;
-        left: auto;
-        bottom: 5%;
-        right: 5%;
-      `;
-    }
-  }}
-`;
 
 type PlayerMenuProps = {
   player: Player;
@@ -214,9 +142,31 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
   const extraCountersSize = isSide ? '8vmin' : '4vmax';
   const closeButtonSize = isSide ? '6vmin' : '3vmax';
 
+  const calcRotation =
+    player.settings.rotation === Rotation.Side
+      ? `${player.settings.rotation - 180}deg`
+      : player.settings.rotation === Rotation.SideFlipped
+      ? `${player.settings.rotation - 180}deg`
+      : '';
+
   return (
-    <PlayerMenuWrapper $rotation={player.settings.rotation}>
+    <PlayerMenuWrapper
-      <CloseButton $rotation={player.settings.rotation}>
+      //TODO: Fix hacky solution to rotation for SideFlipped
+      style={{
+        rotate:
+          player.settings.rotation === Rotation.SideFlipped ? '180deg' : '',
+      }}
+    >
+      <CloseButton
+        $rotation={player.settings.rotation}
+        style={{
+          rotate:
+            player.settings.rotation === Rotation.Side ||
+            player.settings.rotation === Rotation.SideFlipped
+              ? `${player.settings.rotation - 180}deg`
+              : '',
+        }}
+      >
         <Button
           variant="text"
           onClick={handleOnClick}
@@ -230,8 +180,12 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
           <Cross size={closeButtonSize} />
         </Button>
       </CloseButton>
+
       <SettingsContainer
         $rotation={player.settings.rotation}
+        style={{
+          rotate: calcRotation,
+        }}
         ref={settingsContainerRef}
       >
         <ColorPicker
@@ -244,7 +198,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
         <BetterRowContainer>
           <TogglesSection>
             {player.settings.useCommanderDamage && (
-              <CheckboxContainer $rotation={player.settings.rotation}>
+              <CheckboxContainer>
                 <Checkbox
                   name="usePartner"
                   checked={player.settings.usePartner}
@@ -272,7 +226,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
               </CheckboxContainer>
             )}
 
-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
               <Checkbox
                 name="usePoison"
                 checked={player.settings.usePoison}
@@ -299,7 +253,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
               />
             </CheckboxContainer>
 
-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
               <Checkbox
                 name="useEnergy"
                 checked={player.settings.useEnergy}
@@ -326,7 +280,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
               />
             </CheckboxContainer>
 
-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
               <Checkbox
                 name="useExperience"
                 checked={player.settings.useExperience}
@@ -353,8 +307,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
               />
             </CheckboxContainer>
           </TogglesSection>
-          <Spacer height="1rem" />
+          <ButtonsSections className="mt-4">
-          <ButtonsSections>
             <Button
               variant="text"
               style={{
@@ -366,7 +319,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
             >
               <Exit size={iconSize} style={{ rotate: '180deg' }} />
             </Button>
-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
               <Checkbox
                 name="fullscreen"
                 checked={document.fullscreenElement ? true : false}
@@ -418,15 +371,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
         </BetterRowContainer>
         <dialog
           ref={dialogRef}
-          style={{
+          className="z-[9999] bg-background-default text-text-primary rounded-2xl border-none absolute top-[10%]"
-            zIndex: 9999,
-            background: theme.palette.background.default,
-            color: theme.palette.text.primary,
-            borderRadius: '1rem',
-            border: 'none',
-            position: 'absolute',
-            top: '10%',
-          }}
         >
           <h1>Reset Game?</h1>
           <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>

src/Components/Views/StartMenu/StartMenu.tsx

@@ -1,6 +1,7 @@
 import { Button, FormControl, FormLabel, Switch } from '@mui/material';
 import Slider from '@mui/material/Slider';
 import { useEffect, useState } from 'react';
+import { twc } from 'react-twc';
 import { createInitialPlayers } from '../../../Data/getInitialPlayers';
 import { theme } from '../../../Data/theme';
 import { useAnalytics } from '../../../Hooks/useAnalytics';
@@ -14,14 +15,12 @@ import {
 } from '../../../Types/Settings';
 import { InfoModal } from '../../Misc/InfoModal';
 import { SettingsModal } from '../../Misc/SettingsModal';
-import { Spacer } from '../../Misc/Spacer';
 import { SupportMe } from '../../Misc/SupportMe';
 import { LayoutOptions } from './LayoutOptions';
-import { twc } from 'react-twc';
 
 const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`;
 
-const StartButtonFooter = twc.div`fixed bottom-4 -translate-y-1/2 z-1`;
+const StartButtonFooter = twc.div`fixed bottom-4 z-1`;
 
 const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`;
 
@@ -194,8 +193,7 @@ const Start = () => {
             });
           }}
         />
-        <Spacer height="0.7rem" />
+        <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
-        <FormLabel>Starting Health</FormLabel>
         <Slider
           title="Starting Health"
           max={60}
@@ -213,9 +211,8 @@ const Start = () => {
             })
           }
         />
-        <Spacer height="1rem" />
 
-        <ToggleButtonsWrapper>
+        <ToggleButtonsWrapper className="mt-4">
           <ToggleContainer>
             <FormLabel>Commander</FormLabel>
             <Switch

src/Data/theme.ts

@@ -2,6 +2,7 @@ import { createTheme } from '@mui/material';
 import resolveConfig from 'tailwindcss/resolveConfig';
 import tailwindConfig from '../../tailwind.config';
 
+//TODO Create provider for this
 const fullConfig = resolveConfig(tailwindConfig);
 
 const { primary, secondary, background, text, action, common } =

tailwind.config.ts

@@ -40,6 +40,7 @@ export default {
       colors: {
         primary: {
           main: '#7F9172',
+          dark: '#57654F',
         },
         secondary: {
           main: '#5E714C',
@@ -47,6 +48,7 @@ export default {
         background: {
           default: '#495E35',
           backdrop: 'rgba(0, 0, 0, 0.3)',
+          settings: 'rgba(20, 20, 0, 0.9)',
         },
         text: {
           primary: '#F5F5F5',

yarn.lock

@@ -275,7 +275,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@1.2.1", "@emotion/is-prop-valid@^1.2.1":
+"@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
@@ -329,11 +329,6 @@
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
     "@emotion/utils" "^1.2.1"
 
-"@emotion/unitless@0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
-  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
-
 "@emotion/unitless@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
@@ -1597,11 +1592,6 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
   integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
 
-"@types/stylis@4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
-  integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==
-
 "@types/triple-beam@^1.3.2":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/triple-beam/-/triple-beam-1.3.5.tgz#74fef9ffbaa198eb8b588be029f38b00299caa2c"
@@ -2230,11 +2220,6 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-camelize@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
-  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
-
 caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
   version "1.0.30001571"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz#4182e93d696ff42930f4af7eba515ddeb57917ac"
@@ -2647,11 +2632,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
-
 css-select@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
@@ -2663,15 +2643,6 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
-css-to-react-native@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
-  integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^4.0.2"
-
 css-tree@^2.2.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
@@ -2705,11 +2676,6 @@ csso@5.0.5:
   dependencies:
     css-tree "~2.2.0"
 
-csstype@3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
-
 csstype@^3.0.2, csstype@^3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -5071,7 +5037,7 @@ nan@^2.18.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.18.0.tgz#26a6faae7ffbeb293a39660e88a76b82e30b7554"
   integrity sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==
 
-nanoid@^3.3.6, nanoid@^3.3.7:
+nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -5480,20 +5446,11 @@ postcss-selector-parser@^6.0.11:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.32:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
@@ -6090,11 +6047,6 @@ setprototypeof@1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shallowequal@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -6310,31 +6262,11 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
-styled-components@^6.0.7:
-  version "6.1.6"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.6.tgz#c75c4f994136545b3bcc11608db5363710b78c0e"
-  integrity sha512-DgTLULSC29xpabJ24bbn1+hulU6vvGFQf4RPwBOJrm8WJFnN42yXpo5voBt3jDSJBa5tBd1L6PqswJjQ0wRKdg==
-  dependencies:
-    "@emotion/is-prop-valid" "1.2.1"
-    "@emotion/unitless" "0.8.0"
-    "@types/stylis" "4.2.0"
-    css-to-react-native "3.2.0"
-    csstype "3.1.2"
-    postcss "8.4.31"
-    shallowequal "1.1.0"
-    stylis "4.3.1"
-    tslib "2.5.0"
-
 stylis@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-stylis@4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
-  integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
-
 sucrase@^3.32.0:
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
@@ -6573,11 +6505,6 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
-  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
-
 tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"