Merge pull request #834 from aeternity/feature/user-profile-design-ad…

…just

User profile design adjustments

src/components/FilterButton.vue

@@ -14,7 +14,7 @@
   font-weight: 600;
   color: $light_font_color;
   display: inline-block;
-  padding: 0.45rem 0.9rem;
+  padding: 0.35rem 0.7rem;
   border: none;
   background-color: transparent;
 

src/components/ListOfTipsAndComments.vue

@@ -183,6 +183,7 @@ export default {
   a {
     color: $light_font_color;
     display: inline-block;
+    font-size: 0.8rem;
     font-weight: 600;
     margin-right: 0.5rem;
     padding: 0.5rem;

src/components/ThreeDotsMenu.vue

@@ -33,7 +33,7 @@ export default {
 <style lang="scss" scoped>
 .three-dots {
   position: relative;
-  padding: 0 0.25rem;
+  padding: 0;
   border-radius: 0.25rem;
 
   &.active {

src/components/tipRecords/AuthorAndDate.vue

@@ -13,20 +13,17 @@
     >
       <Avatar :address="address" />
       <div class="author-name">
-        <span
-          v-if="name"
-          class="chain-name"
-        >
-          {{ name }}
+        <span class="chain-name">
+          {{ name ? name : $t('FellowSuperhero') }}
         </span>
         <span class="address">
           {{ address }}
         </span>
       </div>
     </RouterLink>
     <span class="right">
-      <FormatDate v-bind="$attrs" />
       <slot />
+      <FormatDate v-bind="$attrs" />
     </span>
   </div>
 </template>
@@ -57,9 +54,10 @@ export default {
   padding: 0 1rem 0.9rem 1rem;
 
   .right {
-    font-size: 0.6rem;
+    font-size: 0.65rem;
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-end;
     justify-content: center;
   }
 

src/views/UserProfile.vue

@@ -271,7 +271,7 @@ export default {
       return `${this.profile.biography.length}/${this.maxLength}`;
     },
     tipStats() {
-      return [
+      const tipStats = [
         {
           value: this.userStats.tipsLength + this.userStats.retipsLength,
           title: this.$t('views.UserProfileView.TipsSent'),
@@ -281,11 +281,15 @@ export default {
           title: this.$t('views.UserProfileView.ClaimedAmount'),
           amount: this.userStats.claimedAmount,
         },
-        {
+
+      ];
+      if (this.currentAddress === this.address) {
+        tipStats.push({
           title: this.$t('views.UserProfileView.UnclaimedAmount'),
           amount: this.userStats.unclaimedAmount,
-        },
-      ];
+        });
+      }
+      return tipStats;
     },
     showedStats() {
       return [
@@ -603,7 +607,7 @@ input[type="file"] {
 
 .tip_stats {
   display: grid;
-  grid-template-columns: auto auto auto;
+  grid-auto-flow: column;
 
   .ae-amount-fiat {
     display: block;
@@ -633,6 +637,7 @@ input[type="file"] {
 
   img {
     height: 0.75rem;
+    margin-bottom: 0.15rem;
   }
 }
 
@@ -670,6 +675,8 @@ input[type="file"] {
   display: flex;
   flex-direction: column;
   width: calc(100% - 8.5rem);
+  justify-content: space-between;
+  height: 5.5rem;
 
   .profile__username {
     color: $tip_note_color;
@@ -711,6 +718,7 @@ input[type="file"] {
   .profile__info {
     vertical-align: middle;
     width: calc(100% - 4.5rem);
+    height: 5rem;
 
     .profile__username {
       font-size: 0.55rem;
@@ -731,7 +739,7 @@ input[type="file"] {
   }
 
   .tip_stats {
-    grid-template-columns: auto;
+    grid-auto-flow: row;
     order: 2;
   }
 
@@ -758,6 +766,10 @@ input[type="file"] {
     width: 4.5rem;
   }
 
+  .profile__info {
+    height: 4.5rem;
+  }
+
   .profile__row {
     display: block;