macOS - Title Bar & Dark Color Theme

browser/components/ModalEscButton.styl

@@ -1,16 +1,16 @@
 .escButton
-  height 50px
+  height 40px
   position absolute
   background-color transparent
   color $ui-inactive-text-color
   border none
-  top 1px
+  top -1px
   right 10px
   text-align center
   width top-bar--height
   height top-bar-height
 
 .esc-mark
-  font-size 28px
+  font-size 24px
   margin-top -5px
-  margin-bottom -7px
+  margin-bottom -7px

browser/components/RealtimeNotification.styl

@@ -2,7 +2,7 @@
   z-index 1000
   font-size 12px
   position: relative
-  top: 12px
+  top: 7px
   background-color none
 
 .notification-link
@@ -51,4 +51,4 @@ body[data-theme="monokai"]
     border none
     background-color $ui-monokai-button-backgroundColor
     &:hover
-      color #5CB85C
+      color #5CB85C

browser/main/Detail/ApplicationMenuDropdown.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ApplicationMenuDropdown.styl'
+
+class ApplicationMenuDropdown extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isActive: false
+    }
+  }
+
+  handleMouseDown (e) {
+    this.setState({
+      isActive: true
+    })
+  }
+
+  handleMouseUp (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  handleMouseLeave (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  clickMenu (key) {
+    this.props.menu.items[key].click()
+  }
+
+  render () {
+    return (
+      <div
+        className='ApplicationMenuDropdown'
+        styleName={this.state.open === true ? 'root' : 'root-hidden'}>
+        <ul
+          styleName='dropdown-items'>
+          {Object.keys(this.props.menu.items).map(key =>
+            <li
+              key={key}
+              styleName='submenu-item'
+              onClick={() => this.props.menu.items[key].click()}
+            >
+              {this.props.menu.items[key].label}
+            </li>
+          )}
+        </ul>
+      </div>
+    )
+  }
+}
+
+ApplicationMenuDropdown.propTypes = {
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string
+}
+
+export default CSSModules(ApplicationMenuDropdown, styles)

browser/main/Detail/ApplicationMenuDropdown.styl

@@ -0,0 +1,44 @@
+.root
+  background-color $ui-backgroundColor
+  z-index 99
+  border-radius 5px
+  position absolute
+  min-width 50px
+  min-height 20px
+  border 1px solid $ui-borderColor
+  box-shadow 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
+
+.root-hidden
+  display none
+  height 0px
+  z-index 0
+
+.dropdown-items
+  li
+    transition 0.2s background ease-in-out
+    cursor pointer
+    padding 0px 20px
+  li:hover
+    background rgba(0,0,0,0.12)
+
+body[data-theme="white"]
+.root
+  background-color $ui-backgroundColor
+
+body[data-theme="dark"]
+  .root
+    background-color $ui-dark-backgroundColor
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+body[data-theme="solarized-dark"]
+  .root
+    background-color $ui-solarized-dark-backgroundColor
+    border-color $ui-solarized-dark-borderColor
+    color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    background-color $ui-monokai-backgroundColor
+    border-color $ui-monokai-borderColor
+    color $ui-monokai-text-color

browser/main/Detail/Detail.styl

@@ -23,7 +23,7 @@ body[data-theme="dark"]
     border-left 1px solid $ui-dark-borderColor
   .empty-message
     color $ui-dark-inactive-text-color
-    
+
 body[data-theme="solarized-dark"]
   .root
     background-color $ui-solarized-dark-noteDetail-backgroundColor

browser/main/Detail/MarkdownNoteDetail.js

@@ -428,7 +428,7 @@ class MarkdownNoteDetail extends React.Component {
     return (
       <div className='NoteDetail'
         style={this.props.style}
-        styleName='root'
+        styleName={this.props.config.isWin ? 'root-windows' : 'root'}
       >
 
         {location.pathname === '/trashed' ? trashTopBar : detailTopBar}

browser/main/Detail/MarkdownNoteDetail.styl

@@ -8,6 +8,11 @@
   box-shadow none
   padding 20px 40px
   overflow hidden
+  top -10px
+
+.root-windows
+  @extend .root
+  top -10px
 
 .lock-button
   padding-bottom 3px

browser/main/Detail/NoteDetailInfo.styl

@@ -47,7 +47,7 @@ $info-margin-under-border = 30px
 .info-right
   z-index 101
   display inline-flex
-  margin-top 3px
+  margin-top 10px
 
 .undo-button
   width 34px
@@ -98,8 +98,8 @@ body[data-theme="solarized-dark"]
   .info
     border-color $ui-solarized-dark-borderColor
     background-color $ui-solarized-dark-noteDetail-backgroundColor
-    
+
 body[data-theme="monokai"]
   .info
     border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
+    background-color $ui-monokai-noteDetail-backgroundColor

browser/main/Detail/SnippetNoteDetail.styl

@@ -6,6 +6,7 @@
   border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
   box-shadow none
+  top -10px
 
 .body
   absolute left right
@@ -169,4 +170,4 @@ body[data-theme="monokai"]
 
   .tabList
     background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
+    color $ui-monokai-text-color

browser/main/Detail/StarButton.styl

@@ -37,4 +37,4 @@ body[data-theme="dark"]
     topBarButtonDark()
     &:hover
       transition 0.2s
-      color alpha($ui-favorite-star-button-color, 0.6)
+      color alpha($ui-favorite-star-button-color, 0.6)

browser/main/Detail/TagSelect.styl

@@ -55,6 +55,11 @@ body[data-theme="dark"]
   .tag-label
     color $ui-dark-text-color
 
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-dark-text-color
+
 body[data-theme="solarized-dark"]
   .tag
     background-color $ui-solarized-dark-tag-backgroundColor
@@ -76,3 +81,8 @@ body[data-theme="monokai"]
 
   .tag-label
     color $ui-monokai-text-color
+
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-monokai-text-color