improved sidebar smoothness and status feddback

README.md

@@ -21,6 +21,7 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
     - Copy and paste functions
 - Block selection where it's not needed (keep only titles artists albums labels and useful data)
   - There's a SASS mixin for this. Need to use it in the proper classes
+- Better feedback for socket.io possible errors
 - ?
 
 # License

public/index.html

@@ -58,7 +58,7 @@
 			</span>
 			<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info">
 				<i class="material-icons side_icon">info</i>
-				<span class="main_tablinks_text">Info</span>
+				<span class="main_tablinks_text">About</span>
 			</span>
 			<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
 				<i class="material-icons side_icon side_icon--theme">palette</i>
@@ -1202,7 +1202,7 @@ <h3 class="settings-group__header settings-group__header--with-icon">
 						</div>
 
 						<div id="about_tab" class="main_tabcontent">
-							<h1>About</h1>
+							<h2 class="page_heading">About</h2>
 							<p>
 								This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this
 								library to make your own UI for deemix.</br>
@@ -1229,7 +1229,7 @@ <h1>Bug Reports</h1>
 							<p>
 								Before reporting a bug make sure you're running the latest version of the app and that the thing you
 								want
-								to report is acatually a bug and not something that's wrong only on your end.<br />
+								to report is actually a bug and not something that's wrong only on your end.<br />
 								Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been
 								already reported.
 							</p>
@@ -1252,14 +1252,16 @@ <h3>You want to contribute to this project? You can do that <b>in different ways
 							<p>If you know JavaScript, HTML or CSS you could contribute to the <a
 									href="https://notabug.org/RemixDev/deemix-webui" target="_blank">webui</a>.</p>
 							<p>
-								If you find some bugs you can report them in the repo, just make sure your bug isn't something that only
+								If you find some bugs you can report them in the repo, just make sure your bug isn't something that
+								only
 								affects you and it can be reproducible by other users as well.<br>
 								Duplicate bug reports will be closed, so keep an eye out on that.</p>
 							<hr>
 							<h3>You want to contribute monetarily? You could make a donation!</h3>
 							<p>
 								If you can donate you can do that with this links.<br>
-								You shoud remember that <b>this is a free project</b> and <b>you should support the artists you love</b>
+								You shoud remember that <b>this is a free project</b> and <b>you should support the artists you
+									love</b>
 								before supporting the developers.<br>
 								Don't feel obligated to donate, I appreciate you anyway!</p>
 							<p>

src/styles/scss/_sidebar.scss

@@ -1,14 +1,17 @@
+$sidebar-timing: 125ms;
+$sidebar-delay: 75ms;
+
 #sidebar {
 	display: flex;
 	flex-direction: column;
-	width: 48px;
+	width: $sidebar-width;
 	height: 100%;
 	position: absolute;
 	top: 0;
 	left: 0;
 	background-color: var(--panels-background);
 	color: var(--panels-text);
-	transition: width 125ms ease-in-out 75ms;
+	transition: width $sidebar-timing ease-in-out $sidebar-delay;
 	z-index: 999;
 
 	&:hover {
@@ -16,97 +19,120 @@
 	}
 
 	.main_tablinks {
-		&.active .side_icon {
+		transition: all 500ms;
-			color: var(--accent-color);
+
+		&.active {
+			background-color: var(--accent-color);
 		}
 
 		&:not(#theme_selector) {
 			display: flex;
 			align-items: center;
-			margin-top: 5px;
+			height: 55px;
 			cursor: pointer;
 
 			&:hover {
-				background-color: #3e3e3e;
+				background-color: var(--sidebar-link-bg);
+
+				.side_icon {
+					color: var(--accent-color);
+				}
 			}
 		}
 	}
 
 	.main_tablinks_text {
-		display: none;
-		display: inline-block;
 		margin-left: 20px;
 		opacity: 0;
-		visibility: hidden;
+		overflow: hidden;
+		white-space: nowrap;
 		transition: all 50ms ease-in-out 200ms;
 	}
 
 	.side_icon {
 		font-size: 30px;
 		padding: 9px;
+		transition: all 500ms;
 
-		&.side_icon--theme {
+		&--theme {
 			cursor: default;
 		}
 
-		&::selection {
+		@include removeSelectionBackground;
-			background: none;
-		}
 	}
 
 	&:hover {
-		#theme_togglers {
+		.main_tablinks {
-			position: relative;
+			&:hover {
-			opacity: 1;
+				background: var(--sidebar-link-bg-20);
-			transition-delay: 200ms;
+				filter: grayscale(0) opacity(1);
+			}
+
+			&.active {
+				background: var(--sidebar-link-bg);
+				filter: grayscale(1);
+
+				// Fix for purple theme in which grayscale shows incoherent color
+				html[data-theme='purple'] & {
+					background: var(--sidebar-link-bg);
+					filter: grayscale(0);
+				}
+
+				&:hover {
+					background: var(--sidebar-link-bg-20);
+					filter: grayscale(0);
+				}
+			}
 		}
 
 		.main_tablinks_text {
-			display: inline-block;
 			opacity: 1;
-			visibility: visible;
+		}
+
+		#theme_togglers {
+			opacity: 1;
+		}
+	}
+
+	/* Theme selector */
+	#theme_selector {
+		margin-top: 20px;
+		display: flex;
+		height: 50px;
+	}
+
+	#theme_togglers {
+		position: relative;
+		display: flex;
+		justify-content: space-evenly;
+		align-items: center;
+		width: 100%;
+		opacity: 0;
+		transition: all $sidebar-timing ease-in-out $sidebar-delay;
+	}
+
+	.theme_toggler {
+		width: 25px;
+		height: 25px;
+		border-radius: 1000px;
+		border: 1px solid var(--separator);
+		cursor: pointer;
+		transition: border 200ms ease-in-out;
+
+		&--active {
+			border-width: 3px;
+		}
+
+		&[data-theme-variant='light'] {
+			background: white;
+		}
+
+		&[data-theme-variant='dark'] {
+			background: hsl(0, 0%, 8%);
+		}
+
+		&[data-theme-variant='purple'] {
+			background: hsl(261, 85%, 37%);
 		}
 	}
 }
-
-/* Theme selector */
-
-#theme_selector {
-	margin-top: 20px;
-	display: flex;
-	height: 50px;
-}
-
-#theme_togglers {
-	display: flex;
-	opacity: 0;
-	width: 100%;
-	justify-content: space-evenly;
-	align-items: center;
-	transition: all 50ms ease 0s;
-}
-
-.theme_toggler {
-	width: 25px;
-	height: 25px;
-	border-radius: 1000px;
-	border: 1px solid var(--separator);
-	cursor: pointer;
-	transition: border 200ms ease-in-out;
-
-	&--active {
-		border-width: 3px;
-	}
-
-	&[data-theme-variant='light'] {
-		background: white;
-	}
-
-	&[data-theme-variant='dark'] {
-		background: #141414;
-	}
-
-	&[data-theme-variant='purple'] {
-		background: #460ead;
-	}
-}

src/styles/scss/base/_animations.scss

@@ -49,3 +49,14 @@
 		transform: rotate(360deg);
 	}
 }
+
+// You can find a better name, I have no ideas
+@keyframes grayscalize {
+	from {
+		filter: grayscale(0);
+	}
+
+	to {
+		filter: grayscale(1);
+	}
+}

src/styles/scss/base/_base.scss

@@ -3,7 +3,6 @@ html {
 
 	--main-scroll: hsl(0, 0%, 33%);
 	--panels-scroll: hsl(180, 2%, 17%);
-	--accent-color: hsl(210, 100%, 52%);
 	--tag-background: hsl(210, 100%, 38%);
 	--tag-text: hsl(0, 0%, 100%);
 	--toast-background: hsla(0, 0%, 0%, 0.867);
@@ -19,10 +18,14 @@ html[data-theme='light'] {
 	--secondary-background: hsl(0, 0%, 93%);
 	--foreground: hsl(0, 0%, 20%);
 	--foreground-inverted: hsl(0, 0%, 93%);
+	--accent-color: hsl(210, 100%, 52%);
 	--panels-background: hsl(210, 3%, 14%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 0%);
 
+	--sidebar-link-bg: hsl(0, 0%, 24%);
+	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
+
 	--table-bg: hsl(0, 0%, 100%);
 	--table-zebra: hsl(0, 0%, 79%);
 	--table-highlight: hsl(0, 0%, 56%);
@@ -33,10 +36,14 @@ html[data-theme='dark'] {
 	--secondary-background: hsl(0, 0%, 14%);
 	--foreground: hsl(0, 0%, 93%);
 	--foreground-inverted: hsl(0, 0%, 20%);
+	--accent-color: hsl(210, 100%, 52%);
 	--panels-background: hsl(0, 0%, 10%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);
 
+	--sidebar-link-bg: hsl(0, 0%, 24%);
+	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
+
 	--table-bg: hsl(0, 0%, 8%);
 	--table-zebra: hsl(0, 0%, 14%);
 	--table-highlight: hsl(0, 0%, 20%);
@@ -52,6 +59,9 @@ html[data-theme='purple'] {
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);
 
+	--sidebar-link-bg: hsl(257, 70%, 17%);
+	--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
+
 	--table-bg: hsl(261, 74%, 6%);
 	--table-zebra: hsl(257, 61%, 10%);
 	--table-highlight: hsl(257, 66%, 27%);

src/styles/scss/base/_variables.scss

@@ -0,0 +1 @@
+$sidebar-width: 48px;

src/styles/scss/globals/_globals.scss

@@ -84,21 +84,21 @@ button {
 	text-transform: uppercase;
 	cursor: pointer;
 	transition: transform 50ms ease-in-out, background-color 200ms ease;
-}
 
-button:active {
+	&:active {
-	background-color: var(--accent-color);
+		background-color: var(--accent-color);
-	transform: scale(0.95);
+		transform: scale(0.95);
-}
+	}
 
-button:hover {
+	&:hover {
-	background: none;
+		background: none;
-	border: 1px solid var(--accent-color);
+		border: 1px solid var(--accent-color);
+	}
 }
 
 #main_content {
-	margin-left: 48px;
+	margin-left: $sidebar-width;
-	width: calc(100% - 48px);
+	width: calc(100% - $sidebar-width);
 	height: 100%;
 	display: flex;
 }

src/styles/scss/style.scss

@@ -1,3 +1,6 @@
+// SASS only
+@import './base/variables';
+
 @import './base/base';
 @import './base/normalize';
 @import './base/mixins';

src/styles/scss/tabs/_about-tab.scss

@@ -1,9 +1,13 @@
-#about_tab p {
+#about_tab {
-	margin-bottom: 8px;
+	p {
-}
+		margin-bottom: 8px;
-#about_tab h3 {
+	}
-	margin: 8px 0px;
+
-}
+	h3 {
-#about_tab hr {
+		margin: 8px 0px;
-	margin: 12px 0px;
+	}
+
+	hr {
+		margin: 12px 0px;
+	}
 }

src/styles/scss/tabs/_tabs.scss

@@ -28,11 +28,6 @@
 	margin-bottom: 10px;
 }
 
-.main_tablinks_text {
-	overflow: hidden;
-	white-space: nowrap;
-}
-
 .section-tabs {
 	list-style-type: none;
 	display: flex;
@@ -42,7 +37,7 @@
 	&__tab {
 		flex: 1;
 		font-size: 1.2rem;
-		padding: .8em;
+		padding: 0.8em;
 		border-top: 3px solid var(--foreground);
 		text-align: center;