From 6992787bcdc753123ec9012129a6d8236eace2a8 Mon Sep 17 00:00:00 2001
From: devklick <devklick@gmail.com>
Date: Sat, 21 Oct 2023 20:38:21 +0100
Subject: [PATCH 1/3] Refactor Calculator to use styled components

---
 src/programs/Calculator/Calculator.scss       | 73 ------------------
 src/programs/Calculator/Calculator.tsx        | 37 ++++++----
 .../CalculatorLauncher.scss                   |  0
 .../CalculatorLauncher/CalculatorLauncher.tsx |  1 -
 src/programs/Calculator/styles.ts             | 74 +++++++++++++++++++
 5 files changed, 95 insertions(+), 90 deletions(-)
 delete mode 100644 src/programs/Calculator/Calculator.scss
 delete mode 100644 src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.scss
 create mode 100644 src/programs/Calculator/styles.ts

diff --git a/src/programs/Calculator/Calculator.scss b/src/programs/Calculator/Calculator.scss
deleted file mode 100644
index 5b30603..0000000
--- a/src/programs/Calculator/Calculator.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.calculator {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-rows: 1fr 1fr 3fr;
-  grid-template-areas:
-    "input"
-    "output"
-    "buttons";
-  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
-  padding: 10px;
-  border-radius: 10px;
-  box-sizing: border-box;
-  gap: 10px;
-
-  &__input,
-  &__output {
-    box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 20px;
-    box-sizing: border-box;
-    &-contents {
-      text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
-    }
-  }
-  &__input {
-    grid-area: input;
-  }
-  &__output {
-    grid-area: output;
-  }
-
-  &__buttons {
-    min-height: 0;
-    grid-area: buttons;
-    width: 100%;
-    height: 100%;
-    justify-self: center;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
-    box-sizing: border-box;
-  }
-
-  &__button {
-    text-align: center;
-    cursor: default;
-    border-radius: 20px;
-    justify-self: center;
-    width: 80%;
-    height: 80%;
-    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-      backdrop-filter: brightness(150%);
-      transition: ease-in 0.2s;
-    }
-    &:active {
-      box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
-    }
-
-    &-contents {
-    }
-  }
-}
diff --git a/src/programs/Calculator/Calculator.tsx b/src/programs/Calculator/Calculator.tsx
index 3e6afdb..413339b 100644
--- a/src/programs/Calculator/Calculator.tsx
+++ b/src/programs/Calculator/Calculator.tsx
@@ -1,6 +1,13 @@
 import { useEffect, useState } from "react";
 
-import "./Calculator.scss";
+import {
+  StyledButton,
+  StyledButtonContent,
+  StyledButtons,
+  StyledCalc,
+  StyledInputOutput,
+  StyledInputOutputContents,
+} from "./styles";
 
 interface CalculatorProps {}
 
@@ -55,24 +62,22 @@ function Calculator({}: CalculatorProps) {
     }
 
     return (
-      <div className="calculator__button normal" onClick={handleClick}>
-        <span className="calculator_button-contents">{displayChar}</span>
-      </div>
+      <StyledButton onClick={handleClick}>
+        <StyledButtonContent>{displayChar}</StyledButtonContent>
+      </StyledButton>
     );
   }
 
   return (
-    <div className="calculator">
-      <div className="calculator__input">
-        <div className="calculator__input-contents">{input}</div>
-      </div>
-      <div className="calculator__output">
-        <div className="calculator__output-contents">{output}</div>
-      </div>
-      <div className="calculator__buttons">
+    <StyledCalc>
+      <StyledInputOutput direction="input">
+        <StyledInputOutputContents>{input}</StyledInputOutputContents>
+      </StyledInputOutput>
+      <StyledInputOutput direction="output">
+        <StyledInputOutputContents>{output}</StyledInputOutputContents>
+      </StyledInputOutput>
+      <StyledButtons>
         <Button mathematicalChar={"AC"} action="clear" />
-        {/* <Button mathematicalChar={8} action="append-to-end" />
-        <Button mathematicalChar={'%'} action="append-to-end" /> */}
         <div />
         <div />
         <Button mathematicalChar="/" displayChar="÷" action="append-to-end" />
@@ -93,8 +98,8 @@ function Calculator({}: CalculatorProps) {
         <Button mathematicalChar="." action="append-to-end" />
         <Button mathematicalChar="←" action="remove-from-end" />
         <Button mathematicalChar="=" action="evaluate" />
-      </div>
-    </div>
+      </StyledButtons>
+    </StyledCalc>
   );
 }
 
diff --git a/src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.scss b/src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.tsx b/src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.tsx
index 48ce15c..6b322f6 100644
--- a/src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.tsx
+++ b/src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.tsx
@@ -1,6 +1,5 @@
 import Calculator from "..";
 import Launcher from "../../../components/BottomBar/Launcher";
-import "./CalculatorLauncher.scss";
 
 interface CalculatorLauncherProps {}
 
diff --git a/src/programs/Calculator/styles.ts b/src/programs/Calculator/styles.ts
new file mode 100644
index 0000000..889dc89
--- /dev/null
+++ b/src/programs/Calculator/styles.ts
@@ -0,0 +1,74 @@
+import styled from "@emotion/styled";
+
+export const StyledCalc = styled.div`
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr 1fr 3fr;
+  grid-template-areas:
+    "input"
+    "output"
+    "buttons";
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  padding: 10px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  gap: 10px;
+`;
+
+export const StyledInputOutput = styled.div<{
+  direction: "input" | "output";
+}>`
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+  grid-area: ${(props) => props.direction};
+`;
+
+export const StyledInputOutputContents = styled.div`
+  text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
+`;
+
+export const StyledButtons = styled.div`
+  min-height: 0;
+  grid-area: buttons;
+  width: 100%;
+  height: 100%;
+  justify-self: center;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  box-sizing: border-box;
+`;
+
+export const StyledButton = styled.button`
+  text-align: center;
+  cursor: default;
+  border-radius: 20px;
+  justify-self: center;
+  width: 80%;
+  height: 80%;
+  box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: inherit;
+  color: inherit;
+  border-width: 1px;
+
+  &:hover {
+    backdrop-filter: brightness(150%);
+    transition: ease-in 0.2s;
+  }
+  &:active {
+    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
+  }
+`;
+
+export const StyledButtonContent = styled.span``;

From 1c4c8a5ba90561a7be34749137613949df5b38ed Mon Sep 17 00:00:00 2001
From: devklick <devklick@gmail.com>
Date: Sat, 21 Oct 2023 20:52:32 +0100
Subject: [PATCH 2/3] Refactor Settings, TextEditor, WebBrowser to use styled
 components

---
 src/programs/Settings/Settings.scss           | 34 -----------
 src/programs/Settings/Settings.tsx            | 57 +++++++++----------
 .../SettingsLauncher/SettingsLauncher.scss    |  0
 .../SettingsLauncher/SettingsLauncher.tsx     |  1 -
 src/programs/Settings/styles.ts               | 38 +++++++++++++
 src/programs/TextEditor/TextEditor.scss       | 25 --------
 src/programs/TextEditor/TextEditor.tsx        |  8 +--
 .../TextEditorLauncher.scss                   |  0
 .../TextEditorLauncher/TextEditorLauncher.tsx |  1 -
 src/programs/TextEditor/styles.ts             | 25 ++++++++
 src/programs/WebBrowser/WebBrowser.scss       | 11 ----
 src/programs/WebBrowser/WebBrowser.tsx        | 12 ++--
 .../WebBrowserLauncher.scss                   |  0
 .../WebBrowserLauncher/WebBrowserLauncher.tsx |  1 -
 .../WebBrowser/{indext.ts => index.ts}        |  0
 src/programs/WebBrowser/styles.ts             | 13 +++++
 16 files changed, 112 insertions(+), 114 deletions(-)
 delete mode 100644 src/programs/Settings/Settings.scss
 delete mode 100644 src/programs/Settings/SettingsLauncher/SettingsLauncher.scss
 create mode 100644 src/programs/Settings/styles.ts
 delete mode 100644 src/programs/TextEditor/TextEditor.scss
 delete mode 100644 src/programs/TextEditor/TextEditorLauncher/TextEditorLauncher.scss
 create mode 100644 src/programs/TextEditor/styles.ts
 delete mode 100644 src/programs/WebBrowser/WebBrowser.scss
 delete mode 100644 src/programs/WebBrowser/WebBrowserLauncher/WebBrowserLauncher.scss
 rename src/programs/WebBrowser/{indext.ts => index.ts} (100%)
 create mode 100644 src/programs/WebBrowser/styles.ts

diff --git a/src/programs/Settings/Settings.scss b/src/programs/Settings/Settings.scss
deleted file mode 100644
index a55a303..0000000
--- a/src/programs/Settings/Settings.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.settings {
-  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;
-
-  &__page {
-    overflow: auto;
-
-    &-sections {
-      margin: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      &:last-of-type ~ hr {
-        display: none;
-      }
-    }
-
-    &-section {
-      h1 {
-        margin: 0;
-        font-size: 18px;
-      }
-
-      &__value {
-        width: 100%;
-      }
-    }
-  }
-}
diff --git a/src/programs/Settings/Settings.tsx b/src/programs/Settings/Settings.tsx
index 2b83cf5..10c56d4 100644
--- a/src/programs/Settings/Settings.tsx
+++ b/src/programs/Settings/Settings.tsx
@@ -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>
   );
 }
 
diff --git a/src/programs/Settings/SettingsLauncher/SettingsLauncher.scss b/src/programs/Settings/SettingsLauncher/SettingsLauncher.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx b/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx
index 054a9f2..0926fe6 100644
--- a/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx
+++ b/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx
@@ -1,6 +1,5 @@
 import Settings from "..";
 import Launcher from "../../../components/BottomBar/Launcher";
-import "./SettingsLauncher.scss";
 
 interface SettingsLauncherProps {}
 
diff --git a/src/programs/Settings/styles.ts b/src/programs/Settings/styles.ts
new file mode 100644
index 0000000..b1dbea3
--- /dev/null
+++ b/src/programs/Settings/styles.ts
@@ -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%;
+`;
diff --git a/src/programs/TextEditor/TextEditor.scss b/src/programs/TextEditor/TextEditor.scss
deleted file mode 100644
index 12721f7..0000000
--- a/src/programs/TextEditor/TextEditor.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.text-editor {
-  height: 100%;
-  width: 100%;
-
-  &__text-area {
-    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;
-    }
-  }
-
-  transform: translate();
-}
diff --git a/src/programs/TextEditor/TextEditor.tsx b/src/programs/TextEditor/TextEditor.tsx
index 696e822..b40e653 100644
--- a/src/programs/TextEditor/TextEditor.tsx
+++ b/src/programs/TextEditor/TextEditor.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>
   );
 }
 
diff --git a/src/programs/TextEditor/TextEditorLauncher/TextEditorLauncher.scss b/src/programs/TextEditor/TextEditorLauncher/TextEditorLauncher.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/programs/TextEditor/TextEditorLauncher/TextEditorLauncher.tsx b/src/programs/TextEditor/TextEditorLauncher/TextEditorLauncher.tsx
index 0bf914c..1afb163 100644
--- a/src/programs/TextEditor/TextEditorLauncher/TextEditorLauncher.tsx
+++ b/src/programs/TextEditor/TextEditorLauncher/TextEditorLauncher.tsx
@@ -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";
diff --git a/src/programs/TextEditor/styles.ts b/src/programs/TextEditor/styles.ts
new file mode 100644
index 0000000..aac57f3
--- /dev/null
+++ b/src/programs/TextEditor/styles.ts
@@ -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;
+  }
+`;
diff --git a/src/programs/WebBrowser/WebBrowser.scss b/src/programs/WebBrowser/WebBrowser.scss
deleted file mode 100644
index 1cd7cc0..0000000
--- a/src/programs/WebBrowser/WebBrowser.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.web-browser {
-  width: 100%;
-  height: 100%;
-  background-color: white;
-
-  &__contents {
-    width: 100%;
-    height: 100%;
-    border: none;
-  }
-}
diff --git a/src/programs/WebBrowser/WebBrowser.tsx b/src/programs/WebBrowser/WebBrowser.tsx
index 8b99073..3d4392b 100644
--- a/src/programs/WebBrowser/WebBrowser.tsx
+++ b/src/programs/WebBrowser/WebBrowser.tsx
@@ -1,17 +1,13 @@
-import "./WebBrowser.scss";
+import { StyledContents, StyledWebBrowser } from "./styles";
 
 interface WebBrowserProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function WebBrowser({}: WebBrowserProps) {
   return (
-    <div className="web-browser">
-      <iframe
-        className="web-browser__contents"
-        src="http://google.com"
-        // referrerPolicy="no-referrer"
-      ></iframe>
-    </div>
+    <StyledWebBrowser>
+      <StyledContents src="http://google.com" />
+    </StyledWebBrowser>
   );
 }
 
diff --git a/src/programs/WebBrowser/WebBrowserLauncher/WebBrowserLauncher.scss b/src/programs/WebBrowser/WebBrowserLauncher/WebBrowserLauncher.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/programs/WebBrowser/WebBrowserLauncher/WebBrowserLauncher.tsx b/src/programs/WebBrowser/WebBrowserLauncher/WebBrowserLauncher.tsx
index b96a16e..68c3d5c 100644
--- a/src/programs/WebBrowser/WebBrowserLauncher/WebBrowserLauncher.tsx
+++ b/src/programs/WebBrowser/WebBrowserLauncher/WebBrowserLauncher.tsx
@@ -1,6 +1,5 @@
 import Launcher from "../../../components/BottomBar/Launcher";
 import WebBrowser from "../WebBrowser";
-import "./WebBrowserLauncher.scss";
 
 interface WebBrowserLauncherProps {}
 
diff --git a/src/programs/WebBrowser/indext.ts b/src/programs/WebBrowser/index.ts
similarity index 100%
rename from src/programs/WebBrowser/indext.ts
rename to src/programs/WebBrowser/index.ts
diff --git a/src/programs/WebBrowser/styles.ts b/src/programs/WebBrowser/styles.ts
new file mode 100644
index 0000000..d4d4cd1
--- /dev/null
+++ b/src/programs/WebBrowser/styles.ts
@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+
+export const StyledWebBrowser = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: white;
+`;
+
+export const StyledContents = styled.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+`;

From 16de3ea3a5fc5e5d1893620a2ab0abe4512f9853 Mon Sep 17 00:00:00 2001
From: devklick <devklick@gmail.com>
Date: Sat, 21 Oct 2023 21:07:03 +0100
Subject: [PATCH 3/3] Refactor FileBrowser to use styled components

---
 .../DirectoryOrFile/DirectoryOrFile.scss      |  0
 .../DirectoryOrFile/DirectoryOrFile.tsx       | 18 ++--
 .../FileBrowser/DirectoryOrFile/index.ts      |  3 +
 .../FileBrowser/DirectoryOrFile/styles.ts     | 28 ++++++
 src/programs/FileBrowser/FileBrowser.scss     | 91 -------------------
 src/programs/FileBrowser/FileBrowser.tsx      | 40 ++++----
 .../FileBrowserLauncher.scss                  |  0
 .../FileBrowserLauncher.tsx                   |  1 -
 .../FileBrowser/MainContent/MainContent.scss  | 37 --------
 .../FileBrowser/MainContent/MainContent.tsx   | 11 +--
 .../FileBrowser/MainContent/styles.ts         | 14 +++
 src/programs/FileBrowser/styles.ts            | 70 ++++++++++++++
 .../SettingsLauncher/SettingsLauncher.tsx     |  1 -
 13 files changed, 144 insertions(+), 170 deletions(-)
 delete mode 100644 src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.scss
 create mode 100644 src/programs/FileBrowser/DirectoryOrFile/index.ts
 create mode 100644 src/programs/FileBrowser/DirectoryOrFile/styles.ts
 delete mode 100644 src/programs/FileBrowser/FileBrowser.scss
 delete mode 100644 src/programs/FileBrowser/FileBrowserLauncher/FileBrowserLauncher.scss
 delete mode 100644 src/programs/FileBrowser/MainContent/MainContent.scss
 create mode 100644 src/programs/FileBrowser/MainContent/styles.ts
 create mode 100644 src/programs/FileBrowser/styles.ts

diff --git a/src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.scss b/src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx b/src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx
index f9ee048..e4d1120 100644
--- a/src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx
+++ b/src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx
@@ -4,10 +4,9 @@ import useLocalFS, {
   FSObject,
   isFSDirectory,
 } from "../../../stores/localFS";
-import "./DirectoryOrFile.scss";
 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";
 import AppPopup from "../../../components/AppPopup";
 import HeaderBar from "../../../components/HeaderBar";
@@ -15,6 +14,7 @@ import Box from "../../../components/Box";
 import InputField from "../../../components/InputField";
 import Row from "../../../components/Row";
 import Button from "../../../components/Button";
+import { StyledFolderIcon, StyledItem, StyledItemName } from "./styles";
 
 interface DirectoryOrFileProps {
   fsObject: FSObject;
@@ -47,8 +47,8 @@ function DirectoryOrFile({
   }
 
   return (
-    <div
-      className={`file-browser__main-content__item ${selected ? "active" : ""}`}
+    <StyledItem
+      selected={selected}
       onDoubleClick={() => openFSObject(fsObject)}
       onClick={() => setSelected(fsObject.path)}
       key={fsObject.path}
@@ -81,13 +81,9 @@ function DirectoryOrFile({
           fsObject={fsObject}
         />
       )}
-      {isFSDirectory(fsObject) ? (
-        <FolderIcon className="file-browser__main-content__item-icon" />
-      ) : null}
-      <span className="file-browser__main-content__item-name">
-        {fsObject.name}
-      </span>
-    </div>
+      {isFSDirectory(fsObject) ? <StyledFolderIcon /> : null}
+      <StyledItemName>{fsObject.name}</StyledItemName>
+    </StyledItem>
   );
 }
 
diff --git a/src/programs/FileBrowser/DirectoryOrFile/index.ts b/src/programs/FileBrowser/DirectoryOrFile/index.ts
new file mode 100644
index 0000000..3a84832
--- /dev/null
+++ b/src/programs/FileBrowser/DirectoryOrFile/index.ts
@@ -0,0 +1,3 @@
+import DirectoryOrFile from "./DirectoryOrFile";
+
+export default DirectoryOrFile;
diff --git a/src/programs/FileBrowser/DirectoryOrFile/styles.ts b/src/programs/FileBrowser/DirectoryOrFile/styles.ts
new file mode 100644
index 0000000..8436527
--- /dev/null
+++ b/src/programs/FileBrowser/DirectoryOrFile/styles.ts
@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+import { ReactComponent as FolderIcon } from "../../../assets/icons/folder-icon.svg";
+
+export const StyledItem = styled.div<{ selected: boolean }>`
+  width: 100%;
+  padding: 10px;
+  overflow-wrap: break-word;
+  word-break: normal;
+  box-sizing: border-box;
+  aspect-ratio: 1/1;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  border-radius: 10px;
+`;
+
+export const StyledItemName = styled.span``;
+
+export const StyledFolderIcon = styled(FolderIcon)`
+  height: 80%;
+  width: 80%;
+  path {
+    fill: white;
+  }
+`;
diff --git a/src/programs/FileBrowser/FileBrowser.scss b/src/programs/FileBrowser/FileBrowser.scss
deleted file mode 100644
index 77f8508..0000000
--- a/src/programs/FileBrowser/FileBrowser.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.file-browser {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: 150px auto;
-  grid-template-rows: 50px auto 25px;
-  grid-template-areas:
-    "top-bar top-bar"
-    "side-bar main-content"
-    "side-bar bottom-bar";
-
-  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
-  border-radius: 10px;
-
-  &__top-bar {
-    grid-area: top-bar;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    gap: 10px;
-    padding: 10px;
-    align-items: center;
-
-    &__button-nav {
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-      &__left,
-      &__right {
-        width: 50px;
-        text-align: center;
-        box-sizing: border-box;
-        border-radius: 20px;
-        box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
-        &:hover {
-          backdrop-filter: brightness(150%);
-          transition: ease-in 0.2s;
-        }
-        &:active {
-          box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
-        }
-      }
-    }
-
-    &__path-nav {
-      height: 30px;
-      width: 100%;
-      padding: 5px 10px;
-      border-radius: 50px;
-      border: none;
-      box-sizing: border-box;
-
-      &:focus-visible {
-        outline: none;
-      }
-    }
-  }
-
-  &__side-bar {
-    grid-area: side-bar;
-    width: 100%;
-    height: 100%;
-    &__favorites {
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    &__favorite {
-      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;
-      }
-    }
-  }
-  &__bottom-bar {
-    grid-area: bottom-bar;
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/src/programs/FileBrowser/FileBrowser.tsx b/src/programs/FileBrowser/FileBrowser.tsx
index b1b626e..e47afe2 100644
--- a/src/programs/FileBrowser/FileBrowser.tsx
+++ b/src/programs/FileBrowser/FileBrowser.tsx
@@ -4,7 +4,14 @@ import useLocalFSWithHistory from "../../hooks/useLocalFSWithHistory";
 import AppSideBar from "../../components/AppSideBar";
 import MainContent from "./MainContent";
 
-import "./FileBrowser.scss";
+import {
+  StyledBottomBar,
+  StyledFileBrowser,
+  StyledTopBar,
+  StyledTopBarButton,
+  StyledTopBarButtons,
+  StyledTopBarPath,
+} from "./styles";
 
 const defaultPath = "/home/user";
 
@@ -27,28 +34,17 @@ function TopBar({
   navBack,
 }: TopBarProps) {
   return (
-    <div className="file-browser__top-bar">
-      <div className="file-browser__top-bar__button-nav">
-        <div
-          className="file-browser__top-bar__button-nav__left"
-          onClick={navBack}
-        >
-          ←
-        </div>
-        <div
-          className="file-browser__top-bar__button-nav__right"
-          onClick={navForward}
-        >
-          →
-        </div>
-      </div>
-      <input
-        className="file-browser__top-bar__path-nav"
+    <StyledTopBar>
+      <StyledTopBarButtons>
+        <StyledTopBarButton onClick={navBack}>←</StyledTopBarButton>
+        <StyledTopBarButton onClick={navForward}>→</StyledTopBarButton>
+      </StyledTopBarButtons>
+      <StyledTopBarPath
         value={pathSearch}
         onChange={onPathInputChange}
         onKeyDown={onPathInputSubmit}
       />
-    </div>
+    </StyledTopBar>
   );
 }
 
@@ -75,7 +71,7 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
   }
 
   return (
-    <div className="file-browser" ref={appRef}>
+    <StyledFileBrowser ref={appRef}>
       <TopBar
         pathSearch={pathSearch}
         onPathInputChange={onPathInputChange}
@@ -97,8 +93,8 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
         openFSObject={fs.navToObject}
         appRef={appRef}
       />
-      <div className="file-browser__bottom-bar"></div>
-    </div>
+      <StyledBottomBar />
+    </StyledFileBrowser>
   );
 }
 
diff --git a/src/programs/FileBrowser/FileBrowserLauncher/FileBrowserLauncher.scss b/src/programs/FileBrowser/FileBrowserLauncher/FileBrowserLauncher.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/programs/FileBrowser/FileBrowserLauncher/FileBrowserLauncher.tsx b/src/programs/FileBrowser/FileBrowserLauncher/FileBrowserLauncher.tsx
index b86a840..07e06f8 100644
--- a/src/programs/FileBrowser/FileBrowserLauncher/FileBrowserLauncher.tsx
+++ b/src/programs/FileBrowser/FileBrowserLauncher/FileBrowserLauncher.tsx
@@ -1,6 +1,5 @@
 import FileBrowser from "..";
 import Launcher from "../../../components/BottomBar/Launcher";
-import "./FileBrowserLauncher.scss";
 
 interface FileBrowserLauncherProps {}
 
diff --git a/src/programs/FileBrowser/MainContent/MainContent.scss b/src/programs/FileBrowser/MainContent/MainContent.scss
deleted file mode 100644
index a05ad95..0000000
--- a/src/programs/FileBrowser/MainContent/MainContent.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.file-browser {
-  &__main-content {
-    grid-area: main-content;
-    padding: 20px;
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    grid-template-rows: min-content;
-    box-sizing: border-box;
-    &__item {
-      width: 100%;
-      padding: 10px;
-      overflow-wrap: break-word;
-      word-break: normal;
-      box-sizing: border-box;
-      aspect-ratio: 1/1;
-      height: auto;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      gap: 10px;
-      border-radius: 10px;
-
-      &-icon {
-        height: 80%;
-        width: 80%;
-        path {
-          fill: white;
-        }
-      }
-    }
-  }
-}
diff --git a/src/programs/FileBrowser/MainContent/MainContent.tsx b/src/programs/FileBrowser/MainContent/MainContent.tsx
index 25c918e..cce3701 100644
--- a/src/programs/FileBrowser/MainContent/MainContent.tsx
+++ b/src/programs/FileBrowser/MainContent/MainContent.tsx
@@ -4,17 +4,17 @@ import useLocalFS, {
   FSObject,
   FSObjectType,
 } from "../../../stores/localFS";
-import "./MainContent.scss";
 import { getMainContentContextItems } from "../contextMenus";
 import AppPopup from "../../../components/AppPopup";
 import ContextMenu from "../../../components/ContextMenu/ContextMenu";
-import DirectoryOrFile from "../DirectoryOrFile/DirectoryOrFile";
+import DirectoryOrFile from "../DirectoryOrFile";
 import HeaderBar from "../../../components/HeaderBar";
 import Box from "../../../components/Box";
 import InputField from "../../../components/InputField";
 import Row from "../../../components/Row";
 import Button from "../../../components/Button";
 import useBindKeyToAction from "../../../hooks/useBindKeyToAction";
+import { StyledMainContent } from "./styles";
 
 interface MainContentProps {
   currentDirectory: FSDirectory;
@@ -40,10 +40,7 @@ function MainContent({
   }
 
   return (
-    <div
-      className="file-browser__main-content"
-      onContextMenu={handleRightClick}
-    >
+    <StyledMainContent onContextMenu={handleRightClick}>
       {contextMenuOpen && (
         <ContextMenu
           position={clickPosition.current}
@@ -70,7 +67,7 @@ function MainContent({
           currentDirectory={currentDirectory}
         />
       ))}
-    </div>
+    </StyledMainContent>
   );
 }
 
diff --git a/src/programs/FileBrowser/MainContent/styles.ts b/src/programs/FileBrowser/MainContent/styles.ts
new file mode 100644
index 0000000..db57d2f
--- /dev/null
+++ b/src/programs/FileBrowser/MainContent/styles.ts
@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+
+export const StyledMainContent = styled.div`
+  grid-area: main-content;
+  padding: 20px;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-template-rows: min-content;
+  box-sizing: border-box;
+`;
diff --git a/src/programs/FileBrowser/styles.ts b/src/programs/FileBrowser/styles.ts
new file mode 100644
index 0000000..cda2dcd
--- /dev/null
+++ b/src/programs/FileBrowser/styles.ts
@@ -0,0 +1,70 @@
+import styled from "@emotion/styled";
+
+export const StyledFileBrowser = styled.div`
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 150px auto;
+  grid-template-rows: 50px auto 25px;
+  grid-template-areas:
+    "top-bar top-bar"
+    "side-bar main-content"
+    "side-bar bottom-bar";
+
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  border-radius: 10px;
+`;
+
+export const StyledTopBar = styled.div`
+  grid-area: top-bar;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  align-items: center;
+`;
+
+export const StyledTopBarButtons = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const StyledTopBarButton = styled.div`
+  width: 50px;
+  text-align: center;
+  box-sizing: border-box;
+  border-radius: 20px;
+  box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
+  &:hover {
+    backdrop-filter: brightness(150%);
+    transition: ease-in 0.2s;
+  }
+  &:active {
+    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
+  }
+`;
+
+export const StyledTopBarPath = styled.input`
+  height: 30px;
+  width: 100%;
+  padding: 5px 10px;
+  border-radius: 50px;
+  border: none;
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+export const StyledBottomBar = styled.div`
+  grid-area: bottom-bar;
+  width: 100%;
+  height: 100%;
+`;
diff --git a/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx b/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx
index 0926fe6..1527137 100644
--- a/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx
+++ b/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx
@@ -13,7 +13,6 @@ function SettingsLauncher({}: SettingsLauncherProps) {
       menus={[]}
       appContent={<Settings />}
       icon=""
-      // icon={icon}
     ></Launcher>
   );
 }