UX: user-card adjustments for users with hidden profiles (#7293)

* adds styles for profile hidden message

* Disable profile links for hidden profiles and add message to indicate the profile is hidden

app/assets/javascripts/discourse/templates/components/user-card-contents.hbs

@@ -3,7 +3,11 @@
 
     <div class="card-row first-row">
       <div class="user-card-avatar">
-        <a href {{action "showUser" user}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a>
+        {{#if user.profile_hidden}}
+          <span class="card-huge-avatar">{{bound-avatar user "huge"}}</span>
+        {{else}}
+          <a href {{action "showUser" user}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a>
+        {{/if}}
         {{#if user.primary_group_name}}
           {{avatar-flair
           flairURL=user.primary_group_flair_url
@@ -16,10 +20,17 @@
       <div class="names">
         <span>
           <h1 class="{{staff}} {{newUser}} {{if nameFirst "full-name" "username"}}">
-            <a href {{action "showUser" user}} class='user-profile-link'>
-              {{if nameFirst user.name (format-username username)}}
-              {{user-status user currentUser=currentUser}}
-            </a>
+            {{#if user.profile_hidden}}
+              <span>
+                {{if nameFirst user.name (format-username username)}}
+                {{user-status user currentUser=currentUser}}
+              </span>
+            {{else}}
+              <a href {{action "showUser" user}} class='user-profile-link'>
+                {{if nameFirst user.name (format-username username)}}
+                {{user-status user currentUser=currentUser}}
+              </a>
+            {{/if}}
           </h1>
           {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser" user)) tagName=''}}
           {{#unless nameFirst}}
@@ -82,6 +93,14 @@
       tagName=""}}
     </div>
 
+    {{#if user.profile_hidden}}
+      <div class="card-row second-row">
+        <div class='profile-hidden'>
+          <span>{{i18n "user.profile_hidden"}}</span>
+        </div>
+      </div>
+    {{/if}}
+
     {{#if isSuspendedOrHasBio}}
       <div class="card-row second-row">
         {{#if user.suspend_reason}}
@@ -126,7 +145,7 @@
       </div>
     {{/if}}
 
-    {{#if user}}
+    {{#if user.time_read}}
       <div class="card-row fourth-row">
         {{#unless user.profile_hidden}}
           <div class="metadata">
@@ -202,4 +221,4 @@
     {{/if}}
 
   </div>
-{{/if}}
+{{/if}}

app/assets/stylesheets/common/components/user-card.scss

@@ -136,6 +136,10 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
         font-weight: bold;
       }
     }
+    .profile-hidden {
+      font-size: $font-up-1;
+      margin-top: 0.5em;
+    }
   }
   // location and website
   .third-row {