Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (306 commits)
  fallback if shadows aren't defined
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Italian)
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Italian)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  ...

1 files changed, 27 insertions, 23 deletions

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 987e94b7..ab5d1d29 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="account-actions">
+  <div class="AccountActions">
     <Popover
       trigger="click"
       placement="bottom"
       :bound-to="{ x: 'container' }"
+      remove-padding
     >
       <div
         slot="content"
@@ -13,14 +14,14 @@
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -32,27 +33,27 @@
           </template>
           <button
             v-if="relationship.blocking"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
@@ -61,9 +62,12 @@
       </div>
       <div
         slot="trigger"
-        class="btn btn-default ellipsis-button"
+        class="ellipsis-button"
       >
-        <i class="icon-ellipsis trigger-button" />
+        <FAIcon
+          class="icon"
+          icon="ellipsis-v"
+        />
       </div>
     </Popover>
   </div>
@@ -73,22 +77,22 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-.account-actions {
-  margin: 0 .8em;
-}
+.AccountActions {
+  button.dropdown-item {
+    margin-left: 0;
+  }
 
-.account-actions button.dropdown-item {
-  margin-left: 0;
-}
+  .ellipsis-button {
+    cursor: pointer;
+    width: 2.5em;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+    text-align: center;
 
-.account-actions .trigger-button {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  opacity: .8;
-  cursor: pointer;
-  &:hover {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
   }
 }
 </style>