chore: replace theme button with settings

I plan to add more user settings so theme options should be inside
settings.

2 files changed, 34 insertions, 0 deletions

diff --git a/src/components/Settings/Settings.module.scss b/src/components/Settings/Settings.module.scss
new file mode 100644
index 0000000..fe6b17b
--- /dev/null
+++ b/src/components/Settings/Settings.module.scss
@@ -0,0 +1,17 @@
+@use "@styles/abstracts/functions" as fun;
+
+.title {
+  --icon-size: #{fun.convert-px(30)};
+
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--spacing-2xs);
+  margin-bottom: var(--spacing-md);
+  color: var(--color-primary-dark);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+
+  svg {
+    margin: 0;
+  }
+}
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
new file mode 100644
index 0000000..bfef851
--- /dev/null
+++ b/src/components/Settings/Settings.tsx
@@ -0,0 +1,17 @@
+import { CogIcon } from '@components/Icons';
+import ThemeToggle from '@components/ThemeToggle/ThemeToggle';
+import { t } from '@lingui/macro';
+import styles from './Settings.module.scss';
+
+const Settings = () => {
+  return (
+    <>
+      <div className={styles.title}>
+        <CogIcon /> {t`Settings`}
+      </div>
+      <ThemeToggle />
+    </>
+  );
+};
+
+export default Settings;