modified theme from Nylas N1 to Mailspring

LICENSE.md

@@ -1,6 +1,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2016 Adam Boulanger
+Copyright (c) 2020 Caspar Gruijthuijsen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,26 +1,13 @@
-# N1 Predawn UI theme
-### A dark-ui theme for the [Nylas N1](https://www.nylas.com/n1) email client.
+# Mailspring Predawn UI theme
 
-### Extensively based on the excellent Sublime/Atom dark-ui theme [Predawn](https://github.com/jamiewilson/predawn) by [Jamie Wilson](https://github.com/jamiewilson).
+A dark UI theme for the [Mailspring](https://getmailspring.com/) email client. This theme is a fork of the [Nylas N1 Predawn theme](https://github.com/adambmedia/N1-Predawn) by [Adam Boulanger](https://github.com/adambmedia) and is extensively based on the [Sublime/Atom Predawn theme](https://github.com/jamiewilson/predawn) by [Jamie Wilson](https://github.com/jamiewilson).
 
-![Screenshot](N1-Predawn-Screen.png?raw=true)
+![Screenshot](ui-predawn-screen.png)
 
 # Installing
-1. Download the [Nylas N1](https://www.nylas.com/n1) email client.
-2. [Grab](https://github.com/adambmedia/N1-Predawn/releases) the latest release of N1-Predawn
-3. Open `N1>Preferences>General>Select theme` and select `Install new theme...` from the dropdown.
-  * You want to install the theme from the package (first option) and not the source (second and third options). As of this release, N1 looks at the folder name to set up the directory. Github's `source-code` links add the version number to the folder name and will break the absolute icon references.
-4. Impress your friends with your snazzy dark-ui email client.
 
-# Folder Hierarchy
-This theme overrides classes found in N1's `internal_packages` directory, `static` directory, and the more typical `ui-variables.less` file.  The folder hierarchy is set up to roughly point to where the original classes can be found to aid the developer to further extend the theme.
-
-# Todo
-1. fix cursor to get rid of white outline as [here](https://discuss.atom.io/t/mouse-cursor-of-editing-status-in-dark-theme/10694)
-2. consider lighter color for email display to gel with incoming richtext on many many emails
-3. consider relevance of soda or monokai theme elements or whether, without code, they are unneccesary
-4. figure out something more elegant for inverse thread-list icons and all the white, gray hover stuff
-5. figure out something more elegant for mulit-select in thread-list
-6. messed up scrollbar in email composition templates popup
-7. horizontal scrollbars
-8. fix Cut-and-paste which grabs html and therefore gets pasted in white-ui applications as a gray-color background with white text.
+1. Download the [Mailspring](https://getmailspring.com/) email client.
+2. Download or clone the latest version of the Predawn UI theme from <https://github.com/asparc/ui-predawn>.
+3. Make sure that the name of the folder containing the Predawn UI theme is `ui-predawn`, as otherwise Mailspring won't recognize it.
+3. Open `Mailspring > Edit > Preferences > Install theme...` and select the folder you just downloaded.
+4. Enjoy a dark theme that's easy on your eyes.

package.json

@@ -1,16 +1,12 @@
 {
-  "name": "N1-Predawn",
+  "name": "Predawn",
   "displayName": "Predawn",
   "theme": "ui",
   "version": "0.1.0",
-  "description": "The Predawn N1 Client Theme",
+  "description": "The Mailspring Predawn UI Theme",
   "license": "MIT",
   "engines": {
-    "nylas": "*"
+    "mailspring": "*"
   },
-  "styleSheets": ["email-frame", "overriden_internal_packages/notifications", "overriden_internal_packages/thread-list",
-  "overriden_internal_packages/undo-redo", "overriden_static/contenteditable", "overriden_static/extra",
-  "overriden_static/list-tabular", "overriden_static/popover", "overriden_static/scroll-region", "overriden_static/workspace",
-  "overriden_static/buttons"],
-  "private": true 
-}
+  "private": true
+}

styles/account-sidebar.less

@@ -0,0 +1,13 @@
+@import 'ui-variables';
+
+// Account switching icon
+.account-switcher img {
+    zoom: 1 !important;
+    max-width: 10px;
+    max-height: 6px;
+    transform: none;
+    background-image: none;
+    background-color: @text-color-very-subtle;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="#FFF" d="M0 0h1l4 4 4-4h1v1L5 6 0 1z"/></svg>');
+}

styles/attachment-items.less

@@ -0,0 +1,21 @@
+@import "ui-variables";
+
+.nylas-attachment-item {
+    .file-thumbnail-preview {
+        border: 1px solid @border-dark;
+        border-bottom: none;
+    }
+    .file-info-wrap {
+        border: 1px solid @border-dark;
+        border-right: none;
+    }
+    .file-action-icon {
+        border: 1px solid @border-dark;
+        border-left: none;
+    }
+    .file-action-icon.quicklook {
+        border: 1px solid @border-dark;
+        border-right: none;
+        border-left: none;
+    }
+}

styles/buttons.less

@@ -0,0 +1,62 @@
+@import "ui-variables";
+
+.btn {
+    background: @btn-default-bg-color;
+}
+
+// Emphasis button general
+.btn.btn-emphasis {
+    color: @text-color-inverse;
+    background: @accent-primary;
+}
+
+// Reply/Forward button
+.button-dropdown:hover .primary-item,
+.button-dropdown.bordered .only-item,
+.button-dropdown:hover .only-item,
+.button-dropdown.bordered .primary-item,
+.button-dropdown .secondary-picker {
+    color: @text-color-inverse;
+    background-color: @btn-default-bg-color;    
+}
+
+.button-dropdown:not(.btn-emphasis).open {
+    .only-item img.content-mask,
+    .secondary-picker img.content-mask,
+    .primary-item img.content-mask {
+        background-color: @accent-primary;
+    }
+}
+
+// Send button
+.button-dropdown.btn-emphasis .only-item, 
+.button-dropdown.btn-emphasis .primary-item,
+.button-dropdown.btn-emphasis .secondary-picker {
+    color: @btn-emphasis-text-color;
+    background: @btn-emphasis-bg-color;
+}
+
+// Hover in dropdown
+.button-dropdown .secondary-items .menu .item:hover {
+    color: @accent-primary;
+    background-color: @background-secondary;
+    img.content-mask {
+        background-color: @accent-primary;
+    }
+}
+
+// Icon buttons; to be verified if below is used in Mailspring
+.btn-icon {
+  &:hover {
+    color: @accent-primary;
+    img.content-mask {
+      background-color: @accent-primary;
+    }
+  }
+  &:active {
+    color: @accent-primary;
+    img.content-mask {
+      background-color: @accent-primary;
+    }
+  }
+}

styles/composer.less

@@ -0,0 +1,45 @@
+@import "ui-variables";
+
+// Composer
+.composer-inner-wrap {
+    .composer-header {
+        .composer-header-actions .action {
+            &:hover {
+                color: @accent-primary;
+                img.content-mask {
+                    background-color: @accent-primary;
+                }
+            }
+        }
+
+        ::after {
+            border-bottom: 1px solid @border-header-divider;
+        }
+    }
+    .RichEditor-toolbar {
+        .floating-container {
+            border-bottom: 1px solid @border-header-divider;
+        }
+        // invert color palet
+        .color-picker {
+            filter: invert(100%) hue-rotate(180deg);
+        }
+    }
+}
+
+.RichEditor-root .template-variable {
+    color: @accent-primary-prefilter;
+    border: 1px solid @accent-primary-prefilter;
+    background-color: transparent;
+    &.selected {
+        color: @text-color-prefilter;
+        background-color: @accent-primary-prefilter;
+        border-color: @accent-primary-prefilter;
+    }
+} 
+
+.composer-footer-region .template-status-bar {
+    background-color: @accent-primary;// transparent;
+    color: @text-color;
+    border-color: @accent-primary;
+}

styles/contacts.less

@@ -0,0 +1,101 @@
+@import 'ui-variables';
+
+// Contacts
+.sheet-toolbar {
+    .btn-toolbar {
+        color: @text-color-heading;
+        img.content-mask {
+            background: currentColor; 
+        }
+        svg {
+            fill: currentColor;
+        }
+    }
+    .toolbar-ContactsSidebar .item-spacer {
+        flex: 0 0 0 !important;
+    }
+    .contact-search {
+        input {
+            border: none;
+            box-shadow: none;
+            &:focus {
+                border: 1px solid @accent-primary;
+                box-shadow: 0 0 1.5px darken(@accent-primary, 20%);
+            }
+        }
+        img.clear {
+            filter: invert(100%);
+        }
+    }
+}
+
+.column-ContactsDetail {
+    background-color: @background-secondary;
+}
+
+.contact-detail-column {
+    .contact-profile-photo {
+        box-shadow: 0 0 5px @text-color-very-subtle;
+    }
+    .contact-group-memberships .group-membership {
+        background: @accent-primary;
+        color: @text-color-inverse;
+        border: none;
+        border-radius: 3px;
+        padding: 4px 12px;
+        margin-top: 20px;
+        img.content-dark {
+            filter: invert(100%);
+        }
+    }
+    .contact-attributes {
+        .contact-attributes-section {
+            border-bottom: 1px solid @text-color-very-subtle;
+            &:first-child {
+                padding-top: 10px;
+                border-top: 1px solid @text-color-very-subtle;
+            }
+        }
+        .contact-attribute {
+            label {
+                color: @text-color-subtle;
+                svg {
+                    fill: currentColor;
+                }
+            }
+            div {
+              color: @text-color;
+            }
+            a {
+                color: @text-color;
+                text-decoration: none;
+                &:hover {
+                    color: @accent-primary;
+                    text-decoration: underline;
+                }
+            }
+            .type {
+                color: @text-color-very-subtle;
+            }
+        }
+    }
+    .contact-detail-content-wrap {
+        .btn.remove, .btn.add {
+            border: 1px solid @input-border-color;
+            background-color: @input-bg;        
+        }
+    }
+}
+
+.contact-edit-footer {
+    display: flex;
+    justify-content: flex-end;
+    border-top: 5px solid @background-primary;
+    width: auto;
+    > div {
+        flex: 0 0 6px !important;
+    }
+    .btn:not(.btn-emphasis) {
+        background: @btn-light-bg-color;
+    }
+}

styles/date-picker.less

@@ -0,0 +1,12 @@
+@import 'ui-variables';
+
+// Date picker; to be verified if below is used in Mailspring
+.date-picker .day-text {
+    &:hover {
+        color: @accent-primary;
+    }
+    &.focused {
+        color: @accent-primary;
+    }
+    color: @accent-primary;
+}