Hide native toolbar on macOS (#449)

* Use a hidden title bar for macOS when running in electron. Some special styles are applied to add padding to the top bar.

* Add some top padding to the tags list and note info

* Removed unnecessary isElectron() call and made use of `matchesProperty`.

h/t @dmsnell

desktop/app.js

@@ -36,7 +36,8 @@ module.exports = function main() {
 			height: 768,
 			minWidth: 370,
 			minHeight: 520,
-			icon: iconPath
+			icon: iconPath,
+			titleBarStyle: 'hidden'
 		} );
 
 		// and load the index of the app.

lib/app.jsx

@@ -34,6 +34,7 @@ import {
 	includes,
 	isObject,
 	map,
+	matchesProperty,
 	overEvery,
 	pick,
 	values,
@@ -99,6 +100,8 @@ const isElectron = ( () => {
 	return () => foundElectron;
 } )();
 
+const isElectronMac = () => matchesProperty( 'process.platform', 'darwin' )( window );
+
 const includesSearch = ( text, search ) =>
 	( text || '' )
 		.toLocaleLowerCase()
@@ -490,7 +493,8 @@ export const App = connect( mapStateToProps, mapDispatchToProps )( React.createC
 			'note-open': selectedNote,
 			'note-info-open': state.showNoteInfo,
 			'navigation-open': state.showNavigation,
-			'is-electron': isElectron()
+			'is-electron': isElectron(),
+			'is-macos': isElectronMac()
 		} );
 
 		return (

scss/general.scss

@@ -108,3 +108,21 @@ a {
 	}
 }
 
+.is-macos { 
+	.note-editor-controls {
+		box-sizing: border-box;
+		-webkit-app-region: drag;
+		padding: 40px 0 30px;
+	}
+
+	.search-bar {
+		padding: 40px 15px 30px;
+		box-sizing: border-box;
+		-webkit-app-region: drag;
+	}
+
+	.navigation, .note-info {
+		padding-top: 10px;
+	}
+}
+