diff --git a/internal_packages/ui-darkside/README.md b/internal_packages/ui-darkside/README.md
index ef9e8071e..ad13b4e9b 100644
--- a/internal_packages/ui-darkside/README.md
+++ b/internal_packages/ui-darkside/README.md
@@ -1,3 +1,6 @@
+## [Important Notice](https://github.com/nylas/N1/releases/tag/0.4.14)
+## Darkside will now come bundled with N1. New manual installation and activation instructions coming soon.
+
# Darkside
A customizable, dark sidebar theme for [Nylas N1](https://nylas.com/n1).
diff --git a/internal_packages/ui-darkside/styles/darkside.less b/internal_packages/ui-darkside/styles/darkside.less
index 5f6bc2001..6196b9f54 100644
--- a/internal_packages/ui-darkside/styles/darkside.less
+++ b/internal_packages/ui-darkside/styles/darkside.less
@@ -32,14 +32,14 @@
@sidebar-text: desaturate(lighten(@sidebar, 40%), 75%);
@active-sidebar-text: #FFFFFF;
@border-color: fade(@sidebar, 10%);
-@close: #FF5F56;
+@danger: #FF5F56;
@minimize: #FBD852;
@maximize: #8DD07D;
@swipe-archive: #8DD07D;
@swipe-snooze: #FBD852;
-@invalid: @close;
+@swipe-trash: @danger;
+@invalid: @danger;
-@message-width: 700px;
@sidebar-margin: 15px;
//====================================================
@@ -49,7 +49,7 @@
// Make sidebar and corresponding toolbar match
.column-RootSidebar,
.account-sidebar,
-.sheet-toolbar-container > div:nth-child(1) {
+.toolbar-RootSidebar {
height: 100%;
background-color: @sidebar;
// If NOT Retina display, subpixel-antialias fonts instead
@@ -78,12 +78,6 @@
// Window Controls
//====================================================
-// Match alignment for toolbar above sidebar
-.sheet-toolbar-container > div:nth-child(1) {
- padding-left: @sidebar-margin;
- padding-right: @sidebar-margin;
-}
-
.toolbar-window-controls {
display: flex;
align-items: center;
@@ -115,7 +109,7 @@
}
.toolbar-window-controls .close {
- background-color: @close;
+ background-color: @danger;
background-image: none;
}
@@ -172,7 +166,7 @@
// Down arrow icon
.account-switcher {
- height: 16px;
+ height: 14px;
width: 16px;
top: 0;
right: 0;
@@ -195,7 +189,7 @@
background-image: none;
background-color: @sidebar-text;
-webkit-mask-repeat: no-repeat;
- -webkit-mask-image: url(../static/images/ui-darkside/down-arrow.svg);
+ -webkit-mask-image: url('data:image/svg+xml;utf8,');
}
.account-sidebar .item,
@@ -332,7 +326,7 @@
// Make corresponding toolbar match threadlist background
.column-ThreadList,
-.sheet-toolbar-container > div:nth-child(2) {
+.toolbar-ThreadList {
height: 100%;
background: @threadlist-bg;
border-bottom: 1px solid @border-color;
@@ -474,7 +468,9 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
// Swiping
//====================================================
+.thread-list .swipe-backing.swipe-all,
.thread-list .swipe-backing.swipe-archive,
+.draft-list .swipe-backing.swipe-all,
.draft-list .swipe-backing.swipe-archive {
background: @swipe-archive;
&.confirmed {
@@ -490,6 +486,14 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
}
}
+.thread-list .swipe-backing.swipe-trash,
+.draft-list .swipe-backing.swipe-trash {
+ background: @swipe-trash;
+ &.confirmed {
+ background: saturate(@swipe-trash, 10%);
+ }
+}
+
//====================================================
// Mail Labels
//====================================================
@@ -513,26 +517,58 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
// Make toolbars match panels
.column-MessageList,
-.sheet-toolbar-container > div:nth-child(3),
+.toolbar-MessageList,
.column-MessageListSidebar,
-.sheet-toolbar-container > div:nth-child(4) {
+.toolbar-MessageListSidebar {
height: 100%;
background: @messagelist-bg;
border-left: 1px solid @border-color;
}
-// Reducing width of message since the font size was reduced
-#message-list .message-subject-wrap,
-#message-list .message-item-wrap,
-#message-list .footer-reply-area-wrap,
-#message-list .minified-bundle .msg-lines,
-#message-list .message-list-headers {
- max-width: @message-width;
+// Message List top and bottom spacing
+#message-list .messages-wrap .scroll-region-content-inner {
+ padding-top: 20px;
+ padding-bottom: 40vh;
}
-#message-list .message-item-wrap {
- margin-bottom: 12px;
- padding-bottom: 0;
+// Reset padding
+#message-list .message-header,
+#message-list .message-item-wrap.collapsed .message-item-white-wrap,
+#message-list .message-item-wrap.collapsed .message-item-area {
+ padding: 0;
+}
+
+// Make padding uniform
+#message-list .message-item-area,
+#message-list .footer-reply-area-wrap .footer-reply-area {
+ padding: 20px !important;
+}
+
+// Adjusting position of thread participants toggle
+#message-list .header-toggle-control {
+ top: 6px !important;
+ left: -11px !important;
+ display: flex !important;
+ justify-content: center;
+ align-items: center;
+}
+
+// Reducing size and overriding invalid -webkit-mask-repeat- property
+#message-list .header-toggle-control img {
+ zoom: 0.35 !important;
+ -webkit-mask-repeat: no-repeat !important;
+}
+
+.message-participants.to-participants .collapsed-participants,
+.message-participants .expanded-participants .participant-type {
+ margin-top: 0;
+}
+
+.message-participants .from-label,
+.message-participants .to-label,
+.message-participants .cc-label,
+.message-participants .bcc-label {
+ margin-right: 6px;
}
#message-list .message-item-wrap .message-item-white-wrap,
@@ -550,10 +586,12 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
margin-top: 0;
}
+// Collapsed Messages Pill Label
#message-list .minified-bundle .num-messages {
padding: 3px;
}
+// remove margin for last message before reply
#message-list .message-item-wrap.before-reply-area {
margin-bottom: 0;
}
@@ -563,6 +601,7 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
box-shadow: 0 0 0 1px @accent;
}
+// Darken composer action bar to contrast from background
.composer-inner-wrap .composer-action-bar-wrap,
.composer-full-window .composer-inner-wrap .composer-action-bar-wrap {
background: darken(@messagelist-bg, 1%);
@@ -615,10 +654,16 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
//====================================================
// Make corresponding toolbar match threadlist background
-.draft-list {
+.draft-list,
+.toolbar-DraftList {
background: @messagelist-bg;
}
+.draft-list .list-container .list-item.selected,
+.draft-list .list-tabular .list-tabular-item.keyboard-cursor {
+ background: white;
+}
+
.draft-list .list-tabular .list-tabular-item .checkmark .inner {
background-color: white;
border-color: tint(@sidebar, 75%);
@@ -626,7 +671,7 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
.list-tabular .list-tabular-item.selected .checkmark .inner {
background-color: @accent;
- background-image: url(../static/images/ui-darkside/checkmark.svg);
+ background-image: url('data:image/svg+xml;utf8,');
background-size: 8px 6px;
}
@@ -683,21 +728,30 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
right: 0;
border-left: none;
border-right: none;
+ background: none;
}
+// Match left and right alignment across all toolbars
+.toolbar-RootSidebar,
+.toolbar-MessageList,
+.toolbar-MessageListSidebar,
+.toolbar-Center,
+.toolbar-Preferences {
+ height: 100%;
+ padding-left: @sidebar-margin;
+ padding-right: @sidebar-margin;
+}
+
+// Slightly darker toolbar for Prefs, Single Panel Messages, and Popout
+.toolbar-Preferences,
+.layout-mode-list .toolbar-MessageList,
.sheet-toolbar-container.mode-popout {
-// mode-list toolbar
-// [data-reactid=".1.0.1.$=1$1=02Thread=02toolbar"] [data-column='0'],
-// Preferences toolbar
-// [data-reactid=".1.0.1.$=1$1=02Preferences=02toolbar"] [data-column='0'] {
- background-image: none;
- background-color: tint(@sidebar, 90%);
-}
-
-.sheet-toolbar-container.mode-popout > div:nth-child(1) {
background: transparent;
+ background-color: tint(@sidebar, 90%);
+ border: none;
}
+// jackiehluo -> (themes): Fixes Windows button UI issues in #1649
body.platform-win32 .sheet-toolbar-container .btn-toolbar:hover {
background: none;
}
@@ -717,8 +771,9 @@ body.platform-win32 .sheet-toolbar-container .btn-toolbar:hover {
box-shadow: 0 0 0 1px @border-color;
}
-.sheet-toolbar .message-toolbar-items {
- margin-right: 11.25px;
+// Let toolbar define outer padding/margin
+.sheet-toolbar .btn-toolbar:only-of-type {
+ margin-right: 0;
}
.btn-toolbar.mode-toggle.mode-false img.content-mask {
diff --git a/static/images/ui-darkside/checkmark.svg b/static/images/ui-darkside/checkmark.svg
deleted file mode 100644
index 9c7ab3af7..000000000
--- a/static/images/ui-darkside/checkmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/static/images/ui-darkside/down-arrow.svg b/static/images/ui-darkside/down-arrow.svg
deleted file mode 100644
index 0f6317f67..000000000
--- a/static/images/ui-darkside/down-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file