Refactor TopBar to use styled components

Author: devklick

src/App.tsx

@@ -9,8 +9,9 @@ function App() {
     <div className="App">
       <Global
         styles={css`
-          background-color: ${settings.mainColor};
-          color: ${settings.fontColor};
+          body {
+            color: ${settings.fontColor};
+          }
         `}
       />
       <Desktop />

src/components/Desktop/Desktop.scss

@@ -1,36 +1,11 @@
-import styled from "@emotion/styled";
-
 import TopBar from "../TopBar";
 import Content from "../Content";
 import BottomBar from "../BottomBar";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
-interface DesktopProps {}
-
-const StyledDesktop = styled.div`
-  height: 100dvh;
-  width: 100dvw;
-  display: grid;
-  grid-template-rows: 42px auto 84px;
-  grid-template-columns: auto;
-  grid-template-areas:
-    "top-bar"
-    "content"
-    "bottom-bar";
-  gap: 10px;
-`;
+import { StyledBackground, StyledDesktop } from "./Styled.Desktop";
 
-const StyledBackground = styled.div<{ backgroundUrl: string }>`
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  grid-area: none;
-  z-index: -1;
-  background-image: url(${(props) => props.backgroundUrl});
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-`;
+interface DesktopProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function Desktop({}: DesktopProps) {

src/components/Desktop/Desktop.tsx

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+
+export const StyledDesktop = styled.div`
+  height: 100dvh;
+  width: 100dvw;
+  display: grid;
+  grid-template-rows: 42px auto 84px;
+  grid-template-columns: auto;
+  grid-template-areas:
+    "top-bar"
+    "content"
+    "bottom-bar";
+  gap: 10px;
+`;
+
+export const StyledBackground = styled.div<{ backgroundUrl: string }>`
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  grid-area: none;
+  z-index: -1;
+  background-image: url(${(props) => props.backgroundUrl});
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+`;

src/components/Desktop/Styled.Desktop.ts

@@ -1,43 +1,23 @@
-import { v4 as uuid } from "uuid";
-
 import useDateTime from "../../../hooks/useDateTime";
-import useWindowManagerStore from "../../../stores/windowManagerStore";
-import BorderedApp from "../../BorderedApp";
-
-import "./ClockMenu.scss";
 
-const windowType = "clock";
+import { StyledClockMenu, StyledTimeContainer } from "./Styled.ClockMenu";
 
 interface ClockMenuProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function ClockMenu({}: ClockMenuProps) {
-  const winMan = useWindowManagerStore();
   const dateTime = useDateTime({
     tickFrequency: 1,
     tickFrequencyUnit: "minute",
     template: "hh:mm",
   });
 
-  function handleClick() {
-    const id = uuid();
-    winMan.addWindow(windowType, id, {
-      component: BorderedApp,
-      props: {
-        title: "Calendar",
-        initialDimensions: { height: 500, width: 500 },
-        type: windowType,
-        id: id,
-      },
-      key: id,
-    });
-  }
   return (
-    <div id="clock-menu" onClick={() => handleClick()}>
-      <div id="clock-menu__time-container">
+    <StyledClockMenu id="clock-menu">
+      <StyledTimeContainer id="clock-menu__time-container">
         <span id="clock-menu__time">{dateTime.formatted}</span>
-      </div>
-    </div>
+      </StyledTimeContainer>
+    </StyledClockMenu>
   );
 }
 

src/components/TopBar/ClockMenu/Calendar/Calendar.scss

@@ -1,4 +1,6 @@
-#clock-menu {
+import styled from "@emotion/styled";
+
+export const StyledClockMenu = styled.div`
   grid-area: clock-menu;
   width: 100%;
   height: 100%;
@@ -12,9 +14,8 @@
     border-radius: 50px;
     transition: ease 0.2s;
   }
+`;
 
-  &__time-container {
-    padding: 0 10px;
-    cursor: default;
-  }
-}
+export const StyledTimeContainer = styled.div`
+  padding: 0 10px;
+`;