Refactor Desktop to use styled components

Author: devklick

package-lock.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/pako": "^2.0.1",
     "@types/uuid": "^9.0.4",
     "base64-js": "^1.5.1",

package.json

@@ -1,10 +1,18 @@
-import Desktop from "./components/Desktop";
+import { Global, css } from "@emotion/react";
 
-import "./App.css";
+import Desktop from "./components/Desktop";
+import useSystemSettings from "./stores/systemSettingsStore";
 
 function App() {
+  const settings = useSystemSettings();
   return (
     <div className="App">
+      <Global
+        styles={css`
+          background-color: ${settings.mainColor};
+          color: ${settings.fontColor};
+        `}
+      />
       <Desktop />
     </div>
   );

src/App.css

@@ -1,6 +1,6 @@
 import { useRef } from "react";
-import MenuItems, { MenuItemProps } from "../components/MenuItems";
-import useDetectMouseDownOutside from "../hooks/useDetectMouseDownOutside";
+import MenuItems, { MenuItemProps } from "../MenuItems";
+import useDetectMouseDownOutside from "../../hooks/useDetectMouseDownOutside";
 
 import "./ContextMenu.scss";
 

src/App.tsx

@@ -1,27 +1,47 @@
+import styled from "@emotion/styled";
+
 import TopBar from "../TopBar";
 import Content from "../Content";
 import BottomBar from "../BottomBar";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
-import "./Desktop.scss";
-
 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;
+`;
+
+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;
+`;
+
 // eslint-disable-next-line no-empty-pattern
 function Desktop({}: DesktopProps) {
   const settings = useSystemSettings();
   return (
-    <div id="desktop" style={{ color: settings.fontColor }}>
-      <div
-        id="desktop__background"
-        style={{
-          backgroundImage: `url(${settings.background})`,
-        }}
-      />
+    <StyledDesktop id="desktop">
+      <StyledBackground id="background" backgroundUrl={settings.background} />
       <TopBar />
       <Content />
       <BottomBar />
-    </div>
+    </StyledDesktop>
   );
 }
 

src/ContextMenu/ContextMenu.scss …/components/ContextMenu/ContextMenu.scsssrc/ContextMenu/ContextMenu.scss renamed to src/components/ContextMenu/ContextMenu.scss src/ContextMenu/ContextMenu.scss renamed to src/components/ContextMenu/ContextMenu.scss

@@ -5,7 +5,7 @@ import useLocalFS, {
   isFSDirectory,
 } from "../../../stores/localFS";
 import "./DirectoryOrFile.scss";
-import ContextMenu from "../../../ContextMenu/ContextMenu";
+import ContextMenu from "../../../components/ContextMenu/ContextMenu";
 import { ContextMenuAction, getFSObjectContextMenu } from "../contextMenus";
 import { ReactComponent as FolderIcon } from "../../../assets/icons/folder-icon.svg";
 import useBindKeyToAction from "../../../hooks/useBindKeyToAction";

src/ContextMenu/ContextMenu.tsx …c/components/ContextMenu/ContextMenu.tsxsrc/ContextMenu/ContextMenu.tsx renamed to src/components/ContextMenu/ContextMenu.tsx src/ContextMenu/ContextMenu.tsx renamed to src/components/ContextMenu/ContextMenu.tsx

@@ -7,7 +7,7 @@ import useLocalFS, {
 import "./MainContent.scss";
 import { getMainContentContextItems } from "../contextMenus";
 import AppPopup from "../../../components/AppPopup";
-import ContextMenu from "../../../ContextMenu/ContextMenu";
+import ContextMenu from "../../../components/ContextMenu/ContextMenu";
 import DirectoryOrFile from "../DirectoryOrFile/DirectoryOrFile";
 import HeaderBar from "../../../components/HeaderBar";
 import Box from "../../../components/Box";