style(settings): use flexbox, add crypto address and display name UI, adjust styling

src/themes.css

@@ -33,6 +33,7 @@
   --button-large-hover: url('/public/assets/buttons/button-large-hover.png');
   --button-large-nub: url('/public/assets/buttons/button-large-nub.png');
   --button-large-hover-nub: url('/public/assets/buttons/button-large-nub-hover.png');
+  --box-shadow: inset 0px 1px 1px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.6);
 }
 
 :root .dark {
@@ -70,4 +71,5 @@
   --button-large-hover: url('/public/assets/buttons/button-large-hover-dark.png');
   --button-large-nub: url('/public/assets/buttons/button-large-nub-dark.png');
   --button-large-hover-nub: url('/public/assets/buttons/button-large-nub-hover-dark.png');
+  --box-shadow: none;
 }

src/views/settings/settings.module.css

@@ -5,17 +5,24 @@
   width: 100%;
 }
 
+.category {
+  display: flex;
+  align-items: flex-start;
+}
+
 .categoryTitle {
-  width: 169px;
+  flex: 0 0 169px; /* Fixed width, no grow, no shrink */
+  height: 100%;
   padding: 10px;
   font-weight: bold;
-  vertical-align: top;
+  /* vertical-align: top; */
   text-align: right;
-  display: inline-block;
+  /* display: inline-block; */
 }
 
 .categorySettings {
-  display: inline-block;
+  flex-grow: 1;
+  /* display: inline-block; */
   padding: 10px 0;
 }
 
@@ -23,17 +30,53 @@
   margin: 0 .5em 0 .5em;
 }
 
-@media (max-width: 768px) {
-  .categoryTitle {
-    width: 70px;
-  }
-}
 
 .settingTitle {
   font-style: italic;
   text-transform: capitalize;
 }
 
+.accountData textarea {
+  box-shadow: var(--box-shadow);
+}
+
+.accountButtons {
+  display: block;
+  margin-top: 2px;
+}
+
+
+.accountAddress {
+  padding-bottom: 10px;
+}
+
+.usernameInput input {
+  width: 200px;
+  padding: 2px;
+  box-shadow: var(--box-shadow);
+}
+
+.saved {
+  padding-left: 5px;
+  font-style: italic;
+  text-transform: capitalize;
+  color: var(--text-secondary);
+}
+
+button {
+  text-transform: capitalize;
+  margin-left: 5px;
+}
+
+.accountButtons button {
+  margin-top: 5px;
+  margin-left: 0px !important;
+}
+
+.cryptoAddressSetting {
+  padding-top: 15px;
+}
+
 @media (min-width: 768px) {
   .accountData textarea {
     width: 600px;
@@ -46,6 +89,10 @@
 }
 
 @media (max-width: 768px) {
+  .categoryTitle {
+    flex: 0 0 65px;
+  }
+
   .accountData textarea {
     width: 60vw;
     height: 200px;
@@ -54,13 +101,16 @@
     min-width: 70vw;
     max-height: 60vh;
   }
+
+  input {
+    width: 35vw !important;
+  }
 }
 
-.accountButtons {
-  display: block;
-  margin-top: 2px;
-}
-
-.accountButtons button {
-  margin-top: 5px;
+.infoButton {
+  padding: 0px 4px 0px 4px;
+  font-size: 11px;
+  position: relative;
+  bottom: 2px;
+  margin-bottom: -2px;
 }

src/views/settings/settings.tsx

@@ -8,20 +8,6 @@ import styles from './settings.module.css';
 // 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 ThemeSettings = () => {
-  const [theme, setTheme] = useTheme();
-  const { t } = useTranslation();
-
-  return (
-    <span className={styles.categorySettings}>
-      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
-        <option value='light'>{t('light')}</option>
-        <option value='dark'>{t('dark')}</option>
-      </select>
-    </span>
-  );
-};
-
 const LanguageSettings = () => {
   const { i18n } = useTranslation();
   const { changeLanguage, language } = i18n;
@@ -43,6 +29,49 @@ const LanguageSettings = () => {
   );
 };
 
+const ThemeSettings = () => {
+  const [theme, setTheme] = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <span className={styles.categorySettings}>
+      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+        <option value='light'>{t('light')}</option>
+        <option value='dark'>{t('dark')}</option>
+      </select>
+    </span>
+  );
+};
+
+const ProfileSettings = () => {
+  const { t } = useTranslation();
+
+  const cryptoAddressInfo = () => {
+    alert('A crypto address is more readable than a long string of characters. It can be used to send you crypto directly.\n\nChange your account address to an ENS name you own: in your ENS name page on ens.domains, click on "Records", "Edit Records", "Add record", add "plebbit-author-address" as record name, add your full address as value (you can copy it from your account data) and save.');
+  };
+
+  return (
+    <span className={styles.categorySettings}>
+      <span className={styles.settingTitle}>username</span>
+      <div className={styles.usernameInput}>
+        <input type='text' placeholder='My Name' />
+        <button className={styles.button}>save</button>
+        <span className={styles.saved}>Saved.</span>
+      </div>
+      <div className={styles.cryptoAddressSetting}>
+        <span className={styles.settingTitle}>crypto address</span>
+        <button className={styles.infoButton} onClick={cryptoAddressInfo}>?</button>
+        <div className={styles.usernameInput}>
+          <input type='text' placeholder='address.eth' />
+          <button className={styles.button}>save</button>
+          <button className={styles.button}>check</button>
+          <span className={styles.saved}>Saved.</span>
+        </div>
+      </div>
+    </span>
+  );
+}
+
 const AccountSettings = () => {
   const account = useAccount();
   const { accounts } = useAccounts();
@@ -128,6 +157,9 @@ const AccountSettings = () => {
 
   return (
     <span className={styles.categorySettings}>
+      <div className={styles.accountAddress}>
+        <select value={account?.name} onChange={(e) => setActiveAccount(e.target.value)}>{accountsOptions}</select> is the current account
+      </div>
       <span className={styles.settingTitle}>account data</span>
       <div className={styles.accountData}>
         <textarea className={styles.textarea} value={text} onChange={(e) => setText(e.target.value)} autoCorrect="off" autoComplete='off' spellCheck='false' />
@@ -139,18 +171,13 @@ const AccountSettings = () => {
             <button onClick={() => _deleteAccount(account?.name)}>Delete</button> this account
           </div>
           <div>
-            <button onClick={_importAccount}>Import</button> another account
+            <button onClick={_importAccount}>Import</button> another account by pasting its data above
           </div>
           <div>
             <button onClick={_createAccount}>Create</button> a new account
           </div>
         </div>
       </div>
-      <br />
-      <span className={styles.settingTitle}>account address</span>
-      <div className={styles.accountAddress}>
-        <select value={account?.name} onChange={(e) => setActiveAccount(e.target.value)}>{accountsOptions}</select> is the current account
-      </div>
     </span>
   );
 };
@@ -176,6 +203,10 @@ const Settings = () => {
         <span className={styles.categoryTitle}>theme</span>
         <ThemeSettings />
       </div>
+      <div className={styles.category}>
+        <span className={styles.categoryTitle}>profile</span>
+        <ProfileSettings />
+      </div>
       <div className={styles.category}>
         <span className={styles.categoryTitle}>account</span>
         <AccountSettings />