@ozdao/martyrs 0.2.494 → 0.2.496

package/src/modules/music/components/pages/Album.vue

@@ -17,14 +17,11 @@
       <!-- Left Column - Cover & Stats -->
       <div class="pos-sticky pos-t-0 mobile:pos-relative album-cover-section">
         <!-- Cover -->
-        <div class="cover-container relative mn-b-medium radius-big overflow-hidden shadow-big">
-          <Media 
-            :url="album.coverArt || '/logo/logo-placeholder.jpg'"
-            :alt="album.title"
-            class="aspect-1x1 w-100 radius-medium o-hidden"
-          />
-        </div>
-
+        <Media 
+          :url="album.coverArt || '/logo/logo-placeholder.jpg'"
+          :alt="album.title"
+          class="aspect-1x1 w-100 w-max-30r mn-b-small radius-medium o-hidden"
+        />
         <!-- Quick Stats -->
         <div class="stats-grid grid cols-2 gap-small">
           <div class="stat-card bg-light pd-medium radius-medium t-center">
@@ -42,10 +39,10 @@
       <div class="album-details-section">
         <!-- Album Type Badge -->
         <div class="flex items-center gap-small mn-b-small">
-          <span class="badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase">
+          <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
             {{ album.type }}
           </span>
-          <span v-if="album.status === 'published'" class="badge bg-success-transp-20 t-success pd-thin-big radius-small t-small">
+          <span v-if="album.status === 'published'" class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Published
           </span>
         </div>
@@ -59,44 +56,49 @@
             @click="playAlbum"
             color="primary"
             size="medium"
-            class="flex-1 flex-center gap-thin"
+            class="flex-1 t-white bg-black radius-thin flex-center gap-thin"
           >
-            <IconPlay class="w-1r h-1r" />
+            <IconPlay fill="rgb(var(--white))" class="i-medium" />
             Play All
           </Button>
-          
+
           <Button
-            @click="toggleFavorite"
-            :color="isFavorite ? 'danger' : 'transp'"
+            @click="shufflePlay"
+            color="primary"
             size="medium"
-            class="w-3r h-3r radius-full"
+            class="flex-1 bg-light radius-thin flex-center gap-thin"
           >
-            <IconLike class="w-1-25r h-1-25r" :fill="isFavorite" />
+            <IconShuffle class="i-medium" />
+            Shuffle
           </Button>
-          
+
           <Button
-            @click="shufflePlay"
-            color="transp"
+            @click="toggleFavorite"
+            color="primary"
             size="medium"
-            class="w-3r h-3r radius-full"
+            class="flex-1 bg-light radius-thin flex-center gap-thin"
           >
-            <IconShuffle class="w-1-25r h-1-25r" />
+            <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'" />
+            {{isFavorite ? 'Liked' : 'Like'}}
           </Button>
-          
-          <Dropdown v-model="showDropdown" class="relative">
+
+          <Dropdown :label="{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }" v-model="showDropdown" class="relative">
             <template #trigger>
               <Button color="transp" size="medium" class="w-3r h-3r radius-full">
                 <IconEllipsis class="w-1-25r h-1-25r" />
               </Button>
             </template>
             <template #default>
-              <div class="dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin">
+              <div class="dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin">
                 <Button @click="addToQueue" color="transp" size="small" class="w-100 justify-start">
                   Add to Queue
                 </Button>
                 <Button @click="copyLink" color="transp" size="small" class="w-100 justify-start">
                   Copy Link
                 </Button>
+                <Button @click="addToPlaylist" color="transp" size="small" class="w-100 justify-start">
+                  Add to Playlist
+                </Button>
                 <template v-if="isOwner">
                   <hr class="mn-v-thin border-dark-transp-10" />
                   <Button @click="editAlbum" color="transp" size="small" class="w-100 justify-start">
@@ -112,56 +114,26 @@
         </div>
 
         <!-- Artists Cards -->
-        <div class="artists-section mn-b-big">
-          <h3 class="t-medium mn-b-small" v-if="album.artists && album.artists.length > 1">Artists</h3>
+        <div class="artists-section mn-b-medium">
+          <h3 class="t-medium mn-b-small" v-if="album.artists">Artists</h3>
           <div class="flex flex-col gap-small">
-            <div 
+            <ArtistCardSmall 
               v-for="artist in album.artists" 
               :key="artist._id"
-              class="artist-card bg-light pd-medium radius-medium flex items-center gap-medium"
-            >
-              <router-link 
-                :to="`/artist/${artist.url}`"
-                class="flex items-center gap-medium flex-1 hover-opacity"
-              >
-                <div class="artist-avatar">
-                  <Media 
-                    v-if="artist.photoUrl"
-                    :url="artist.photoUrl"
-                    :alt="artist.name"
-                    class="w-4r h-4r radius-full object-cover"
-                  />
-                  <div v-else class="w-4r h-4r radius-full bg-primary flex-center ">
-                    {{ artist.name.charAt(0) }}
-                  </div>
-                </div>
-                <div>
-                  <div class="flex items-center gap-thin">
-                    <span class="t-large ">{{ artist.name }}</span>
-                    <IconVerified v-if="artist.isVerified" class="w-1r h-1r t-primary" />
-                  </div>
-                  <span class="t-small t-transp">Artist</span>
-                </div>
-              </router-link>
-              <Button 
-                v-if="!isOwner"
-                @click="() => toggleFollowArtist(artist._id)"
-                :color="followedArtists.includes(artist._id) ? 'primary' : 'transp'"
-                size="small"
-              >
-                {{ followedArtists.includes(artist._id) ? 'Following' : 'Follow' }}
-              </Button>
-            </div>
+              :artist="artist"
+              :is-following="followedArtists.includes(artist._id)"
+              :show-follow-button="!isOwner"
+              @toggle-follow="toggleFollowArtist"
+            />
           </div>
         </div>
 
         <!-- Metadata Cards -->
-        <div class="metadata-grid grid cols-2 gap-small mn-b-big">
+        <h3 class="t-medium mn-b-small">Metadata</h3>
+        <div class="metadata-grid grid cols-2 gap-small mn-b-medium">
           <!-- Release Date -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center">
-              <IconCalendar class="w-1-5r h-1-5r t-primary" />
-            </div>
+            <IconCalendar class="i-regular t-primary" />
             <div>
               <div class="t-small t-transp t-uppercase">Released</div>
               <div class="t-medium ">{{ formatDate(album.releaseDate) }}</div>
@@ -170,9 +142,7 @@
 
           <!-- Total Duration -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center">
-              <IconClock class="w-1-5r h-1-5r t-primary" />
-            </div>
+            <IconClock class="i-regular t-primary" />
             <div>
               <div class="t-small t-transp t-uppercase">Duration</div>
               <div class="t-medium ">{{ totalDuration }}</div>
@@ -181,9 +151,7 @@
 
           <!-- Label -->
           <div v-if="album.label" class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center">
-              <IconDisc class="w-1-5r h-1-5r t-primary" />
-            </div>
+            <IconDisc class="i-regular t-primary" />
             <div>
               <div class="t-small t-transp t-uppercase">Label</div>
               <div class="t-medium ">{{ album.label }}</div>
@@ -192,9 +160,7 @@
 
           <!-- Visibility -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <div class="icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center">
-              <IconEye class="w-1-5r h-1-5r t-primary" />
-            </div>
+            <IconEye class="i-regular t-primary" />
             <div>
               <div class="t-small t-transp t-uppercase">Visibility</div>
               <div class="t-medium ">{{ album.isPublic ? 'Public' : 'Private' }}</div>
@@ -209,7 +175,7 @@
             <span 
               v-for="genre in album.genres" 
               :key="genre"
-              class="tag bg-primary-transp-20 t-primary pd-thin-big radius-small t-small hover-bg-primary-transp-30 cursor-pointer"
+              class="tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
             >
               {{ genre }}
             </span>
@@ -222,12 +188,6 @@
             </span>
           </div>
         </div>
-
-        <!-- Description -->
-        <div v-if="album.description" class="description-section bg-light pd-medium radius-medium mn-b-medium">
-          <h3 class="t-medium mn-b-small">About</h3>
-          <p class="t-transp">{{ album.description }}</p>
-        </div>
       </div>
     </div>
 
@@ -270,7 +230,7 @@
         <h2 class="h2">More Albums</h2>
         <router-link 
           v-if="album.artists && album.artists[0]"
-          :to="`/artist/${album.artists[0].url}`" 
+          :to="{ name: 'artist', params: { url: album.artists[0].url } }" 
           class="t-primary hover-opacity"
         >
           See all
@@ -309,6 +269,7 @@ import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vu
 // Components
 import TrackListCard from '../cards/TrackListCard.vue';
 import AlbumCard from '../cards/AlbumCard.vue';
+import ArtistCardSmall from '../cards/ArtistCardSmall.vue';
 
 // Store
 import { state as albumsState, actions as albumsActions } from '../../store/albums.js';

package/src/modules/music/components/pages/Artist.vue

@@ -22,7 +22,7 @@
         class="w-100 t-white h-50vh pos-relative"
         :style="artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''"
       >
-        <div class="pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small" :class="artist.coverUrl ? 'bg-black-transp-50' : 'bg-black'"></div>
+        <div class="pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small" :class="artist.coverUrl ? 'bg-black-transp-50' : 'bg-dark'"></div>
         
         <!-- Artist actions for edit/manage -->
         <div v-if="isOwner" class="pos-absolute pos-t-medium pos-r-medium z-index-1">
@@ -50,12 +50,12 @@
           <div class="w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium">
             <img
               v-if="artist.photoUrl"
-              :src="FILE_SERVER_URL + artist.photoUrl"
+              :src="FILE_SERVER_URL + (artist.photoUrl  || '/logo/logo-placeholder.jpg')"
               alt="Artist photo"
               class="w-100 h-100 object-fit-cover"
             />
-            <div v-else class="w-100 h-100 bg-white flex-center flex">
-              <span class="h1">{{ artist?.name?.[0] || 'A' }}</span>
+            <div v-else class="w-100 h-100 bg-black flex-center flex">
+              <span class="h1 t-white">{{ artist?.name?.[0] || 'A' }}</span>
             </div>
           </div>
           
@@ -190,7 +190,7 @@
             </div>
             
             <!-- Singles section -->
-            <div v-if="discography.singles.length > 0" class="bg-light pd-medium radius-medium">
+            <div v-if="discography.singles.length > 0" class="bg-light pd-medium mn-b-medium radius-medium">
               <h2 class="h3 mn-b-medium">Singles & EPs</h2>
               
               <div class="cols-1 gap-small">

package/src/modules/music/components/pages/MusicLibrary.vue

@@ -11,7 +11,7 @@
           :key="tab.id"
           @click="activeTab = tab.id"
           :class="[
-            activeTab === tab.id ? 'bg-white t-black' : 'bg-dark-transp-50  hover-bg-dark',
+            activeTab === tab.id ? 'bg-white t-black' : 'bg-white-transp-50  hover-bg-white',
           ]"
           class="radius-extra pd-small"
           :showLoader="false" 
@@ -46,7 +46,7 @@
           empty: {
             title: 'No playlists yet',
             description: 'Create your first playlist to see it here',
-            class: 'pd-big bg-dark-transp-10 radius-medium'
+            class: 'pd-big bg-white-transp-10 radius-medium'
           }
         }"
         class="gap-medium"
@@ -86,7 +86,7 @@
           empty: {
             title: 'No albums yet',
             description: 'Upload your first album to see it here',
-            class: 'pd-big bg-dark-transp-10 radius-medium'
+            class: 'pd-big bg-white-transp-10 radius-medium'
           }
         }"
         class="gap-medium"
@@ -126,7 +126,7 @@
           empty: {
             title: 'No artists yet',
             description: 'Create your first artist profile to see it here',
-            class: 'pd-big bg-dark-transp-10 radius-medium'
+            class: 'pd-big bg-white-transp-10 radius-medium'
           }
         }"
         class="gap-medium"
@@ -166,7 +166,7 @@
           empty: {
             title: 'No tracks yet',
             description: 'Upload your first track to see it here',
-            class: 'pd-big bg-dark-transp-10 radius-medium'
+            class: 'pd-big bg-white-transp-10 radius-medium'
           }
         }"
         class="gap-medium"

package/src/modules/music/components/pages/Playlist.vue

@@ -9,7 +9,7 @@
     <!-- Playlist Content -->
     <div v-if="playlist" class="playlist-content cols-2-fit-content mobile:cols-1 gap-big">
       <!-- Left Column - Cover & Stats -->
-      <div class="pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section">
+      <div class="pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section">
         <!-- Cover -->
         <div class="cover-container relative mn-b-medium radius-big overflow-hidden shadow-big">
           <Media 
@@ -36,13 +36,13 @@
       <div class="playlist-details-section">
         <!-- Playlist Type Badge -->
         <div class="flex items-center gap-small mn-b-small">
-          <span class="badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase">
+          <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Playlist
           </span>
-          <span v-if="playlist.isCollaborative" class="badge bg-secondary-transp-20 t-secondary pd-thin-big radius-small t-small">
+          <span v-if="playlist.isCollaborative" class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Collaborative
           </span>
-          <span v-if="playlist.status === 'published'" class="badge bg-success-transp-20 t-success pd-thin-big radius-small t-small">
+          <span v-if="playlist.status === 'published'" class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Published
           </span>
         </div>
@@ -56,9 +56,9 @@
             @click="playPlaylist"
             color="primary"
             size="medium"
-            class="flex-1 flex-center gap-thin"
+            class="flex-1 t-white bg-black radius-thin flex-center gap-thin"
           >
-            <IconPlay class="i-medium" />
+            <IconPlay fill="rgb(var(--white))" class="i-medium" />
             Play All
           </Button>
 
@@ -66,7 +66,7 @@
             @click="shufflePlay"
             color="primary"
             size="medium"
-            class="flex-1 flex-center gap-thin"
+            class="flex-1   bg-light radius-thin flex-center gap-thin"
           >
             <IconShuffle class="i-medium" />
             Shuffle
@@ -76,35 +76,35 @@
             @click="toggleFollow"
             color="primary"
             size="medium"
-            class="flex-1 flex-center gap-thin"
+            class="flex-1  bg-light radius-thin flex-center gap-thin"
           >
             {{isFollowing ? 'Follow' : 'Unfollow'}}
           </Button>
 
           
-          <Dropdown :label="{component: IconEllipsis, class: 'i-medium' }" v-model="showDropdown" class="relative">
+          <Dropdown :label="{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }" v-model="showDropdown" class="relative">
             <template #trigger>
               <Button color="transp" size="medium" class="w-3r h-3r radius-full">
                 <IconEllipsis class="w-1-25r h-1-25r" />
               </Button>
             </template>
             <template #default>
-              <div class="dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin">
-                <Button @click="addToQueue" color="transp" size="small" class="w-100 justify-start">
+              <div class="dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin">
+                <Button @click="addToQueue" color="transp" size="small" class="w-100 t-nowrap justify-start">
                   Add to Queue
                 </Button>
-                <Button @click="copyLink" color="transp" size="small" class="w-100 justify-start">
+                <Button @click="copyLink" color="transp" size="small" class="w-100 t-nowrap  justify-start">
                   Copy Link
                 </Button>
                 <template v-if="isOwner || isCollaborator">
                   <hr class="mn-v-thin border-dark-transp-10" />
-                  <Button @click="editPlaylist" color="transp" size="small" class="w-100 justify-start">
+                  <Button @click="editPlaylist" color="transp" size="small" class="w-100 t-nowrap  justify-start">
                     Edit Playlist
                   </Button>
-                  <Button v-if="isOwner" @click="toggleCollaborative" color="transp" size="small" class="w-100 justify-start">
+                  <Button v-if="isOwner" @click="toggleCollaborative" color="transp" size="small" class="t-nowrap  w-100 justify-start">
                     {{ playlist.isCollaborative ? 'Make Private' : 'Make Collaborative' }}
                   </Button>
-                  <Button v-if="isOwner" @click="deletePlaylist" color="danger" size="small" class="w-100 justify-start">
+                  <Button v-if="isOwner" @click="deletePlaylist" color="danger" size="small" class="t-nowrap  w-100 justify-start">
                     Delete Playlist
                   </Button>
                 </template>
@@ -113,41 +113,21 @@
           </Dropdown>
         </div>
 
-        <!-- Owner/Creator Card -->
-        <div class="owner-section mn-b-big">
+        <div class="artists-section mn-b-medium">
           <h3 class="t-medium mn-b-small">Created by</h3>
-          <div class="owner-card bg-light pd-medium radius-medium flex items-center gap-medium">
-            <router-link 
-              :to="getOwnerProfileLink(playlist.creator || playlist.owner)"
-              class="flex items-center gap-medium flex-1 hover-opacity"
-            >
-              <div class="owner-avatar">
-                <Media 
-                  v-if="getOwnerData(playlist)?.photoUrl"
-                  :url="getOwnerData(playlist).photoUrl"
-                  :alt="getOwnerData(playlist)?.name"
-                  class="w-4r h-4r radius-full object-cover"
-                />
-                <div v-else class="w-4r h-4r radius-full bg-primary flex-center ">
-                  {{ getPlaylistOwnerName(playlist).charAt(0) }}
-                </div>
-              </div>
-              <div>
-                <div class="flex items-center gap-thin">
-                  <span class="t-large ">{{ getPlaylistOwnerName(playlist) }}</span>
-                  <IconVerified v-if="getOwnerData(playlist)?.isVerified" class="w-1r h-1r t-primary" />
-                </div>
-                <span class="t-small t-transp">{{ playlist.creator?.type || 'User' }}</span>
-              </div>
-            </router-link>
-            <Button 
-              v-if="!isOwner && authState.user"
-              @click="() => toggleFollowUser(getOwnerId(playlist))"
-              :color="followedUsers.includes(getOwnerId(playlist)) ? 'primary' : 'transp'"
-              size="small"
-            >
-              {{ followedUsers.includes(getOwnerId(playlist)) ? 'Following' : 'Follow' }}
-            </Button>
+          <div class="flex flex-col gap-small">
+            <ArtistCardSmall 
+              :artist="{
+                _id: playlist.creator.target,
+                to: { name: 'User Profile', params: { _id: playlist.creator.target } },
+                photoUrl: null,
+                name: playlist.creator.target,
+                isVerified: false
+              }"
+              :is-following="followedUsers.includes(playlist.creator.target)"
+              :show-follow-button="!isOwner"
+              @toggle-follow="toggleFollowUser(playlist.creator.target)"
+            />
           </div>
         </div>
 
@@ -163,7 +143,7 @@
               <Media 
                 v-if="collaborator.photoUrl"
                 :url="collaborator.photoUrl"
-                class="w-1-5r h-1-5r radius-full object-cover"
+                class="i-regular radius-full object-cover"
               />
               <span class="t-small">{{ collaborator.name || collaborator.profile?.name || 'User' }}</span>
             </div>
@@ -171,7 +151,8 @@
         </div>
 
         <!-- Metadata Cards -->
-        <div class="metadata-grid grid cols-2 gap-small mn-b-big">
+        <h3 class="t-medium mn-b-small">Metadata</h3>
+        <div class="metadata-grid grid cols-2 gap-small mn-b-medium">
           <!-- Created Date -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-medium">
               <IconCalendar class="i-medium t-primary" />
@@ -306,7 +287,7 @@
     <Popup 
       :isPopupOpen="showEditModal && (isOwner || isCollaborator)"
       @close-popup="showEditModal = false" 
-      class="bg-dark pd-medium w-m-30r radius-medium"
+      class="bg-white pd-medium w-m-30r radius-medium"
     >
       <PlaylistForm 
         :editMode="true"
@@ -320,7 +301,7 @@
     <Popup 
       :isPopupOpen="showDeleteModal"
       @close-popup="showDeleteModal = false" 
-      class="bg-dark pd-medium w-m-25r radius-medium"
+      class="bg-white pd-medium w-m-25r radius-medium"
     >
       <h3 class="mn-b-medium">Delete Playlist</h3>
       <p class="t-transp mn-b-medium">Are you sure you want to delete "{{ playlist.title }}"? This action cannot be undone.</p>
@@ -371,6 +352,7 @@ import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vu
 import TrackListCard from '../cards/TrackListCard.vue';
 import PlaylistCard from '../cards/PlaylistCard.vue';
 import PlaylistForm from '../forms/PlaylistForm.vue';
+import ArtistCardSmall from '../cards/ArtistCardSmall.vue';
 
 // Store
 import { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';

package/src/modules/music/components/pages/SearchResults.vue

@@ -17,7 +17,7 @@
           :key="filter.id"
           @click="setActiveFilter(filter.id)"
           :class="[
-            filter.id === activeFilter ? 'bg-white t-black' : 'bg-dark-transp-50 hover-bg-dark',
+            filter.id === activeFilter ? 'bg-white t-black' : 'bg-white-transp-50 hover-bg-white',
           ]"
           class="radius-extra pd-small"
           :showLoader="false" 
@@ -54,7 +54,7 @@
           <Button 
             v-if="trackResults.length > 5 && activeFilter === 'all'"
             @click="setActiveFilter('tracks')"
-            class="t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -81,7 +81,7 @@
           <Button 
             v-if="artistResults.length > 6 && activeFilter === 'all'"
             @click="setActiveFilter('artists')"
-            class="t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -103,7 +103,7 @@
           <Button 
             v-if="albumResults.length > 5 && activeFilter === 'all'"
             @click="setActiveFilter('albums')"
-            class="t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -125,7 +125,7 @@
           <Button 
             v-if="playlistResults.length > 5 && activeFilter === 'all'"
             @click="setActiveFilter('playlists')"
-            class="t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -147,7 +147,7 @@
           <Button 
             v-if="genreResults.length > 4 && activeFilter === 'all'"
             @click="setActiveFilter('genres')"
-            class="t-main bg-transparent border-none hover-bg-dark-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >