style: CoverContainer; style: primary and secondary text

src/components/globals/CoverContainer.vue

@@ -1,20 +1,65 @@
 <template>
-	<div class="cover_container">
+	<div class="relative cover_container group">
-		<img aria-hidden="true" class="coverart" :class="{ rounded: isRounded, circle: isCircle }" :src="cover" />
+		<img
+			aria-hidden="true"
+			class="block w-full opacity-100 coverart"
+			:class="{ rounded: isRounded, circle: isCircle }"
+			:src="cover"
+		/>
 
 		<button
 			role="button"
 			aria-label="download"
 			v-on="$listeners"
 			:data-link="link"
-			class="bg-black download_overlay hover:bg-primary"
+			class="absolute p-0 text-center bg-black border-0 rounded-full opacity-0 download_overlay hover:bg-primary"
 			tabindex="0"
 		>
-			<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+			<i class="text-white cursor-pointer material-icons" :title="$t('globals.download_hint')">get_app</i>
 		</button>
 	</div>
 </template>
 
+<style lang="scss" scoped>
+.cover_container {
+	.coverart {
+		backface-visibility: hidden;
+		transition: 0.5s ease;
+		height: auto;
+	}
+
+	.download_overlay {
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		transition: 0.5s ease;
+		opacity: 0;
+		min-width: 2rem;
+		height: 2.75rem;
+		text-align: center;
+
+		i {
+			padding: 0.625rem;
+		}
+
+		&:focus {
+			opacity: 1;
+		}
+	}
+
+	&:hover {
+		.coverart {
+			opacity: 0.75;
+		}
+
+		.download_overlay {
+			opacity: 1;
+			border: 0px;
+		}
+	}
+}
+</style>
+
 <script>
 export default {
 	inheritAttrs: false,

src/components/pages/Favorites.vue

@@ -34,15 +34,11 @@
 				<h1>{{ $t('favorites.noPlaylists') }}</h1>
 			</div>
 			<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
-				<router-link
+				<div class="release" v-for="release in playlists" :key="release.id">
-					tag="div"
+					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
-					v-for="release in playlists"
+						<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
-					:key="release.id"
+						<p class="primary-text">{{ release.title }}</p>
-					class="release clickable"
+					</router-link>
-					:to="{ name: 'Playlist', params: { id: release.id } }"
-				>
-					<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
-					<p class="primary-text">{{ release.title }}</p>
 
 					<p class="secondary-text">
 						{{
@@ -52,17 +48,13 @@
 							)}`
 						}}
 					</p>
-				</router-link>
+				</div>
 
-				<router-link
+				<div class="release" v-for="release in spotifyPlaylists" :key="release.id">
-					tag="div"
+					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Spotify Playlist', params: { id: release.id } }">
-					v-for="release in spotifyPlaylists"
+						<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
-					:key="release.id"
+						<p class="primary-text">{{ release.title }}</p>
-					class="release clickable"
+					</router-link>
-					:to="{ name: 'Spotify Playlist', params: { id: release.id } }"
-				>
-					<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
-					<p class="primary-text">{{ release.title }}</p>
 
 					<p class="secondary-text">
 						{{
@@ -72,7 +64,7 @@
 							)}`
 						}}
 					</p>
-				</router-link>
+				</div>
 			</div>
 		</div>
 

src/components/search/ResultsAlbums.vue

@@ -17,13 +17,19 @@
 							@click.stop="$emit('add-to-queue', $event)"
 						/>
 
-						<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
+						<span class="primary-text">
-							<i v-if="release.isAlbumExplicit" class="material-icons explicit-icon">explicit</i>
+							<i
+								v-if="release.isAlbumExplicit"
+								class="material-icons explicit-icon"
+								style="font-size: 1.0625rem !important"
+							>
+								explicit
+							</i>
 							{{ release.albumTitle }}
 						</span>
 					</router-link>
 
-					<p class="mb-1 text-sm opacity-75">
+					<p class="secondary-text">
 						{{
 							$t('globals.by', { artist: release.artistName }) +
 							' - ' +

src/components/search/ResultsArtists.vue

@@ -17,13 +17,13 @@
 							@click.stop="$emit('add-to-queue', $event)"
 						/>
 
-						<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
+						<span class="primary-text">
 							{{ release.artistName }}
 						</span>
 					</router-link>
 
 					<!-- TODO Fix, depending on the tab there are albums number or fans number -->
-					<!-- <p class="mb-1 text-sm opacity-75">{{ $tc('globals.listTabs.releaseN', release.artistAlbumsNumber) }}</p> -->
+					<!-- <p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.artistAlbumsNumber) }}</p> -->
 				</div>
 			</div>
 		</template>

src/components/search/ResultsPlaylists.vue

@@ -16,12 +16,12 @@
 							@click.stop="$emit('add-to-queue', $event)"
 						/>
 
-						<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
+						<span class="primary-text">
 							{{ playlist.playlistTitle }}
 						</span>
 					</router-link>
 
-					<p class="mb-1 text-sm opacity-75">
+					<p class="secondary-text">
 						{{
 							`${$t('globals.by', { artist: playlist.artistName })} - ${$tc(
 								'globals.listTabs.trackN',

src/styles/scss/globals/_globals.scss

@@ -91,54 +91,3 @@ img {
 	// ? Why?
 	background-color: var(--secondary-background);
 }
-
-// ? Maybe make a component?
-.cover_container {
-	position: relative;
-
-	.coverart {
-		display: block;
-		backface-visibility: hidden;
-		transition: 0.5s ease;
-		opacity: 1;
-		width: 100%;
-		height: auto;
-	}
-
-	.download_overlay {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		transition: 0.5s ease;
-		opacity: 0;
-		border: 0px;
-		border-radius: 50%;
-		// background-color: #000000;
-		padding: 0px;
-		min-width: 32px;
-		height: 44px;
-		text-align: center;
-
-		i {
-			cursor: pointer;
-			padding: 10px;
-			color: white;
-		}
-
-		&:focus {
-			opacity: 1;
-		}
-	}
-
-	&:hover {
-		.coverart {
-			opacity: 0.75;
-		}
-
-		.download_overlay {
-			opacity: 1;
-			border: 0px;
-		}
-	}
-}

src/styles/scss/style.scss

@@ -24,6 +24,6 @@ body {
 @import './globals/globals';
 @import './globals/tables';
 
-@import './tabs/search-tab';
+@import './tabs/release-grid';
 @import './tabs/settings-tab';
 @import './tabs/tabs';

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

@@ -0,0 +1,17 @@
+.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/_search-tab.scss

@@ -1,24 +0,0 @@
-/* Releases */
-.release {
-	.primary-text,
-	.secondary-text {
-		margin: 0rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.secondary-text {
-		opacity: 0.75;
-		font-size: 0.875rem;
-
-		.material-icons {
-			font-size: 1.0625rem !important;
-			margin-left: 0.25rem;
-		}
-	}
-}
-
-.release_grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
-	grid-gap: 1rem;
-}