build: v1.1.2, chore: improved charts displaying by removing duplicated worldwide chart code; style: removed a lot of .scss files in favor off tailwind utilities; chore: removed some unused ids; style: improved feedback on section-tabs; chore: replaced css variable in primary color in tailwind config with the hsl color code

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deemix-webui",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
 	"repository": {
 		"type": "git",

src/app.js

@@ -7,6 +7,7 @@ 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/TheSearchBar.vue

@@ -44,6 +44,10 @@ $searchbar-height: 45px;
 		i {
 			font-size: $icon-dimension;
 			color: var(--foreground);
+
+			&::selection {
+				background: none;
+			}
 		}
 	}
 

src/components/downloads/QueueItem.vue

@@ -129,6 +129,58 @@
 		}
 	}
 }
+
+.progress {
+	position: relative;
+	height: 4px;
+	display: block;
+	width: 100%;
+	background-color: var(--secondary-background);
+	border-radius: 2px;
+	margin: 0.5rem 0 1rem 0;
+	overflow: hidden;
+
+	.determinate {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		background-color: var(--primary-color);
+		transition: width 0.3s linear;
+	}
+
+	.converting {
+		background-color: var(--secondary-color);
+		transition: none !important;
+	}
+
+	.indeterminate {
+		background-color: var(--primary-color);
+
+		&::before {
+			content: '';
+			position: absolute;
+			background-color: inherit;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			will-change: left, right;
+			animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			background-color: inherit;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			will-change: left, right;
+			animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+			animation-delay: 1.15s;
+		}
+	}
+}
 </style>
 
 <script>

src/components/downloads/TheDownloadBar.vue

@@ -1,16 +1,23 @@
 <template>
 	<div
 		id="download_tab_container"
-		class="tab_hidden"
+		class="block tab_hidden bg-panels-bg text-panels-text"
 		@transitionend="$refs.container.style.transition = ''"
 		ref="container"
 		:data-label="$t('downloads')"
 		aria-label="downloads"
 	>
-		<div id="download_tab_drag_handler" @mousedown.prevent="startDrag" ref="dragHandler"></div>
+		<!-- Drag Handler -->
+		<div
+			v-show="isExpanded"
+			class="absolute w-4 h-full bg-grayscale-200"
+			@mousedown.prevent="startDrag"
+			style="cursor: ew-resize"
+		></div>
+
 		<i
 			id="toggle_download_tab"
-			class="material-icons download_bar_icon"
+			class="m-1 text-2xl cursor-pointer material-icons"
 			@click.prevent="toggleDownloadTab"
 			ref="toggler"
 			:title="$t('globals.toggle_download_tab_hint')"
@@ -18,20 +25,25 @@
 		<div id="queue_buttons">
 			<i
 				v-if="clientMode"
-				class="material-icons download_bar_icon"
+				class="m-1 text-2xl cursor-pointer material-icons"
 				:title="$t('globals.open_downloads_folder')"
 				@click="openDownloadsFolder"
 			>
 				folder_open
 			</i>
-			<i class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
+			<i class="m-1 text-2xl cursor-pointer material-icons" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
 				clear_all
 			</i>
-			<i class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">
+			<i
+				class="m-1 text-2xl cursor-pointer material-icons"
+				@click="cancelQueue"
+				:title="$t('globals.cancel_queue_hint')"
+			>
 				delete_sweep
 			</i>
 		</div>
-		<div id="download_list" ref="list">
+
+		<div v-show="isExpanded" id="download_list" class="w-full pr-2" ref="list">
 			<QueueItem
 				v-for="item in queueList"
 				:queue-item="item"
@@ -47,6 +59,27 @@
 #download_tab_container {
 	height: 100vh;
 }
+
+#download_list {
+	height: calc(100% - 32px);
+	padding-left: 28px;
+	overflow-y: scroll;
+
+	&::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: var(--panels-background);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--panels-scroll);
+		border-radius: 4px;
+		width: 6px;
+		padding: 0px 2px;
+	}
+}
 </style>
 
 <script>
@@ -68,8 +101,8 @@ export default {
 			cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
 			queue: [],
 			queueList: {},
-			queueComplete: []
+			queueComplete: [],
-			// clientMode: window.clientMode
+			isExpanded: localStorage.getItem('downloadTabOpen') === 'true'
 		}
 	},
 	computed: {
@@ -273,12 +306,13 @@ export default {
 
 			// Toggle returns a Boolean based on the action it performed
 			let isHidden = this.$refs.container.classList.toggle('tab_hidden')
+			this.isExpanded = !isHidden
 
-			if (!isHidden) {
+			if (this.isExpanded) {
 				this.setTabWidth(this.cachedTabWidth)
 			}
 
-			localStorage.setItem('downloadTabOpen', !isHidden)
+			localStorage.setItem('downloadTabOpen', this.isExpanded)
 		},
 		cleanQueue() {
 			socket.emit('removeFinishedDownloads')

src/components/globals/BaseLoadingPlaceholder.vue

@@ -9,6 +9,51 @@
 		</div>
 	</div>
 </template>
+
+<style lang="scss" scoped>
+// Source: https://loading.io/css/
+.lds-ring {
+	display: inline-block;
+	position: relative;
+	width: 80px;
+	height: 80px;
+
+	div {
+		box-sizing: border-box;
+		display: block;
+		position: absolute;
+		width: 64px;
+		height: 64px;
+		margin: 8px;
+		border: 8px solid #fff;
+		border-radius: 50%;
+		animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+		border-color: #fff transparent transparent transparent;
+
+		&:nth-child(1) {
+			animation-delay: -0.45s;
+		}
+
+		&:nth-child(2) {
+			animation-delay: -0.3s;
+		}
+
+		&:nth-child(3) {
+			animation-delay: -0.15s;
+		}
+	}
+}
+
+@keyframes lds-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+</style>
+
 <script>
 export default {
 	props: {

src/components/pages/About.vue

@@ -1,6 +1,7 @@
 <template>
-	<div id="about_tab" class="main_tabcontent" ref="root">
+	<div id="about_tab" ref="root">
-		<h2 class="page_heading">{{ $t('sidebar.about') }}</h2>
+		<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>
+
 		<ul>
 			<li>
 				{{ $t('about.updates.currentVersion') }}:

src/components/pages/Artist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="artist_tab" class="main_tabcontent image_header" ref="root">
+	<div id="artist_tab" class="relative image_header" ref="root">
 		<header
 			class="inline-flex"
 			:style="{
@@ -7,18 +7,19 @@
 					'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
 			}"
 		>
-			<h1>{{ title }}</h1>
+			<h1 class="m-0">{{ title }}</h1>
+
 			<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
 				<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
 			</div>
 		</header>
 
-		<div class="tab">
+		<div class="my-4">
 			<button
 				v-for="(item, name) in body"
 				:key="name"
-				class="btn btn-primary"
+				class="mr-2 btn bg-background-main"
-				:class="{ active: name === currentTab }"
+				:class="{ 'btn-primary': name === currentTab }"
 				:href="'#artist_' + name"
 				@click="changeTab(name)"
 			>
@@ -70,12 +71,6 @@
 	</div>
 </template>
 
-<style lang="scss" scoped>
-.main_tabcontent {
-	position: relative;
-}
-</style>
-
 <script>
 import { isEmpty, orderBy } from 'lodash-es'
 import { socket } from '@/utils/socket'

src/components/pages/Charts.vue

@@ -1,40 +1,25 @@
 <template>
-	<div id="charts_tab" class="main_tabcontent" ref="root">
+	<div>
-		<h2 class="page_heading">{{ $t('charts.title') }}</h2>
+		<h1 class="mb-8 text-5xl">{{ $t('charts.title') }}</h1>
-		<div v-if="country === ''" id="charts_selection">
-			<div class="release_grid charts_grid">
-				<template v-for="release in countries">
-					<div
-						role="button"
-						:aria-label="release.title"
-						v-if="release.title === 'Worldwide'"
-						class="release clickable"
-						@click="getTrackList"
-						:data-title="release.title"
-						:data-id="release.id"
-						:key="release.id"
-					>
-						<img class="rounded coverart" :src="release.picture_medium" />
-					</div>
-				</template>
 
-				<template v-for="release in countries">
+		<div v-if="country === ''">
+			<div class="release_grid charts_grid">
 				<div
+					v-for="release in countries"
 					role="button"
 					:aria-label="release.title"
-						v-if="release.title !== 'Worldwide'"
+					class="w-40 h-40 release clickable"
-						class="release clickable"
 					@click="getTrackList"
 					:data-title="release.title"
 					:data-id="release.id"
 					:key="release.id"
 				>
-						<img class="rounded coverart" :src="release.picture_medium" />
+					<img class="w-full rounded coverart" :src="release.picture_medium" />
-					</div>
-				</template>
 				</div>
 			</div>
-		<div v-else id="charts_table">
+		</div>
+
+		<div v-else>
 			<button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
 			<button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
 				{{ $t('charts.download') }}
@@ -118,13 +103,32 @@ export default {
 			chart: []
 		}
 	},
+	computed: {
+		worldwideRelease() {
+			let worldwideRelease = this.countries.filter(country => {
+				return country.title === 'Worldwide'
+			})
+
+			return worldwideRelease[0]
+		}
+	},
 	async created() {
 		socket.on('setChartTracks', this.setTracklist)
 		this.$on('hook:destroyed', () => {
 			socket.off('setChartTracks')
 		})
 
-		const chartsData = await getChartsData()
+		let chartsData = await getChartsData()
+		let worldwideChart
+
+		chartsData = chartsData.filter(item => {
+			if (item.title === 'Worldwide') {
+				worldwideChart = item
+			}
+
+			return item.title !== 'Worldwide'
+		})
+		chartsData.unshift(worldwideChart)
 
 		this.initCharts(chartsData)
 	},
@@ -183,6 +187,3 @@ export default {
 	}
 }
 </script>
-
-<style>
-</style>

src/components/pages/Errors.vue

@@ -1,6 +1,6 @@
 <template>
-	<div id="errors_tab" class="main_tabcontent">
+	<div>
-		<h1>{{ $t('errors.title', { name: title }) }}</h1>
+		<h1 class="mb-8 text-5xl">{{ $t('errors.title', { name: title }) }}</h1>
 
 		<table class="table table--tracklist">
 			<tr>

src/components/pages/Favorites.vue

@@ -1,20 +1,20 @@
 <template>
-	<div class="main_tabcontent">
+	<div>
-		<h2 class="page_heading">
+		<h1 class="mb-8 text-5xl">
 			{{ $t('favorites.title') }}
 			<div
 				@click="reloadTabs"
-				class="clickable reload-button reload-button--inline"
+				class="inline-block clickable reload-button"
 				ref="reloadButton"
 				role="button"
 				aria-label="reload"
 			>
 				<i class="material-icons">sync</i>
 			</div>
-		</h2>
+		</h1>
 
-		<div class="section-tabs">
+		<ul class="section-tabs">
-			<div
+			<li
 				class="section-tabs__tab favorites_tablinks"
 				:class="{ active: activeTab === tab }"
 				@click="activeTab = tab"
@@ -22,8 +22,8 @@
 				:key="tab"
 			>
 				{{ $tc(`globals.listTabs.${tab}`, 2) }}
-			</div>
+			</li>
-		</div>
+		</ul>
 
 		<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
 			{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
@@ -228,6 +228,14 @@
 		display: block;
 	}
 }
+
+.reload-button {
+	&.spin {
+		i {
+			animation: spin 500ms infinite ease-out reverse;
+		}
+	}
+}
 </style>
 
 <script>

src/components/pages/Home.vue

@@ -1,16 +1,16 @@
 <template>
-	<div id="home_tab" class="main_tabcontent" ref="root">
+	<div id="home_tab">
-		<h2 class="page_heading">{{ $t('globals.welcome') }}</h2>
+		<h1 class="mb-8 text-5xl">{{ $t('globals.welcome') }}</h1>
 
-		<section class="home_section" ref="notLogged" v-if="!isLoggedIn">
+		<section class="py-6 border-0 border-t border-solid border-grayscale-500" ref="notLogged" v-if="!isLoggedIn">
-			<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
+			<p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
 			<router-link tag="button" name="button" :to="{ name: 'Settings' }" class="btn btn-primary">
 				{{ $t('home.openSettings') }}
 			</router-link>
 		</section>
 
-		<section v-if="playlists.length" class="home_section">
+		<section v-if="playlists.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
-			<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3>
+			<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularPlaylists') }}</h2>
 			<div class="release_grid">
 				<router-link
 					tag="div"
@@ -47,8 +47,8 @@
 			</div>
 		</section>
 
-		<section v-if="albums.length" class="home_section">
+		<section v-if="albums.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
-			<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3>
+			<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularAlbums') }}</h2>
 			<div class="release_grid">
 				<router-link
 					tag="div"

src/components/pages/LinkAnalyzer.vue

@@ -1,6 +1,6 @@
 <template>
-	<div id="analyzer_tab" class="main_tabcontent image_header" ref="root">
+	<div id="analyzer_tab" class="image_header" ref="root">
-		<h2 class="page_heading page_heading--capitalize">{{ $t('sidebar.linkAnalyzer') }}</h2>
+		<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1>
 
 		<div v-if="link === ''">
 			<p>
@@ -24,8 +24,8 @@
 				}"
 			>
 				<div>
-					<h1>{{ title }}</h1>
+					<h1 class="m-0">{{ title }}</h1>
-					<h2 v-if="type === 'track'">
+					<h2 v-if="type === 'track'" class="m-0 mb-3 text-lg">
 						<i18n path="globals.by" tag="span">
 							<router-link
 								tag="span"
@@ -48,7 +48,7 @@
 							</router-link>
 						</i18n>
 					</h2>
-					<h2 v-else-if="type === 'album'">
+					<h2 v-else-if="type === 'album'" class="m-0 mb-3 text-lg">
 						<i18n path="globals.by" tag="span">
 							<router-link
 								tag="span"

src/components/pages/Search.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="search_tab" class="main_tabcontent" ref="root">
+	<div id="search_tab" ref="root">
 		<div v-show="!showSearchTab">
 			<h2>{{ $t('search.startSearching') }}</h2>
 			<p>{{ $t('search.description') }}</p>

src/components/pages/Settings.vue

@@ -1,6 +1,6 @@
 <template>
-	<div id="settings_tab" class="main_tabcontent fixed_footer" ref="root">
+	<div id="settings_tab" class="fixed_footer" ref="root">
-		<h2 class="page_heading">{{ $t('settings.title') }}</h2>
+		<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
 
 		<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
 			<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
@@ -31,7 +31,7 @@
 					ref="loginInput"
 					placeholder="ARL"
 				/>
-				<button id="settings_btn_copyArl" class="btn btn-primary btn-only-icon ml-2" @click="copyARLtoClipboard">
+				<button id="settings_btn_copyArl" class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
 					<i class="material-icons">assignment</i>
 				</button>
 			</div>
@@ -83,7 +83,7 @@
 				<button
 					id="select_downloads_folder"
 					v-if="clientMode"
-					class="btn btn-primary btn-only-icon ml-2"
+					class="ml-2 btn btn-primary btn-only-icon"
 					@click="selectDownloadFolder"
 				>
 					<i class="material-icons">folder</i>
@@ -618,7 +618,7 @@
 		</div>
 
 		<footer>
-			<button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button>
+			<button class="mr-2 btn btn-primary" @click="resetSettings">{{ $t('settings.reset') }}</button>
 			<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
 		</footer>
 	</div>

src/components/pages/Tracklist.vue

@@ -1,16 +1,16 @@
 <template>
-	<div class="main_tabcontent fixed_footer image_header" ref="root">
+	<div class="relative fixed_footer image_header" ref="root">
 		<header
 			:style="{
 				'background-image':
 					'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
 			}"
 		>
-			<h1 class="inline-flex">
+			<h1 class="inline-flex m-0 text-5xl">
 				{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
 			</h1>
 
-			<h2>
+			<h2 class="m-0 mb-3 text-lg">
 				<p v-if="metadata">{{ metadata }}</p>
 				<p v-if="release_date">{{ release_date }}</p>
 			</h2>
@@ -150,12 +150,6 @@
 	</div>
 </template>
 
-<style lang="scss" scoped>
-.main_tabcontent {
-	position: relative;
-}
-</style>
-
 <script>
 import { isEmpty } from 'lodash-es'
 import { socket } from '@/utils/socket'

src/styles/css/components.css

@@ -1,6 +1,7 @@
 @layer components {
+	/* Button */
 	.btn {
-		@apply text-grayscale-900 relative border border-transparent border-solid rounded font-semibold text-sm py-0 px-2 h-8 uppercase;
+		@apply relative h-8 px-2 py-0 text-sm font-semibold uppercase border border-transparent border-solid rounded text-grayscale-900;
 
 		font-family: inherit;
 		transition: transform 50ms ease-in-out;
@@ -11,11 +12,11 @@
 	}
 
 	.btn[disabled] {
-		@apply bg-gray-600 text-gray-300 opacity-75 cursor-not-allowed;
+		@apply text-gray-300 bg-gray-600 opacity-75 cursor-not-allowed;
 	}
 
 	.btn-only-icon {
-		@apply w-12 py-0 px-1 flex justify-center items-center;
+		@apply flex items-center justify-center w-12 px-1 py-0;
 
 		min-width: 24px;
 	}
@@ -27,4 +28,22 @@
 	.btn-primary:hover {
 		@apply bg-blue-600 border-foreground;
 	}
+
+	/* Section tabs */
+	.section-tabs {
+		@apply flex mt-4 mb-6 list-none cursor-pointer;
+	}
+
+	.section-tabs__tab {
+		@apply flex-1 p-3 text-xl text-center capitalize border-t-4 rounded-b border-foreground bg-background-main;
+	}
+
+	.section-tabs__tab.active {
+		@apply text-primary border-primary bg-background-main;
+	}
+
+	.section-tabs__tab:hover {
+		@apply text-primary border-primary bg-background-secondary;
+		@apply bg-opacity-25;
+	}
 }

src/styles/css/toasts.css

@@ -1,26 +1,22 @@
 .toast-icon {
-	display: inline-block;
+	@apply inline-block mr-2;
-	margin-right: 8px;
 }
 
 .circle-loader {
-	display: inline-block;
+	@apply inline-block w-4 h-4;
 	border: 2px solid var(--primary-color);
 	border-radius: 50%;
 	border-bottom: 2px solid var(--secondary-background);
-	width: 16px;
-	height: 16px;
 	animation: spin 1s linear infinite;
 }
 
 .toastify {
-	display: flex;
+	@apply flex items-center;
-	align-items: center;
 	box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
 	background: var(--toast-background);
 	color: var(--toast-text);
-
+}
-	.circle-loader {
+
-		border-bottom-color: var(--toast-secondary);
+.toastify .circle-loader {
-	}
+	border-bottom-color: var(--toast-secondary);
 }

src/styles/scss/_middle-section.scss

@@ -1,11 +1,3 @@
-#search {
-	.search__icon {
-		i {
-			@include remove-selection-background;
-		}
-	}
-}
-
 #container {
 	--container-width: 95%;
 

src/styles/scss/_progressbar.scss

@@ -1,51 +0,0 @@
-.progress {
-	position: relative;
-	height: 4px;
-	display: block;
-	width: 100%;
-	background-color: var(--secondary-background);
-	border-radius: 2px;
-	margin: 0.5rem 0 1rem 0;
-	overflow: hidden;
-
-	.determinate {
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		background-color: var(--primary-color);
-		transition: width 0.3s linear;
-	}
-
-	.converting {
-		background-color: var(--secondary-color);
-		transition: none !important;
-	}
-
-	.indeterminate {
-		background-color: var(--primary-color);
-
-		&::before {
-			content: '';
-			position: absolute;
-			background-color: inherit;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			will-change: left, right;
-			animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			background-color: inherit;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			will-change: left, right;
-			animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-			animation-delay: 1.15s;
-		}
-	}
-}

src/styles/scss/_stackedTabs.scss

@@ -1,18 +1,7 @@
+// Make a component? But it would be only one HTML tag with a bunch of classes and a prop (the img src)...
 .image_header {
 	header {
+		@apply bg-cover pt-56 px-6 pb-2 rounded-t-lg;
 		background-position: 0% 35%;
-		background-size: cover;
-		padding: 220px 24px 8px;
-		border-radius: 8px 8px 0px 0px;
-
-		h1,
-		h2 {
-			margin: 0px;
-		}
-
-		h2 {
-			font-size: 18px;
-			margin-bottom: 12px;
-		}
 	}
 }

src/styles/scss/base/_animations.scss

@@ -1,47 +1,3 @@
-/* Source: https://loading.io/css/ */
-.lds-ring {
-	display: inline-block;
-	position: relative;
-	width: 80px;
-	height: 80px;
-
-	div {
-		box-sizing: border-box;
-		display: block;
-		position: absolute;
-		width: 64px;
-		height: 64px;
-		margin: 8px;
-		border: 8px solid #fff;
-		border-radius: 50%;
-		animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-		border-color: #fff transparent transparent transparent;
-
-		&:nth-child(1) {
-			animation-delay: -0.45s;
-		}
-
-		&:nth-child(2) {
-			animation-delay: -0.3s;
-		}
-
-		&:nth-child(3) {
-			animation-delay: -0.15s;
-		}
-	}
-}
-
-@keyframes lds-ring {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-/* ====== */
-
 @keyframes spin {
 	0% {
 		transform: rotate(0deg);

src/styles/scss/base/_functions.scss

@@ -1,17 +0,0 @@
-// https://css-tricks.com/using-custom-property-stacks-to-tame-the-cascade/
-@function vars($stack...) {
-	$output: null;
-	$close: '';
-	$length: length($stack);
-
-	@each $var in $stack {
-		@if (str-index('#{$var}', '--') == 1) {
-			$var: 'var(#{$var}';
-			$close: '#{$close})';
-		}
-
-		$output: if($output, '#{$output}, #{$var}', $var);
-	}
-
-	@return unquote($output + $close);
-}

src/styles/scss/base/_normalize.scss

@@ -37,6 +37,16 @@ button,
 	-webkit-appearance: button;
 }
 
+input[type='text'],
+input[type='password'],
+input[type='number'],
+input[type='search'],
+input[type='checkbox'],
+select {
+	-webkit-appearance: none;
+	appearance: none;
+}
+
 [type='number']::-webkit-inner-spin-button,
 [type='number']::-webkit-outer-spin-button {
 	height: auto;
@@ -46,3 +56,10 @@ button,
 [role='button'] {
 	cursor: pointer;
 }
+
+*,
+::before,
+::after {
+	border-width: 0;
+	border-style: solid;
+}

src/styles/scss/globals/_globals.scss

@@ -2,8 +2,8 @@ input[type='text'],
 input[type='password'],
 input[type='number'],
 input[type='search'] {
-	-webkit-appearance: none;
+	// -webkit-appearance: none;
-	appearance: none;
+	// appearance: none;
 	width: calc(100% - 16px);
 	border: 0px solid black;
 	line-height: 36px;
@@ -24,8 +24,8 @@ input[type='search']::-webkit-search-cancel-button {
 }
 
 input[type='checkbox'] {
-	-webkit-appearance: none;
+	// -webkit-appearance: none;
-	appearance: none;
+	// appearance: none;
 	background-color: none;
 	border: 2px solid gray;
 	opacity: 0.5;
@@ -49,8 +49,8 @@ input[type='checkbox'] {
 }
 
 select {
-	-webkit-appearance: none;
+	// -webkit-appearance: none;
-	appearance: none;
+	// appearance: none;
 	width: 100%;
 	border: 0px solid black;
 	line-height: 36px;
@@ -290,3 +290,17 @@ a {
 [v-cloak] {
 	display: none;
 }
+
+.material-icons {
+	$sizes: 18, 24, 36, 48;
+
+	@each $size in $sizes {
+		&.md-#{$size} {
+			font-size: $size * 1px;
+		}
+	}
+
+	&.mirrored {
+		transform: scaleX(-1);
+	}
+}

src/styles/scss/globals/_typography.scss

@@ -1,31 +0,0 @@
-.page_heading {
-	font-size: 2.5rem;
-	margin-bottom: 35px;
-
-	&--capitalize {
-		text-transform: capitalize;
-	}
-
-	&--uppercase {
-		text-transform: uppercase;
-	}
-}
-
-.section_heading {
-	font-size: 1.75rem;
-	margin-bottom: 25px;
-}
-
-.material-icons {
-	$sizes: 18, 24, 36, 48;
-
-	@each $size in $sizes {
-		&.md-#{$size} {
-			font-size: $size * 1px;
-		}
-	}
-
-	&.mirrored {
-		transform: scaleX(-1);
-	}
-}

src/styles/scss/style.scss

@@ -26,19 +26,12 @@ body {
 
 @import './globals/globals';
 @import './globals/tables';
-@import './globals/typography';
 
-@import './tabs/about-tab';
-@import './tabs/charts-tab';
 @import './tabs/download-tab';
-@import './tabs/favorites-tab';
-@import './tabs/home-tab';
 @import './tabs/search-tab';
 @import './tabs/settings-tab';
 @import './tabs/tabs';
 
 @import './middle-section';
-@import './progressbar';
 @import './sidebar';
 @import './stackedTabs';
-@import './toasts';

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

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

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

@@ -1,8 +0,0 @@
-.charts_grid {
-	.release {
-		.coverart {
-			width: 156px;
-			height: 156px;
-		}
-	}
-}

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

@@ -1,9 +1,12 @@
 #download_tab_container {
-	height: 100%;
+	#queue_buttons {
-	background-color: var(--panels-background);
+		position: absolute;
-	color: var(--panels-text);
+		top: 0;
-	display: block;
+		right: 0;
-	flex-direction: column;
+		opacity: 1;
+		visibility: visible;
+		transition: all 250ms ease-in-out;
+	}
 
 	&.tab_hidden {
 		width: 32px;
@@ -12,26 +15,15 @@
 			margin-left: 4px;
 
 			&::before {
-				font-family: 'Material Icons';
-				font-style: normal;
-				font-weight: 400;
 				content: 'chevron_left';
 			}
 		}
 
-		#download_tab_drag_handler {
-			display: none;
-		}
-
 		#queue_buttons {
 			opacity: 0;
 			visibility: hidden;
 		}
 
-		#download_list {
-			display: none;
-		}
-
 		&::after {
 			content: attr(data-label);
 			display: flex;
@@ -55,50 +47,3 @@
 		content: 'chevron_right';
 	}
 }
-
-.download_bar_icon {
-	cursor: pointer;
-	font-size: 24px;
-	margin: 4px;
-}
-
-#download_list {
-	width: 100%;
-	height: calc(100% - 32px);
-	padding: 0px 8px 0px 28px;
-	overflow-y: scroll;
-
-	&::-webkit-scrollbar {
-		width: 10px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: var(--panels-background);
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--panels-scroll);
-		border-radius: 4px;
-		width: 6px;
-		padding: 0px 2px;
-	}
-}
-
-#download_tab_container {
-	#queue_buttons {
-		position: absolute;
-		top: 0;
-		right: 0;
-		opacity: 1;
-		visibility: visible;
-		transition: all 250ms ease-in-out;
-	}
-}
-
-#download_tab_drag_handler {
-	width: 15px;
-	height: 100%;
-	position: absolute;
-	background-color: hsl(0, 0%, 20%);
-	cursor: ew-resize;
-}

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

@@ -1,11 +0,0 @@
-.reload-button {
-	&.reload-button--inline {
-		display: inline-block;
-	}
-
-	&.spin {
-		i {
-			animation: spin 500ms infinite ease-out reverse;
-		}
-	}
-}

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

@@ -1,9 +0,0 @@
-#home_not_logged_text {
-	margin-bottom: 15px;
-}
-
-.home_section {
-	border-top: 1px solid theme('colors.grayscale.500');
-	padding-top: 25px;
-	padding-bottom: 25px;
-}

src/styles/scss/tabs/_tabs.scss

@@ -1,22 +1,3 @@
-.main_tabcontent {
-	h1 {
-		margin-bottom: 12px;
-	}
-}
-
-.tab {
-	margin: 16px 0px;
-
-	button {
-		background-color: var(--main-background);
-		color: var(--foreground);
-
-		&.active {
-			background-color: var(--primary-color);
-		}
-	}
-}
-
 .release {
 	display: inline-block;
 	width: 156px;
@@ -27,24 +8,3 @@
 		margin-bottom: 10px;
 	}
 }
-
-.section-tabs {
-	list-style-type: none;
-	display: flex;
-	margin: 16px 0 24px 0;
-	cursor: pointer;
-
-	&__tab {
-		flex: 1;
-		font-size: 1.2rem;
-		padding: 0.8em;
-		border-top: 3px solid var(--foreground);
-		text-align: center;
-		text-transform: capitalize;
-
-		&.active {
-			color: var(--primary-color);
-			border-top: 3px solid var(--primary-color);
-		}
-	}
-}

tailwind.config.js

@@ -37,7 +37,8 @@ module.exports = {
 					900: 'hsl(0, 0%, 90%)',
 					930: 'hsl(0, 0%, 93%)' // Remove maybe
 				},
-				primary: 'var(--primary-color)',
+				// primary: 'var(--primary-color)',
+				primary: 'hsl(210, 100%, 52%)',
 				background: {
 					main: 'var(--main-background)',
 					secondary: 'var(--secondary-background)'