style(settings modal): add themes styling, overlay

src/components/settings-modal/settings-modal.module.css

@@ -1,3 +1,13 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 900;
+}
+
 .settingsModal {
   top: 60px;
   width: 400px;
@@ -6,10 +16,16 @@
   left: calc(50% - 25px);
   overflow-y: auto;
   margin-left: -178px;
-  position: absolute;
+  position: fixed;
+  z-index: 1000;
   padding: 2px 5px 5px;
   font-size: 14px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+  background-color: var(--settings-modal-background-color);
+}
+
+.settingsModal select {
+  filter: var(--filter80);
 }
 
 .header {
@@ -20,6 +36,11 @@
   padding-bottom: 5px;
   text-align: center;
   line-height: 14px;
+  border-bottom: var(--settings-modal-header-border-bottom);
+}
+
+.title {
+  text-transform: capitalize;
 }
 
 .version {
@@ -29,6 +50,15 @@
   margin-left: 5px;
 }
 
+.version a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.version a:hover {
+  text-decoration: underline;
+}
+
 .closeButton {
   right: 5px;
   width: 18px;
@@ -39,6 +69,7 @@
   position: absolute;
   top: 5px;
   image-rendering: pixelated;
+  background-image: var(--settings-modal-close-button-background-image);
 }
 
 @media (max-width: 640px) {

src/components/settings-modal/settings-modal.tsx

@@ -1,18 +1,81 @@
 import styles from './settings-modal.module.css';
 import { useNavigate } from 'react-router-dom';
+import useTheme from '../../hooks/use-theme';
+import { useTranslation } from 'react-i18next';
+import packageJson from '../../../package.json';
+const commitRef = process.env.REACT_APP_COMMIT_REF;
 
-const SettingsModal = () => {
-  const navigate = useNavigate();
+// TODO: remove theme and languages selectors for debugging
+const ThemeSettings = () => {
+  const [theme, setTheme] = useTheme();
 
   return (
-    <div className={styles.settingsModal}>
-      <div className={styles.header}>
-        <span className={styles.version}>v0.2.0</span>
-        Settings
-        <span className={styles.closeButton} title='close' onClick={() => navigate(-1)} />
-      </div>
+    <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 SettingsModal = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const closeModal = () => {
+    navigate(-1);
+  };
+
+  return (
+    <>
+      <div className={styles.overlay} onClick={closeModal}></div>
+      <div className={styles.settingsModal}>
+        <div className={styles.header}>
+          <span className={styles.version}>
+            <a href={`https://github.com/plebbit/plebchan/releases/tag/v${packageJson.version}`} target='_blank' rel='noopener noreferrer'>
+              v{packageJson.version}
+            </a>
+            {commitRef && (
+              <a href={`https://github.com/plebbit/plebchan/commit/${commitRef}`} target='_blank' rel='noopener noreferrer'>
+                #{commitRef.slice(0, 7)}
+              </a>
+            )}
+          </span>
+          <span className={styles.title}>{t('settings')}</span>
+          <span className={styles.closeButton} title='close' onClick={closeModal} />
+        </div>
+        <ThemeSettings />
+        <LanguageSettings />
+      </div>
+    </>
+  );
+};
+
 export default SettingsModal;

src/themes.css

@@ -149,6 +149,11 @@
   --reply-modal-field-input-border: 1px solid #aaa;
   --reply-modal-field-input-border-focus: 1px solid #ea8;
 
+  /* settings modal */
+  --settings-modal-background-color: #f0e0d6;
+  --settings-modal-header-border-bottom: 1px solid #d9bfb7;
+  --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png");
+
   /* stats */
   --stats-font-size: 11px;
 }
@@ -304,6 +309,11 @@
   --reply-modal-field-input-border: 1px solid #aaa;
   --reply-modal-field-input-border-focus: 1px solid #98e;
 
+  /* settings modal */
+  --settings-modal-background-color: #d6daf0;
+  --settings-modal-header-border-bottom: 1px solid #b7c5d9;
+  --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png");
+
   /* stats */
   --stats-font-size: 11px;
 }
@@ -426,6 +436,11 @@
   --reply-desktop-background-color: #f0e0d6;
   --reply-desktop-border: 1px solid #d9bfb7;
 
+  /* settings modal */
+  --settings-modal-background-color: #f0e0d6;
+  --settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2);
+  --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png");
+
   /* stats */
   --stats-font-size: 10pt;
 }
@@ -562,6 +577,11 @@
   --reply-desktop-background-color: #d6daf0;
   --reply-desktop-border: 1px solid #b7c5d9;
 
+  /* settings modal */
+  --settings-modal-background-color: #d6daf0;
+  --settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2);
+  --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png");
+
   /* stats */
   --stats-font-size: 10pt;
 }
@@ -720,6 +740,11 @@
   --select-background-color: #282a2e;
   --select-color: #c5c8c6;
 
+  /* settings modal */
+  --settings-modal-background-color: #282a2e;
+  --settings-modal-header-border-bottom: 1px solid #111;
+  --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-dark.png");
+
   /* stats */
   --stats-font-size: 11px;
 }
@@ -857,6 +882,11 @@
   --reply-modal-field-input-border: 1px solid #aaa;
   --reply-modal-field-input-border-focus: 1px solid #ea8;
 
+  /* settings modal */
+  --settings-modal-background-color: #ddd;
+  --settings-modal-header-border-bottom: 1px solid rgba(0, 0, 0, 0.20);
+  --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-photon.png");
+
   /* stats */
   --stats-font-size: 11px;
 }