From 76cf9c7103e2f12a888dc08b4af18626882efe1d Mon Sep 17 00:00:00 2001
From: Allen Zhong <allen@moe.cat>
Date: Tue, 15 Nov 2022 18:11:03 +0800
Subject: [PATCH] optimize web ui for 4.0

---
 .../features/account/components/header.js     | 10 ++--
 .../styles/mastodon/components.scss           | 49 ++++++++++++-------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index 539d7257418f4e..45f67129c088ae 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -367,11 +367,6 @@ class Header extends ImmutablePureComponent {
                 {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
 
                 <div className='account__header__fields'>
-                  <dl>
-                    <dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt>
-                    <dd>{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}</dd>
-                  </dl>
-
                   {fields.map((pair, i) => (
                     <dl key={i} className={classNames({ verified: pair.get('verified_at') })}>
                       <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
@@ -382,6 +377,11 @@ class Header extends ImmutablePureComponent {
                     </dl>
                   ))}
                 </div>
+
+                <div className='account__header__joined'>
+                  <FormattedMessage id='account.joined_short' defaultMessage='Joined' />
+                  {intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}
+                </div>
               </div>
 
               <div className='account__header__extra__links'>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index a144a4bedc080b..ec0b0396da3500 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -865,7 +865,7 @@ body > [data-popper-placement] {
   font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-top: 2px;
+  padding-top: 4px;
   color: $primary-text-color;
 
   &:focus {
@@ -1083,7 +1083,7 @@ body > [data-popper-placement] {
   border: 0;
   background: transparent;
   padding: 0;
-  padding-top: 16px;
+  padding-top: 12px;
   text-decoration: none;
 
   &:hover,
@@ -1222,8 +1222,7 @@ body > [data-popper-placement] {
 }
 
 .status__prepend-icon-wrapper {
-  left: -26px;
-  position: absolute;
+  position: inherit;
 }
 
 .focusable {
@@ -1239,7 +1238,7 @@ body > [data-popper-placement] {
 }
 
 .status {
-  padding: 16px;
+  padding: 16px 16px 12px;
   min-height: 54px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: auto;
@@ -1327,7 +1326,7 @@ body > [data-popper-placement] {
   display: flex;
   font-size: 15px;
   line-height: 22px;
-  align-items: center;
+  align-items: flex-start;
   gap: 10px;
   overflow: hidden;
 
@@ -1348,11 +1347,10 @@ body > [data-popper-placement] {
 
 .status__info {
   font-size: 15px;
-  margin-bottom: 10px;
+  margin-bottom: 4px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 10px;
 }
 
 .status-check-box__status {
@@ -1393,10 +1391,13 @@ body > [data-popper-placement] {
 .status__prepend {
   padding: 16px;
   padding-bottom: 0;
+  padding-left: 3em;
+  margin-top: -6px;
+  margin-bottom: -12px;
   display: flex;
-  gap: 10px;
-  font-size: 15px;
-  line-height: 22px;
+  gap: 16px;
+  font-size: 13px;
+  line-height: 18px;
   font-weight: 500;
   color: $dark-text-color;
 
@@ -1416,7 +1417,7 @@ body > [data-popper-placement] {
   justify-content: space-between;
   align-items: center;
   gap: 18px;
-  margin-top: 16px;
+  margin-top: 10px;
 }
 
 .detailed-status__action-bar-dropdown {
@@ -1775,6 +1776,7 @@ a .account__avatar {
 .detailed-status__application,
 .account__display-name {
   text-decoration: none;
+  padding-top: 1px;
 }
 
 .status__display-name,
@@ -1821,7 +1823,7 @@ a.account__display-name {
   gap: 10px;
   font-size: 15px;
   line-height: 22px;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
   overflow: hidden;
 
   strong,
@@ -1922,13 +1924,16 @@ a.account__display-name {
 .notification__message {
   padding: 16px;
   padding-bottom: 0;
+  padding-left: 3em;
+  margin-top: -6px;
+  margin-bottom: -12px;
   cursor: default;
   color: $darker-text-color;
-  font-size: 15px;
-  line-height: 22px;
+  font-size: 13px;
+  line-height: 18px;
   font-weight: 500;
   display: flex;
-  gap: 10px;
+  gap: 16px;
 
   .fa {
     color: $highlight-text-color;
@@ -1942,6 +1947,8 @@ a.account__display-name {
 }
 
 .notification__favourite-icon-wrapper {
+  position: inherit;
+
   .star-icon {
     color: $gold-star;
   }
@@ -3533,7 +3540,7 @@ button.icon-button.active i.fa-retweet {
   border: 1px solid lighten($ui-base-color, 8%);
   border-radius: 4px;
   color: $dark-text-color;
-  margin-top: 14px;
+  margin-top: 12px;
   text-decoration: none;
   overflow: hidden;
 
@@ -7361,6 +7368,12 @@ noscript {
       color: $primary-text-color;
     }
 
+    .account__header__joined {
+      font-size: 14px;
+      padding: 6px 0 0;
+      color: $darker-text-color;
+    }
+
     .account__header__fields {
       margin: 0;
       margin-top: 16px;