From 262a767aaea5bd5bd72ef957509c4e957bb55f3b Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 20 Mar 2024 22:06:35 +0100
Subject: [PATCH] create temporary settings view

---
 src/app.tsx                                   |  2 +
 src/components/board-nav/board-nav.module.css |  3 +
 src/themes.css                                |  3 +
 src/views/settings/index.ts                   |  1 +
 src/views/settings/settings.module.css        | 19 ++++++
 src/views/settings/settings.tsx               | 58 +++++++++++++++++++
 src/views/subplebbit/subplebbit.module.css    |  3 +
 src/views/subplebbit/subplebbit.tsx           | 51 +---------------
 8 files changed, 90 insertions(+), 50 deletions(-)
 create mode 100644 src/views/settings/index.ts
 create mode 100644 src/views/settings/settings.module.css
 create mode 100644 src/views/settings/settings.tsx

diff --git a/src/app.tsx b/src/app.tsx
index a3394d95..23c20f4b 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -5,6 +5,7 @@ import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import styles from './app.module.css';
 import useTheme from './hooks/use-theme';
 import Home from './views/home';
+import Settings from './views/settings';
 import Subplebbit from './views/subplebbit';
 import BoardNav from './components/board-nav';
 import BoardBanner from './components/board-banner';
@@ -54,6 +55,7 @@ const App = () => {
         <Route element={<BoardLayout />}>
           <Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
         </Route>
+        <Route path='/settings' element={<Settings />} />
       </Routes>
     </div>
   );
diff --git a/src/components/board-nav/board-nav.module.css b/src/components/board-nav/board-nav.module.css
index 7088043b..a9dda260 100644
--- a/src/components/board-nav/board-nav.module.css
+++ b/src/components/board-nav/board-nav.module.css
@@ -35,6 +35,9 @@
 
 .boardNavMobile select {
   font-size: var(--boardnav-mobile-font-size);
+  border: var(--select-border, revert);
+  background-color: var(--select-background-color, revert);
+  color: var(--select-color, revert);
 }
 
 .boardSelect {
diff --git a/src/themes.css b/src/themes.css
index 3ad67df3..0fa75862 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -186,6 +186,9 @@
   --internal-link-text-color-hover: #5f89ac;
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
+  --select-border: 1px solid #575a60;
+  --select-background-color: #282a2e;
+  --select-color: #c5c8c6;
   --text-color: #c5c8c6;
   --text-color-standard: #c5c8c6;
   --text-color-on-color1: #c5c8c6;
diff --git a/src/views/settings/index.ts b/src/views/settings/index.ts
new file mode 100644
index 00000000..1e817364
--- /dev/null
+++ b/src/views/settings/index.ts
@@ -0,0 +1 @@
+export { default } from './settings';
diff --git a/src/views/settings/settings.module.css b/src/views/settings/settings.module.css
new file mode 100644
index 00000000..481add9d
--- /dev/null
+++ b/src/views/settings/settings.module.css
@@ -0,0 +1,19 @@
+.content {
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.content select {
+  background-color: var(--select-background-color, revert);
+  border: var(--select-border, revert);
+  color: var(--select-color, revert);
+  margin: 10px;
+}
+
+.content a {
+  margin: 10px;
+  margin-bottom: 40px;
+  display: block;
+}
\ No newline at end of file
diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx
new file mode 100644
index 00000000..c3d1b953
--- /dev/null
+++ b/src/views/settings/settings.tsx
@@ -0,0 +1,58 @@
+import { useTranslation } from 'react-i18next';
+import useTheme from '../../hooks/use-theme';
+import styles from './settings.module.css';
+import { Link } from 'react-router-dom';
+
+// TODO: remove theme and languages selectors for debugging
+const ThemeSettings = () => {
+  const [theme, setTheme] = useTheme();
+
+  return (
+    <select className={styles.themeSettings} value={theme} onChange={(e) => setTheme(e.target.value)}>
+      <option value='yotsuba'>Yotsuba</option>
+      <option value='yotsuba-b'>Yotsuba B</option>
+      <option value='futaba'>Futaba</option>
+      <option value='burichan'>Burichan</option>
+      <option value='tomorrow'>Tomorrow</option>
+      <option value='photon'>Photon</option>
+    </select>
+  );
+};
+
+// prettier-ignore
+const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
+
+const LanguageSettings = () => {
+  const { i18n } = useTranslation();
+  const { changeLanguage, language } = i18n;
+
+  const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    changeLanguage(e.target.value);
+  };
+
+  return (
+    <div className={styles.languageSettings}>
+      <select value={language} onChange={onSelectLanguage}>
+        {availableLanguages.map((lang) => (
+          <option key={lang} value={lang}>
+            {lang}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+const Settings = () => {
+  return (
+    <div className={styles.content}>
+      <div>
+        <Link to='/'>Home</Link>
+      </div>
+      <ThemeSettings />
+      <LanguageSettings />
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/src/views/subplebbit/subplebbit.module.css b/src/views/subplebbit/subplebbit.module.css
index 28e767f9..3374e37a 100644
--- a/src/views/subplebbit/subplebbit.module.css
+++ b/src/views/subplebbit/subplebbit.module.css
@@ -7,4 +7,7 @@
 
 .debug select {
   margin: 2px;
+  border: var(--select-border);
+  background-color: var(--select-background-color);
+  color: var(--select-color);
 }
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
index b9203e3a..900eb6f9 100644
--- a/src/views/subplebbit/subplebbit.tsx
+++ b/src/views/subplebbit/subplebbit.tsx
@@ -1,56 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import useTheme from '../../hooks/use-theme';
 import styles from './subplebbit.module.css';
 
-// TODO: remove theme and languages selectors for debugging
-const ThemeSettings = () => {
-  const [theme, setTheme] = useTheme();
-
-  return (
-    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
-      <option value='yotsuba'>Yotsuba</option>
-      <option value='yotsuba-b'>Yotsuba B</option>
-      <option value='futaba'>Futaba</option>
-      <option value='burichan'>Burichan</option>
-      <option value='tomorrow'>Tomorrow</option>
-      <option value='photon'>Photon</option>
-    </select>
-  );
-};
-
-// prettier-ignore
-const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
-
-const LanguageSettings = () => {
-  const { i18n } = useTranslation();
-  const { changeLanguage, language } = i18n;
-
-  const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    changeLanguage(e.target.value);
-  };
-
-  return (
-    <div className={styles.languageSettings}>
-      <select value={language} onChange={onSelectLanguage}>
-        {availableLanguages.map((lang) => (
-          <option key={lang} value={lang}>
-            {lang}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
 const Subplebbit = () => {
-  return (
-    <div className={styles.content}>
-      <div className={styles.debug}>
-        <LanguageSettings />
-        <ThemeSettings />
-      </div>
-    </div>
-  );
+  return <div className={styles.content}></div>;
 };
 
 export default Subplebbit;