Refactor Settings, TextEditor, WebBrowser to use styled components

Author: devklick

src/programs/Settings/Settings.scss

@@ -4,7 +4,15 @@ import AppSideBar from "../../components/AppSideBar";
 import { getPages } from "./settingsPageConfig";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
-import "./Settings.scss";
+import {
+  StyledPage,
+  StyledSection,
+  StyledSectionDescription,
+  StyledSectionTitle,
+  StyledSectionValue,
+  StyledSections,
+  StyledSettings,
+} from "./styles";
 
 interface SettingsSectionProps {
   title: string;
@@ -55,18 +63,15 @@ function SettingsSection(section: SettingsSectionProps) {
   }
 
   return (
-    <div className="settings__page-section">
-      <h1 className="settings__page-section__title">{section.title}</h1>
-      <p className="settings__page-section__description">
-        {section.description}
-      </p>
-      <input
-        className="settings__page-section__value"
+    <StyledSection>
+      <StyledSectionTitle>{section.title}</StyledSectionTitle>
+      <StyledSectionDescription>{section.description}</StyledSectionDescription>
+      <StyledSectionValue
         type={getInputType(section.type)}
         value={String(value)}
         onChange={handleChange}
-      ></input>
-    </div>
+      ></StyledSectionValue>
+    </StyledSection>
   );
 }
 
@@ -77,13 +82,13 @@ export interface SettingsPageProps {
 
 function SettingsPage({ sections }: SettingsPageProps) {
   return (
-    <div className="settings__page">
-      <div className="settings__page-sections">
+    <StyledPage>
+      <StyledSections>
         {sections.map((section) => (
           <SettingsSection {...section} key={section.title} />
         ))}
-      </div>
-    </div>
+      </StyledSections>
+    </StyledPage>
   );
 }
 
@@ -95,25 +100,19 @@ function Settings({}: SettingsProps) {
   const pages = getPages(systemSettings);
   const [currentPage, setCurrentPage] = useState<string>(Object.keys(pages)[0]);
 
-  function getAppBar() {
-    return (
-      <AppSideBar
-        items={Object.entries<SettingsPageProps>(pages).map(([type, page]) => {
-          return {
-            title: page.name,
-            isActive: currentPage === type,
-            onClick: () => setCurrentPage(type),
-          };
-        })}
-      />
-    );
+  function getItems(): Parameters<typeof AppSideBar>[0]["items"] {
+    return Object.entries<SettingsPageProps>(pages).map(([type, page]) => ({
+      title: page.name,
+      isActive: currentPage === type,
+      onClick: () => setCurrentPage(type),
+    }));
   }
 
   return (
-    <div className="settings">
-      {getAppBar()}
+    <StyledSettings>
+      <AppSideBar items={getItems()} />
       <SettingsPage {...pages[currentPage]} />
-    </div>
+    </StyledSettings>
   );
 }
 

src/programs/Settings/Settings.tsx

@@ -1,6 +1,5 @@
 import Settings from "..";
 import Launcher from "../../../components/BottomBar/Launcher";
-import "./SettingsLauncher.scss";
 
 interface SettingsLauncherProps {}
 

src/programs/Settings/SettingsLauncher/SettingsLauncher.scss

@@ -0,0 +1,38 @@
+import styled from "@emotion/styled";
+
+export const StyledSettings = styled.div`
+  display: grid;
+  grid-template-columns: 150px auto;
+  grid-template-areas: "side-bar main-content";
+  width: 100%;
+  height: 100%;
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  border-radius: 10px;
+`;
+
+export const StyledPage = styled.div`
+  overflow: auto;
+`;
+
+export const StyledSections = styled.div`
+  margin: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  &:last-of-type ~ hr {
+    display: none;
+  }
+`;
+
+export const StyledSection = styled.div``;
+
+export const StyledSectionTitle = styled.h1`
+  margin: 0;
+  font-size: 18px;
+`;
+
+export const StyledSectionDescription = styled.p``;
+
+export const StyledSectionValue = styled.input`
+  width: 100%;
+`;

src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx

@@ -1,13 +1,13 @@
-import "./TextEditor.scss";
+import { StyledTextArea, StyledTextEditor } from "./styles";
 
 interface TextEditorProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function TextEditor({}: TextEditorProps) {
   return (
-    <div className="text-editor">
-      <textarea className="text-editor__text-area" />
-    </div>
+    <StyledTextEditor>
+      <StyledTextArea />
+    </StyledTextEditor>
   );
 }
 

src/programs/Settings/styles.ts

@@ -1,7 +1,6 @@
 import TextEditor from "..";
 import Launcher from "../../../components/BottomBar/Launcher";
 import { MenuItemProps } from "../../../components/MenuItems";
-import "./TextEditorLauncher.scss";
 import icon from "./text-editor-launcher-icon.svg";
 
 const windowType = "text-editor";

src/programs/TextEditor/TextEditor.scss

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+
+export const StyledTextEditor = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+export const StyledTextArea = styled.textarea`
+  width: 100%;
+  height: 100%;
+  border: none;
+  resize: none;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  color: white;
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  border-radius: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: none;
+  }
+`;