Update styling (#109)

* Use WordPress buttons * Use IconButton and vertically center header items * Make line height consistent * Adjust text colour * Add some whimsy to the About page * Use Button for repository link * Remove ^ from npm dependencies
pento · Mar 18, 2019 · 2a2adb7 · 2a2adb7
1 parent c3f88fd
commit 2a2adb7
Show file tree

Hide file tree

Showing 17 changed files with 734 additions and 120 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
 	},
 	"main": "src/electron-runner.js",
 	"dependencies": {
+		"@wordpress/components": "7.1.0",
 		"@wordpress/hooks": "2.0.5",
 		"await-sleep": "0.0.1",
 		"chokidar": "2.1.2",
@@ -31,13 +32,12 @@
 		"decompress-zip": "0.3.2",
 		"electron-positioner": "4.1.0",
 		"electron-updater": "4.0.6",
-		"gridicons": "3.1.1",
 		"hasha": "3.0.0",
 		"hazardous": "0.3.0",
 		"intercept-stdout": "0.1.2",
 		"js-yaml": "3.12.1",
 		"node-fetch": "2.3.0",
-		"node-sass": "npm:sass@^1.17.3",
+		"node-sass": "npm:sass@1.17.3",
 		"node-schedule": "1.3.2",
 		"promisepipe": "3.0.0",
 		"promisify-child-process": "3.1.0",
@@ -48,7 +48,7 @@
 		"tar": "4.4.8"
 	},
 	"devDependencies": {
-		"@wordpress/scripts": "^3.0.0",
+		"@wordpress/scripts": "3.0.0",
 		"concurrently": "4.1.0",
 		"cross-env": "5.2.0",
 		"electron": "4.0.5",

diff --git a/src/app/style.scss b/src/app/style.scss
@@ -13,6 +13,6 @@ body.trayright .tray-pointer {
 
 .testpress {
 	background-color: #fff;
-	color: #000;
+	color: #191e23;
 	height: 340px;
 }
diff --git a/src/components/about-panel/index.js b/src/components/about-panel/index.js
@@ -4,6 +4,11 @@
 import React, { Component } from 'react';
 import { normalize } from 'path';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -15,17 +20,35 @@ const logPath = normalize( remote.app.getPath( 'userData' ) + '/debug.log' );
 
 class AboutPanel extends Component {
 	render() {
+		const repositoryLink = (
+			<Button
+				isLink
+				className="about-panel__repository-link"
+				onClick={ () => shell.openExternal( 'https://github.com/pento/testpress' ) }
+			>
+				GitHub repository
+			</Button>
+		);
+
 		return (
 			<div className="about-panel">
-				<p><strong>Version:</strong> { remote.app.getVersion() }</p>
 				<p>
-					Please submit bug reports to the <a href="#" onClick={ () => shell.openExternal( 'https://github.com/pento/testpress' ) }>GitHub repository</a>.
+					<strong>
+						<span role="img" aria-label="">
+							💃
+						</span>
+						TestPress
+					</strong>
 				</p>
+				<p>Version { remote.app.getVersion() }</p>
 				<p>
-					If something has gone wrong, please also attach the debug log to your bug report.
+					Please submit bug reports to the { repositoryLink } along with a copy of the debug
+					log.
 				</p>
 				<p>
-					<button onClick={ () => shell.openItem( logPath ) }>View debug log</button>
+					<Button isLarge onClick={ () => shell.openItem( logPath ) }>
+						View debug log
+					</Button>
 				</p>
 			</div>
 		);

diff --git a/src/components/about-panel/style.scss b/src/components/about-panel/style.scss
@@ -1,5 +1,9 @@
-.about-panel > p {
-	margin: 20px 15px;
-	line-height: 1.3;
+.about-panel {
+	padding: 0 15px 15px;
+	position: absolute;
 	text-align: center;
+
+	.about-panel__repository-link {
+		font-size: 16px;
+	}
 }
diff --git a/src/components/pages/index.js b/src/components/pages/index.js
@@ -43,13 +43,13 @@ class Pages extends Component {
 							{ () => (
 								<div className={ 'pages__page page' + index }>
 									<header className="pages__page-header">
+										<svg className="pages__page-title-logo" xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" version="1.0" viewBox="0 0 5.5555557 5.5555555">
+											<g transform="matrix(1.0755 0 0 1.0755 -3.5103 -1.6684)">
+												<path d="m5.8465 1.9131c0.57932 0 1.1068 0.222 1.5022 0.58547-0.1938-0.0052-0.3872 0.11-0.3952 0.3738-0.0163 0.5333 0.6377 0.6469 0.2853 1.7196l-0.2915 0.8873-0.7939-2.3386c-0.0123-0.0362 0.002-0.0568 0.0465-0.0568h0.22445c0.011665 0 0.021201-0.00996 0.021201-0.022158v-0.13294c0-0.012193-0.00956-0.022657-0.021201-0.022153-0.42505 0.018587-0.8476 0.018713-1.2676 0-0.0117-0.0005-0.0212 0.01-0.0212 0.0222v0.13294c0 0.012185 0.00954 0.022158 0.021201 0.022158h0.22568c0.050201 0 0.064256 0.016728 0.076091 0.049087l0.3262 0.8921-0.4907 1.4817-0.8066-2.3758c-0.01-0.0298 0.0021-0.0471 0.0308-0.0471h0.25715c0.011661 0 0.021197-0.00996 0.021197-0.022158v-0.13294c0-0.012193-0.00957-0.022764-0.021197-0.022153-0.2698 0.014331-0.54063 0.017213-0.79291 0.019803 0.39589-0.60984 1.0828-1.0134 1.8639-1.0134l-0.0000029-0.0000062zm1.9532 1.1633c0.17065 0.31441 0.26755 0.67464 0.26755 1.0574 0 0.84005-0.46675 1.5712-1.1549 1.9486l0.6926-1.9617c0.1073-0.3036 0.2069-0.7139 0.1947-1.0443h-0.000004zm-1.2097 3.1504c-0.2325 0.0827-0.4827 0.1278-0.7435 0.1278-0.2247 0-0.4415-0.0335-0.6459-0.0955l0.68415-1.9606 0.70524 1.9284v-1e-7zm-1.6938-0.0854c-0.75101-0.35617-1.2705-1.1213-1.2705-2.0075 0-0.32852 0.071465-0.64038 0.19955-0.92096l1.071 2.9285 0.000003-0.000003zm0.95023-4.4367c1.3413 0 2.4291 1.0878 2.4291 2.4291s-1.0878 2.4291-2.4291 2.4291-2.4291-1.0878-2.4291-2.4291 1.0878-2.4291 2.4291-2.4291zm0-0.15354c1.4261 0 2.5827 1.1566 2.5827 2.5827s-1.1566 2.5827-2.5827 2.5827-2.5827-1.1566-2.5827-2.5827 1.1566-2.5827 2.5827-2.5827z" />
+											</g>
+										</svg>
 										<h1 className="pages__page-title">
-											<svg className="pages__page-title-logo" xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" version="1.0" viewBox="0 0 5.5555557 5.5555555">
-												<g transform="matrix(1.0755 0 0 1.0755 -3.5103 -1.6684)">
-													<path d="m5.8465 1.9131c0.57932 0 1.1068 0.222 1.5022 0.58547-0.1938-0.0052-0.3872 0.11-0.3952 0.3738-0.0163 0.5333 0.6377 0.6469 0.2853 1.7196l-0.2915 0.8873-0.7939-2.3386c-0.0123-0.0362 0.002-0.0568 0.0465-0.0568h0.22445c0.011665 0 0.021201-0.00996 0.021201-0.022158v-0.13294c0-0.012193-0.00956-0.022657-0.021201-0.022153-0.42505 0.018587-0.8476 0.018713-1.2676 0-0.0117-0.0005-0.0212 0.01-0.0212 0.0222v0.13294c0 0.012185 0.00954 0.022158 0.021201 0.022158h0.22568c0.050201 0 0.064256 0.016728 0.076091 0.049087l0.3262 0.8921-0.4907 1.4817-0.8066-2.3758c-0.01-0.0298 0.0021-0.0471 0.0308-0.0471h0.25715c0.011661 0 0.021197-0.00996 0.021197-0.022158v-0.13294c0-0.012193-0.00957-0.022764-0.021197-0.022153-0.2698 0.014331-0.54063 0.017213-0.79291 0.019803 0.39589-0.60984 1.0828-1.0134 1.8639-1.0134l-0.0000029-0.0000062zm1.9532 1.1633c0.17065 0.31441 0.26755 0.67464 0.26755 1.0574 0 0.84005-0.46675 1.5712-1.1549 1.9486l0.6926-1.9617c0.1073-0.3036 0.2069-0.7139 0.1947-1.0443h-0.000004zm-1.2097 3.1504c-0.2325 0.0827-0.4827 0.1278-0.7435 0.1278-0.2247 0-0.4415-0.0335-0.6459-0.0955l0.68415-1.9606 0.70524 1.9284v-1e-7zm-1.6938-0.0854c-0.75101-0.35617-1.2705-1.1213-1.2705-2.0075 0-0.32852 0.071465-0.64038 0.19955-0.92096l1.071 2.9285 0.000003-0.000003zm0.95023-4.4367c1.3413 0 2.4291 1.0878 2.4291 2.4291s-1.0878 2.4291-2.4291 2.4291-2.4291-1.0878-2.4291-2.4291 1.0878-2.4291 2.4291-2.4291zm0-0.15354c1.4261 0 2.5827 1.1566 2.5827 2.5827s-1.1566 2.5827-2.5827 2.5827-2.5827-1.1566-2.5827-2.5827 1.1566-2.5827 2.5827-2.5827z" />
-												</g>
-											</svg>
-											<span className="pages__page-title-text">{ page.heading }</span>
+											{ page.heading }
 										</h1>
 										<PreferencesButton
 											activePage={ activePage }

diff --git a/src/components/pages/style.scss b/src/components/pages/style.scss
@@ -30,29 +30,25 @@
 	&__page-header {
 		height: 35px;
 		padding: 10px;
-		color: #82878c;
+		color: #555d66;
 		border-bottom: 1px solid #ccc;
 		display: flex;
-		flex-direction: row;
-	}
-
-	&__page-title {
-		margin: 0;
-		flex: auto;
-		display: flex;
-		flex-direction: row;
+		align-items: center;
 	}
 
 	&__page-title-logo {
-		padding: 5px;
+		margin: 5px;
 		height: 25px;
-		fill: #82878c;
+		fill: #555d66;
 	}
 
-	&__page-title-text {
-		padding-left: 5px;
+	&__page-title {
 		font-size: 18px;
 		font-weight: normal;
-		margin: auto 0;
+		margin: 0 0 0 5px;
+	}
+
+	.preferences-button {
+		margin-left: auto;
 	}
 }
diff --git a/src/components/preferences-button/index.js b/src/components/preferences-button/index.js
@@ -2,12 +2,11 @@
  * External dependencies
  */
 import React, { Component } from 'react';
-import Gridicon from 'gridicons';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import './style.scss';
+import { IconButton } from '@wordpress/components';
 
 const { ipcRenderer, remote } = window.require( 'electron' );
 const { Menu, MenuItem, process } = remote;
@@ -50,12 +49,12 @@ class PreferencesButton extends Component {
 
 		this.buttonStyles = {
 			close: {
-				icon: 'cross',
+				icon: 'no-alt',
 				text: 'Close Preferences',
 			},
 			preferences: {
-				icon: 'cog',
-				text: 'Preferences',
+				icon: 'admin-generic',
+				text: 'Settings',
 			},
 		};
 	}
@@ -80,15 +79,13 @@ class PreferencesButton extends Component {
 		const { icon, text } = this.buttonStyles[ activePage ? 'close' : 'preferences' ];
 
 		return (
-			<button
+			<IconButton
 				className="preferences-button"
 				onClick={ this.handleClick }
 				title={ text }
-			>
-				<Gridicon
-					icon={ icon }
-				/>
-			</button>
+				icon={ icon }
+				label={ text }
+			/>
 		);
 	}
 }

diff --git a/src/components/preferences-button/style.scss b/src/components/preferences-button/style.scss
diff --git a/src/components/status-panel/missing-daemon-info.js b/src/components/status-panel/missing-daemon-info.js
@@ -3,6 +3,11 @@
  */
 import React from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Electron dependencies
  */
@@ -33,15 +38,15 @@ export default function MissingDaemonInfo() {
 
 	if ( dockerDesktopPath && existsSync( dockerDesktopPath ) ) {
 		button = (
-			<button onClick={ () => shell.openItem( dockerDesktopPath ) }>
+			<Button isLarge onClick={ () => shell.openItem( dockerDesktopPath ) }>
 				Open { dockerDesktopName }
-			</button>
+			</Button>
 		);
 	} else {
 		button = (
-			<button onClick={ () => shell.openExternal( dockerDesktopURL ) }>
+			<Button isLarge onClick={ () => shell.openExternal( dockerDesktopURL ) }>
 				Download { dockerDesktopName }
-			</button>
+			</Button>
 		);
 	}
 

diff --git a/src/components/status-panel/missing-folder-info.js b/src/components/status-panel/missing-folder-info.js
@@ -3,6 +3,11 @@
  */
 import React from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Electron dependencies
  */
@@ -45,7 +50,7 @@ export default function MissingFolderInfo() {
 				clone { repositoryLink }.
 			</p>
 			<p>
-				<button onClick={ selectWordPressFolder }>Choose WordPress Folder</button>
+				<Button isLarge onClick={ selectWordPressFolder }>Choose WordPress Folder</Button>
 			</p>
 		</div>
 	);

diff --git a/src/components/status-panel/not-ready-info.js b/src/components/status-panel/not-ready-info.js
@@ -4,6 +4,11 @@
 import React from 'react';
 import { normalize } from 'path';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Electron dependencies
  */
@@ -34,7 +39,7 @@ export default function NotReadyInfo( { statuses } ) {
 				{ statuses.wordpress === 'ready' ? '👍' : '👉' } Installing WordPress…
 			</p>
 			<p>
-				<button onClick={ () => shell.openItem( logPath ) }>View log</button>
+				<Button isLarge onClick={ () => shell.openItem( logPath ) }>View log</Button>
 			</p>
 		</div>
 	);

diff --git a/src/components/status-panel/ready-info.js b/src/components/status-panel/ready-info.js
@@ -3,6 +3,11 @@
  */
 import React from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Electron dependencies
  */
@@ -37,10 +42,10 @@ export default function ReadyInfo() {
 				Password: password
 			</p>
 			<p>
-				<button onClick={ () => shell.openExternal( siteURL ) }>View site</button>
-				<button onClick={ () => shell.openExternal( adminURL ) }>WP Admin</button>
+				<Button isLarge onClick={ () => shell.openExternal( siteURL ) }>View site</Button>
+				<Button isLarge onClick={ () => shell.openExternal( adminURL ) }>WP Admin</Button>
 				{ /* TODO: Make this button do something */ }
-				{ /* <button>WP CLI</button> */ }
+				{ /* <Button isLarge>WP CLI</Button> */ }
 			</p>
 		</div>
 	);

diff --git a/src/components/status-panel/style.scss b/src/components/status-panel/style.scss
@@ -1,6 +1,9 @@
 .status {
-	line-height: 1.35;
 	padding: 0 15px 15px;
 	position: absolute;
 	text-align: center;
+
+	.components-button {
+		margin: 0 5px;
+	}
 }
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
 import TestPress from './app';
 import registerServiceWorker from './registerServiceWorker';
 
-import './index.css';
+import './index.scss';
 
 ReactDOM.render( <TestPress />, document.getElementById( 'root' ) );
 registerServiceWorker();
diff --git a/src/index.scss b/src/index.scss
@@ -0,0 +1,8 @@
+@import "../node_modules/@wordpress/components/build-style/style.css";
+
+body {
+	margin: 0;
+	padding: 0;
+	font-family: sans-serif;
+	line-height: 1.35;
+}