Refactor Content to use styled components

Author: devklick

src/components/Content/Content.scss

@@ -1,6 +1,6 @@
 import useWindowManagerStore from "../../stores/windowManagerStore";
 
-import "./Content.scss";
+import { StyledContainer, StyledContent } from "./Styled.Content";
 
 interface ContentProps {}
 
@@ -9,17 +9,17 @@ function Content({}: ContentProps) {
   const winMan = useWindowManagerStore();
 
   return (
-    <div id="content__container">
-      <div id="content" ref={winMan.contentRef}>
+    <StyledContainer id="content__container">
+      <StyledContent id="content" ref={winMan.contentRef}>
         {winMan.getWindowDefinitions().map((definition) => {
           return (
             <definition.component {...definition.props} key={definition.key}>
               {definition.children}
             </definition.component>
           );
         })}
-      </div>
-    </div>
+      </StyledContent>
+    </StyledContainer>
   );
 }
 

src/components/Content/Content.tsx

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+
+export const StyledContainer = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0 10px;
+`;
+
+export const StyledContent = styled.div`
+  border-radius: 15px;
+  width: 100%;
+  height: 100%;
+`;