Refactor BottomBar to use styled components

Author: devklick

src/components/BottomBar/BottomBar.scss

@@ -5,25 +5,29 @@ import TextEditorLauncher from "../../programs/TextEditor/TextEditorLauncher";
 import WebBrowserLauncher from "../../programs/WebBrowser/WebBrowserLauncher";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
-import "./BottomBar.scss";
+import {
+  StyledBottomBar,
+  StyledContainer,
+  StyledContents,
+} from "./Styled.BottomBar";
 
 interface BottomBarProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function BottomBar({}: BottomBarProps) {
   const settings = useSystemSettings();
   return (
-    <div id="bottom-bar__container">
-      <div id="bottom-bar" style={{ backgroundColor: settings.mainColor }}>
-        <div id="bottom-bar__contents">
+    <StyledContainer id="bottom-bar__container">
+      <StyledBottomBar id="bottom-bar" backgroundColor={settings.mainColor}>
+        <StyledContents id="bottom-bar__contents">
           <TextEditorLauncher />
           <CalculatorLauncher />
           <WebBrowserLauncher />
           <FileBrowserLauncher />
           <SettingsLauncher />
-        </div>
-      </div>
-    </div>
+        </StyledContents>
+      </StyledBottomBar>
+    </StyledContainer>
   );
 }
 

src/components/BottomBar/BottomBar.tsx

@@ -7,7 +7,7 @@ import BorderedApp from "../../BorderedApp";
 import { Dimensions } from "../../../hooks/useDragToResize";
 import { MenuItemProps } from "../../MenuItems";
 
-import "./Launcher.scss";
+import { StyledIcon, StyledLauncher } from "./Styled.Launcher";
 interface LauncherProps {
   windowType: string;
   WindowTitle: string;
@@ -77,9 +77,13 @@ function Launcher({
   });
 
   return (
-    <div ref={ref} tabIndex={1} className="launcher">
-      <img src={icon} className="launcher-icon" alt={windowType}></img>
-    </div>
+    <StyledLauncher ref={ref} tabIndex={1} className="launcher">
+      <StyledIcon
+        src={icon}
+        className="launcher-icon"
+        alt={windowType}
+      ></StyledIcon>
+    </StyledLauncher>
   );
 }
 

src/components/BottomBar/Launcher/Launcher.tsx

@@ -1,4 +1,6 @@
-.launcher {
+import styled from "@emotion/styled";
+
+export const StyledLauncher = styled.div`
   min-width: 0;
   height: 100% !important;
   aspect-ratio: 1/1;
@@ -11,17 +13,16 @@
   justify-content: center;
   vertical-align: middle;
   box-shadow: 0px -2px 10px 1px rgb(0, 0, 0, 0.5);
-
-  &-icon {
-    width: 100%;
-    height: 100%;
-  }
-
   transform: scale(1);
   transition: all 0.2s ease;
   &:hover {
     box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.5);
     transform: scale(1.3);
     transition: all 0.2s ease;
   }
-}
+`;
+
+export const StyledIcon = styled.img`
+  width: 100%;
+  height: 100%;
+`;

…ponents/BottomBar/Launcher/Launcher.scss …ts/BottomBar/Launcher/Styled.Launcher.tssrc/components/BottomBar/Launcher/Launcher.scss renamed to src/components/BottomBar/Launcher/Styled.Launcher.ts src/components/BottomBar/Launcher/Launcher.scss renamed to src/components/BottomBar/Launcher/Styled.Launcher.ts

@@ -0,0 +1,38 @@
+import styled from "@emotion/styled";
+
+export const StyledContainer = styled.div`
+  min-height: 0;
+  min-width: 0;
+  grid-area: bottom-bar;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  padding-top: 0;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const StyledBottomBar = styled.div<{ backgroundColor: string }>`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  background-color: var(--ui-color-primary);
+  border-radius: 50px;
+  background-color: #2e3440;
+  box-shadow: 0 -2px 10px 1px #11172b, 0 -2px 3px #bebebe inset;
+  background-color: ${(props) => props.backgroundColor};
+`;
+
+export const StyledContents = styled.div`
+  padding: 10px 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+`;