more refactoring

src/assets/css/BottomBar/BottomBar.scss

@@ -35,7 +35,7 @@
 
         .artists {
           font-size: 0.8rem;
-          color: $highlight-blue;
+          color: $red;
         }
       }
     }
@@ -47,7 +47,7 @@
       align-items: center;
       margin: $small;
       padding: $small;
-      background-color: $bbb;
+      background-color: $gray5;
 
       .progress-bottom {
         display: flex;

src/assets/css/Search/Search.scss

@@ -27,8 +27,8 @@
     border-radius: $small;
     margin-bottom: $small;
     text-align: center !important;
-    font-size: 1;
+    font-size: 2rem;
-    color: #fff;
+    color: $white;
   }
 
   .input {
@@ -49,9 +49,9 @@
   .theme {
     background-image: linear-gradient(
       45deg,
-      #141414 0%,
+      #464545fd 0%,
-      #464545fd 50%,
+      #1d1d1d 50%,
-      #111111 100%
+      #4d4e50 100%
     );
     color: #fff;
   }

src/assets/css/_variables.scss

@@ -1,11 +1,7 @@
 // colors
 
-$card-dark: #040406;
+$card-dark: #000000;
-$red: #df4646;
-$blue: #055096;
-$green: #439443;
 $separator: #ffffff2f;
-$pink: #c43a3a;
 $highlight-blue: #006eff;
 $bbb: #161616; //bottom controls background
 $theme: #464545fd;
@@ -17,6 +13,28 @@ $medium: 0.75rem;
 $large: 1.5rem;
 $larger: 2rem;
 
+// apple human design guideline colors
+$black: #000000;
+$white: #ffffffde;
+
+$gray: #1c1c1e;
+$gray1: rgb(142, 142, 147);
+$gray2: rgb(99, 99, 102);
+$gray3: rgb(72, 72, 74);
+$gray4: rgb(58, 58, 60);
+$gray5: rgb(44, 44, 46);
+
+$red: rgb(255, 69, 58);
+$blue: rgb(10, 132, 255);
+$green: rgb(48, 209, 88);
+$yellow: rgb(255, 214, 10);
+$orange: rgb(255, 159, 10);
+$pink: rgb(255, 55, 95);
+$purple: rgb(191, 90, 242);
+$brown: rgb(172, 142, 104);
+$indigo: rgb(94, 92, 230);
+$teal: rgb(64, 200, 224);
+
 // media query mixins
 @mixin phone-only {
   @media (max-width: 599px) {

src/assets/css/global.scss

@@ -77,7 +77,7 @@ button {
   border-radius: $small;
 
   &:hover {
-    background-color: $pink !important;
+    background-color: $red !important;
   }
 }
 
@@ -157,7 +157,7 @@ button {
 }
 
 .shadow-sm {
-  box-shadow: 0 0 .5rem rgb(0, 0, 0);
+  box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.452);
 }
 
 .shadow-md {

src/components/FolderView/FolderItem.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   display: flex;
   align-items: center;
   position: relative;
-  background-color: #ffffff09;
+  background-color: $gray;
   transition: all 0.2s ease;
   border-radius: .75rem;
 
@@ -58,12 +58,12 @@ const props = defineProps({
   }
 
   &:hover {
-    background: #0575e6; /* fallback for old browsers */
+    background: #0575e6;
     background: linear-gradient(
       to top right,
       #021b79,
       #0575e6
-    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    );
     background-size: 105% 105%;
     background-position-x: -$small;
 

src/components/PlaylistView/FeaturedArtists.vue

@@ -5,7 +5,7 @@
       <div class="next" @click="scrollRight"></div>
     </div>
     <div class="artists" ref="artists_dom">
-      <div class="xartist border c1 image">
+      <div class="xartist c1 image">
         <div class="blur"></div>
         <div class="s2"></div>
         <p>Featured Artists</p>
@@ -121,7 +121,7 @@ export default {
   position: relative;
   background-size: 400px 11rem;
   background-position: 100%;
-
+  width: 8.25rem;
   background-image: linear-gradient(
     320deg,
     #b63939 13%,

src/components/PlaylistView/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-header rounded">
+  <div class="p-header">
     <div class="info">
       <div>
         <div class="name">Makaveli Radio</div>
@@ -30,6 +30,7 @@
   background-image: url("../../assets/images/eggs.jpg");
   position: relative;
   margin-top: $small;
+    border-radius: .75rem;
 
   .last-updated {
     position: absolute;
@@ -68,7 +69,8 @@
     align-items: flex-end;
     padding: 1rem 1rem 4rem 1rem;
     box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
-    border-radius: .5rem;
+    border-radius: .75rem;
+    background-color: $black;
 
     @include phone-only {
       width: calc(100% - 1rem);
@@ -77,6 +79,7 @@
     .name {
       font-size: 1.5rem;
       font-weight: bold;
+      color: $white;
 
       &::before {
         content: "😎 ";
@@ -85,10 +88,8 @@
 
     .metrics {
       margin-top: $small;
-      background-color: rgba(47, 55, 129, 0.233);
+      color: $blue;
-      color: rgb(0, 60, 255);
       padding: $small;
-      width: fit-content;
     }
 
     .buttons {

src/components/RightSideBar/Queue.vue

@@ -109,7 +109,7 @@ export default {
 
   .r-grid {
     position: relative;
-    height: calc(100% - 2.5rem);
+    height: 100%;
     display: grid;
     grid-template-rows: min-content;
 

src/components/Search/AlbumGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="albums-results">
-    <div class="heading theme">ALBUMS</div>
+    <div class="heading">Albums</div>
     <div class="grid">
       <AlbumCard v-for="album in albums" :key="album" :album="album" />
     </div>
@@ -40,15 +40,16 @@ export default {
   overflow-x: hidden;
   border: solid 2px $theme;
   
+
   .result-item:hover {
-    border: solid 2px $theme;
+    background-color: $gray3;
   }
 
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
-    gap: $small;
+    gap: 1rem;
   }
 }
 </style>

src/components/Search/ArtistGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="artists-results">
-    <div class="heading theme">ARTISTS</div>
+    <div class="heading">Artists</div>
     <div class="grid">
       <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
     </div>
@@ -31,23 +31,26 @@ export default {
 </script>
 
 <style lang="scss">
-
 .right-search .artists-results {
   border-radius: 0.5rem;
-  background: #1214178c;
   padding: $small;
   margin-bottom: $small;
   border: solid 2px $theme;
 
-  .xartist:hover {
+
-    border: solid 2px $theme;
+  .xartist {
+    background: linear-gradient(
+      to bottom,
+      $gray2 20%,
+      $gray4 50%,
+      $gray 80%
+    );
   }
 
-  
-
   .grid {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(3, 1fr);
+    gap: .75rem;
   }
 }
 </style>

src/components/Search/LoadMore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="morexx">
-    <button @click="loadMore" class="theme">
+    <button @click="loadMore" class="">
       <div class="text">Load More</div>
     </button>
   </div>
@@ -27,9 +27,19 @@ export default {
   margin-top: $small;
 
   button {
+    border-radius: 1.5rem;
     height: 2.5rem;
-    width: 10rem;
+    width: 15rem;
     display: grid;
+    transition: all 0.5s ease;
+    color: rgba(255, 255, 255, 0.87) !important;
+    background-color: transparent;
+    border: solid 1px $gray;
+
+    &:hover {
+      background-color: $gray !important;
+      width: 50%;
+    }
   }
 }
 </style>

src/components/Search/Options.vue

@@ -68,6 +68,7 @@ export default {
     overflow: hidden;
     transition: all 0.2s ease-in-out;
     position: relative;
+    background-color: $gray4;
 
     .title {
       position: absolute;

src/components/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tracks-results" v-if="tracks">
-    <div class="heading theme">TRACKS</div>
+    <div class="heading">Tracks</div>
     <div class="items">
       <table>
         <tbody>

src/components/shared/AlbumCard.vue

@@ -4,7 +4,7 @@
       name: 'AlbumView',
       params: { album: album.name, artist: album.artist },
     }"
-    class="result-item"
+    class="result-item shadow-sm"
   >
     <div
       class="album-art image"
@@ -29,18 +29,17 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: $small;
-  border-radius: .75rem;
+  border-radius: 0.75rem;
   text-align: left !important;
   border: solid 2px transparent;
-
+  background-color: $gray;
-  // &:hover {
+  color: #ffffffde !important;
-  //   background-color: #1b3688cb;
+  transition: all 0.5s ease;
-  // }
 
   .album-art {
     height: 7.5rem;
     width: 7.5rem;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     margin-bottom: 0.5rem;
   }
 

src/components/shared/ArtistCard.vue

@@ -22,15 +22,15 @@ export default {
   overflow: hidden;
   position: relative;
 
-  width: 9em;
+  min-width: 8.25em;
   height: 11em;
-  border-radius: 1rem;
+  border-radius: .75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: transparent;
+
 
   .artist-image {
     width: 7em;
@@ -41,6 +41,7 @@ export default {
     background-position: center;
     background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;
+    transition-delay: .25s;
   }
 
   &:hover {

src/components/shared/TrackItem.vue

@@ -47,7 +47,6 @@ const playThis = (song) => {
   playAudio.playAudio(song.trackid);
   perks.current.value = song;
 };
-
 </script>
 
 <style lang="scss">
@@ -65,6 +64,7 @@ const playThis = (song) => {
 
   &:hover {
     cursor: pointer;
+    background-color: $gray5 !important;
   }
 
   hr {