style: removed some classes and ids; style: added typography.css; style: added vendor folder; wip: BaseAccordion component

src/app.js

@@ -5,12 +5,13 @@ window.vol = {
 	preview_max_volume: 100
 }
 
-import '@/styles/css/material-icons.css'
+import '@/styles/vendor/material-icons.css'
-import '@/styles/css/OpenSans.css'
+import '@/styles/vendor/OpenSans.css'
 
 import '@/styles/scss/style.scss'
 import '@/styles/css/components.css'
 import '@/styles/css/helpers.css'
+import '@/styles/css/typography.css'
 
 import App from '@/App.vue'
 import i18n from '@/plugins/i18n'

src/components/TheSearchBar.vue

@@ -100,7 +100,6 @@ input[type='search']::-webkit-search-cancel-button {
 <script>
 import { isValidURL } from '@/utils/utils'
 import { sendAddToQueue } from '@/utils/downloads'
-import EventBus from '@/utils/EventBus'
 import { socket } from '@/utils/socket'
 
 export default {
@@ -159,7 +158,6 @@ export default {
 					this.$root.$emit('QualityModal:open', term)
 				} else {
 					if (isShowingAnalyzer) {
-						// EventBus.$emit('linkAnalyzerTab:reset')
 						socket.emit('analyzeLink', term)
 					} else {
 						// ? Open downloads tab ?

src/components/globals/BaseAccordion.vue

@@ -0,0 +1,33 @@
+<template functional>
+	<details :class="{ 'with-arrow': props.withArrow }">
+		<summary class="mb-6 cursor-pointer">
+			<slot name="title">Setting</slot>
+		</summary>
+
+		<slot name="default">
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos distinctio sint culpa, recusandae vel fugit esse hic
+			tenetur autem. Debitis.
+		</slot>
+	</details>
+</template>
+
+<style>
+details > summary::-webkit-details-marker {
+	display: none;
+}
+
+details.with-arrow > summary::-webkit-details-marker {
+	display: initial;
+}
+</style>
+
+<script>
+export default {
+	props: {
+		withArrow: {
+			type: Boolean,
+			default: false
+		}
+	}
+}
+</script>

src/components/globals/CoverContainer.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="relative cover_container group">
+	<div class="relative cover-container group">
 		<img
 			aria-hidden="true"
 			class="block w-full opacity-100 coverart"
-			:class="{ rounded: isRounded, circle: isCircle }"
+			:class="{ rounded: isRounded, 'rounded-full': isCircle }"
 			:src="cover"
 		/>
 
@@ -21,7 +21,11 @@
 </template>
 
 <style lang="scss" scoped>
-.cover_container {
+.cover-container {
+	width: 156px;
+	height: 156px;
+	margin-bottom: 10px;
+
 	.coverart {
 		backface-visibility: hidden;
 		transition: 0.5s ease;

src/components/pages/Charts.vue

@@ -3,7 +3,7 @@
 		<h1 class="mb-8 text-5xl">{{ $t('charts.title') }}</h1>
 
 		<div v-if="country === ''">
-			<div class="release_grid charts_grid">
+			<div class="release-grid">
 				<div
 					v-for="release in countries"
 					role="button"
@@ -31,16 +31,14 @@
 							{{ track.position }}
 						</td>
 						<td class="table__icon table__icon--big">
-							<a
+							<span
-								href="#"
 								@click="playPausePreview"
-								class="rounded"
+								class="relative inline-block rounded cursor-pointer"
-								:class="{ 'single-cover': track.preview }"
 								:data-preview="track.preview"
 							>
 								<PreviewControls v-if="track.preview" />
 								<img class="rounded coverart" :src="track.album.cover_small" />
-							</a>
+							</span>
 						</td>
 						<td class="table__cell--large">
 							{{

src/components/pages/Favorites.vue

@@ -33,7 +33,7 @@
 			<div v-if="playlists.length == 0">
 				<h1>{{ $t('favorites.noPlaylists') }}</h1>
 			</div>
-			<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
+			<div class="release-grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
 				<div class="release" v-for="release in playlists" :key="release.id">
 					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
 						<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
@@ -72,7 +72,7 @@
 			<div v-if="albums.length == 0">
 				<h1>{{ $t('favorites.noAlbums') }}</h1>
 			</div>
-			<div class="release_grid" v-if="albums.length > 0">
+			<div class="release-grid" v-if="albums.length > 0">
 				<router-link
 					tag="div"
 					class="release clickable"
@@ -91,7 +91,7 @@
 			<div v-if="artists.length == 0">
 				<h1>{{ $t('favorites.noArtists') }}</h1>
 			</div>
-			<div class="release_grid" v-if="artists.length > 0">
+			<div class="release-grid" v-if="artists.length > 0">
 				<router-link
 					tag="div"
 					class="release clickable"
@@ -115,17 +115,14 @@
 						{{ track.position }}
 					</td>
 					<td>
-						<a
+						<span
-							href="#"
+							class="relative inline-block rounded cursor-pointer"
-							class="rounded"
-							:class="{ 'single-cover': !!track.preview }"
 							@click="playPausePreview"
 							:data-preview="track.preview"
 						>
 							<PreviewControls v-if="track.preview" />
-
 							<img class="rounded coverart" :src="track.album.cover_small" />
-						</a>
+						</span>
 					</td>
 					<td class="table__cell--large">
 						{{

src/components/pages/Home.vue

@@ -11,7 +11,7 @@
 
 		<section v-if="playlists.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
 			<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularPlaylists') }}</h2>
-			<div class="release_grid">
+			<div class="release-grid">
 				<router-link
 					tag="div"
 					v-for="release in playlists"
@@ -37,7 +37,7 @@
 
 		<section v-if="albums.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
 			<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularAlbums') }}</h2>
-			<div class="release_grid">
+			<div class="release-grid">
 				<router-link
 					tag="div"
 					v-for="release in albums"

src/components/pages/Settings.vue

@@ -1,15 +1,21 @@
 <template>
-	<div id="settings_tab" class="fixed-footer" ref="root">
+	<div class="fixed-footer" ref="root">
 		<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" />
+			<img
+				id="settings_picture"
+				class="w-32 h-32 rounded-full"
+				:src="pictureHref"
+				alt="Profile Picture"
+				ref="userpicture"
+			/>
 
 			<i18n path="settings.login.loggedIn" tag="p">
 				<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
 			</i18n>
 
-			<button class="btn btn-primary" id="settings_btn_logout" @click="logout">
+			<button class="btn btn-primary" @click="logout">
 				{{ $t('settings.login.logout') }}
 			</button>
 
@@ -18,10 +24,26 @@
 			</select>
 		</div>
 
+		<!-- <BaseAccordion>
+			<template v-slot:title>
+				<h3 class="inline-flex items-center text-2xl">
+					<i class="mr-4 material-icons">web</i>
+					{{ $t('settings.appearance.title') }}
+				</h3>
+			</template>
+
+			<label class="with-checkbox">
+				<input type="checkbox" v-model="changeSlimDownloads" />
+				<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
+			</label>
+			<label class="with-checkbox">
+				<input type="checkbox" v-model="changeSlimSidebar" />
+				<span class="checkbox_text">{{ $t('settings.appearance.slimSidebar') }}</span>
+			</label>
+		</BaseAccordion> -->
+
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3>
-				<i class="material-icons">person</i>{{ $t('settings.login.title') }}
-			</h3>
 			<div class="flex items-center">
 				<input
 					autocomplete="off"
@@ -31,7 +53,7 @@
 					ref="loginInput"
 					placeholder="ARL"
 				/>
-				<button id="settings_btn_copyArl" class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
+				<button class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
 					<i class="material-icons">assignment</i>
 				</button>
 			</div>
@@ -40,18 +62,16 @@
 				{{ $t('settings.login.arl.question') }}
 			</RouterLink>
 
-			<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
+			<a v-if="clientMode" href="#" @click="appLogin">
 				{{ $t('settings.login.login') }}
 			</a>
-			<button class="btn btn-primary" id="settings_btn_updateArl" @click="login" style="width: 100%">
+			<button class="btn btn-primary" @click="login" style="width: 100%">
 				{{ $t('settings.login.arl.update') }}
 			</button>
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3>
-				<i class="material-icons">language</i>{{ $t('settings.languages') }}
-			</h3>
 			<div>
 				<span
 					v-for="locale in locales"
@@ -67,9 +87,7 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header"><i class="material-icons">web</i>{{ $t('settings.appearance.title') }}</h3>
-				<i class="material-icons">web</i>{{ $t('settings.appearance.title') }}
-			</h3>
 			<label class="with-checkbox">
 				<input type="checkbox" v-model="changeSlimDownloads" />
 				<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
@@ -81,24 +99,19 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header">
 				<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
 			</h3>
 			<div class="flex items-center">
 				<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
-				<button
+				<button v-if="clientMode" class="ml-2 btn btn-primary btn-only-icon" @click="selectDownloadFolder">
-					id="select_downloads_folder"
-					v-if="clientMode"
-					class="ml-2 btn btn-primary btn-only-icon"
-					@click="selectDownloadFolder"
-				>
 					<i class="material-icons">folder</i>
 				</button>
 			</div>
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header">
 				<i class="material-icons">font_download</i>{{ $t('settings.templates.title') }}
 			</h3>
 
@@ -113,7 +126,7 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header">
 				<i class="material-icons">create_new_folder</i>{{ $t('settings.folders.title') }}
 			</h3>
 			<div class="settings-container">
@@ -168,9 +181,7 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header"><i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}</h3>
-				<i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}
-			</h3>
 
 			<div class="settings-container">
 				<div class="settings-container__third settings-container__third--only-checkbox">
@@ -195,9 +206,7 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header"><i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}</h3>
-				<i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}
-			</h3>
 
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.downloads.queueConcurrency') }}</p>
@@ -272,9 +281,7 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header"><i class="material-icons">album</i>{{ $t('settings.covers.title') }}</h3>
-				<i class="material-icons">album</i>{{ $t('settings.covers.title') }}
-			</h3>
 
 			<label class="with-checkbox">
 				<input type="checkbox" v-model="settings.saveArtwork" />
@@ -341,7 +348,7 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header">
 				<i class="material-icons" style="width: 1em; height: 1em">bookmarks</i>{{ $t('settings.tags.head') }}
 			</h3>
 
@@ -455,9 +462,7 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header"><i class="material-icons">list</i>{{ $t('settings.other.title') }}</h3>
-				<i class="material-icons">list</i>{{ $t('settings.other.title') }}
-			</h3>
 
 			<label class="with-checkbox">
 				<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation" />
@@ -599,8 +604,14 @@
 		</div>
 
 		<div class="settings-group">
-			<h3 class="settings-group__header settings-group__header--with-icon">
+			<h3 class="settings-group__header">
-				<svg id="spotify_icon" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<svg
+					class="w-6 h-6 mr-4"
+					style="fill: #1db954"
+					enable-background="new 0 0 24 24"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
 					<path
 						d="m12 24c6.624 0 12-5.376 12-12s-5.376-12-12-12-12 5.376-12 12 5.376 12 12 12zm4.872-6.344v.001c-.807 0-3.356-2.828-10.52-1.36-.189.049-.436.126-.576.126-.915 0-1.09-1.369-.106-1.578 3.963-.875 8.013-.798 11.467 1.268.824.526.474 1.543-.265 1.543zm1.303-3.173c-.113-.03-.08.069-.597-.203-3.025-1.79-7.533-2.512-11.545-1.423-.232.063-.358.126-.576.126-1.071 0-1.355-1.611-.188-1.94 4.716-1.325 9.775-.552 13.297 1.543.392.232.547.533.547.953-.005.522-.411.944-.938.944zm-13.627-7.485c4.523-1.324 11.368-.906 15.624 1.578 1.091.629.662 2.22-.498 2.22l-.001-.001c-.252 0-.407-.063-.625-.189-3.443-2.056-9.604-2.549-13.59-1.436-.175.048-.393.125-.625.125-.639 0-1.127-.499-1.127-1.142 0-.657.407-1.029.842-1.155z"
 					/>
@@ -675,7 +686,12 @@ import { toast } from '@/utils/toasts'
 import { socket } from '@/utils/socket'
 import { flags } from '@/utils/flags'
 
+import BaseAccordion from '@/components/globals/BaseAccordion.vue'
+
 export default {
+	components: {
+		BaseAccordion
+	},
 	data() {
 		return {
 			flags,

src/components/search/ResultsAlbums.vue

@@ -7,7 +7,7 @@
 				<h1>{{ $t('search.noResultsAlbum') }}</h1>
 			</div>
 
-			<div class="release_grid" v-else>
+			<div class="release-grid" v-else>
 				<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID">
 					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
 						<CoverContainer

src/components/search/ResultsArtists.vue

@@ -7,7 +7,7 @@
 				<h1>{{ $t('search.noResultsArtist') }}</h1>
 			</div>
 
-			<div v-else class="release_grid">
+			<div v-else class="release-grid">
 				<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID">
 					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
 						<CoverContainer

src/components/search/ResultsPlaylists.vue

@@ -6,7 +6,7 @@
 			<div v-if="viewInfo.data.length === 0">
 				<h1>{{ $t('search.noResultsPlaylist') }}</h1>
 			</div>
-			<div class="release_grid" v-else>
+			<div class="release-grid" v-else>
 				<div class="w-40 release" v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID">
 					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
 						<CoverContainer

src/components/search/ResultsTracks.vue

@@ -23,17 +23,15 @@
 				<tbody>
 					<tr v-for="track in viewInfo.data.slice(0, itemsToShow)" :key="track.trackLink">
 						<td class="table__icon table__icon--big">
-							<a
+							<span
-								href="#"
 								@click="playPausePreview($event)"
-								class="rounded"
+								class="relative inline-block rounded cursor-pointer"
-								:class="{ 'single-cover': !!track.trackPreview }"
 								:data-preview="track.trackPreview"
 							>
 								<PreviewControls v-if="track.trackPreview" />
 
 								<img class="rounded coverart" :src="track.albumPicture" />
-							</a>
+							</span>
 						</td>
 
 						<td class="table__cell table__cell--large">

src/router.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import { socket } from '@/utils/socket'
-import EventBus from '@/utils/EventBus'
 
 // Pages
 import About from '@components/pages/About.vue'
@@ -85,7 +84,7 @@ const routes = [
 		component: About
 	},
 	{
-		path: '/arl',
+		path: '/info-arl',
 		name: 'ARL',
 		component: InfoArl
 	},

src/styles/css/typography.css

@@ -0,0 +1,11 @@
+.primary-text {
+	@apply mb-1 transition-colors duration-200 ease-in-out;
+}
+
+.primary-text:hover {
+	@apply text-primary;
+}
+
+.secondary-text {
+	@apply mb-1 text-sm opacity-75;
+}

src/styles/scss/base/_base.scss

@@ -42,3 +42,17 @@
 	--table-zebra: hsl(257, 61%, 10%);
 	--table-highlight: hsl(257, 66%, 27%);
 }
+
+html {
+	height: 100vh;
+}
+
+body {
+	margin: 0px;
+	width: 100%;
+	height: 100%;
+	font-family: 'Open Sans', 'sans-serif';
+	overflow: hidden;
+	background: var(--main-background);
+	color: var(--foreground);
+}

src/styles/scss/base/_normalize.scss

@@ -57,6 +57,10 @@ button,
 	cursor: pointer;
 }
 
+p {
+	word-break: break-word;
+}
+
 *,
 ::before,
 ::after {

src/styles/scss/globals/_globals.scss

@@ -53,33 +53,9 @@ select {
 	color: var(--foreground);
 }
 
-p {
-	word-break: break-word;
-}
-
-img {
-	&.rounded {
-		border-radius: 5px;
-	}
-
-	&.circle {
-		border-radius: 50%;
-	}
-}
-
-.single-cover {
-	display: inline-block;
-	position: relative;
-	color: white;
-}
-
 @layer base {
 	a {
 		color: dodgerblue;
-
-		// &:visited {
-		// 	color: dodgerblue;
-		// }
 	}
 }
 

src/styles/scss/style.scss

@@ -3,21 +3,6 @@
 @import '~tailwindcss/utilities';
 
 @import './base/base';
-
-html {
-	height: 100vh;
-}
-
-body {
-	margin: 0px;
-	width: 100%;
-	height: 100%;
-	font-family: 'Open Sans', 'sans-serif';
-	overflow: hidden;
-	background: var(--main-background);
-	color: var(--foreground);
-}
-
 @import './base/normalize';
 @import './base/animations';
 

src/styles/scss/tabs/_release-grid.scss

@@ -1,17 +1,5 @@
-.release_grid {
+.release-grid {
 	@apply gap-4 grid;
 
 	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 }
-
-.primary-text {
-	@apply mb-1 transition-colors duration-200 ease-in-out;
-
-	&:hover {
-		@apply text-primary;
-	}
-}
-
-.secondary-text {
-	@apply mb-1 text-sm opacity-75;
-}

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

@@ -1,59 +1,23 @@
-#settings_picture {
-	width: 125px;
-	height: 125px;
-}
-
-#log_info {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-#open_login_prompt {
-	margin: 8px 0px;
-}
-
-.inline-flex input {
-	margin-bottom: 0px;
-}
-
-#spotify_icon {
-	width: 24px;
-	height: 24px;
-	fill: #1db954;
-	margin-right: 15px;
-}
-
-/* Settings group */
 .settings-group {
-	display: flex;
+	@apply flex flex-col justify-center pt-5 pb-5;
-	flex-direction: column;
-	justify-content: center;
 	border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
-	padding-top: 20px;
-	padding-bottom: 20px;
 
 	> * {
-		margin-bottom: 15px;
+		margin-bottom: 1rem;
 	}
 }
 
-/* Settings group header */
 .settings-group__header {
+	display: inline-flex;
+	align-items: center;
+	margin-bottom: 1.5625rem;
 	font-size: 1.5rem;
-	margin-bottom: 25px;
 
-	&.settings-group__header--with-icon {
+	i.material-icons {
-		display: inline-flex;
+		margin-right: 15px;
-		align-items: center;
-
-		i.material-icons {
-			margin-right: 15px;
-		}
 	}
 }
 
-/* Settings container */
 .settings-container {
 	display: flex;
 
@@ -67,8 +31,8 @@
 		&--only-checkbox {
 			display: flex;
 			flex-direction: column;
-			justify-content: center;
 			align-items: start;
+			justify-content: center;
 		}
 	}
 

src/styles/scss/tabs/_tabs.scss

@@ -1,10 +1,4 @@
 .release {
 	display: inline-block;
 	width: 156px;
-
-	.cover_container {
-		width: 156px;
-		height: 156px;
-		margin-bottom: 10px;
-	}
 }