add new album header

src/components/AlbumView/AlbumBio.vue

@@ -4,7 +4,7 @@
       <div class="rect rounded"></div>
       <div class="circle"></div>
     </div>
-    <div class="bio rounded border" v-html="bio"></div>
+    <div class="bio rounded" v-html="bio"></div>
   </div>
 </template>
 

src/components/AlbumView/Header.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="album-h">
-    <div class="a-header rounded card-dark border">
-      <div
-          :style="{
-          backgroundImage: `url(&quot;${album_info.image}&quot;)`,
-        }"
-          class="art rounded border"
-      ></div>
+    <div class="a-header rounded card-dark">
       <div class="info">
         <div class="top">
+          <div class="h">Album</div>
+          <div class="separator no-border"></div>
           <div class="title">{{ album_info.name }}</div>
           <div class="artist">{{ album_info.artist }}</div>
         </div>
@@ -17,23 +13,13 @@
           <div class="stats">
             {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
           </div>
-          <button class="play rounded" @click="playAlbum">
+          <div class="play rounded" @click="playAlbum">
             <div class="icon"></div>
             <div>Play</div>
-          </button>
+          </div>
         </div>
       </div>
     </div>
-    <div class="right rounded card-dark border">
-      <div class="circle circular"></div>
-      <div class="rect rounded"></div>
-      <div
-          :style="{
-          backgroundImage: `url(&quot;${album_info.artist_image}&quot;)`,
-        }"
-          class="avatar image"
-      ></div>
-    </div>
   </div>
 </template>
 
@@ -57,9 +43,6 @@ export default {
 
 <style lang="scss">
 .album-h {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-
   @include tablet-landscape {
     grid-template-columns: 1fr;
   }
@@ -68,76 +51,6 @@ export default {
   position: relative;
   overflow: hidden;
   height: 14rem;
-
-  .right {
-    @include tablet-landscape {
-      display: none;
-    }
-
-    padding: $small;
-    position: relative;
-
-    .avatar {
-      height: 8rem;
-      width: 8rem;
-      border-radius: 50%;
-      background-image: url("../../assets/images/null.webp");
-      position: absolute;
-      left: -4.2rem;
-      top: 3rem;
-      box-shadow: 0 0 1.5rem rgb(0, 0, 0);
-    }
-
-    .rect {
-      width: 20rem;
-      height: 10rem;
-      position: absolute;
-      right: 0;
-      background-color: rgb(196, 58, 58);
-      transform: rotate(-45deg) translate(20%, -50%);
-      z-index: 1;
-      box-shadow: 0 0 2rem rgb(0, 0, 0);
-      transition: all 0.5s ease-in-out;
-
-      &:hover {
-        transition: all 0.5s ease-in-out;
-
-        right: 2rem;
-      }
-    }
-
-    .circle {
-      width: 7rem;
-      height: 7rem;
-      position: absolute;
-      right: 0;
-      background-color: $blue;
-      border-radius: 50%;
-      transform: translateX(-11rem) translateY(7rem);
-      box-shadow: 0 0 2rem rgba(0, 0, 0, 0.164);
-      transition: all 0.5s ease-in-out;
-
-      &:hover {
-        transition: all 0.5s ease-in-out;
-
-        right: 1rem;
-      }
-    }
-
-    &:hover {
-      transition: all 0.5s ease-in-out;
-
-      .circle {
-        border-radius: 0;
-        transform: translateX(-11rem) translateY(7rem) rotate(360deg);
-      }
-
-      .rect {
-        border-radius: 0;
-        transform: translate(20%, -50%) rotate(360deg);
-      }
-    }
-  }
 }
 
 .a-header {
@@ -145,35 +58,32 @@ export default {
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding: 0 1rem 0 14rem;
-
-  .art {
-    position: absolute;
-    left: $small;
-    width: 13rem;
-    height: 13rem;
-    background: no-repeat center/cover;
-    margin-right: 1rem;
-  }
+  padding: 1rem;
+  height: 100%;
+  background-image: url("../../assets/images/abg.webp");
+  background-position: 0% 60%;
 
   .info {
     width: 100%;
-    height: calc(100% - 1rem);
+    height: calc(100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 
     .top {
+      .h {
+        color: rgba(255, 255, 255, 0.795);
+      }
       .title {
-        font-size: 1.5rem;
-        font-weight: bold;
+        font-size: 2rem;
+        font-weight: 1000;
         color: white;
       }
 
       .artist {
         margin-top: $small;
-
-        color: rgba(255, 255, 255, 0.856);
+        font-size: 1.5rem;
+        color: #fffffff1;
       }
     }
 
@@ -184,6 +94,7 @@ export default {
     .bottom {
       .stats {
         font-weight: bold;
+        display: none;
       }
 
       .play {
@@ -191,9 +102,10 @@ export default {
         width: 6rem;
         display: flex;
         align-items: center;
-        background: $blue;
+        background: $highlight-blue;
         padding: $small;
         margin: $small 0;
+        cursor: pointer;
 
         .icon {
           height: 1.5rem;