UX: Make button icons use lighter color instead of opacity

UX: Make button icons use lighter color instead of opacity

diff --git a/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs b/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs
index c5819da..109e7e3 100644
--- a/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs
@@ -78,11 +78,10 @@
           <td class="col actions">
             {{#unless item.editing}}
               {{d-button
-                class="btn-default"
+                class="btn-default btn-danger"
                 action=(action "destroy")
                 actionParam=item
-                icon="far-trash-alt"
-                class="btn-danger"}}
+                icon="far-trash-alt"}}
               {{d-button
                 class="btn-default"
                 action=(action "edit")
diff --git a/app/assets/javascripts/discourse/controllers/history.js.es6 b/app/assets/javascripts/discourse/controllers/history.js.es6
index b42a99f..369b37b 100644
--- a/app/assets/javascripts/discourse/controllers/history.js.es6
+++ b/app/assets/javascripts/discourse/controllers/history.js.es6
@@ -199,17 +199,17 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   @computed("displayingInline")
   inlineClass(displayingInline) {
-    return displayingInline ? "btn-primary" : "";
+    return displayingInline ? "btn-danger" : "btn-flat";
   },
 
   @computed("displayingSideBySide")
   sideBySideClass(displayingSideBySide) {
-    return displayingSideBySide ? "btn-primary" : "";
+    return displayingSideBySide ? "btn-danger" : "btn-flat";
   },
 
   @computed("displayingSideBySideMarkdown")
   sideBySideMarkdownClass(displayingSideBySideMarkdown) {
-    return displayingSideBySideMarkdown ? "btn-primary" : "";
+    return displayingSideBySideMarkdown ? "btn-danger" : "btn-flat";
   },
 
   @computed("model.category_id_changes")
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 3da2b22..e6654ac 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -137,6 +137,10 @@
     display: inline-block;
     vertical-align: top;
 
+    .btn {
+      line-height: $line-height-medium; // Temporary button-height fix
+    }
+
     .title {
       font-size: $font-up-4;
       font-weight: bold;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index b00124a..f57cac9 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -98,7 +98,7 @@
     display: flex;
     align-items: center;
     .d-icon {
-      color: $primary-high;
+      color: $primary-medium;
     }
     .reply-details {
       max-width: calc(100% - 175px);
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 14828be..b31d29a 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -100,10 +100,6 @@
     width: 2.2857em;
     height: 2.2857em;
     padding: 0.2143em;
-    color: dark-light-choose(
-      scale-color($header_primary, $lightness: 50%),
-      $header_primary
-    );
     text-decoration: none;
     cursor: pointer;
     border-top: 1px solid transparent;
@@ -117,7 +113,6 @@
     }
     &:hover,
     &:focus {
-      color: $primary;
       background-color: $primary-low;
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
@@ -131,13 +126,14 @@
   .drop-down-mode & {
     .active .icon {
       position: relative;
-      color: #7b7b7b;
       background-color: $secondary;
       cursor: default;
       border-top: 1px solid $primary-low;
       border-left: 1px solid $primary-low;
       border-right: 1px solid $primary-low;
-
+      .d-icon {
+        color: $primary-medium;
+      }
       &:after {
         display: block;
         position: absolute;
@@ -160,6 +156,7 @@
     font-size: $font-up-4;
     line-height: $line-height-large;
     display: inline-block;
+    color: $header_primary-low-mid;
   }
   .notifications {
     position: relative;
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index b2eb86b..41cc397 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -153,11 +153,12 @@
       margin: 0.5em 0;
     }
 
-    .fa {
-      color: dark-light-choose($primary-medium, $secondary-medium);
+    .d-icon,
+    &:hover .d-icon {
+      color: $primary-medium;
     }
     .icon {
-      color: dark-light-choose($primary-high, $secondary-low);
+      color: $primary-high;
     }
     li {
       background-color: $tertiary-low;
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 391f724..848b5cd 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -318,6 +318,9 @@
 .d-modal-cancel {
   margin-left: 1em;
   color: $primary-medium;
+  &:hover {
+    color: $danger;
+  }
 }
 
 .delete-user-modal {
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index f9cf292..d285e4c 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -17,7 +17,9 @@
   transition: all 0.25s;
   box-sizing: border-box;
   min-height: 30px;
-
+  .d-icon {
+    transition: color 0.25s;
+  }
   &:active,
   &.btn-active {
     text-shadow: none;
@@ -49,6 +51,9 @@
   color: $primary;
   font-weight: normal;
   background: $primary-low;
+  .d-icon {
+    color: $primary-high;
+  }
 
   &[href] {
     color: $primary;
@@ -60,24 +65,29 @@
     &.btn-hover {
       background: $primary-medium;
       color: $secondary;
+      .d-icon {
+        color: $secondary-very-high;
+      }
     }
   }
   &[disabled],
   &.disabled {
     background: $primary-low;
+    .d-icon {
+      color: $primary-medium;
+    }
     &:hover {
       color: dark-light-choose($primary-low-mid, $secondary-high);
+      .d-icon {
+        color: $primary-low-mid;
+      }
     }
     cursor: not-allowed;
   }
 
   .d-icon {
-    opacity: 0.7;
     line-height: $line-height-medium; // Match button text line-height
   }
-  &.btn-primary .d-icon {
-    opacity: 1;
-  }
 }
 
 // Primary button
@@ -88,7 +98,9 @@
   font-weight: normal;
   color: $secondary;
   background: $tertiary;
-
+  .d-icon {
+    color: currentColor;
+  }
   &[href] {
     color: $secondary;
   }
@@ -100,6 +112,9 @@
         scale-color($tertiary, $lightness: -20%),
         scale-color($tertiary, $lightness: 20%)
       );
+      .d-icon {
+        color: currentColor;
+      }
     }
   }
   &:active,
@@ -112,6 +127,9 @@
   &[disabled],
   &.disabled {
     background: $tertiary;
+    .d-icon {
+      color: currentColor;
+    }
   }
 }
 
@@ -122,6 +140,9 @@
   color: $secondary;
   font-weight: normal;
   background: $danger;
+  .d-icon {
+    color: $danger-low;
+  }
   &[href] {
     color: $secondary;
   }
@@ -133,6 +154,9 @@
         scale-color($danger, $lightness: -20%),
         scale-color($danger, $lightness: 20%)
       );
+      .d-icon {
+        color: $danger-low;
+      }
     }
   }
   &:active,
@@ -142,6 +166,9 @@
   &[disabled],
   &.disabled {
     background: $danger;
+    .d-icon {
+      color: $danger-low;
+    }
   }
 }
 
@@ -214,7 +241,13 @@
   border: 0;
   outline: 0;
   line-height: $line-height-small;
+  transition: color .25s, background .25s;
   .d-icon {
-    opacity: 0.7;
+    color: $primary-low-mid;
+  }
+  &:hover {
+    .d-icon {
+      color: $primary;
+    }
   }
 }
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 8d8307d..5b402bf 100644

[... diff too long, it was truncated ...]

GitHub sha: 94f16ba9

This circumvents an issue where opacity on SVGs was causing some icons to be clipped in Safari 12

1 Like