From a87b95ed186d8de7a0c9f7226696f4425d8cb5ac Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 17 Jan 2023 17:58:04 +0800
Subject: [PATCH] Restyle settings sheet

---
 src/pages/settings.css |  25 ++-
 src/pages/settings.jsx | 392 +++++++++++++++++++++--------------------
 2 files changed, 228 insertions(+), 189 deletions(-)

diff --git a/src/pages/settings.css b/src/pages/settings.css
index 6805b463..0f786504 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -1,12 +1,28 @@
+#settings-container {
+  background-color: var(--bg-faded-color);
+}
+
 #settings-container h2 {
-  font-size: 0.9em;
+  font-size: 85%;
   text-transform: uppercase;
   color: var(--text-insignificant-color);
+  font-weight: normal;
 }
 #settings-container h2 ~ h2 {
   margin-top: 2em;
 }
 
+#settings-container :is(section, .section) {
+  background-color: var(--bg-color);
+  margin: 0 -16px;
+  padding: 8px 16px;
+  border-top: var(--hairline-width) solid var(--outline-color);
+  border-bottom: var(--hairline-width) solid var(--outline-color);
+}
+#settings-container :is(section, .section) > li + li {
+  border-top: var(--hairline-width) solid var(--outline-color);
+}
+
 #settings-container ul {
   margin: 0;
   padding: 0;
@@ -82,3 +98,10 @@
 #settings-container .radio-group label:has(input:checked) input:checked + span {
   color: inherit;
 }
+
+@media (min-width: 40em) {
+  #settings-container :is(section, .section) {
+    margin-inline: 0;
+    border-radius: 8px;
+  }
+}
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 92da8d2e..60b55d38 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -33,218 +33,234 @@ function Settings({ 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
-                    onClick={() => {
-                      states.showAccount = `${account.info.username}@${account.instanceURL}`;
-                    }}
-                  />
-                </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>
-                  )}
+        <section>
+          <ul class="accounts-list">
+            {accounts.map((account, i) => {
+              const isCurrent = account.info.id === currentAccount;
+              const isDefault = i === (currentDefault || 0);
+              return (
+                <li>
                   <div>
-                    {!isDefault && moreThanOneAccount && (
+                    {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
+                      onClick={() => {
+                        states.showAccount = `${account.info.username}@${account.instanceURL}`;
+                      }}
+                    />
+                  </div>
+                  <div class="actions">
+                    {isDefault && moreThanOneAccount && (
+                      <>
+                        <span class="tag">Default</span>{' '}
+                      </>
+                    )}
+                    {!isCurrent && (
                       <button
                         type="button"
-                        class="plain small"
+                        class="light"
                         onClick={() => {
-                          // Move account to the top of the list
-                          accounts.splice(i, 1);
-                          accounts.unshift(account);
-                          store.local.setJSON('accounts', accounts);
-                          setCurrentDefault(i);
+                          store.session.set('currentAccount', account.info.id);
+                          location.reload();
                         }}
                       >
-                        Set as default
+                        <Icon icon="transfer" /> Switch
                       </button>
                     )}
-                    {isCurrent && (
-                      <>
-                        {' '}
+                    <div>
+                      {!isDefault && moreThanOneAccount && (
                         <button
                           type="button"
                           class="plain small"
                           onClick={() => {
-                            const yes = confirm(
-                              'Are you sure you want to log out?',
-                            );
-                            if (!yes) return;
+                            // Move account to the top of the list
                             accounts.splice(i, 1);
+                            accounts.unshift(account);
                             store.local.setJSON('accounts', accounts);
-                            location.reload();
+                            setCurrentDefault(i);
                           }}
                         >
-                          Log out
+                          Set as default
                         </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>
-                </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>
+                </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>
           </p>
-        )}
-        <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') {
-              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>
+        </section>
         <h2>Settings</h2>
-        <label>
-          <input
-            type="checkbox"
-            checked={snapStates.settings.boostsCarousel}
-            onChange={(e) => {
-              states.settings.boostsCarousel = e.target.checked;
-            }}
-          />{' '}
-          Boosts carousel (experimental)
-        </label>
+        <ul class="section">
+          <li>
+            <div>
+              <label>Appearance</label>
+            </div>
+            <div>
+              <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') {
+                    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>
+          </li>
+          <li>
+            <label>
+              <input
+                type="checkbox"
+                checked={snapStates.settings.boostsCarousel}
+                onChange={(e) => {
+                  states.settings.boostsCarousel = e.target.checked;
+                }}
+              />{' '}
+              Boosts carousel (experimental)
+            </label>
+          </li>
+        </ul>
         <h2>Hidden features</h2>
-        <p>
-          <button
-            type="button"
-            class="light"
-            onClick={() => {
-              states.showDrafts = true;
-              states.showSettings = false;
-            }}
-          >
-            Unsent drafts
-          </button>
-        </p>
+        <section>
+          <div>
+            <button
+              type="button"
+              class="light"
+              onClick={() => {
+                states.showDrafts = true;
+                states.showSettings = false;
+              }}
+            >
+              Unsent drafts
+            </button>
+          </div>
+        </section>
         <h2>About</h2>
-        <p>
-          <a href="https://github.com/cheeaun/phanpy" target="_blank">
-            Built
-          </a>{' '}
-          by{' '}
-          <a
-            href="https://mastodon.social/@cheeaun"
-            // target="_blank"
-            onClick={(e) => {
-              e.preventDefault();
-              states.showAccount = 'cheeaun@mastodon.social';
-            }}
-          >
-            @cheeaun
-          </a>
-          .
-        </p>
-        {__BUILD_TIME__ && (
+        <section>
           <p>
-            Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
-            {__COMMIT_HASH__ && (
-              <>
-                (
-                <a
-                  href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
-                  target="_blank"
-                >
-                  <code>{__COMMIT_HASH__}</code>
-                </a>
-                )
-              </>
-            )}
+            <a href="https://github.com/cheeaun/phanpy" target="_blank">
+              Built
+            </a>{' '}
+            by{' '}
+            <a
+              href="https://mastodon.social/@cheeaun"
+              // target="_blank"
+              onClick={(e) => {
+                e.preventDefault();
+                states.showAccount = 'cheeaun@mastodon.social';
+              }}
+            >
+              @cheeaun
+            </a>
+            .
           </p>
-        )}
+          {__BUILD_TIME__ && (
+            <p>
+              Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
+              {__COMMIT_HASH__ && (
+                <>
+                  (
+                  <a
+                    href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
+                    target="_blank"
+                  >
+                    <code>{__COMMIT_HASH__}</code>
+                  </a>
+                  )
+                </>
+              )}
+            </p>
+          )}
+        </section>
       </main>
     </div>
   );