some UI refactors

src/components/Notification.vue

@@ -37,7 +37,7 @@ const notifStore = useNotifStore();
   height: 3.5rem;
   bottom: 2rem;
   padding: $small;
-  background-color: $green;
+  background: linear-gradient(to top right, #021b79, #0575e6);
   display: grid;
   place-items: center;
   align-items: center;
@@ -50,10 +50,10 @@ const notifStore = useNotifStore();
 }
 
 .notif-error {
-  background-color: $red;
+  background: linear-gradient(to top right, #cf0b25, #e60518);
 }
 
 .notif-info {
-  background-color: $gray2;
+  background: linear-gradient(to top right, $gray4, $gray3);
 }
 </style>

src/components/RightSideBar/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-search">
     <Options />
-    <div class="scrollable" ref="search_thing">
+    <div class="scrollable rounded" ref="search_thing">
       <TracksGrid
         v-if="tracks.tracks.length"
         :more="tracks.more"

src/components/RightSideBar/SearchInput.vue

@@ -66,7 +66,7 @@ function removeLastFilter() {
       width: 100%;
       border: none;
       line-height: 2.25rem;
-      background-color: $gray5;
+      background-color: $black;
       color: inherit;
       font-size: 1rem;
       padding-left: 0.75rem;

src/components/RightSideBar/Tabs.vue

@@ -26,7 +26,7 @@ const tabs = useTabStore();
   height: 4.25rem;
 
   .cont {
-    background-color: $primary;
+    background-color: $black;
     display: flex;
     gap: $small;
     height: 100%;

src/components/RightSideBar/queue/playingFrom.vue

@@ -109,7 +109,7 @@ function goTo() {
   cursor: pointer;
   position: relative;
   transition: all .2s ease;
-  background-color: $accent;
+  background-color: $black;
 
   &:hover {
     background-position: -4rem;

src/components/Search/AlbumGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results">
+  <div class="albums-results border">
     <div class="heading">Albums</div>
     <div class="grid">
       <AlbumCard v-for="album in albums" :key="album" :album="album" />
@@ -39,7 +39,6 @@ export default {
   margin-top: $small;
   padding: $small;
   overflow-x: hidden;
-  border: solid 1px $gray3;
 
   .result-item:hover {
     background-color: $gray4;

src/components/Search/ArtistGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="artists-results">
+  <div class="artists-results border">
     <div class="heading">Artists</div>
     <div class="grid">
       <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
@@ -38,7 +38,6 @@ export default {
   border-radius: 0.5rem;
   padding: $small;
   margin-bottom: $small;
-  border: solid 1px $gray3;
 
   .xartist {
     background-color: $gray;

src/components/Search/Options.vue

@@ -48,8 +48,6 @@ const options = [
 .right-search .options {
   display: flex;
   margin-bottom: $small;
-    border: solid 1px $gray3;
-  // background: $gray3;
 
   .item {
     margin: $small;

src/components/Search/TracksGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tracks-results" v-if="tracks">
+  <div class="tracks-results border" v-if="tracks">
     <div class="heading">Tracks</div>
     <TransitionGroup class="items" name="list">
       <TrackItem
@@ -49,7 +49,6 @@ function updateQueue(track: Track) {
 .right-search .tracks-results {
   border-radius: 0.5rem;
   padding: $small;
-  border: 1px solid $gray3;
 
   .list-enter-active,
   .list-leave-active {

src/components/modals/NewPlaylist.vue

@@ -46,7 +46,7 @@ function create(e: Event) {
     });
   } else {
     new Notification(
-      "A Playlist name can not be empty",
+      "Playlist name can't be empty",
       NotifType.Error
     );
   }

src/components/shared/AlbumCard.vue

@@ -6,7 +6,7 @@
     }"
     class="result-item"
   >
-    <div class="_idk">
+    <div class="img">
       <div
         class="album-art image"
         :style="{
@@ -38,12 +38,11 @@ defineProps<{
   padding: $small;
   border-radius: 0.75rem;
   text-align: left !important;
-  background-color: $gray;
+  background-color: $gray4;
   color: #ffffffde !important;
   transition: all 0.5s ease;
-  // border: solid 1px $gray3;
 
-  ._idk {
+  .img {
     position: relative;
 
     &:hover {