From 46d5e20008ceea17e821700ca0f84f6f46e30894 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 10 Dec 2022 20:48:48 +0800
Subject: [PATCH] Code cleanup on Settings page

---
 src/pages/settings.css |   9 +-
 src/pages/settings.jsx | 277 +++++++++++++++++++++--------------------
 2 files changed, 148 insertions(+), 138 deletions(-)

diff --git a/src/pages/settings.css b/src/pages/settings.css
index f83787b0..9bf450ba 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -4,18 +4,23 @@
   animation: fade-in 0.2s ease-out;
   max-height: 100vh;
   overflow: auto;
+  position: relative;
 }
 
 #settings-container .close-button {
-  float: right;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 #settings-container h2 {
-  margin: 3em 0 1em;
   font-size: .9em;
   text-transform: uppercase;
   color: var(--text-insignificant-color);
 }
+#settings-container h2 ~ h2 {
+  margin-top: 2em;
+}
 
 #settings-container ul {
   margin: 0;
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 7a6aa3a0..3205b842 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -24,163 +24,168 @@ export default ({ onClose }) => {
 
   return (
     <div id="settings-container" class="box">
-      <div>
-        <button type="button" class="close-button plain" onClick={onClose}>
-          <Icon icon="x" alt="Close" />
-        </button>
-      </div>
-      <div>
-        <h2>Accounts</h2>
-        <ul class="accounts-list">
-          {accounts.map((account, i) => {
-            const isCurrent = account.info.id === currentAccount;
-            const isDefault = i === (currentDefault || 0);
-            return (
-              <li>
+      <button type="button" class="close-button plain large" onClick={onClose}>
+        <Icon icon="x" alt="Close" />
+      </button>
+      <h2>Accounts</h2>
+      <ul class="accounts-list">
+        {accounts.map((account, i) => {
+          const isCurrent = account.info.id === currentAccount;
+          const isDefault = i === (currentDefault || 0);
+          return (
+            <li>
+              <div>
+                {moreThanOneAccount && (
+                  <span class={`current ${isCurrent ? 'is-current' : ''}`}>
+                    <Icon icon="check-circle" alt="Current" />
+                  </span>
+                )}
+                <Avatar url={account.info.avatarStatic} size="xxl" />
+                <NameText account={account.info} showAcct />
+              </div>
+              <div class="actions">
+                {isDefault && moreThanOneAccount && (
+                  <>
+                    <span class="tag">Default</span>{' '}
+                  </>
+                )}
+                {!isCurrent && (
+                  <button
+                    type="button"
+                    class="light"
+                    onClick={() => {
+                      store.session.set('currentAccount', account.info.id);
+                      location.reload();
+                    }}
+                  >
+                    <Icon icon="transfer" /> Switch
+                  </button>
+                )}
                 <div>
-                  {moreThanOneAccount && (
-                    <span class={`current ${isCurrent ? 'is-current' : ''}`}>
-                      <Icon icon="check-circle" alt="Current" />
-                    </span>
-                  )}
-                  <Avatar url={account.info.avatarStatic} size="xxl" />
-                  <NameText account={account.info} showAcct />
-                </div>
-                <div class="actions">
-                  {isDefault && moreThanOneAccount && (
-                    <>
-                      <span class="tag">Default</span>{' '}
-                    </>
-                  )}
-                  {!isCurrent && (
+                  {!isDefault && moreThanOneAccount && (
                     <button
                       type="button"
-                      class="light"
+                      class="plain small"
                       onClick={() => {
-                        store.session.set('currentAccount', account.info.id);
-                        location.reload();
+                        // Move account to the top of the list
+                        accounts.splice(i, 1);
+                        accounts.unshift(account);
+                        store.local.setJSON('accounts', accounts);
+                        setCurrentDefault(i);
                       }}
                     >
-                      <Icon icon="transfer" /> Switch
+                      Set as default
                     </button>
                   )}
-                  <div>
-                    {!isDefault && moreThanOneAccount && (
+                  {isCurrent && (
+                    <>
+                      {' '}
                       <button
                         type="button"
                         class="plain small"
                         onClick={() => {
-                          // Move account to the top of the list
+                          const yes = confirm(
+                            'Are you sure you want to log out?',
+                          );
+                          if (!yes) return;
                           accounts.splice(i, 1);
-                          accounts.unshift(account);
                           store.local.setJSON('accounts', accounts);
-                          setCurrentDefault(i);
+                          location.reload();
                         }}
                       >
-                        Set as default
+                        Log out
                       </button>
-                    )}
-                    {isCurrent && (
-                      <>
-                        {' '}
-                        <button
-                          type="button"
-                          class="plain small"
-                          onClick={() => {
-                            const yes = confirm(
-                              'Are you sure you want to log out?',
-                            );
-                            if (!yes) return;
-                            accounts.splice(i, 1);
-                            store.local.setJSON('accounts', accounts);
-                            location.reload();
-                          }}
-                        >
-                          Log out
-                        </button>
-                      </>
-                    )}
-                  </div>
+                    </>
+                  )}
                 </div>
-              </li>
-            );
-          })}
-        </ul>
-        {moreThanOneAccount && (
-          <p>
-            <small>
-              Note: <i>Default</i> account will always be used for first load.
-              Switched accounts will persist during the session.
-            </small>
-          </p>
-        )}
-        <p style={{ textAlign: 'end' }}>
-          <a href="/#/login" class="button" onClick={onClose}>
-            Add new account
-          </a>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      {moreThanOneAccount && (
+        <p>
+          <small>
+            Note: <i>Default</i> account will always be used for first load.
+            Switched accounts will persist during the session.
+          </small>
         </p>
-      </div>
-      <div>
-        <h2>Theme</h2>
-        <form
-          ref={themeFormRef}
-          onInput={(e) => {
-            console.log(e);
-            e.preventDefault();
-            const formData = new FormData(themeFormRef.current);
-            const theme = formData.get('theme');
-            const html = document.documentElement;
+      )}
+      <p style={{ textAlign: 'end' }}>
+        <a href="/#/login" class="button" onClick={onClose}>
+          Add new account
+        </a>
+      </p>
+      <h2>Theme</h2>
+      <form
+        ref={themeFormRef}
+        onInput={(e) => {
+          console.log(e);
+          e.preventDefault();
+          const formData = new FormData(themeFormRef.current);
+          const theme = formData.get('theme');
+          const html = document.documentElement;
 
-            if (theme === 'auto') {
-              html.classList.remove('is-light', 'is-dark');
-            } else {
-              html.classList.toggle('is-light', theme === 'light');
-              html.classList.toggle('is-dark', theme === 'dark');
-            }
-            document
-              .querySelector('meta[name="color-scheme"]')
-              .setAttribute('content', theme);
+          if (theme === 'auto') {
+            html.classList.remove('is-light', 'is-dark');
+          } else {
+            html.classList.toggle('is-light', theme === 'light');
+            html.classList.toggle('is-dark', theme === 'dark');
+          }
+          document
+            .querySelector('meta[name="color-scheme"]')
+            .setAttribute('content', theme);
 
-            if (theme === 'auto') {
-              store.local.del('theme');
-            } else {
-              store.local.set('theme', theme);
-            }
-          }}
-        >
-          <div class="radio-group">
-            <label>
-              <input
-                type="radio"
-                name="theme"
-                value="light"
-                defaultChecked={currentTheme === 'light'}
-              />
-              <span>Light</span>
-            </label>
-            <label>
-              <input
-                type="radio"
-                name="theme"
-                value="dark"
-                defaultChecked={currentTheme === 'dark'}
-              />
-              <span>Dark</span>
-            </label>
-            <label>
-              <input
-                type="radio"
-                name="theme"
-                value="auto"
-                defaultChecked={
-                  currentTheme !== 'light' && currentTheme !== 'dark'
-                }
-              />
-              <span>Auto</span>
-            </label>
-          </div>
-        </form>
-      </div>
+          if (theme === 'auto') {
+            store.local.del('theme');
+          } else {
+            store.local.set('theme', theme);
+          }
+        }}
+      >
+        <div class="radio-group">
+          <label>
+            <input
+              type="radio"
+              name="theme"
+              value="light"
+              defaultChecked={currentTheme === 'light'}
+            />
+            <span>Light</span>
+          </label>
+          <label>
+            <input
+              type="radio"
+              name="theme"
+              value="dark"
+              defaultChecked={currentTheme === 'dark'}
+            />
+            <span>Dark</span>
+          </label>
+          <label>
+            <input
+              type="radio"
+              name="theme"
+              value="auto"
+              defaultChecked={
+                currentTheme !== 'light' && currentTheme !== 'dark'
+              }
+            />
+            <span>Auto</span>
+          </label>
+        </div>
+      </form>
+      <h2>About</h2>
+      <p>
+        <a href="https://github.com/cheeaun/phanpy" target="_blank">
+          Built
+        </a>{' '}
+        by{' '}
+        <a href="https://mastodon.social/@cheeaun" target="_blank">
+          @cheeaun
+        </a>
+        .
+      </p>
     </div>
   );
 };