From 735216630890a8ba8df83c254c1205a8ef9f9d95 Mon Sep 17 00:00:00 2001
From: Bob den Otter <bob@twokings.nl>
Date: Wed, 25 Dec 2019 08:43:18 +0100
Subject: [PATCH 1/2] Fine-tuning a bunch of button styles

---
 assets/js/app/editor/Components/File.vue      | 41 +++++++-------
 assets/js/app/editor/Components/Filelist.vue  |  3 +-
 assets/js/app/editor/Components/Image.vue     | 42 +++++++--------
 assets/js/app/editor/Components/Imagelist.vue |  3 +-
 assets/scss/init/_base.scss                   |  1 +
 assets/scss/init/_variables.scss              |  4 +-
 assets/scss/modules/base/_buttons.scss        | 50 +++++++++++++++++
 assets/scss/vendor/bootstrap/_overrides.scss  | 53 -------------------
 assets/scss/vendor/bootstrap/bootstrap.scss   |  2 -
 templates/content/_buttons.html.twig          | 18 ++++---
 10 files changed, 109 insertions(+), 108 deletions(-)
 delete mode 100644 assets/scss/vendor/bootstrap/_overrides.scss

diff --git a/assets/js/app/editor/Components/File.vue b/assets/js/app/editor/Components/File.vue
index 364c4ce3..83256baf 100644
--- a/assets/js/app/editor/Components/File.vue
+++ b/assets/js/app/editor/Components/File.vue
@@ -36,7 +36,7 @@
         <div class="btn-toolbar" role="toolbar">
           <div class="btn-group mr-2" role="group">
             <button
-              class="btn btn-sm btn-secondary"
+              class="btn btn-sm btn-tertiary"
               type="button"
               @click="selectUploadFile"
             >
@@ -44,33 +44,34 @@
             </button>
 
             <button
-              class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+              class="btn btn-sm btn-tertiary dropdown-toggle dropdown-toggle-split"
               aria-expanded="false"
               aria-haspopup="true"
               data-toggle="dropdown"
               type="button"
             ></button>
 
-            <button
-              class="btn btn-sm btn-secondary dropdown-menu dropdown-menu-right"
-              type="button"
-              @click="selectServerFile"
-            >
-              <i class="fas fa-fw fa-th mr-2 ml-2"></i>
-              {{ labels.button_from_library }}
-            </button>
+            <div class="dropdown-menu">
+              <button
+                class="btn dropdown-item"
+                type="button"
+                @click="selectServerFile"
+              >
+                <i class="fas fa-fw fa-th"></i>
+                {{ labels.button_from_library }}
+              </button>
+              <a
+                      v-if="filenameData"
+                      class="dropdown-item"
+                      :href="attributesLink + '?file=' + filenameData"
+                      target="_blank"
+              >
+                <i class="fas fa-fw fa-info-circle"></i>
+                {{ labels.button_edit_attributes }}
+              </a>
+            </div>
           </div>
 
-          <div v-if="filenameData" class="btn-group mr-2" role="group">
-            <a
-              class="btn btn-sm btn-secondary"
-              :href="attributesLink + '?file=' + filename"
-              target="_blank"
-            >
-              <i class="fas fa-fw fa-info-circle"></i>
-              {{ labels.button_edit_attributes }}
-            </a>
-          </div>
           <div v-if="inFilelist == true" class="btn-group mr-2" role="group">
             <button
               class="btn btn-sm btn-tertiary"
diff --git a/assets/js/app/editor/Components/Filelist.vue b/assets/js/app/editor/Components/Filelist.vue
index fcaf19ff..bbeb484f 100644
--- a/assets/js/app/editor/Components/Filelist.vue
+++ b/assets/js/app/editor/Components/Filelist.vue
@@ -26,7 +26,8 @@
       ></editor-file>
     </div>
 
-    <button class="btn btn-secondary" type="button" @click="addFile">
+    <button class="btn btn-tertiary" type="button" @click="addFile">
+      <i class="fas fa-fw fa-plus"></i>
       {{ labels.add_new_file }}
     </button>
   </div>
diff --git a/assets/js/app/editor/Components/Image.vue b/assets/js/app/editor/Components/Image.vue
index f597361b..def379d7 100644
--- a/assets/js/app/editor/Components/Image.vue
+++ b/assets/js/app/editor/Components/Image.vue
@@ -36,7 +36,7 @@
         <div class="btn-toolbar" role="toolbar">
           <div class="btn-group mr-2" role="group">
             <button
-              class="btn btn-sm btn-secondary"
+              class="btn btn-sm btn-tertiary"
               type="button"
               @click="selectUploadFile"
             >
@@ -44,32 +44,32 @@
             </button>
 
             <button
-              class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+              class="btn btn-sm btn-tertiary dropdown-toggle dropdown-toggle-split"
               aria-expanded="false"
               aria-haspopup="true"
               data-toggle="dropdown"
               type="button"
             ></button>
 
-            <button
-              class="btn btn-sm btn-secondary dropdown-menu dropdown-menu-right"
-              type="button"
-              @click="selectServerFile"
-            >
-              <i class="fas fa-fw fa-th mr-2 ml-2"></i>
-              {{ labels.button_from_library }}
-            </button>
-          </div>
-
-          <div v-if="filenameData" class="btn-group mr-2" role="group">
-            <a
-              class="btn btn-sm btn-secondary"
-              :href="attributesLink + '?file=' + filenameData"
-              target="_blank"
-            >
-              <i class="fas fa-fw fa-info-circle"></i>
-              {{ labels.button_edit_attributes }}
-            </a>
+            <div class="dropdown-menu">
+              <button
+                class="btn dropdown-item"
+                type="button"
+                @click="selectServerFile"
+              >
+                <i class="fas fa-fw fa-th"></i>
+                {{ labels.button_from_library }}
+              </button>
+              <a
+                      v-if="filenameData"
+                      class="dropdown-item"
+                      :href="attributesLink + '?file=' + filenameData"
+                      target="_blank"
+              >
+                <i class="fas fa-fw fa-info-circle"></i>
+                {{ labels.button_edit_attributes }}
+              </a>
+            </div>
           </div>
 
           <div v-if="inImagelist == true" class="btn-group mr-2" role="group">
diff --git a/assets/js/app/editor/Components/Imagelist.vue b/assets/js/app/editor/Components/Imagelist.vue
index e46a36ac..41232649 100644
--- a/assets/js/app/editor/Components/Imagelist.vue
+++ b/assets/js/app/editor/Components/Imagelist.vue
@@ -28,7 +28,8 @@
       ></editor-image>
     </div>
 
-    <button class="btn btn-secondary" type="button" @click="addImage">
+    <button class="btn btn-tertiary" type="button" @click="addImage">
+      <i class="fas fa-fw fa-plus"></i>
       {{ labels.add_new_image }}
     </button>
   </div>
diff --git a/assets/scss/init/_base.scss b/assets/scss/init/_base.scss
index 74484c1d..d9e95c27 100644
--- a/assets/scss/init/_base.scss
+++ b/assets/scss/init/_base.scss
@@ -42,6 +42,7 @@ code {
 
   .card-header {
     font-weight: $font-weight-bold;
+    padding: 0.8125rem 1.25rem;
   }
 }
 
diff --git a/assets/scss/init/_variables.scss b/assets/scss/init/_variables.scss
index 9171a3b7..01a8130b 100644
--- a/assets/scss/init/_variables.scss
+++ b/assets/scss/init/_variables.scss
@@ -37,7 +37,7 @@ $link-color:                var(--primary);
 $link-hover-color:          var(--primary-600);
 
 //buttons
-$btn-disabled-opacity:                  1;
+$btn-disabled-opacity:                  0.75;
 
 // Form controls
 $border-radius:                         0.15rem;
@@ -68,7 +68,7 @@ $btn-padding-x: 0.6rem;
 
 $primary: #1863af;
 $secondary: #5da1ac;
-$tertiary: #7a9196;
+$tertiary: #81969B;
 $success: #61a31f;
 $info: #17a2b8;
 $warning: #ffc107;
diff --git a/assets/scss/modules/base/_buttons.scss b/assets/scss/modules/base/_buttons.scss
index dff93844..e06ff22e 100644
--- a/assets/scss/modules/base/_buttons.scss
+++ b/assets/scss/modules/base/_buttons.scss
@@ -5,3 +5,53 @@
 .btn-hidden-danger {
   @include button-variant($tertiary, $tertiary, darken($danger, 7.5%), darken($danger, 10%), darken($danger, 10%), darken($danger, 12.5%));
 }
+
+$theme-colors: (
+        "primary":   $primary,
+        "secondary": $secondary,
+        "tertiary":  $tertiary,
+        "success":   $success,
+        "info":      $info,
+        "warning":   $warning,
+        "danger":    $danger,
+        "light":     $light,
+        "dark":      $dark,
+        "boltblue":  $bolt-blue,
+);
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    background-color: theme-color-level($color, $alert-bg-level) !important;
+  }
+
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+//set disabled buttons to grey
+
+.btn {
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+
+    @include box-shadow(none);
+
+    background: $disabled;
+    color: darken($disabled, 30%);
+    border: $btn-border-width solid transparent;
+  }
+}
+
+.btn-link {
+  &:disabled,
+  &.disabled {
+    color: darken($disabled, 30%);
+    background: transparent;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/vendor/bootstrap/_overrides.scss b/assets/scss/vendor/bootstrap/_overrides.scss
deleted file mode 100644
index ef67fde4..00000000
--- a/assets/scss/vendor/bootstrap/_overrides.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-$theme-colors: (
-  "primary":   $primary,
-  "secondary": $secondary,
-  "tertiary":  $tertiary,
-  "success":   $success,
-  "info":      $info,
-  "warning":   $warning,
-  "danger":    $danger,
-  "light":     $light,
-  "dark":      $dark,
-  "boltblue":  $bolt-blue,
-);
-
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    background-color: theme-color-level($color, $alert-bg-level) !important;
-  }
-
-  .btn-#{$color} {
-    @include button-variant($value, $value);
-  }
-
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
-  }
-}
-
-//set disabled buttons to grey
-
-.btn {
-  &.disabled,
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-
-    @include box-shadow(none);
-
-    background: $disabled;
-    color: darken($disabled, 30%);
-    border: $btn-border-width solid transparent;
-  }
-}
-
-.btn-link {
-  &:disabled,
-  &.disabled {
-    color: darken($disabled, 30%);
-    background: transparent;
-  }
-}
-
-.card-header {
-  padding: 0.8125rem 1.25rem;
-}
diff --git a/assets/scss/vendor/bootstrap/bootstrap.scss b/assets/scss/vendor/bootstrap/bootstrap.scss
index 11cddfb0..631999d9 100644
--- a/assets/scss/vendor/bootstrap/bootstrap.scss
+++ b/assets/scss/vendor/bootstrap/bootstrap.scss
@@ -29,5 +29,3 @@
 @import "~bootstrap/scss/utilities";
 @import "~bootstrap/scss/print";
 
-// Bolt Bootstrap overrides
-@import '_overrides.scss';
diff --git a/templates/content/_buttons.html.twig b/templates/content/_buttons.html.twig
index 1033f83b..9ec32b24 100644
--- a/templates/content/_buttons.html.twig
+++ b/templates/content/_buttons.html.twig
@@ -23,14 +23,16 @@
                 data-toggle="dropdown" type="button">
             <span class="sr-only">{{ 'buttons.button_toggle'|trans }}</span>
         </button>
-        <button class="btn btn-light dropdown-menu dropdown-menu-right"
-                form="editcontent"
-                formaction="{{ path('bolt_content_edit_viewsave', {'id': record.id }) }}"
-                formtarget="_blank" style="white-space: nowrap; padding-right: 1rem;"
-                type="submit">
-            <i class="fas fa-external-link-square-alt mr-2 ml-2"></i>
-            {{ 'action.view_saved'|trans }}
-        </button>
+        <div class="dropdown-menu dropdown-menu-right">
+            <button class="btn"
+                    form="editcontent"
+                    formaction="{{ path('bolt_content_edit_viewsave', {'id': record.id }) }}"
+                    formtarget="_blank" style="white-space: nowrap; padding-right: 1rem;"
+                    type="submit">
+                <i class="fas fa-external-link-square-alt mr-2 ml-2"></i>
+                {{ 'action.view_saved'|trans }}
+            </button>
+        </div>
     {% endif %}
     
     </div>

From 3c442609046e5b2a5c180ff87cec0b6fe6a8e63e Mon Sep 17 00:00:00 2001
From: Bob den Otter <bob@twokings.nl>
Date: Wed, 25 Dec 2019 09:02:18 +0100
Subject: [PATCH 2/2] CS fixes

---
 assets/js/app/editor/Components/File.vue    |  8 ++++----
 assets/js/app/editor/Components/Image.vue   |  8 ++++----
 assets/scss/init/_variables.scss            |  2 +-
 assets/scss/modules/base/_buttons.scss      | 22 ++++++++++-----------
 assets/scss/vendor/bootstrap/bootstrap.scss |  1 -
 5 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/assets/js/app/editor/Components/File.vue b/assets/js/app/editor/Components/File.vue
index 83256baf..cdc71233 100644
--- a/assets/js/app/editor/Components/File.vue
+++ b/assets/js/app/editor/Components/File.vue
@@ -61,10 +61,10 @@
                 {{ labels.button_from_library }}
               </button>
               <a
-                      v-if="filenameData"
-                      class="dropdown-item"
-                      :href="attributesLink + '?file=' + filenameData"
-                      target="_blank"
+                v-if="filenameData"
+                class="dropdown-item"
+                :href="attributesLink + '?file=' + filenameData"
+                target="_blank"
               >
                 <i class="fas fa-fw fa-info-circle"></i>
                 {{ labels.button_edit_attributes }}
diff --git a/assets/js/app/editor/Components/Image.vue b/assets/js/app/editor/Components/Image.vue
index def379d7..552ee5fd 100644
--- a/assets/js/app/editor/Components/Image.vue
+++ b/assets/js/app/editor/Components/Image.vue
@@ -61,10 +61,10 @@
                 {{ labels.button_from_library }}
               </button>
               <a
-                      v-if="filenameData"
-                      class="dropdown-item"
-                      :href="attributesLink + '?file=' + filenameData"
-                      target="_blank"
+                v-if="filenameData"
+                class="dropdown-item"
+                :href="attributesLink + '?file=' + filenameData"
+                target="_blank"
               >
                 <i class="fas fa-fw fa-info-circle"></i>
                 {{ labels.button_edit_attributes }}
diff --git a/assets/scss/init/_variables.scss b/assets/scss/init/_variables.scss
index 01a8130b..2c74c065 100644
--- a/assets/scss/init/_variables.scss
+++ b/assets/scss/init/_variables.scss
@@ -68,7 +68,7 @@ $btn-padding-x: 0.6rem;
 
 $primary: #1863af;
 $secondary: #5da1ac;
-$tertiary: #81969B;
+$tertiary: #81969b;
 $success: #61a31f;
 $info: #17a2b8;
 $warning: #ffc107;
diff --git a/assets/scss/modules/base/_buttons.scss b/assets/scss/modules/base/_buttons.scss
index e06ff22e..b867e6c9 100644
--- a/assets/scss/modules/base/_buttons.scss
+++ b/assets/scss/modules/base/_buttons.scss
@@ -7,16 +7,16 @@
 }
 
 $theme-colors: (
-        "primary":   $primary,
-        "secondary": $secondary,
-        "tertiary":  $tertiary,
-        "success":   $success,
-        "info":      $info,
-        "warning":   $warning,
-        "danger":    $danger,
-        "light":     $light,
-        "dark":      $dark,
-        "boltblue":  $bolt-blue,
+  "primary":   $primary,
+  "secondary": $secondary,
+  "tertiary":  $tertiary,
+  "success":   $success,
+  "info":      $info,
+  "warning":   $warning,
+  "danger":    $danger,
+  "light":     $light,
+  "dark":      $dark,
+  "boltblue":  $bolt-blue,
 );
 
 @each $color, $value in $theme-colors {
@@ -54,4 +54,4 @@ $theme-colors: (
     color: darken($disabled, 30%);
     background: transparent;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/scss/vendor/bootstrap/bootstrap.scss b/assets/scss/vendor/bootstrap/bootstrap.scss
index 631999d9..48000c42 100644
--- a/assets/scss/vendor/bootstrap/bootstrap.scss
+++ b/assets/scss/vendor/bootstrap/bootstrap.scss
@@ -28,4 +28,3 @@
 @import "~bootstrap/scss/toasts";
 @import "~bootstrap/scss/utilities";
 @import "~bootstrap/scss/print";
-