General admin style cleanup

General admin style cleanup

diff --git a/app/assets/javascripts/admin/templates/customize-colors-show.hbs b/app/assets/javascripts/admin/templates/customize-colors-show.hbs
index 521cd86..da53bb9 100644
--- a/app/assets/javascripts/admin/templates/customize-colors-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-colors-show.hbs
@@ -40,9 +40,8 @@
         {{#each colors as |c|}}
           <tr class="{{if c.changed 'changed'}} {{if c.valid 'valid' 'invalid'}}">
             <td class="name" title={{c.name}}>
-              <b>{{c.translatedName}}</b>
-              <br/>
-              <span class="description">{{c.description}}</span>
+              <h3>{{c.translatedName}}</h3>
+              <p class="description">{{c.description}}</p>
             </td>
             <td class="hex">{{color-input hexValue=c.hex brightnessValue=c.brightness valid=c.valid}}</td>
             <td class="actions">
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index c815aad..9b72049 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -100,10 +100,10 @@ $mobile-breakpoint: 700px;
     padding: 8px;
   }
   tr:hover {
-    background-color: darken($secondary, 2.5%);
+    background-color: $primary-very-low;
   }
   tr.selected {
-    background-color: lighten($primary, 80%);
+    background-color: $primary-low;
   }
   .filters input {
     margin-bottom: 0;
@@ -341,8 +341,8 @@ $mobile-breakpoint: 700px;
 }
 
 .admin-users .users-list {
-  .username .fa {
-    color: dark-light-choose($primary-medium, $secondary-medium);
+  .username .d-icon {
+    color: $primary-medium;
   }
 }
 
@@ -566,12 +566,12 @@ $mobile-breakpoint: 700px;
     float: left;
     padding: 5px 10px;
     margin-right: 15px;
-    border: 1px solid lighten($primary, 40%);
+    border: 1px solid $primary-medium;
     border-radius: 3px;
     background: transparent;
     color: $primary;
     &:hover {
-      background-color: lighten($primary, 60%);
+      background-color: $primary-low-mid;
     }
     @media (max-width: $mobile-breakpoint) {
       display: inline-block;
@@ -659,7 +659,7 @@ $mobile-breakpoint: 700px;
 }
 
 .text-muted {
-  color: lighten($primary, 40);
+  color: $primary-medium;
 }
 
 .admin-nav {
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index bddfdfc..e2a921d 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -167,12 +167,12 @@ table.api-keys {
 
   > p {
     padding-bottom: 10px;
-    border-bottom: darken($secondary, 10%) 1px solid;
+    border-bottom: $primary-low 1px solid;
   }
   .filters {
     margin: 5px 0;
     padding-bottom: 5px;
-    border-bottom: darken($secondary, 5%) 1px solid;
+    border-bottom: $primary-low 1px solid;
     .filter {
       margin-bottom: 1em;
     }
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 5351533..57df363 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -162,30 +162,3 @@
     }
   }
 }
-
-// mobile specific styles - mostly commmon style overrides
-// TODO move to mobile sheet once mobile view has a seprate template.
-.mobile-view {
-  .admin-badges {
-    .badges {
-      margin: 0 0.25em;
-    }
-    .content-list {
-      flex: 0 0 100%;
-      .admin-badge-list {
-        max-height: 40vh;
-        margin-right: 0;
-      }
-    }
-    .badge-intro {
-      flex: 0 1 75%;
-    }
-    .current-badge {
-      margin: 20px 0;
-      width: 100%;
-    }
-    input[type="text"] {
-      width: 100%;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 11c3a5c..8ae3c50 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -99,9 +99,9 @@
     margin-top: 20px;
   }
   .color-schemes li {
-    .fa {
-      margin-right: 6px;
-      color: dark-light-choose($primary-medium, $secondary-medium);
+    .d-icon {
+      margin-right: 0.25em;
+      color: $primary-medium;
     }
   }
   .show-current-style {
@@ -492,8 +492,14 @@
     .hex {
       text-align: center;
     }
+    h3 {
+      margin: 0;
+    }
     .description {
-      color: dark-light-choose($primary-medium, $secondary-medium);
+      margin: 0.15em 0 0;
+      color: $primary-high;
+      font-size: $font-down-1;
+      line-height: $line-height-medium;
     }
 
     .invalid .hex input {
@@ -594,7 +600,7 @@
 
 .permalink-search {
   text-align: left;
-  @media screen and (min-width: map-get($breakpoints, tablet)) {
+  @include breakpoint(tablet, min-width) {
     text-align: right;
   }
 }
@@ -604,7 +610,7 @@
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  @media screen and (min-width: map-get($breakpoints, tablet)) {
+  @include breakpoint(tablet, min-width) {
     align-items: center;
     flex-direction: row;
   }
@@ -614,7 +620,7 @@
   }
   input {
     margin: 5px 0;
-    @media screen and (min-width: map-get($breakpoints, tablet)) {
+    @include breakpoint(tablet, min-width) {
       margin: 0 5px;
     }
   }
@@ -625,7 +631,7 @@
 }
 
 .permalink-description {
-  color: dark-light-choose($primary-medium, $secondary-medium);
+  color: $primary-medium;
 }
 
 // embedding
@@ -705,7 +711,7 @@
     margin: 0.75em 0;
   }
   p.description {
-    color: dark-light-choose($primary-medium, $secondary-medium);
+    color: $primary-medium;
     margin-bottom: 1em;
     max-width: 700px;
   }
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index c8903be..cb71da6 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -11,7 +11,7 @@
   .reply-key {
     display: block;
     font-size: $font-down-1;
-    color: dark-light-choose($primary-medium, $secondary-high);
+    color: $primary-medium;
   }
   .username div {
     max-width: 180px;
@@ -39,7 +39,7 @@
     margin: 5px 10px;
   }
   .error-description {
-    color: #919191;
+    color: $primary-medium;
     font-size: $font-down-1;
   }
   hr {
@@ -66,7 +66,7 @@
 
 .admin-list-item {
   width: 100%;
-  border-top: 1px solid #e9e9e9;
+  border-top: 1px solid $primary-low;
   padding: 0.25em 0;
 }
 
diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
index 2ec2bd3..1c0f902 100644
--- a/app/assets/stylesheets/common/admin/settings.scss
+++ b/app/assets/stylesheets/common/admin/settings.scss
@@ -71,7 +71,7 @@
         position: relative;
         line-height: $line-height-small;
         cursor: default;
-        border: 1px dashed #aaa;
+        border: 1px dashed $primary-low-mid;
         border-radius: 3px;
         background-clip: padding-box;
         -moz-user-select: none;
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index f28b454..058fcb4 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -1,7 +1,7 @@
 // Styles for /admin/logs
 
 .web-hook-events {
-  border-bottom: dotted 1px dark-light-choose($primary-low-mid, $secondary);
+  border-bottom: dotted 1px $primary-low-mid;
   .heading-container {
     width: 100%;
     background-color: $primary-low;
@@ -399,10 +399,10 @@ table.screened-ip-addresses {
   cursor: pointer;
   .d-icon {
     margin-right: 0.25em;
-    color: dark-light-diff($primary, $secondary, 50%, -50%);
+    color: $primary-medium;
   }
   &:hover .d-icon {
-    color: $primary;
+    color: $danger;
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss

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

GitHub sha: 9e9d57d7

1 Like