From 4b49c6fb03ee309f23b559a4c0dc49219f6ee0b1 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 18 Dec 2022 00:38:19 +0800
Subject: [PATCH] Aesthetic changes to Account sheet

- Larger avatar
- Less rounded sheet
- Add Joined date
---
 src/app.css                |  2 +-
 src/components/account.css |  8 +++++---
 src/components/account.jsx | 18 ++++++++++++++++--
 src/components/avatar.jsx  |  1 +
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index 3cdd82e4..3178b5e4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -471,7 +471,7 @@ button.carousel-dot[disabled].active {
   background-color: var(--bg-color);
   width: 100%;
   max-width: calc(40em - 50px - 16px);
-  border-radius: 36px 36px 0 0;
+  border-radius: 16px 16px 0 0;
   padding: 16px;
   box-shadow: 0 -1px 32px var(--divider-color);
   animation: slide-up 0.2s ease-out;
diff --git a/src/components/account.css b/src/components/account.css
index 0b11377a..7f57af99 100644
--- a/src/components/account.css
+++ b/src/components/account.css
@@ -2,7 +2,7 @@
   color: var(--outline-color);
 }
 
-#account-container header{
+#account-container header {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -16,8 +16,10 @@
 #account-container .stats {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  column-gap: 16px;
+  row-gap: 4px;
   opacity: 0.75;
+  font-size: 90%;
 }
 
 #account-container .actions {
@@ -28,4 +30,4 @@
 }
 #account-container .actions button {
   align-self: flex-end;
-}
\ No newline at end of file
+}
diff --git a/src/components/account.jsx b/src/components/account.jsx
index b5310217..ad7c77bd 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -104,7 +104,7 @@ function Account({ account }) {
       {!info || uiState === 'loading' ? (
         <>
           <header>
-            <Avatar size="xxl" />
+            <Avatar size="xxxl" />
             ███ ████████████
           </header>
           <div class="note">
@@ -120,7 +120,7 @@ function Account({ account }) {
       ) : (
         <>
           <header>
-            <Avatar url={avatar} size="xxl" />
+            <Avatar url={avatar} size="xxxl" />
             <NameText account={info} showAcct external />
           </header>
           <div
@@ -141,6 +141,20 @@ function Account({ account }) {
               <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
               Followers
             </span>
+            {!!createdAt && (
+              <span>
+                Joined:{' '}
+                <b>
+                  <time datetime={createdAt}>
+                    {Intl.DateTimeFormat('en', {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric',
+                    }).format(new Date(createdAt))}
+                  </time>
+                </b>
+              </span>
+            )}
           </p>
           <p class="actions">
             {followedBy ? <span class="tag">Following you</span> : <span />}{' '}
diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx
index 3059b1e2..f8e1ca29 100644
--- a/src/components/avatar.jsx
+++ b/src/components/avatar.jsx
@@ -6,6 +6,7 @@ const SIZES = {
   l: 24,
   xl: 32,
   xxl: 50,
+  xxxl: 64,
 };
 
 function Avatar({ url, size, alt = '' }) {