Refactor color inputs to use flex gap instead of margins and fix rese…

…t colors button in bw dither height being stretched

changelog.md

@@ -36,6 +36,8 @@
 
 * Fix controls being visible during batch export.
 
+* Fix reset colors button in BW Dither tab height being stretched.
+
 ### Technical
 
 * Replace standalone Electron builds with local http server and compiled static assets. This avoids security warning on Mac, and requires less memory to run, removes the need for compilation for Mac, Linux and BSD, and allows cross-compilation for Windows and Windows ARM.

js/app/vues/color-dither.vue

@@ -122,6 +122,7 @@
 .colorsListContainer {
     display: flex;
     flex-wrap: wrap;
+    gap: 16px 13px;
 }
 
 .optimizePalettePending {

js/app/vues/color-input.vue

@@ -40,7 +40,6 @@
     align-items: center;
     justify-content: space-between;
     flex-basis: 110px;
-    margin: 0 13px variables.$colors_container_margin_bottom 0;
     border: 1px solid var(--border-color);
     border-radius: 5px;
     padding: 4px;

js/app/vues/color-substitution-input.vue

@@ -44,10 +44,8 @@
 .colorReplaceContainer {
     display: flex;
     flex-wrap: wrap;
-    .btn {
-        flex-basis: 25%;
-        margin-bottom: variables.$colors_container_margin_bottom;
-    }
+    align-items: center;
+    gap: 16px 13px;
 }
 </style>
 

js/app/vues/palette-buttons.vue

@@ -1,29 +1,26 @@
 <template>
-    <div 
-        class="spread-content"
-        :class="$style.paletteButtonsContainer"
-    >
+    <div class="spread-content" :class="$style.paletteButtonsContainer">
         <div>
             <print-palette-button :colors="colors" />
-            <button 
-                class="btn btn-danger btn-sm" 
-                v-show="currentPalette.isSaved" 
+            <button
+                class="btn btn-danger btn-sm"
+                v-show="currentPalette.isSaved"
                 @click="deletePalette"
             >
                 Delete
             </button>
         </div>
         <!-- these buttons mutaually exclusive and should never show at the same time- they are XOR (either or none, but not both -->
-        <button 
-            class="btn btn-primary btn-sm" 
-            v-show="currentPalette.isCustom" 
+        <button
+            class="btn btn-primary btn-sm"
+            v-show="currentPalette.isCustom"
             @click="savePalette"
         >
             Save
         </button>
-        <button 
-            class="btn btn-default btn-sm" 
-            v-show="currentPalette.isSaved" 
+        <button
+            class="btn btn-default btn-sm"
+            v-show="currentPalette.isSaved"
             @click="showRenamePalette"
         >
             Rename
@@ -32,17 +29,10 @@
 </template>
 
 <style lang="scss" module>
-.paletteButtonsContainer{
+.paletteButtonsContainer {
     //reduce upper margin from color inputs
     margin: 8px 0;
 }
-
-@include mixins.pinned_controls_mq{
-	.paletteButtonsContainer{
-		//reduce upper margin from color inputs
-		margin-top: -8px;
-	}
-}
 </style>
 
 <script>
@@ -75,4 +65,4 @@ export default {
         PrintPaletteButton,
     },
 };
-</script>
+</script>

sass/_variables.scss

@@ -15,7 +15,6 @@ $global_horizontal_padding: 10px;
 /**
 * controls panel layout variables
 */
-$colors_container_margin_bottom: 16px;
 
 $global_controls_height: 180px;
 $pinned_dither_controls_width: 454px;