From f51873d87705d9305c6e93f8248dc12a45f9814c Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Sat, 2 May 2020 17:17:15 +0100
Subject: [PATCH] Desktop: Remove colour gradient from sidebar and replaced
 expand icons with chrevrons

---
 ElectronClient/gui/SideBar.jsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/ElectronClient/gui/SideBar.jsx b/ElectronClient/gui/SideBar.jsx
index a880d2c2d..49aa64f12 100644
--- a/ElectronClient/gui/SideBar.jsx
+++ b/ElectronClient/gui/SideBar.jsx
@@ -102,7 +102,7 @@ class SideBarComponent extends React.Component {
 		};
 	}
 
-	style(depth) {
+	style() {
 		const theme = themeStyle(this.props.theme);
 
 		const itemHeight = 25;
@@ -114,11 +114,8 @@ class SideBarComponent extends React.Component {
 			listItemContainer: {
 				boxSizing: 'border-box',
 				height: itemHeight,
-				// paddingLeft: 14,
 				display: 'flex',
-				alignItems: 'stretch',
-				// Allow 3 levels of color depth
-				backgroundColor: theme.depthColor.replace('OPACITY', Math.min(depth * 0.1, 0.3)),
+				flexDirection: 'row',
 			},
 			listItem: {
 				fontFamily: theme.fontFamily,
@@ -140,12 +137,12 @@ class SideBarComponent extends React.Component {
 				color: theme.color2,
 				cursor: 'default',
 				opacity: 0.8,
-				// fontFamily: theme.fontFamily,
 				fontSize: theme.fontSize,
 				textDecoration: 'none',
 				paddingRight: 5,
 				display: 'flex',
 				alignItems: 'center',
+				width: 12,
 			},
 			conflictFolder: {
 				color: theme.colorError2,
@@ -460,16 +457,17 @@ class SideBarComponent extends React.Component {
 
 		const itemTitle = Folder.displayTitle(folder);
 
-		let containerStyle = Object.assign({}, this.style(depth).listItemContainer);
+		let containerStyle = Object.assign({}, this.style().listItemContainer);
 		if (selected) containerStyle = Object.assign(containerStyle, this.style().listItemSelected);
 
+		containerStyle.paddingLeft = 8 + depth * 15;
+
 		const expandLinkStyle = Object.assign({}, this.style().listItemExpandIcon);
 		const expandIconStyle = {
 			visibility: hasChildren ? 'visible' : 'hidden',
-			paddingLeft: 8 + depth * 10,
 		};
 
-		const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-plus-square' : 'fa-minus-square';
+		const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-chevron-right' : 'fa-chevron-down';
 		const expandIcon = <i style={expandIconStyle} className={`fa ${iconName}`}></i>;
 		const expandLink = hasChildren ? (
 			<a style={expandLinkStyle} href="#" folderid={folder.id} onClick={this.onFolderToggleClick_}>
@@ -483,7 +481,7 @@ class SideBarComponent extends React.Component {
 		const noteCount = folder.note_count ? this.noteCountElement(folder.note_count) : '';
 
 		return (
-			<div className="list-item-container" style={containerStyle} key={folder.id} onDragStart={this.onFolderDragStart_} onDragOver={this.onFolderDragOver_} onDrop={this.onFolderDrop_} draggable={true} folderid={folder.id}>
+			<div className={`list-item-container list-item-depth-${depth}`} style={containerStyle} key={folder.id} onDragStart={this.onFolderDragStart_} onDragOver={this.onFolderDragOver_} onDrop={this.onFolderDrop_} draggable={true} folderid={folder.id}>
 				{expandLink}
 				<a
 					ref={anchorRef}