fix: styles

src/components/ActivityRibbon.vue

@@ -6,11 +6,7 @@
       :class="{ active: value === tab.activity }"
       @click="updateValue(tab.activity)"
     >
-      <Component :is="tab.icon" />
-
-      <span class="text">
-        {{ tab.text }}
-      </span>
+      <Component :is="tab.icon" /> <span>{{ tab.text }}</span>
     </FilterButton>
     <slot name="left" />
     <div class="separator" />
@@ -45,8 +41,11 @@ export default {
   display: flex;
   align-items: center;
 
-  .text {
-    padding-left: 0.15rem;
+  .filter-button {
+    svg,
+    span {
+      vertical-align: middle;
+    }
   }
 
   .separator {

src/components/Dropdown.vue

@@ -103,6 +103,7 @@ export default {
     color: $standard_font_color;
     box-shadow: inset 0 0 0.1rem $article_content_color;
     border-radius: unset;
+    white-space: nowrap;
 
     &:first-child {
       border-radius: 0.15rem 0.15rem 0 0;

src/components/FilterButton.vue

@@ -21,7 +21,7 @@ export default {
   border-radius: 50px;
   font-size: 16px;
   font-weight: 700;
-  line-height: 18px;
+  line-height: 22px;
   padding: 8px 16px;
   color: $tip_note_color;
   height: 40px;

src/components/Input.vue

@@ -22,6 +22,8 @@
   padding: 8.5px 16px;
 
   &:focus {
+    transition: 0.3s;
+    transition-property: background-color, border-color;
     border-color: $secondary_color;
     background-color: $actions_ribbon_background_color;
   }

src/components/Loader.vue

@@ -53,6 +53,8 @@ export default {
   .svg {
     width: 56px;
     height: 56px;
+    display: block;
+    margin: 0 auto;
   }
 
   &.lg .svg {

src/components/TabBarButton.vue

@@ -38,5 +38,12 @@ export default {
       border-color: $custom_links_color;
       color: $custom_links_color;
     }
+
+    ::v-deep {
+      svg,
+      span {
+        vertical-align: middle;
+      }
+    }
   }
 </style>

src/components/UserInfo.vue

@@ -641,6 +641,10 @@ input[type="file"] {
   color: $lighter_font_color;
   font-size: 0.7rem;
   vertical-align: middle;
+
+  img {
+    vertical-align: middle;
+  }
 }
 
 .profile-section {
@@ -776,6 +780,7 @@ input[type="file"] {
       height: 0.9rem;
       margin-bottom: 0.2rem;
       margin-right: 0.2rem;
+      vertical-align: middle;
     }
   }
 

src/components/VoteCard.vue

@@ -58,23 +58,12 @@
         </OutlinedButton>
       </div>
 
-      <label
-        v-if="vote.showVoteOption"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.Amount') }}
-      </label>
-      <label
-        v-if="vote.accountHasVoted"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.Staked') }}
-      </label>
-      <label
-        v-if="!vote.showVoteOption && !vote.accountHasVoted"
-        class="stake-label"
-      >
-        {{ $t('components.VoteCard.NotParticipate') }}
+      <label class="stake-label">
+        {{
+          vote.showVoteOption && $t('components.VoteCard.Amount')
+          || vote.accountHasVoted && $t('components.VoteCard.Staked')
+          || $t('components.VoteCard.NotParticipate')
+        }}
       </label>
 
       <div class="input-bar">
@@ -354,6 +343,7 @@ export default {
       svg {
         height: 16px;
         width: auto;
+        vertical-align: middle;
       }
 
       time {
@@ -385,10 +375,6 @@ export default {
   &:active,
   &:hover {
     background-color: $card_hover_color;
-
-    ::v-deep .form-control {
-      background-color: $super_dark;
-    }
   }
 
   .vote-progress-bar {
@@ -460,23 +446,6 @@ export default {
     }
   }
 
-  .input-group {
-    width: 50%;
-    height: 100%;
-
-    .input-group-append > span.append__ae {
-      font-size: 0.62rem;
-    }
-
-    .form-control {
-      height: 100%;
-    }
-
-    @include mobile {
-      width: 100%;
-    }
-  }
-
   ::v-deep .ae-button {
     font-weight: bold;
     font-size: 0.8rem;

src/components/WordBuySellButtons.vue

@@ -412,11 +412,6 @@ export default {
   }
 }
 
-.input-group {
-  width: 228px;
-  margin-bottom: 24px;
-}
-
 .return-amount {
   display: flex;
   flex-direction: row;

src/components/WordInfo.vue

@@ -424,6 +424,10 @@ export default {
         }
       }
     }
+
+    figure {
+      margin: 0 0 1rem;
+    }
   }
 
   .legend {

src/components/WordListing.vue

@@ -186,6 +186,7 @@ export default {
     height: 24px;
     color: $standard_font_color;
     transition: color 0.3s;
+    vertical-align: middle;
 
     &.asc {
       transform: rotate(180deg);

src/components/WordVoting.vue

@@ -70,18 +70,16 @@
           </i18n>
 
           <div class="initiate-vote-inputs">
-            <input
+            <Input
               v-model.trim="newVotePayout"
-              class="form-control"
               :placeholder="$t('views.WordDetail.CreateVote.AddressPlaceholder')"
-            >
+            />
 
             <AeButton
               :disabled="!newVotePayout || !description.length"
               @click="createVote"
             >
-              <IconCheckmarkCircle />
-              {{ $t('views.WordDetail.Initiate') }}
+              <IconCheckmarkCircle /> <span>{{ $t('views.WordDetail.Initiate') }}</span>
             </AeButton>
           </div>
         </template>
@@ -232,6 +230,7 @@ import TabBar from './TabBar.vue';
 import TabBarButton from './TabBarButton.vue';
 import ButtonPlain from './ButtonPlain.vue';
 import Loader from './Loader.vue';
+import Input from './Input.vue';
 import { shiftDecimalPlaces, blockToDate } from '../utils';
 
 export default {
@@ -251,6 +250,7 @@ export default {
     ButtonPlain,
     WordBuySellButtons,
     Loader,
+    Input,
   },
   props: {
     data: { type: Object, required: true },
@@ -462,7 +462,8 @@ export default {
 
     &.fade-enter-active,
     &.fade-leave-active {
-      transition: all 0.5s ease;
+      transition: 0.5s ease;
+      transition-property: transform opacity;
     }
 
     &.fade-enter,
@@ -480,20 +481,16 @@ export default {
       flex-direction: row;
       margin-top: 0.4rem;
 
-      input {
-        background-color: $buttons_background;
-        color: $standard_font_color;
-        border: 0.05rem solid $buttons_background;
-        border-radius: 0.25rem;
+      .input {
         flex: 1;
         margin-right: 1.2rem;
-        font-size: 14px;
         height: 40px;
+      }
 
-        &:focus,
-        &:active {
-          border: 0.05rem solid $secondary_color;
-          box-shadow: none;
+      .ae-button {
+        svg,
+        span {
+          vertical-align: middle;
         }
       }
     }
@@ -511,6 +508,8 @@ export default {
     color: $small_heading_color;
     font-weight: 500;
     font-size: 0.75rem;
+    display: inline-block;
+    margin-bottom: 0.5rem;
     padding-left: 0.1rem;
   }
 
@@ -519,11 +518,17 @@ export default {
     flex-direction: column;
 
     h3 {
+      margin-top: 0;
+      line-height: 1.2;
       color: $pure_white;
       font-size: 15px;
       font-weight: 500;
     }
 
+    p {
+      margin-top: 0;
+    }
+
     .buttons {
       display: flex;
       justify-content: center;
@@ -552,6 +557,11 @@ export default {
             }
           }
         }
+
+        svg,
+        span {
+          vertical-align: middle;
+        }
       }
     }
   }

src/components/layout/SearchInput.vue

@@ -79,12 +79,13 @@ export default {
     }
   }
 
-  ::v-deep svg {
+  svg {
     height: 24px;
     opacity: 0.44;
     color: $standard_font_color;
     transition: opacity 0.3s;
     cursor: pointer;
+    vertical-align: middle;
 
     .background {
       opacity: 0;
@@ -100,6 +101,10 @@ export default {
     }
   }
 
+  .iconEraser {
+    padding: 4px;
+  }
+
   &.sided {
     height: 44px;
 

src/components/tipRecords/TipComment.vue

@@ -19,15 +19,13 @@
         :comment="{ tipId, id }"
         @click.native.stop
       />
-      <div
+      <ButtonPlain
         class="comments-count"
         :title="$t('components.tipRecords.TipComment.Replies')"
+        @click.stop="$emit('reply')"
       >
-        <ButtonPlain @click.stop="$emit('reply')">
-          <IconReply />
-        </ButtonPlain>
-        <span>&nbsp;{{ children.length }}</span>
-      </div>
+        <IconReply /> <span>{{ children.length }}</span>
+      </ButtonPlain>
     </div>
   </div>
 </template>
@@ -109,21 +107,23 @@ export default {
     }
 
     .comments-count {
-      span {
-        vertical-align: middle;
+      &:hover svg {
+        transition: color 0.3s;
+        color: $standard_font_color;
       }
 
-      .button-plain {
+      svg {
         color: $search_nav_border_color;
-        transition: color 0.3s;
+        height: 14px;
+      }
 
-        &:hover {
-          color: $standard_font_color;
-        }
+      svg,
+      span {
+        vertical-align: middle;
+      }
 
-        svg {
-          height: 14px;
-        }
+      span {
+        color: $standard_font_color;
       }
     }
 

src/components/tipRecords/TipPreview.vue

@@ -493,6 +493,7 @@ export default {
     .title {
       font-size: 0.8rem;
       font-weight: 500;
+      margin-top: 0;
       margin-bottom: 0.15rem;
       color: $tip_note_color;
       overflow: hidden;