Aesthetic changes to Account sheet

- Larger avatar
- Less rounded sheet
- Add Joined date

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;

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

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 />}{' '}

src/components/avatar.jsx

@@ -6,6 +6,7 @@ const SIZES = {
   l: 24,
   xl: 32,
   xxl: 50,
+  xxxl: 64,
 };
 
 function Avatar({ url, size, alt = '' }) {