Give Dark theme a facelift, fix theme bugs

Foundry376 · Nov 10, 2017 · 817b734 · 817b734
1 parent 38bff9b
commit 817b734
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/app/internal_packages/composer/styles/composer.less b/app/internal_packages/composer/styles/composer.less
@@ -93,7 +93,7 @@ body.platform-win32 {
     position: relative;
     width: 100%;
     background: @action-bar-bg;
-    border-top: 1px solid darken(@background-off-primary, 7%);
+    border-top: 1px solid @border-color-divider;
     box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.03);
     border-bottom: 0;
     border-radius: @border-radius-base;
@@ -410,7 +410,7 @@ body.platform-win32 {
     .composer-action-bar-wrap {
       @action-bar-bg: darken(@background-primary, 1%);
       background: @action-bar-bg;
-      border-top: 1px solid darken(@background-primary, 8%);
+      border-top: 1px solid @border-color-divider;
       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
       .action-bar-cover-gen;
     }

diff --git a/app/internal_packages/preferences/lib/tabs/preferences-identity.jsx b/app/internal_packages/preferences/lib/tabs/preferences-identity.jsx
@@ -186,8 +186,9 @@ class PreferencesIdentity extends React.Component {
 
   _renderPaidPlan(planName, effectivePlanName) {
     const unpaidNote = effectivePlanName !== planName && (
-      <p
-      >{`Note: Due to issues with your most recent payment, you've been temporarily downgraded to Mailspring ${effectivePlanName}. Click 'Billing' below to correct the issue.`}</p>
+      <p>
+        {`Note: Due to issues with your most recent payment, you've been temporarily downgraded to Mailspring ${effectivePlanName}. Click 'Billing' below to correct the issue.`}
+      </p>
     );
     return (
       <div className="row padded">
@@ -197,7 +198,7 @@ class PreferencesIdentity extends React.Component {
           supporting independent software.
           {unpaidNote}
         </div>
-        <div className="subscription-actions">
+        <div style={{ paddingTop: 15 }}>
           <OpenIdentityPageButton
             label="Manage Billing"
             path="/dashboard#billing"

diff --git a/app/internal_packages/ui-dark/styles/ui-variables.less b/app/internal_packages/ui-dark/styles/ui-variables.less
@@ -6,47 +6,50 @@
 @gray: darken(@gray-base, 33.5%);
 @gray-light: darken(@gray-base, 46.7%);
 @gray-lighter: darken(@gray-base, 92.5%);
-@white: #0a0b0c;
+@white: #0a0a0a;
 
-@accent-primary: #5e6a77;
-@accent-primary-dark: #5e6a77;
+@accent-primary: #58b660;
+@accent-primary-dark: darken(@accent-primary, 10%);
 
-@background-primary: #333539;
-@background-off-primary: #282828;
-@background-secondary: #333539;
-@background-tertiary: #333539;
+@background-primary: #212121;
+@background-off-primary: #212121;
+@background-secondary: #121212;
+@background-tertiary: #6d7987;
 
-@border-color-primary: darken(@background-primary, 1%);
-@border-color-secondary: darken(@background-secondary, 1%);
-@border-color-tertiary: darken(@background-tertiary, 1%);
+@border-color-primary: lighten(@background-primary, 10%);
+@border-color-secondary: lighten(@background-secondary, 10%);
+@border-color-tertiary: lighten(@background-tertiary, 10%);
 @border-color-divider: @border-color-secondary;
 
-@text-color: #c0c6cb;
+@text-color: #eee;
 @text-color-subtle: fadeout(@text-color, 20%);
 @text-color-very-subtle: fadeout(@text-color, 40%);
 @text-color-inverse: white;
 @text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
 @text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
 @text-color-heading: #FFF;
 
+@text-color-link: @accent-primary;
+@text-color-link-hover: @accent-primary-dark;
+@text-color-link-active: @accent-primary-dark;
+
 @btn-default-bg-color: lighten(@background-primary, 5%);
 @dropdown-default-bg-color: #404040;
 
-@input-bg: #242424;
+@input-bg: #2e2e2e;
 @input-border: @border-color-divider;
 
 @list-bg: #333;
 @list-border: #383838;
 @list-selected-color: @text-color-inverse;
 @list-focused-color: @text-color;
 
-@toolbar-background-color: @background-secondary;
-@panel-background-color: #282b30;
+@toolbar-background-color: #121212;
+@panel-background-color: #121212;
 
 .sheet-toolbar {
-  border-bottom: none;
-  box-shadow: 0 0 0.5px @border-color-primary, 0 1px 1.5px @border-color-primary,
-    0 0 3px @border-color-primary;
+  border-bottom: 1px solid @border-color-divider;
+  box-shadow: none;
 }
 
 .thread-icon:not(.thread-icon-unread):not(.thread-icon-star) {
@@ -59,19 +62,14 @@ img.content-light {
   -webkit-filter: invert(100%);
 }
 
-.popover {
-  border: 1px solid @border-color-primary;
-}
-
 .mail-label {
   -webkit-filter: contrast(110%) brightness(85%);
 }
 
-.sheet-toolbar .btn-toolbar {
-  box-shadow: 0 0.5px 0.05px rgba(255, 255, 255, 0.4), 0 -0.5px 0 rgba(255, 255, 255, 0.12);
+#message-list .message-item-wrap .message-item-white-wrap {
+  box-shadow: 0 0 0.5px rgba(255, 255, 255, 0.28), 0 1px 1.5px rgba(255, 255, 255, 0.08);
 }
-.btn {
-  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.15), 0 -0.5px 0 rgba(255, 255, 255, 0.15),
-    0.5px 0 0 rgba(255, 255, 255, 0.15), -0.5px 0 0 rgba(255, 255, 255, 0.15),
-    0 0.5px 1px rgba(255, 255, 255, 0.15);
+
+.thread-list .list-item:not(.unread):not(.selected):not(.focused) {
+  color: #aaa;
 }
diff --git a/app/static/components/fixed-popover.less b/app/static/components/fixed-popover.less
@@ -18,6 +18,7 @@
 
   .fixed-popover {
     position: absolute;
+    color: @text-color;
     background-color: @background-secondary;
     border-radius: @border-radius-base;
     box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15),