Refactor AppPopup to use styled components

Author: devklick

src/components/AppPopup/AppPopup.scss

@@ -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 "./Styled.AppPopup";
 
 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/components/AppPopup/AppPopup.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};
+`;