Merge branch 'reactbutton-consistency' into 'develop'

Some fixes for reactbutton/extrabuttons

See merge request pleroma/pleroma-fe!1340

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;

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>

src/components/react_button/react_button.vue

@@ -1,6 +1,7 @@
 <template>
   <Popover
     trigger="click"
+    class="ReactButton"
     placement="top"
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
@@ -42,7 +43,7 @@
     </div>
     <span
       slot="trigger"
-      class="ReactButton"
+      class="popover-trigger"
       :title="$t('tool_tip.add_reaction')"
     >
       <FAIcon
@@ -58,22 +59,24 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.reaction-picker-filter {
+.ReactButton {
+  .reaction-picker-filter {
     padding: 0.5em;
     display: flex;
+
     input {
       flex: 1;
     }
-}
+  }
 
-.reaction-picker-divider {
+  .reaction-picker-divider {
     height: 1px;
     width: 100%;
     margin: 0.5em;
     background-color: var(--border, $fallback--border);
-}
+  }
 
-.reaction-picker {
+  .reaction-picker {
     width: 10em;
     height: 9em;
     font-size: 1.5em;
@@ -90,7 +93,8 @@
           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
+
+    /* Autoprefixed seem to ignore this one, and also syntax is different */
     -webkit-mask-composite: xor;
     mask-composite: exclude;
 
@@ -105,9 +109,14 @@
         transform: scale(1.25);
       }
     }
-}
+  }
 
-.ReactButton {
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
+  .popover-trigger {
     padding: 10px;
     margin: -10px;
 
@@ -115,6 +124,7 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+  }
 }
 
 </style>