From 3e4a3d2609e75b344bdfff7865c74d485f1975dc Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 24 May 2020 01:54:58 +0300
Subject: [PATCH] Add link to user's profile

---
 src/components/Status/index.vue | 17 ++++++++++++-----
 src/views/statuses/show.vue     | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 3bd2c656..3b19204b 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -5,10 +5,12 @@
         <div class="status-account-container">
           <div class="status-account">
             <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
-            <img :src="account.avatar" class="status-avatar-img">
-            <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
-              <h3 class="status-account-name">{{ account.display_name }}</h3>
-            </a>
+            <router-link v-if="!account.deactivated && account.id" :to="{ name: 'UsersShow', params: { id: account.id }}" @click.native.stop>
+              <div class="status-card-header">
+                <img :src="account.avatar" class="status-avatar-img">
+                <h3 class="status-account-name">{{ account.display_name }}</h3>
+              </div>
+            </router-link>
             <span v-else>
               <h3 class="status-account-name">{{ account.display_name }}</h3>
               <h3 class="status-account-name deactivated"> (deactivated)</h3>
@@ -263,12 +265,16 @@ export default {
   .status-account-name {
     display: inline-block;
     margin: 0;
-    height: 22px;
+    font-size: 16px;
   }
   .status-body {
     display: flex;
     flex-direction: column;
   }
+  .status-card-header {
+    display: flex;
+    align-items: center;
+  }
   .status-checkbox {
     margin-right: 7px;
   }
@@ -292,6 +298,7 @@ export default {
   .status-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
   .status-without-content {
     font-style: italic;
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index b481d86c..ea5a114a 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -2,10 +2,14 @@
   <div v-if="!loading" class="status-show-container">
     <header v-if="isDesktop || isTablet" class="user-page-header">
       <div class="avatar-name-container">
-        <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
-        <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+        <router-link :to="{ name: 'UsersShow', params: { id: user.id }}">
+          <div class="avatar-name-header">
+            <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
+            <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+          </div>
+        </router-link>
         <a v-if="accountExists(user, 'url')" :href="user.url" target="_blank" class="account">
-          <i class="el-icon-top-right"/>
+          <i class="el-icon-top-right" title="Open user in instance"/>
         </a>
       </div>
       <div class="left-header-container">
@@ -125,6 +129,11 @@ export default {
     color: #606266;
   }
 }
+.avatar-name-header {
+  display: flex;
+  height: 40px;
+  align-items: center;
+}
 .no-statuses {
   margin-left: 28px;
   color: #606266;