fix wrong button style, add new option for popover to better deal with different layouts

5 files changed, 28 insertions, 16 deletions

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index c10b09b8..ab5d1d29 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -4,6 +4,7 @@
       trigger="click"
       placement="bottom"
       :bound-to="{ x: 'container' }"
+      remove-padding
     >
       <div
         slot="content"
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index b84229c2..e687d487 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,8 +2,9 @@
   <Popover
     trigger="click"
     placement="top"
-    :offset="{ y: -5 }"
+    :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
+    remove-padding
   >
     <div
       slot="content"
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 0ae9246b..5c7b82ec 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleRight(&quot;admin&quot;)"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -29,13 +29,13 @@
             />
           </span>
           <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -47,7 +47,7 @@
           />
           <span v-if="hasTagPolicy">
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               {{ $t('user_card.admin_menu.force_nsfw') }}
@@ -57,7 +57,7 @@
               />
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               {{ $t('user_card.admin_menu.strip_media') }}
@@ -67,7 +67,7 @@
               />
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               {{ $t('user_card.admin_menu.force_unlisted') }}
@@ -77,7 +77,7 @@
               />
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               {{ $t('user_card.admin_menu.sandbox') }}
@@ -88,7 +88,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               {{ $t('user_card.admin_menu.disable_remote_subscription') }}
@@ -99,7 +99,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               {{ $t('user_card.admin_menu.disable_any_subscription') }}
@@ -110,7 +110,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               {{ $t('user_card.admin_menu.quarantine') }}
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index db4a768b..5e417fa0 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -21,7 +21,10 @@ const Popover = {
     // Replaces the classes you may want for the popover container.
     // Use 'popover-default' in addition to get the default popover
     // styles with your custom class.
-    popoverClass: String
+    popoverClass: String,
+    // If true, subtract padding when calculating position for the popover,
+    // use it when popover offset looks to be different on top vs bottom.
+    removePadding: Boolean
   },
   data () {
     return {
@@ -96,10 +99,16 @@ const Popover = {
       if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
       if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
 
+      let vPadding = 0
+      if (this.removePadding && usingTop) {
+        const anchorStyle = getComputedStyle(anchorEl)
+        vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
+      }
+
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
-        ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
-        : -yOffset
+        ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
+        : yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
       const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 9f437535..a5d53254 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -2,8 +2,9 @@
   <Popover
     trigger="click"
     placement="top"
-    :offset="{ y: -5 }"
+    :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
+    remove-padding
   >
     <div
       slot="content"