From b79f297692eeca5e774a1dd124cec2b3bc41b977 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 22:04:05 +0300
Subject: [PATCH] fix double pushbuttons in the draft buttons

---
 src/components/popover/popover.js             |  3 ++
 src/components/popover/popover.vue            |  3 +-
 .../settings_modal/helpers/draft_buttons.vue  | 40 ++++++-------------
 3 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d44b266b..bc078533 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -45,6 +45,9 @@ const Popover = {
     // Lets hover popover stay when clicking inside of it
     stayOnClick: Boolean,
 
+    // Use styled button (to avoid nested buttons)
+    normalButton: Boolean,
+
     triggerAttrs: {
       type: Object,
       default: {}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index fd0fd821..1a4bffd9 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,8 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled popover-trigger-button"
+      class="popover-trigger-button"
+      :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
       v-bind="triggerAttrs"
       @click="onClick"
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 80da92e8..fd6d50e3 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -7,18 +7,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
+      @click="$parent.commitDraft"
       :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.commit_value')"
-          @click="$parent.commitDraft"
-        >
-          {{ $t('settings.commit_value') }}
-        </button>
+        {{ $t('settings.commit_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -29,18 +23,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
       :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
+      @click="$parent.reset"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.reset_value')"
-          @click="$parent.reset"
-        >
-          {{ $t('settings.reset_value') }}
-        </button>
+        {{ $t('settings.reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -51,18 +39,12 @@
     <Popover
       v-if="$parent.canHardReset"
       trigger="hover"
+      normal-button
+      @click="$parent.hardReset"
       :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.hard_reset_value')"
-          @click="$parent.hardReset"
-        >
-          {{ $t('settings.hard_reset_value') }}
-        </button>
+        {{ $t('settings.hard_reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -92,6 +74,10 @@ export default {
 .DraftButtons {
   display: inline-block;
   position: relative;
+
+  .button-default {
+    margin-left: 0.5em;
+  }
 }
 
 .draft-tooltip {