From bbdfb5dd7dd3c02ee2f7f1ccca80a32f4615c7f6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 9 Mar 2023 11:23:07 +0800
Subject: [PATCH] Prettify About section

---
 src/pages/settings.css |  6 ++--
 src/pages/settings.jsx | 78 ++++++++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/src/pages/settings.css b/src/pages/settings.css
index 2fdc12b4..f9371839 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -45,6 +45,9 @@
 #settings-container section > ul > li .current.is-current + .avatar {
   box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
 }
+#settings-container section > ul > li .avatar + .name-text {
+  vertical-align: middle;
+}
 #settings-container section > ul > li > div {
   flex-grow: 1;
   max-width: 100%;
@@ -60,8 +63,7 @@
   text-align: left !important;
   margin-top: 8px;
 }
-#settings-container div,
-#settings-container div > * {
+#settings-container div {
   vertical-align: middle;
 }
 #settings-container .avatar {
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index bd0d261a..ead82cd5 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -216,56 +216,68 @@ function Settings({ onClose }) {
         </section>
         <h3>About</h3>
         <section>
-          <p>
+          <div
+            style={{
+              display: 'flex',
+              gap: 8,
+              lineHeight: 1.25,
+              alignItems: 'center',
+              marginTop: 8,
+            }}
+          >
             <img
               src={logo}
               alt=""
-              width="20"
-              height="20"
+              width="64"
+              height="64"
               style={{
                 aspectRatio: '1/1',
                 verticalAlign: 'middle',
+                background: '#b7cdf9',
+                borderRadius: 12,
               }}
-            />{' '}
-            <a
-              href="https://hachyderm.io/@phanpy"
-              // target="_blank"
-              onClick={(e) => {
-                e.preventDefault();
-                states.showAccount = 'phanpy@hachyderm.io';
-              }}
-            >
-              @phanpy
-            </a>
-            .
-          </p>
+            />
+            <div>
+              <b>Phanpy</b>{' '}
+              <a
+                href="https://hachyderm.io/@phanpy"
+                // target="_blank"
+                onClick={(e) => {
+                  e.preventDefault();
+                  states.showAccount = 'phanpy@hachyderm.io';
+                }}
+              >
+                @phanpy
+              </a>
+              <br />
+              <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>
+            </div>
+          </div>
           <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>
-            .{' '}
             <a
               href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
               target="_blank"
             >
               Privacy Policy
             </a>
-            .
           </p>
           {__BUILD_TIME__ && (
             <p>
-              Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
+              <span class="insignificant">Last build:</span>{' '}
+              <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
               {__COMMIT_HASH__ && (
                 <>
                   (