Merge pull request #5 from devklick/dev

Refactor 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,19 @@
-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`
+          body {
+            color: ${settings.fontColor};
+          }
+        `}
+      />
       <Desktop />
     </div>
   );

src/App.css

@@ -3,7 +3,7 @@ import { Rect } from "../../hooks/useDragToResize";
 import useDetectMouseDownOutside from "../../hooks/useDetectMouseDownOutside";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
-import "./AppPopup.scss";
+import { StyledContent, StyledPopup } from "./styles";
 
 interface AppPopupProps<Element extends HTMLElement> {
   appRef: React.RefObject<Element>;
@@ -44,21 +44,17 @@ function AppPopup<Element extends HTMLElement>({
   }
 
   return (
-    <div
-      className="app-popup"
+    <StyledPopup
+      {...rect}
       ref={thisRef}
-      style={{ ...rect }}
       onContextMenu={handleContextMenu}
       onClick={(e) => e.stopPropagation()}
       onDoubleClick={(e) => e.stopPropagation()}
     >
-      <div
-        className="app-popup__content"
-        style={{ backgroundColor: settings.mainColor }}
-      >
+      <StyledContent backgroundColor={settings.mainColor}>
         {children}
-      </div>
-    </div>
+      </StyledContent>
+    </StyledPopup>
   );
 }
 

src/App.tsx

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import { Rect } from "../../hooks/useDragToResize";
+
+export const StyledPopup = styled.div<Rect>`
+  backdrop-filter: brightness(80%);
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: ${(props) => props.top}px;
+  left: ${(props) => props.left}px;
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
+`;
+
+export const StyledContent = styled.div<{ backgroundColor: string }>`
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0 40px rgb(0, 0, 0, 0.5);
+  border-radius: 10px;
+  background-color: ${(props) => props.backgroundColor};
+`;

src/components/AppPopup/AppPopup.scss

@@ -1,4 +1,4 @@
-import "./AppSideBar.scss";
+import { StyledItem, StyledItemContainer, StyledSideBar } from "./styles";
 
 interface SideBarItem {
   title: string;
@@ -12,21 +12,15 @@ interface AppSideBarProps {
 
 function AppSideBar({ items }: AppSideBarProps) {
   return (
-    <div className="app-side-bar">
-      <div className="app-side-bar__items">
-        {items.map((item) => {
-          return (
-            <div
-              className={`app-side-bar__item ${item.isActive ? "active" : ""} `}
-              onClick={item.onClick}
-              key={item.title}
-            >
-              {item.title}
-            </div>
-          );
-        })}
-      </div>
-    </div>
+    <StyledSideBar>
+      <StyledItemContainer>
+        {items.map((item) => (
+          <StyledItem onClick={item.onClick} key={item.title}>
+            {item.title}
+          </StyledItem>
+        ))}
+      </StyledItemContainer>
+    </StyledSideBar>
   );
 }
 

src/components/AppPopup/AppPopup.tsx

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+
+export const StyledSideBar = styled.div`
+  grid-area: side-bar;
+  width: 100%;
+  height: 100%;
+`;
+
+export const StyledItemContainer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+export const StyledItem = styled.div`
+  border-radius: 10px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  box-shadow: 2px 2px 4px rgb(0, 0, 0, 0);
+  &:hover {
+    backdrop-filter: brightness(150%);
+    transition: ease-in 0.2s;
+  }
+  &:active {
+    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
+  }
+`;