From 213c5637d4bbebcd3508f0b91da8e6bfae528c1d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Feb 2021 09:18:44 +0200
Subject: [PATCH] Cleanup ReactButton's CSS, fix hitboxes of reactbutton and
 extrabuttons

---
 .../extra_buttons/extra_buttons.vue           |   5 +
 src/components/popover/popover.vue            |   1 +
 src/components/react_button/react_button.vue  | 105 ++++++++++--------
 3 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index e845d8fc..c6cb9fbe 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -139,6 +139,11 @@
 @import '../../_variables.scss';
 
 .ExtraButtons {
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
   .popover-trigger {
     position: static;
     padding: 10px;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 2252c68f..876dd61d 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -7,6 +7,7 @@
       ref="trigger"
       class="button-unstyled -fullwidth popover-trigger-button"
       @click="onClick"
+      type="button"
     >
       <slot name="trigger" />
     </button>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 99523407..04734674 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -59,63 +59,72 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.reaction-picker-filter {
-  padding: 0.5em;
-  display: flex;
-  input {
-    flex: 1;
+.ReactButton {
+  .reaction-picker-filter {
+    padding: 0.5em;
+    display: flex;
+
+    input {
+      flex: 1;
+    }
   }
-}
 
-.reaction-picker-divider {
-  height: 1px;
-  width: 100%;
-  margin: 0.5em;
-  background-color: var(--border, $fallback--border);
-}
+  .reaction-picker-divider {
+    height: 1px;
+    width: 100%;
+    margin: 0.5em;
+    background-color: var(--border, $fallback--border);
+  }
 
-.reaction-picker {
-  width: 10em;
-  height: 9em;
-  font-size: 1.5em;
-  overflow-y: scroll;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0.5em;
-  text-align: center;
-  align-content: flex-start;
-  user-select: none;
+  .reaction-picker {
+    width: 10em;
+    height: 9em;
+    font-size: 1.5em;
+    overflow-y: scroll;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5em;
+    text-align: center;
+    align-content: flex-start;
+    user-select: none;
 
-  mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-    linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-    linear-gradient(to top, white, white);
-  transition: mask-size 150ms;
-  mask-size: 100% 20px, 100% 20px, auto;
-  // Autoprefixed seem to ignore this one, and also syntax is different
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
+    mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+          linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+          linear-gradient(to top, white, white);
+    transition: mask-size 150ms;
+    mask-size: 100% 20px, 100% 20px, auto;
 
-  .emoji-button {
-    cursor: pointer;
+    /* Autoprefixed seem to ignore this one, and also syntax is different */
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
 
-    flex-basis: 20%;
-    line-height: 1.5em;
-    align-content: center;
+    .emoji-button {
+      cursor: pointer;
 
-    &:hover {
-      transform: scale(1.25);
+      flex-basis: 20%;
+      line-height: 1.5em;
+      align-content: center;
+
+      &:hover {
+        transform: scale(1.25);
+      }
+    }
+  }
+
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
+  .popover-trigger {
+    padding: 10px;
+    margin: -10px;
+
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
   }
 }
 
-.ReactButton {
-  padding: 10px;
-  margin: -10px;
-
-  &:hover .svg-inline--fa {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-  }
-}
-
 </style>