somethings I don't remember

src/components/AlbumsExplorer/AlbumList.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="albums-view rounded">
+    <div class="al-header rounded">
+      <div class="heading">ALL ALBUMS</div>
+      <div class="search" >
+        <input type="search" placeholder="Search albums">
+      </div>
+    </div>
+    <div class="all-albums"></div>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    const albums = [
+      {
+        title: "Album 1",
+        artist: "Artist 1",
+      },
+      {
+        title: "Album 2",
+        artist: "Artist 2",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },
+    ];
+
+    return {
+      albums,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.albums-view {
+  height: calc(100% - 13rem);
+  padding: $small;
+  margin-top: $small;
+  overflow: hidden;
+  background-color: $card-dark;
+
+  .al-header {
+    display: flex;
+    align-items: center;
+    position: relative;
+    background-color: rgb(48, 43, 43);
+    // border: solid;
+    height: 4em;
+    // padding: $small;
+
+    .search {
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+</style>

src/components/AlbumsExplorer/TopAlbums.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="top-albums">
-    <h3 class="heading">TOP ALBUMS</h3>
+    <div class="heading">TOP ALBUMS</div>
     <div class="items">
       <div class="item rounded" v-for="album in albums" :key="album">
         <div class="image rounded"></div>
         <div class="info">
           <div class="name ellip">{{ album.title }}</div>
           <div class="artist ellip">{{ album.artist }}</div>
-          <div class="seperator"></div>
+          <div class="separator"></div>
           <div class="top">
             <div class="play-icon"></div>
             <div class="text ellip">{{ album.top_track }}</div>
@@ -48,10 +48,9 @@ export default {
 
 <style lang="scss">
 .top-albums {
-  height: 13rem;
+  height: 12.5rem;
   border-radius: $small;
-  // background: linear-gradient(to bottom right, #5a1c11 60%, #110000);
-  background-color: rgb(12, 1, 1);
+  background-color: rgb(44, 42, 42);
   padding: $small;
 
   .heading {
@@ -66,7 +65,7 @@ export default {
     .item {
       height: 10rem;
       width: 100%;
-      background-color: rgb(122, 72, 5);
+      background-color: rgb(7, 6, 6);
       display: grid;
       align-items: center;
       grid-template-columns: 7.5rem 1fr;
@@ -74,11 +73,6 @@ export default {
       cursor: pointer;
       transition: all 0.2s ease-in-out;
 
-      &:hover {
-        background-color: rgba(214, 80, 39, 0.76);
-        transition: all 0.2s ease-in-out;
-      }
-
       .image {
         height: 7rem;
         width: 7rem;
@@ -97,7 +91,7 @@ export default {
 
       .info .top {
         height: 2.5rem;
-        background-color: rgb(53, 12, 12);
+        background-color: rgb(20, 46, 129);
         border-radius: $small;
         margin-left: auto;
         display: grid;
@@ -106,8 +100,6 @@ export default {
         transition: all 0.2s ease-in-out;
         user-select: none;
 
-       
-
         .play-icon {
           margin: 0 0 0 $small;
           height: 1.5rem;
@@ -124,7 +116,7 @@ export default {
         }
 
         &:hover {
-          background-color: rgb(112, 29, 29);
+          background-color: rgb(31, 68, 150);
           transition: all 0.2s ease-in-out;
 
           .play-icon {
@@ -133,9 +125,9 @@ export default {
           }
         }
 
-         &:active {
+        &:active {
           transform: scale(0.95);
-          transition: all .1s ease-in-out;
+          transition: all 0.1s ease-in-out;
         }
       }
     }