add settings translations, assets, styling

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

@@ -4,24 +4,28 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.25);
   z-index: 900;
 }
 
 .settingsModal {
-  top: 60px;
-  width: 400px;
+  top: 25px;
+  width: 394px;
   height: auto;
   max-height: 80%;
-  left: calc(50% - 25px);
+  left: calc(50% - 22px);
   overflow-y: auto;
   margin-left: -178px;
   position: fixed;
   z-index: 1000;
-  padding: 2px 5px 5px;
+  padding: 2px;
   font-size: 14px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
   background-color: var(--settings-modal-background-color);
+  border-top: var(--settings-modal-border-top);
+  border-right: var(--settings-modal-border-right);
+  border-bottom: var(--settings-modal-border-bottom);
+  border-left: var(--settings-modal-border-left);
 }
 
 .settingsModal select {
@@ -78,6 +82,44 @@
 
 .setting {
   margin-bottom: 8px;
+  text-transform: capitalize;
+}
+
+.hideButton, .showButton {
+  vertical-align: text-bottom;
+  margin-right: 5px;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: inline-block;
+  image-rendering: pixelated;
+}
+
+.hideButton {
+  background-image: var(--settings-modal-hide-button-background-image);
+}
+
+.showButton {
+  background-image: var(--settings-modal-show-button-background-image);
+}
+
+.category {
+  margin: 10px 0;
+}
+
+.category label {
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.checkForUpdatesButton {
+  text-transform: capitalize;
+}
+
+.setting, .category {
+  margin-left: 5px;
 }
 
 @media (max-width: 640px) {

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import styles from './settings-modal.module.css';
 import useTheme from '../../hooks/use-theme';
 import packageJson from '../../../package.json';
+import { useAccount } from '@plebbit/plebbit-react-hooks';
 
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
@@ -57,12 +58,9 @@ const CheckForUpdates = () => {
   };
 
   return (
-    <div className={styles.checkForUpdates}>
-      {/* <Trans i18nKey='check_for_updates' components={{ 1: <button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading} /> }} /> */}
-      <button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading}>
-        {t('check_for_updates')}
-      </button>
-    </div>
+    <button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading}>
+      {t('check')}
+    </button>
   );
 };
 
@@ -105,6 +103,29 @@ const InterfaceLanguage = () => {
   );
 };
 
+const AccountSettings = () => {
+  const account = useAccount();
+
+  return (
+    <>
+      <div className={styles.setting}>{account ? account.username : 'Not logged in'}test</div>
+    </>
+  );
+};
+
+const PlebbitOptionsSettings = () => {
+  return (
+    <>
+      <div className={styles.setting}>
+        <label>
+          <input type='checkbox' />
+          Show NSFW content
+        </label>
+      </div>
+    </>
+  );
+};
+
 const SettingsModal = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -113,6 +134,9 @@ const SettingsModal = () => {
     navigate(-1);
   };
 
+  const [showAccountSettings, setShowAccountSettings] = useState(false);
+  const [showPlebbitOptionsSettings, setShowPlebbitOptionsSettings] = useState(false);
+
   return (
     <>
       <div className={styles.overlay} onClick={closeModal}></div>
@@ -132,14 +156,28 @@ const SettingsModal = () => {
           <span className={styles.closeButton} title='close' onClick={closeModal} />
         </div>
         <div className={styles.setting}>
-          <CheckForUpdates />
+          {t('update')}: <CheckForUpdates />
         </div>
         <div className={styles.setting}>
-          Style: <Style />
+          {t('style')}: <Style />
         </div>
         <div className={styles.setting}>
-          Interface Language: <InterfaceLanguage />
+          {t('interface_language')}: <InterfaceLanguage />
         </div>
+        <div className={`${styles.setting} ${styles.category}`}>
+          <label onClick={() => setShowAccountSettings(!showAccountSettings)}>
+            <span className={showAccountSettings ? styles.hideButton : styles.showButton} />
+            Account
+          </label>
+        </div>
+        {showAccountSettings && <AccountSettings />}
+        <div className={`${styles.setting} ${styles.category}`}>
+          <label onClick={() => setShowPlebbitOptionsSettings(!showPlebbitOptionsSettings)}>
+            <span className={showPlebbitOptionsSettings ? styles.hideButton : styles.showButton} />
+            Plebbit Options
+          </label>
+        </div>
+        {showPlebbitOptionsSettings && <PlebbitOptionsSettings />}
       </div>
     </>
   );