Adopt upstream's design for account profiles (#2622)

* Mostly adopt upstream's design for account profiles

* Reduce some margins

app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx

@@ -7,7 +7,6 @@ import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 
-
 export default class FollowRequestNote extends ImmutablePureComponent {
 
   static propTypes = {

app/javascript/flavours/glitch/features/account/components/header.jsx

@@ -9,7 +9,6 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
@@ -308,7 +307,7 @@ class Header extends ImmutablePureComponent {
       }
     }
 
-    const content          = { __html: account.get('note_emojified') };
+    const content         = { __html: account.get('note_emojified') };
     const displayNameHtml = { __html: account.get('display_name_html') };
     const fields          = account.get('fields');
     const isLocal         = account.get('acct').indexOf('@') === -1;
@@ -372,28 +371,29 @@ class Header extends ImmutablePureComponent {
             </div>
           )}
 
-          {signedIn && <AccountNoteContainer account={account} />}
-
           {!(suspended || hidden) && (
             <div className='account__header__extra'>
               <div className='account__header__bio'>
-                { fields.size > 0 && (
+                {(account.get('id') !== me && signedIn) && <AccountNoteContainer account={account} />}
-                  <div className='account__header__fields'>
-                    {fields.map((pair, i) => (
-                      <dl key={i}>
-                        <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
-
-                        <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
-                          {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' icon={CheckIcon} className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} className='translate' />
-                        </dd>
-                      </dl>
-                    ))}
-                  </div>
-                )}
 
                 {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
 
-                <div className='account__header__joined'><FormattedMessage id='account.joined' defaultMessage='Joined {date}' values={{ date: intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' }) }} /></div>
+                <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' />
+
+                      <dd className='translate' title={pair.get('value_plain')}>
+                        {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' icon={CheckIcon} className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
+                      </dd>
+                    </dl>
+                  ))}
+                </div>
               </div>
             </div>
           )}

app/javascript/flavours/glitch/locales/en.json

@@ -3,7 +3,6 @@
   "account.disclaimer_full": "Information below may reflect the user's profile incompletely.",
   "account.follows": "Follows",
   "account.follows_you": "Follows you",
-  "account.joined": "Joined {date}",
   "account.suspended_disclaimer_full": "This user has been suspended by a moderator.",
   "account.view_full_profile": "View full profile",
   "advanced_options.icon_title": "Advanced options",

app/javascript/flavours/glitch/styles/components.scss

@@ -5317,7 +5317,7 @@ a.status-card.compact:hover {
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   display: flex;
   flex-direction: row;
-  padding: 10px 0;
+  padding: 8px 0;
 }
 
 .language-dropdown {
@@ -7986,6 +7986,7 @@ noscript {
     height: 145px;
     position: relative;
     background: darken($ui-base-color, 4%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
 
     img {
       object-fit: cover;
@@ -7998,9 +7999,9 @@ noscript {
 
   &__bar {
     position: relative;
-    background: lighten($ui-base-color, 4%);
+    padding: 0 20px;
-    padding: 5px;
+    padding-bottom: 16px; // glitch-soc addition for the different tabs design
-    border-bottom: 1px solid lighten($ui-base-color, 12%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
 
     .avatar {
       display: block;
@@ -8009,7 +8010,7 @@ noscript {
 
       .account__avatar {
         background: darken($ui-base-color, 8%);
-        border: 2px solid lighten($ui-base-color, 4%);
+        border: 2px solid $ui-base-color;
       }
     }
   }
@@ -8028,8 +8029,8 @@ noscript {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    padding: 7px 10px;
     margin-top: -55px;
+    padding-top: 10px;
     gap: 8px;
     overflow: hidden;
     margin-inline-start: -2px; // aligns the pfp with content below
@@ -8064,7 +8065,8 @@ noscript {
     }
 
     &__name {
-      padding: 5px 10px;
+      margin-top: 16px;
+      margin-bottom: 16px;
 
       .emojione {
         width: 22px;
@@ -8072,17 +8074,17 @@ noscript {
       }
 
       h1 {
-        font-size: 16px;
+        font-size: 17px;
-        line-height: 24px;
+        line-height: 22px;
         color: $primary-text-color;
-        font-weight: 500;
+        font-weight: 700;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
 
         small {
           display: block;
-          font-size: 14px;
+          font-size: 15px;
           color: $darker-text-color;
           font-weight: 400;
           overflow: hidden;
@@ -8108,63 +8110,97 @@ noscript {
   }
 
   &__bio {
-    overflow: hidden;
-    margin: 0 -5px;
-
     .account__header__content {
-      padding: 20px 15px;
-      padding-bottom: 5px;
       color: $primary-text-color;
     }
 
-    .account__header__joined {
-      font-size: 14px;
-      padding: 5px 15px;
-      color: $darker-text-color;
-
-      .columns-area--mobile & {
-        padding-inline-start: 20px;
-        padding-inline-end: 20px;
-      }
-    }
-
     .account__header__fields {
       margin: 0;
-      border-top: 1px solid lighten($ui-base-color, 12%);
+      margin-top: 16px;
+      border-radius: 4px;
+      background: darken($ui-base-color, 4%);
+      border: 0;
+
+      dl {
+        display: block;
+        padding: 8px 16px; // glitch-soc: padding purposefuly reduced
+        border-bottom-color: lighten($ui-base-color, 4%);
+      }
+
+      dd,
+      dt {
+        font-size: 13px;
+        line-height: 18px;
+        padding: 0;
+        text-align: initial;
+      }
+
+      dt {
+        width: auto;
+        background: transparent;
+        text-transform: uppercase;
+        color: $dark-text-color;
+      }
+
+      dd {
+        color: $darker-text-color;
+      }
 
       a {
         color: lighten($ui-highlight-color, 8%);
       }
 
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
-
       .icon {
         width: 18px;
         height: 18px;
-        vertical-align: middle;
       }
 
-      dd {
+      .verified {
-        display: flex;
+        border: 1px solid rgba($valid-value-color, 0.5);
-        align-items: center;
+        margin-top: -1px;
-        gap: 4px;
-      }
 
-      .verified a {
+        &:first-child {
-        color: $valid-value-color;
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+          margin-top: 0;
+        }
+
+        &:last-child {
+          border-bottom-left-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+
+        dt,
+        dd {
+          color: $valid-value-color;
+        }
+
+        dd {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          span {
+            display: flex;
+          }
+        }
+
+        a {
+          color: $valid-value-color;
+        }
       }
     }
   }
 
   &__extra {
-    margin-top: 4px;
+    margin-top: 16px;
 
     &__links {
       font-size: 14px;
       color: $darker-text-color;
-      padding: 10px 0;
+      margin: 0 -10px;
+      padding-top: 16px;
+      padding-bottom: 10px;
 
       a {
         display: inline-block;
@@ -8182,14 +8218,10 @@ noscript {
   }
 
   &__account-note {
-    margin: 0 -5px;
+    color: $primary-text-color;
-    padding: 10px 15px;
-    display: flex;
-    flex-direction: column;
     font-size: 14px;
     font-weight: 400;
-    border-top: 1px solid lighten($ui-base-color, 12%);
+    margin-bottom: 10px;
-    border-bottom: 1px solid lighten($ui-base-color, 12%);
 
     label {
       display: block;
@@ -8200,23 +8232,12 @@ noscript {
       margin-bottom: 5px;
     }
 
-    &__content {
-      white-space: pre-wrap;
-      padding: 10px 0;
-    }
-
-    strong {
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: uppercase;
-    }
-
     textarea {
       display: block;
       box-sizing: border-box;
       width: calc(100% + 20px);
       color: $secondary-text-color;
-      background: $ui-base-color;
+      background: transparent;
       padding: 10px;
       margin: 0 -10px;
       font-family: inherit;
@@ -8230,6 +8251,10 @@ noscript {
         color: $dark-text-color;
         opacity: 1;
       }
+
+      &:focus {
+        background: $ui-base-color;
+      }
     }
   }
 }