From e6f9e2663d964f56fa26702383477ab7a59b0eb2 Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Wed, 8 Nov 2017 22:48:19 +0000
Subject: [PATCH] More styling

---
 ElectronClient/app/gui/SideBar.jsx | 55 ++++++++++++++++++++++--------
 ElectronClient/app/theme.js        |  4 +++
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/ElectronClient/app/gui/SideBar.jsx b/ElectronClient/app/gui/SideBar.jsx
index 3f9865373..db709031b 100644
--- a/ElectronClient/app/gui/SideBar.jsx
+++ b/ElectronClient/app/gui/SideBar.jsx
@@ -16,14 +16,36 @@ class SideBarComponent extends React.Component {
 	style() {
 		const theme = themeStyle(this.props.theme);
 
-		const itemHeight = 20;
+		const itemHeight = 25;
 
 		let style = {
-			root: {},
+			root: {
+				backgroundColor: theme.backgroundColor2,
+			},
 			listItem: {
-				display: 'block',
-				cursor: 'pointer',
 				height: itemHeight,
+				fontFamily: theme.fontFamily,
+				fontSize: theme.fontSize,
+				textDecoration: 'none',
+				boxSizing: 'border-box',
+				color: theme.color2,
+				paddingLeft: 14,
+				display: 'flex',
+				alignItems: 'center',
+			},
+			listItemSelected: {
+				backgroundColor: theme.selectedColor2,
+			},
+			header: {
+				height: itemHeight * 1.8,
+				fontFamily: theme.fontFamily,
+				fontSize: theme.fontSize * 1.3,
+				textDecoration: 'none',
+				boxSizing: 'border-box',
+				color: theme.color2,
+				paddingLeft: 8,
+				display: 'flex',
+				alignItems: 'center',
 			},
 		};
 
@@ -78,23 +100,27 @@ class SideBarComponent extends React.Component {
 	}
 
 	folderItem(folder, selected) {
-		const style = Object.assign({}, this.style().listItem, {
-			fontWeight: selected ? 'bold' : 'normal',
-		});
+		let style = Object.assign({}, this.style().listItem);
+		if (selected) style = Object.assign(style, this.style().listItemSelected);
 		return <a href="#" data-id={folder.id} data-type={BaseModel.TYPE_FOLDER} onContextMenu={(event) => this.itemContextMenu(event)} key={folder.id} style={style} onClick={() => {this.folderItem_click(folder)}}>{folder.title}</a>
 	}
 
 	tagItem(tag, selected) {
-		const style = Object.assign({}, this.style().listItem, {
-			fontWeight: selected ? 'bold' : 'normal',
-		});
-		return <a href="#" data-id={tag.id} data-type={BaseModel.TYPE_TAG} onContextMenu={(event) => this.itemContextMenu(event)} key={tag.id} style={style} onClick={() => {this.tagItem_click(tag)}}>Tag: {tag.title}</a>
+		let style = Object.assign({}, this.style().listItem);
+		if (selected) style = Object.assign(style, this.style().listItemSelected);
+		return <a href="#" data-id={tag.id} data-type={BaseModel.TYPE_TAG} onContextMenu={(event) => this.itemContextMenu(event)} key={tag.id} style={style} onClick={() => {this.tagItem_click(tag)}}>{tag.title}</a>
 	}
 
 	makeDivider(key) {
 		return <div style={{height:2, backgroundColor:'blue' }} key={key}></div>
 	}
 
+	makeHeader(key, label, iconName) {
+		const style = this.style().header;
+		const icon = <i style={{fontSize: style.fontSize * 1.2, marginRight: 5}} className={"icon " + iconName}></i>
+		return <div style={style} key={key}>{icon}{label}</div>
+	}
+
 	synchronizeButton(label) {
 		return <a href="#" key="sync_button" onClick={() => {this.sync_click()}}>{label}</a>
 	}
@@ -105,18 +131,19 @@ class SideBarComponent extends React.Component {
 
 		let items = [];
 
+		items.push(this.makeHeader('folderHeader', _('Notebooks'), 'ion-android-folder'));
+
 		if (this.props.folders.length) {
 			const folderItems = shared.renderFolders(this.props, this.folderItem.bind(this));
 			items = items.concat(folderItems);
-			if (items.length) items.push(this.makeDivider('divider_1'));
 		}
 
+		items.push(this.makeHeader('tagHeader', _('Tags'), 'ion-pricetags'));
+
 		if (this.props.tags.length) {
 			const tagItems = shared.renderTags(this.props, this.tagItem.bind(this));
 
 			items.push(<div className="tags" key="tag_items">{tagItems}</div>);
-
-			if (tagItems.length) items.push(this.makeDivider('divider_2'));
 		}
 
 		let lines = Synchronizer.reportToLines(this.props.syncReport);
diff --git a/ElectronClient/app/theme.js b/ElectronClient/app/theme.js
index 2859c8291..1ba370d23 100644
--- a/ElectronClient/app/theme.js
+++ b/ElectronClient/app/theme.js
@@ -20,6 +20,10 @@ const globalStyle = {
 	buttonMinHeight: 30,
 	textAreaLineHeight: 17,
 
+	backgroundColor2: "#3B314E",
+	color2: "#ffffff",
+	selectedColor2: "#4F416A",
+
 	headerHeight: 35,
 	headerButtonHPadding: 6,