Add a clear one-click to open remote profile (mastodon#1252)

The user display name on a profile page is now an [underlined hyperlink](https://github.com/hometown-fork/hometown#better-accessibility-defaults) to the actual profile page. An "external link" icon appears if it is a remote url. Fixes mastodon#1251
friendcamp · Dec 28, 2022 · ba6a13b · ba6a13b
1 parent b8802af
commit ba6a13b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 22 deletions.
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
@@ -149,6 +149,8 @@ class Header extends ImmutablePureComponent {
     }
   }
 
+  handleDisplayNameClick = () => window.open(this.props.account.get('url'));
+
   render () {
     const { account, hidden, intl, domain } = this.props;
     const { signedIn } = this.context.identity;
@@ -330,7 +332,7 @@ class Header extends ImmutablePureComponent {
 
           <div className='account__header__tabs__name'>
             <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} /> {badge}
+              <a href={account.get('url')} target='_blank' rel='noopener noreferrer'><span dangerouslySetInnerHTML={displayNameHtml} /></a>{isRemote ? <span> <IconButton icon='external-link' size={14} onClick={this.handleDisplayNameClick} /></span> : null} {badge}
               <small>@{acct} {lockedIcon}</small>
             </h1>
           </div>

diff --git a/app/javascript/styles/fairy-floss/diff.scss b/app/javascript/styles/fairy-floss/diff.scss
@@ -84,27 +84,29 @@ html {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: $purplescrollbar;
-    border: 0 #f8f8f2;
-    border-radius: 50px;
+  background: $purplescrollbar;
+  border: 0 #f8f8f2;
+  border-radius: 50px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: $purplescrollbar;
-    border: 0;
+  background: $purplescrollbar;
+  border: 0;
 }
 
 ::-webkit-scrollbar-track:hover {
-    background: darken($purple2, 6%);
+  background: darken($purple2, 6%);
 }
 
-.loading-bar
-  {
-    background-color: $mint;
-  }
+.loading-bar {
+  background-color: $mint;
+}
 
 // text
-.status__display-name, .column-header, .column-link, .navigation-bar strong {
+.status__display-name,
+.column-header,
+.column-link,
+.navigation-bar strong {
   color: $purple4;
 }
 
@@ -313,8 +315,8 @@ a.mention, .notification__message .fa {
 
 // profile in deck view
 
-.account__header__bar {
-  background: $purple5;
+.account__header__bar .avatar .account__avatar {
+  border-color: $purple1;
 }
 
 .account__header__image {
@@ -551,4 +553,4 @@ a.mention, .notification__message .fa {
 
 .tabs-bar__wrapper {
   background: $purple1;
-}
+}
diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
@@ -83,9 +83,6 @@ html {
 .column-header__back-button,
 .column-header__button,
 .column-header__button.active,
-.account__header__bar {
-  background: $purple;
-}
 
 .column-header__button.active {
   color: $ui-highlight-color;
@@ -99,7 +96,7 @@ html {
 }
 
 .account__header__bar .avatar .account__avatar {
-  border-color: $white;
+  border-color: $green;
 }
 
 .getting-started__footer a {

diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
@@ -39,6 +39,7 @@ $content-width: 840px;
         flex: 1 1 auto;
 
         a {
+          color: $primary-text-color;
           display: block;
           padding: 15px;
         }
@@ -88,7 +89,6 @@ $content-width: 840px;
         padding-bottom: 40px;
         border-bottom: 1px solid lighten($ui-base-color, 8%);
       }
-
     }
 
     .logo--wordmark {
@@ -108,7 +108,6 @@ $content-width: 840px;
       .logo h2 .brand {
         display: none;
       }
-
     }
 
     ul {

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -7177,12 +7177,19 @@ noscript {
       h1 {
         font-size: 17px;
         line-height: 22px;
-        color: $primary-text-color;
         font-weight: 700;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
 
+        a {
+          color: $primary-text-color;
+        }
+
+        button {
+          color: $primary-text-color;
+        }
+
         small {
           display: block;
           font-size: 15px;