From ec72540f6723f2ce89914372f338df6ed33b91c7 Mon Sep 17 00:00:00 2001
From: aj <andrewjpack@gmail.com>
Date: Fri, 23 Aug 2019 01:01:08 +0100
Subject: [PATCH] tweaked ui look (navbar and sidebar), changed button shape

---
 src/js/Playlist/PlaylistsView.js | 10 +++---
 src/scss/style.scss              | 57 +++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsView.js
index d0c3a09..5cbcb8f 100644
--- a/src/js/Playlist/PlaylistsView.js
+++ b/src/js/Playlist/PlaylistsView.js
@@ -90,12 +90,10 @@ class PlaylistsView extends Component {
 
     render() {
         
-        const table =   <div>
-                            <Table playlists={this.state.playlists} 
-                                handleRunPlaylist={this.handleRunPlaylist} 
-                                handleDeletePlaylist={this.handleDeletePlaylist}
-                                handleRunAll={this.handleRunAll}/>
-                        </div>;
+        const table =   <Table playlists={this.state.playlists} 
+                            handleRunPlaylist={this.handleRunPlaylist} 
+                            handleDeletePlaylist={this.handleDeletePlaylist}
+                            handleRunAll={this.handleRunAll}/>;
 
         const loadingMessage = <p className="center-text">loading...</p>;
 
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 05d0c93..75bcc5a 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -4,6 +4,7 @@ $ui-colour: #131313;
 $light-ui: #575757;
 $text-colour: white;
 $ui-element: #505050;
+$ui-shadow: #404040;
 
 $pad-px: 20px;
 
@@ -54,7 +55,7 @@ p {
 
 	display: inline-block;
 	
-	border-radius: 5px;
+	border-radius: 3px;
 	border: none;
 	margin: 4px auto;
 	padding: 15px;
@@ -66,6 +67,7 @@ p {
 	box-shadow: 0 9px #383838;
 	
 	text: {
+		shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.14);
 		align: center;
 		decoration: none;
 	}
@@ -77,10 +79,10 @@ p {
 }
 
 input[type=text], input[type=password], input[type=number], select {
-	padding: 10px;
+	padding: 15px;
 	background-color: $ui-element;
 	border: black;
-	border-radius: 4px;
+	border-radius: 3px;
 	color: white;
 }
 
@@ -186,34 +188,48 @@ h1.sectiontitle {
 
 ul.navbar {
 	list-style-type: none;
-	border-radius: 5px 5px;
-	/*box-shadow: 3px 3px 1px grey;*/
+	background-color: $light-ui;
 	margin: 10px;
+	border-radius: 5px;
+	/*box-shadow: 3px 3px 1px grey;*/
 	padding: 0;
 	overflow: hidden;
-	background-color: $light-ui;
+	
+
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-khtml-user-drag: none;
+	-moz-user-drag: none;
+	-o-user-drag: none;
+
+	box-shadow: 0 9px 12px 0 black, 0 9px 12px 0 black;
 
 	li {
 		float: left;
 		position: -webkit-sticky;
 		position: sticky;
 		top: 0;
-		
 
 		a {
 			display: block;
 			color: $text-colour;
 			text-align: center;
 			padding: 14px 16px;
+			// padding: 10px;
+			margin: 2px;
+			border-radius: 5px;
 
 			text-decoration: none;
-			text-shadow: 1px 1px 2px black;
+			text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
 			-webkit-transition: background-color 0.4s;
   			transition: background-color 0.4s;
 		
 
 			&:hover {
-				background-color: #080808;
+				background-color: $ui-shadow;
 			}
 		}
 	}
@@ -223,13 +239,24 @@ ul.navbar {
 
 .sidebar {
 	
-	background-color: $light-ui;
 	list-style-type: none;
+	background-color: $light-ui;
 	margin-left: 10px;
 	margin-right: 10px;
 	border-radius: 5px;
-	padding-top: 10px;
-	padding-bottom: 10px;
+	// padding-top: 10px;
+	// padding-bottom: 10px;
+
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-khtml-user-drag: none;
+	-moz-user-drag: none;
+	-o-user-drag: none;
+
+	box-shadow: 0 9px 12px 0 black, 0 9px 12px 0 black;
 
 	tr {
 		top: 0;
@@ -237,7 +264,7 @@ ul.navbar {
 
 		td {
 			
-			height: 50px;
+			// height: 50px;
 			text-align: center;
 			vertical-align: center;
 
@@ -253,13 +280,13 @@ ul.navbar {
 				padding: 10px;
 				
 				text-decoration: none;
-				text-shadow: 1px 1px 2px black;
+				text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
 				-webkit-transition: background-color 0.4s;
 				transition: background-color 0.4s;	
 			}	
 
 			&:hover {
-				background-color: black;
+				background-color: $ui-shadow;
 			}
 		}
 	}