build: v1.2.1; style: changed theme icon; style: sidebar link active bg color; style: updated toastify-js to v1.9.3; style: used toastify-js styles instead of local ones; style: removed inclusion of animate.css styles (but kept the file for future usage)

src/app.js

@@ -7,7 +7,6 @@ window.vol = {
 
 import '@/styles/scss/style.scss'
 import '@/styles/css/components.css'
-import '@/styles/css/toasts.css'
 
 import App from '@/App.vue'
 import i18n from '@/plugins/i18n'

src/components/TheSidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<aside
 		id="sidebar"
-		class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-foreground"
+		class="top-0 left-0 flex flex-col w-64 h-screen bg-panels-bg text-foreground"
 		role="navigation"
 		aria-label="sidebar"
 	>
@@ -9,15 +9,19 @@
 			tag="a"
 			v-for="link in links"
 			:key="link.id"
-			class="relative flex items-center h-16 no-underline main_tablinks"
+			class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
 			:id="link.id"
-			:class="{ active: activeTablink === link.name }"
+			:class="{ 'bg-background-main': activeTablink === link.name }"
 			:aria-label="link.ariaLabel"
 			:to="{ name: link.routerName }"
 			@click.native="activeTablink = link.name"
 		>
-			<!-- style="color: inherit" -->
-			<i class="p-2 text-3xl material-icons side_icon">{{ link.icon }}</i>
+			<i
+				class="p-2 text-3xl material-icons side_icon group-hover:text-primary"
+				:class="{ 'text-primary': activeTablink === link.name }"
+			>
+				{{ link.icon }}
+			</i>
 			<span class="ml-5 overflow-hidden capitalize whitespace-no-wrap main_tablinks_text" style="letter-spacing: 1.3px">
 				{{ $t(link.label) }}
 			</span>
@@ -30,7 +34,7 @@
 
 		<span class="flex h-12 mt-5" role="link" aria-label="theme selector">
 			<i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme">
-				palette
+				brush
 			</i>
 			<div id="theme_togglers" class="relative flex items-center w-full justify-evenly">
 				<div
@@ -57,7 +61,7 @@
 	</aside>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 #network-status {
 	display: flex;
 	justify-content: center;
@@ -82,6 +86,26 @@
 	left: 30px;
 	top: 12px;
 }
+
+.theme_toggler {
+	transition: border 200ms ease-in-out;
+
+	&--active {
+		border-width: 3px;
+	}
+
+	&--light {
+		background-color: #fff;
+	}
+
+	&--dark {
+		background-color: hsl(0, 0%, 8%);
+	}
+
+	&--purple {
+		background: hsl(261, 85%, 37%);
+	}
+}
 </style>
 
 <script>

src/styles/scss/_sidebar.scss

@@ -1,40 +0,0 @@
-$sidebar-timing: 125ms;
-$sidebar-delay: 75ms;
-
-#sidebar {
-	width: 15.625rem;
-	height: 100vh;
-
-	.main_tablinks {
-		@apply text-foreground;
-
-		&.active,
-		&:hover {
-			background: var(--sidebar-link-bg);
-
-			.side_icon {
-				@apply text-primary;
-			}
-		}
-	}
-
-	.theme_toggler {
-		transition: border 200ms ease-in-out;
-
-		&--active {
-			border-width: 3px;
-		}
-
-		&--light {
-			@apply bg-white;
-		}
-
-		&--dark {
-			@apply bg-grayscale-80;
-		}
-
-		&--purple {
-			background: hsl(261, 85%, 37%);
-		}
-	}
-}

src/styles/scss/base/_base.scss

@@ -17,8 +17,6 @@
 	--secondary-background: theme('colors.grayscale.930');
 	--foreground: theme('colors.grayscale.200');
 	--panels-background: hsl(216, 4%, 78%);
-	// --sidebar-link-bg: theme('colors.grayscale.600');
-	--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
 
 	--table-bg: theme('colors.white');
 	--table-zebra: theme('colors.grayscale.900');
@@ -30,8 +28,6 @@
 	--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
 	--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
 	--panels-background: hsl(240, 15%, 12%); // panel left + right bg
-	// --sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
-	--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
 
 	--table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row
 	--table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
@@ -43,8 +39,6 @@
 	--secondary-background: hsl(257, 61%, 10%);
 	--foreground: theme('colors.grayscale.930');
 	--panels-background: hsl(257, 70%, 9%);
-	// --sidebar-link-bg: hsl(257, 70%, 17%);
-	--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
 
 	--table-bg: hsl(261, 74%, 6%);
 	--table-zebra: hsl(257, 61%, 10%);

src/styles/scss/base/_mixins.scss

@@ -1,5 +0,0 @@
-@mixin remove-selection-background {
-	&::selection {
-		background: none;
-	}
-}

src/styles/scss/base/_variables.scss

@@ -4,5 +4,4 @@ $small: 601px;
 $medium: 993px;
 
 // Static variables (not an oxymoron)
-$sidebar-width: 48px;
 $explicit-separator: 0.3125em;

src/styles/scss/globals/_globals.scss

@@ -111,16 +111,20 @@ span {
 }
 
 a {
-	color: dodgerblue;
-
 	&.single-cover {
 		position: relative;
 		display: inline-block;
 		color: white;
 	}
+}
 
-	&:visited {
+@layer base {
+	a {
 		color: dodgerblue;
+
+		// &:visited {
+		// 	color: dodgerblue;
+		// }
 	}
 }
 
@@ -174,8 +178,7 @@ a {
 	.checkbox_text {
 		margin-left: 10px;
 		cursor: pointer;
-
-		@include remove-selection-background;
+		user-select: none;
 	}
 }
 

src/styles/scss/style.scss

@@ -1,9 +1,8 @@
-@import './base/base';
-
 @import '~tailwindcss/base';
 @import '~tailwindcss/components';
 @import '~tailwindcss/utilities';
 
+@import './base/base';
 @import './base/variables';
 
 html {
@@ -21,7 +20,6 @@ body {
 }
 
 @import './base/normalize';
-@import './base/mixins';
 @import './base/animations';
 
 @import './globals/globals';
@@ -33,5 +31,4 @@ body {
 @import './tabs/tabs';
 
 @import './middle-section';
-@import './sidebar';
 @import './stackedTabs';

src/utils/toasts.js

@@ -1,7 +1,17 @@
 import Toastify from 'toastify-js'
+import 'toastify-js/src/toastify.css'
+import '@/styles/css/toasts.css'
 
 import { socket } from '@/utils/socket'
 
+const sharedOptions = {
+	gravity: 'bottom',
+	position: 'left',
+	offset: {
+		x: '14rem'
+	}
+}
+
 let toastsWithId = {}
 
 export const toast = function(msg, icon = null, dismiss = true, id = null) {
@@ -56,10 +66,9 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
 		}
 
 		let toastObj = Toastify({
+			...sharedOptions,
 			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
 			duration: dismiss ? 3000 : 0,
-			gravity: 'bottom',
-			position: 'left',
 			className: dismiss ? 'dismissable' : '',
 			onClick: function() {
 				let dismissable = true