Merge pull request #40 from NickColley/profile-improvements

Profile improvements

src/intl/de.js

@@ -311,6 +311,7 @@ export default {
   fields: 'Felder',
   accountHasMoved: '{account} ist umgezogen:',
   profilePageForAccount: 'Profilseite für {account}',
+  verified: 'Verified',
   // About page
   about: 'Über',
   aboutApp: 'Über Semaphore',

src/intl/en-US.js

@@ -323,6 +323,7 @@ export default {
   fields: 'Fields',
   accountHasMoved: '{account} has moved:',
   profilePageForAccount: 'Profile page for {account}',
+  verified: 'Verified',
   // About page
   about: 'About',
   aboutApp: 'About Semaphore',

src/intl/es.js

@@ -324,6 +324,7 @@ export default {
   fields: 'Campos',
   accountHasMoved: '{account} se ha trasladado:',
   profilePageForAccount: 'Página de perfil para {account}',
+  verified: 'Verified',
   // About page
   about: 'Acerca de',
   aboutApp: 'Acerca de Semaphore',

src/intl/fr.js

@@ -313,6 +313,7 @@ export default {
   fields: 'Champs',
   accountHasMoved: '{account} a déménagé',
   profilePageForAccount: 'Page de profil pour {account}',
+  verified: 'Verified',
   // About page
   about: 'Infos',
   aboutApp: 'Infos sur Semaphore',

src/intl/ru-RU.JS

@@ -323,6 +323,7 @@ export default {
   fields: 'Поля',
   accountHasMoved: '{account} переехал:',
   profilePageForAccount: 'Страница профиля для {account}',
+  verified: 'Verified',
   // About page
   about: 'О нас',
   aboutApp: 'О Semaphore',

src/routes/_components/profile/AccountProfile.html

@@ -5,6 +5,11 @@
 <div class={className}
      style="background-image: url({headerImage});"
      ref:accountProfile>
+  {#if !headerImageIsMissing}
+    <div class="account-profile-banner">
+      <img class="account-profile-banner-image" src={headerImage} alt=""/>
+    </div>
+  {/if}
   <div class="account-profile-grid-wrapper">
     <div class="account-profile-grid">
       <AccountProfileHeader {account} {relationship} {verifyCredentials} />
@@ -21,7 +26,6 @@
     position: relative;
     background-size: cover;
     background-position: center;
-    padding-top: 175px;
   }
 
   .account-profile.moved {
@@ -29,7 +33,6 @@
   }
 
   .account-profile.header-image-is-missing {
-    padding-top: 0;
     background-color: #ccc;
   }
 
@@ -41,7 +44,7 @@
                          "meta       meta        meta      meta          meta"
                          "details    details     details   details       details";
     grid-template-columns: min-content auto 1fr 1fr min-content;
-    grid-column-gap: 10px;
+    grid-column-gap: 15px;
     grid-row-gap: 5px;
     padding: 20px;
     justify-content: center;
@@ -50,8 +53,8 @@
 
   @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
     :global(.account-profile-grid-wrapper) {
-      -webkit-backdrop-filter: blur(7px) saturate(110%);
+      -webkit-backdrop-filter: blur(20px) saturate(110%);
-      backdrop-filter: blur(7px) saturate(110%);
+      backdrop-filter: blur(20px) saturate(110%);
       background-color: var(--account-profile-bg-backdrop-filter);
     }
   }
@@ -106,6 +109,17 @@
       grid-row-gap: 0;
     }
   }
+
+  .account-profile-banner {
+    aspect-ratio: 3/1;
+    background-color: var(--body-bg);
+  }
+  .account-profile-banner-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 </style>
 <script>
   import AccountProfileHeader from './AccountProfileHeader.html'

src/routes/_components/profile/AccountProfileDetails.html

@@ -1,36 +1,36 @@
 <h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
 <div class="account-profile-details">
   <div class="account-profile-details-item">
-    <span class="account-profile-details-item-title">
-      {intl.statuses}
-    </span>
     <span class="account-profile-details-item-datum">
       {numStatusesDisplay}
     </span>
+    <span class="account-profile-details-item-title">
+      {intl.statuses}
+    </span>
   </div>
   <a class="account-profile-details-item"
      href='/accounts/{account.id}/follows'
      aria-label={followingLabel}
      rel="prefetch"
   >
-    <span class="account-profile-details-item-title">
-      {intl.follows}
-    </span>
     <span class="account-profile-details-item-datum">
       {numFollowingDisplay}
     </span>
+    <span class="account-profile-details-item-title">
+      {intl.follows}
+    </span>
   </a>
   <a class="account-profile-details-item"
      href='/accounts/{account.id}/followers'
      aria-label={followersLabel}
      rel="prefetch"
   >
-    <span class="account-profile-details-item-title">
-      {intl.followers}
-    </span>
     <span class="account-profile-details-item-datum">
       {numFollowersDisplay}
     </span>
+    <span class="account-profile-details-item-title">
+      {intl.followers}
+    </span>
   </a>
   <!-- TODO: re-enable this when we support profile editing -->
   {#if account && verifyCredentials && account.id !== verifyCredentials.id}
@@ -61,25 +61,23 @@
     font-size: 1.1em;
   }
 
-  .account-profile-details-item:hover {
+  .account-profile-details-item[href]:hover {
     text-decoration: none;
     background: var(--button-bg-hover);
     cursor: pointer;
   }
 
-  .account-profile-details-item:active {
+  .account-profile-details-item[href]:active {
     background: var(--button-bg-active);
   }
 
   .account-profile-details-item-title {
-    text-transform: uppercase;
     color: var(--deemphasized-text-color);
-    margin-right: 5px;
   }
 
   .account-profile-details-item-datum {
     color: var(--body-text-color);
-    margin-left: 5px;
+    margin-right: 5px;
     font-weight: 600;
   }
 

src/routes/_components/profile/AccountProfileFollow.html

@@ -6,17 +6,9 @@
      - If a follow is requested, then the button is pressed but shows as "follow requested" with
        a different icon.
   -->
-  <IconButton
+  <button class="account-profile-follow-button" on:click="onFollowButtonClick(event)">
-    className="account-profile-follow-icon-button"
+    {pressed ? pressedLabel : label}
-    {label}
+  </button>
-    {pressedLabel}
-    {href}
-    {pressable}
-    {pressed}
-    big={!$isVeryTinyMobileSize}
-    on:click="onFollowButtonClick(event)"
-    ref:icon
-  />
 </div>
 <style>
   .account-profile-follow {
@@ -33,6 +25,12 @@
       justify-self: flex-end;
     }
   }
+
+  .account-profile-follow-button {
+    padding: 0.6em;
+    font-size: 1.1em;
+    min-width: 10ch;
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'
@@ -99,17 +97,6 @@
       pressedLabel: ({ requested }) => {
         return formatIntl('intl.unfollowLabel', { requested })
       },
-      href: ({ blocking, following, followRequested }) => {
-        if (blocking) {
-          return '#fa-unlock'
-        } else if (following) {
-          return '#fa-user-times'
-        } else if (followRequested) {
-          return '#fa-hourglass'
-        } else {
-          return '#fa-user-plus'
-        }
-      },
       shown: ({ verifyCredentials, relationship }) => (
         verifyCredentials && relationship && verifyCredentials.id !== relationship.id
       ),

src/routes/_components/profile/AccountProfileHeader.html

@@ -7,20 +7,15 @@
   </button>
 </div>
 <div class="account-profile-name">
-  <ExternalLink
+  <AccountDisplayName {account} />
-    className="account-profile-name-link focus-fix"
-    href={account.url}
-    showIcon="true"
-    normalIconColor="true"
-    ariaLabel={externalLinkLabel}>
-    <AccountDisplayName {account} />
-  </ExternalLink>
 </div>
 {#if label}
   <Label {label} className="account-profile-label" />
 {/if}
 <div class="account-profile-username">
-  {'@' + account.acct}
+  <ExternalLink className="focus-fix" href={account.url}>
+    {'@' + account.acct}
+  </ExternalLink>
 </div>
 <div class="account-profile-followed-by">
   {#if relationship && relationship.blocking}
@@ -46,10 +41,10 @@
     white-space: nowrap;
   }
   .account-profile-followed-by-span {
-    background: rgba(30, 30, 30, 0.2);
-    border-radius: 4px;
-    padding: 3px 5px;
     white-space: nowrap;
+    padding: 3px 6px;
+    border: 1px solid;
+    border-radius: 4px;
   }
   .account-profile-avatar {
     grid-area: avatar;

src/routes/_components/profile/AccountProfileMeta.html

@@ -17,9 +17,16 @@
       >
         {@html field.value}
       </div>
-      <div class="account-profile-meta-cell account-profile-meta-verified">
+      <div class="account-profile-meta-cell">
         {#if field.verified}
-          <SvgIcon className="account-profile-meta-verified-svg" href="#fa-check" />
+          <span class="account-profile-meta-verified">
+            <SvgIcon
+              ariaLabel="verified"
+              className="account-profile-meta-verified-svg"
+              href="#fa-check"
+            />
+            {intl.verified}
+          </span>
         {/if}
       </div>
     {/each}
@@ -40,7 +47,8 @@
     height: 1px;
     width: 100%;
     grid-column: 1 / 4;
-    background: var(--main-border);
+    background: currentColor;
+    opacity: 0.2;
     justify-self: center;
   }
 
@@ -52,15 +60,8 @@
     font-size: 1.1em;
   }
 
-  :global(.account-profile-meta-verified-svg) {
-    width: 24px;
-    height: 24px;
-    fill: var(--svg-fill);
-  }
-
   .account-profile-meta-name {
     padding: 10px 20px 10px 0;
-    text-transform: uppercase;
     color: var(--deemphasized-text-color);
     position: relative;
     max-width: 300px;
@@ -72,7 +73,8 @@
     right: 0;
     top: 15%;
     height: 70%;
-    border-right: 1px solid var(--main-border);
+    border-right: 1px solid;
+    opacity: 0.2;
   }
 
   .account-profile-meta-value {
@@ -98,6 +100,31 @@
       padding: 5px 10px 5px 10px;
     }
   }
+
+  .account-profile-meta-verified {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    gap: 0.2em;
+    margin-left: 0.5em;
+    padding: 2px 0;
+    padding-left: 4px;
+    padding-right: 5px;
+    font-size: 0.9em;
+    color: var(--verified-text-color);
+    background: var(--verified-bg-color);
+    border: 1px solid var(--verified-border-color, currentColor);
+    border-radius: 4px;
+  }
+
+  :global(.account-profile-meta-verified-svg) {
+    display: inline-block;
+    width: .9em;
+    height: .9em;
+    fill: currentColor;
+    opacity: 0.95;
+  }
 </style>
 <script>
   import SvgIcon from '../SvgIcon.html'

src/scss/global.scss

@@ -6,7 +6,7 @@ body {
   margin: 0;
   font-family: system-ui, -apple-system, SemaphoreRegular, sans-serif;
   font-size: 14px;
-  line-height: 1.4;
+  line-height: 1.5;
   color: var(--body-text-color);
   background: var(--body-bg);
   -webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android

src/scss/themes/_base.scss

@@ -77,7 +77,7 @@
   --mask-opaque-bg: #{rgba($toast-bg, 0.8)};
   --loading-bg: #{#ededed};
 
-  --account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.7)};
+  --account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.85)};
   --account-profile-bg: #{rgba($main-bg-color, 0.9)};
 
   --deemphasized-text-color: #{$deemphasized-color};
@@ -134,6 +134,9 @@
 
   --focus-bg: #{rgba(0, 0, 0, 0.1)};
 
+  --verified-text-color: #00703C;
+  --verified-bg-color: #E1EFE8;
+
   accent-color: #{$main-theme-color};
   color-scheme: light;
 }

src/scss/themes/_dark.scss

@@ -1,6 +1,12 @@
 :root {
   $deemphasized-color: lighten($main-bg-color, 54%);
 
+  --button-bg: #{lighten($main-bg-color, 6%)};
+  --button-text: #{$main-text-color};
+  --button-border: #{lighten($border-color, 6%)};
+  --button-bg-active: #{lighten($main-bg-color, 0%)};
+  --button-bg-hover: #{lighten($main-bg-color, 3%)};
+
   --input-placeholder-color: #{$deemphasized-color};
 
   --action-button-deemphasized-fill-color: #{$deemphasized-color};
@@ -55,5 +61,9 @@
 
   --focus-bg: #{rgba(255, 255, 255, 0.1)};
 
+  --verified-text-color: #1CA665;
+  --verified-bg-color: #172B29;
+  --verified-border-color: #104c34;
+
   color-scheme: dark;
 }