Restyle settings sheet

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;
+  }
+}

src/pages/settings.jsx

@@ -33,6 +33,7 @@ function Settings({ onClose }) {
         <Icon icon="x" alt="Close" />
       </button> */}
         <h2>Accounts</h2>
+        <section>
           <ul class="accounts-list">
             {accounts.map((account, i) => {
               const isCurrent = account.info.id === currentAccount;
@@ -127,7 +128,14 @@ function Settings({ onClose }) {
               Add new account
             </a>
           </p>
-        <h2>Theme</h2>
+        </section>
+        <h2>Settings</h2>
+        <ul class="section">
+          <li>
+            <div>
+              <label>Appearance</label>
+            </div>
+            <div>
               <form
                 ref={themeFormRef}
                 onInput={(e) => {
@@ -186,7 +194,9 @@ function Settings({ onClose }) {
                   </label>
                 </div>
               </form>
-        <h2>Settings</h2>
+            </div>
+          </li>
+          <li>
             <label>
               <input
                 type="checkbox"
@@ -197,8 +207,11 @@ function Settings({ onClose }) {
               />{' '}
               Boosts carousel (experimental)
             </label>
+          </li>
+        </ul>
         <h2>Hidden features</h2>
-        <p>
+        <section>
+          <div>
             <button
               type="button"
               class="light"
@@ -209,8 +222,10 @@ function Settings({ onClose }) {
             >
               Unsent drafts
             </button>
-        </p>
+          </div>
+        </section>
         <h2>About</h2>
+        <section>
           <p>
             <a href="https://github.com/cheeaun/phanpy" target="_blank">
               Built
@@ -245,6 +260,7 @@ function Settings({ onClose }) {
               )}
             </p>
           )}
+        </section>
       </main>
     </div>
   );