From 5e48496ccbdb1c8c57ff2330939f806af9ed0a0b Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 22 Feb 2022 09:58:09 +0300
Subject: [PATCH] minor color refactors

---
 src/App.vue                                     | 2 +-
 src/assets/css/Search/Search.scss               | 1 -
 src/assets/css/global.scss                      | 7 +++----
 src/components/AlbumView/AlbumBio.vue           | 2 +-
 src/components/AlbumView/Header.vue             | 2 +-
 src/components/AlbumsExplorer/AlbumList.vue     | 1 -
 src/components/AlbumsExplorer/TopAlbums.vue     | 1 -
 src/components/ArtistsExplorer/ArtistsList.vue  | 1 -
 src/components/ArtistsExplorer/TopArtists.vue   | 1 -
 src/components/BottomBar/BottomBar.vue          | 2 +-
 src/components/FolderView/SongList.vue          | 1 -
 src/components/PlaylistView/FeaturedArtists.vue | 1 -
 src/components/PlaylistView/Header.vue          | 2 +-
 src/components/RightSideBar/Home/Main.vue       | 1 -
 src/components/RightSideBar/Main.vue            | 2 +-
 src/components/RightSideBar/Queue.vue           | 3 +--
 src/components/RightSideBar/Recommendation.vue  | 1 -
 src/components/shared/AlbumCard.vue             | 2 +-
 src/components/shared/ArtistCard.vue            | 7 +++----
 src/views/AlbumView.vue                         | 1 -
 src/views/FolderView.vue                        | 7 ++++++-
 src/views/PlaylistView.vue                      | 1 -
 22 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 239ca7f4..fb95eead 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@
         <AlbumArt :collapsed="collapsed" />
       </div>
     </div>
-    <div class="content card-dark">
+    <div class="content">
       <div class="search-box"></div>
       <router-view />
     </div>
diff --git a/src/assets/css/Search/Search.scss b/src/assets/css/Search/Search.scss
index a1325932..10fdc531 100644
--- a/src/assets/css/Search/Search.scss
+++ b/src/assets/css/Search/Search.scss
@@ -1,6 +1,5 @@
 .right-search {
   position: relative;
-  background-color: $card-dark;
   display: grid;
   grid-template-rows: min-content 1fr;
   overflow: hidden;
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 3f779d3d..0d676969 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -11,7 +11,7 @@
 
 body {
   margin: 0;
-  background: #0d0e0e;
+  background-color: $card-dark;
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -58,7 +58,7 @@ a {
 }
 
 .card-dark {
-  background-color: $card-dark;
+  background-color: #fff;
 }
 
 .hidden {
@@ -93,14 +93,13 @@ button {
     "bottom-bar bottom-bar bottom-bar";
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.575);
 }
 
 .l-sidebar {
   width: 15rem;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
-  background-color: $card-dark;
+  // background-color: $card-dark;
 }
 
 .bottom-bar {
diff --git a/src/components/AlbumView/AlbumBio.vue b/src/components/AlbumView/AlbumBio.vue
index 3a15fe64..e4f6af77 100644
--- a/src/components/AlbumView/AlbumBio.vue
+++ b/src/components/AlbumView/AlbumBio.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="al-bio rounded border card-dark">
+  <div class="al-bio rounded border">
     <div class="left rounded border">
       <div class="rect rounded"></div>
       <div class="circle"></div>
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index cb8ffc32..a6793e65 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="album-h">
-    <div class="a-header rounded card-dark">
+    <div class="a-header rounded">
       <div class="info">
         <div class="top">
           <div class="h">Album</div>
diff --git a/src/components/AlbumsExplorer/AlbumList.vue b/src/components/AlbumsExplorer/AlbumList.vue
index 040619a0..aaca4eb9 100644
--- a/src/components/AlbumsExplorer/AlbumList.vue
+++ b/src/components/AlbumsExplorer/AlbumList.vue
@@ -122,7 +122,6 @@ export default {
   padding: $small;
   margin-top: $small;
   overflow: hidden;
-  background-color: $card-dark;
 
   .all-albums {
     height: calc(100% - 4rem);
diff --git a/src/components/AlbumsExplorer/TopAlbums.vue b/src/components/AlbumsExplorer/TopAlbums.vue
index 99b522d6..9f6b567c 100644
--- a/src/components/AlbumsExplorer/TopAlbums.vue
+++ b/src/components/AlbumsExplorer/TopAlbums.vue
@@ -55,7 +55,6 @@ export default {
 .top-albums {
   height: 14rem;
   border-radius: $small;
-  background-color: $card-dark;
   padding: $small;
 
   .heading {
diff --git a/src/components/ArtistsExplorer/ArtistsList.vue b/src/components/ArtistsExplorer/ArtistsList.vue
index d1a9eef1..3a7d6c41 100644
--- a/src/components/ArtistsExplorer/ArtistsList.vue
+++ b/src/components/ArtistsExplorer/ArtistsList.vue
@@ -54,7 +54,6 @@ export default {
   padding: $small;
   margin-top: $small;
   overflow: hidden;
-  background-color: $card-dark;
 
   .all-albums {
     height: calc(100% - 4rem);
diff --git a/src/components/ArtistsExplorer/TopArtists.vue b/src/components/ArtistsExplorer/TopArtists.vue
index 72de04e0..ddb19d3b 100644
--- a/src/components/ArtistsExplorer/TopArtists.vue
+++ b/src/components/ArtistsExplorer/TopArtists.vue
@@ -50,7 +50,6 @@ export default {
 .top-artists {
   height: 14rem;
   border-radius: $small;
-  background-color: $card-dark;
   padding: $small;
 
   .heading {
diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue
index c44a5d6b..0b550551 100644
--- a/src/components/BottomBar/BottomBar.vue
+++ b/src/components/BottomBar/BottomBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar border card-dark">
+  <div class="b-bar border">
     <div class="grid">
       <SongCard :collapsed="props.collapsed" />
       <div class="controlsx rounded">
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 1ffe2047..dcd964ad 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -91,7 +91,6 @@ function loadAlbum(title, albumartist) {
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  background-color: $card-dark;
 
   &::-webkit-scrollbar {
     display: none;
diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue
index b6b2ae5e..3d2f56bf 100644
--- a/src/components/PlaylistView/FeaturedArtists.vue
+++ b/src/components/PlaylistView/FeaturedArtists.vue
@@ -56,7 +56,6 @@ export default {
   position: relative;
   height: 15em;
   width: calc(100%);
-  background-color: $card-dark;
   padding: $small;
   border-radius: $small;
   user-select: none;
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 8e18b355..ecf40e58 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-header rounded">
-    <div class="info card-dark">
+    <div class="info">
       <div>
         <div class="name">Makaveli Radio</div>
         <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
diff --git a/src/components/RightSideBar/Home/Main.vue b/src/components/RightSideBar/Home/Main.vue
index 3da575a5..a72aab10 100644
--- a/src/components/RightSideBar/Home/Main.vue
+++ b/src/components/RightSideBar/Home/Main.vue
@@ -7,7 +7,6 @@
 <style lang="scss">
 .r-home {
   height: calc(100% - 1rem);
-  background-color: $card-dark;
   padding: 0 $small $small 0;
 }
 </style>
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index 532baf9c..93f4383c 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -13,7 +13,7 @@
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys card-dark border">
+      <div class="tab-keys border">
         <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
       </div>
     </div>
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 39d3e7ac..ee06984d 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -56,7 +56,6 @@ export default {
 
 <style lang="scss">
 .up-next {
-  background-color: $card-dark;
   padding: $small $small $small 0;
   overflow: hidden;
   height: 100%;
@@ -118,7 +117,7 @@ export default {
       height: 100%;
       padding: $small;
       overflow: auto;
-      background-color: $card-dark;
+      // background-color: $card-dark;
       scrollbar-color: grey transparent;
     }
   }
diff --git a/src/components/RightSideBar/Recommendation.vue b/src/components/RightSideBar/Recommendation.vue
index d6b6493b..7eb7aa1a 100644
--- a/src/components/RightSideBar/Recommendation.vue
+++ b/src/components/RightSideBar/Recommendation.vue
@@ -38,7 +38,6 @@ export default {
 <style lang="scss">
 .r-tracks {
   margin-top: 0.5rem;
-  background-color: $card-dark;
   padding: 0.5rem;
 }
 
diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue
index 8f0517a3..53a515f3 100644
--- a/src/components/shared/AlbumCard.vue
+++ b/src/components/shared/AlbumCard.vue
@@ -31,7 +31,6 @@ export default {
   padding: $small;
   border-radius: .75rem;
   text-align: left !important;
-  background-color: #726c7227;
 
   &:hover {
     background-color: #1b3688cb;
@@ -48,6 +47,7 @@ export default {
     width: 7rem;
     margin-bottom: 0.25rem;
     font-size: 0.9rem;
+    font-weight: bold;
   }
 
   .artistsx {
diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue
index 13880661..3493e7cc 100644
--- a/src/components/shared/ArtistCard.vue
+++ b/src/components/shared/ArtistCard.vue
@@ -34,13 +34,12 @@ export default {
   .artist-image {
     width: 7em;
     height: 7em;
-    border-radius: 50%;
+    border: solid;
+    border-radius: 60%;
     margin-bottom: $small;
     background-size: 7rem 7rem;
-    background: url("../../assets/images/null.webp");
-    background-size: 100% 100%;
+    background-position: center;
     background-repeat: no-repeat;
-    background-position: top;
     transition: all 0.5s ease-in-out;
     border: solid 1px rgba(5, 5, 5, 0.055);
     box-shadow: 0 0 80px rgb(0, 0, 0);
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index c0f99d29..41296827 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -81,7 +81,6 @@ export default {
 
   .songs {
     padding: $small;
-    background-color: $card-dark;
     min-height: calc(100% - 30rem);
   }
 
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 37122415..abad4e38 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="f-view-parent" class="border rounded card-dark">
+  <div id="f-view-parent" class="border rounded">
     <div class="fixed">
       <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
     </div>
@@ -131,6 +131,11 @@ export default {
   padding: 4rem $small 0 $small;
   overflow: hidden;
   margin: $small;
+
+  .h {
+    font-size: 2rem;
+    font-weight: bold;
+  }
 }
 
 #f-view-parent .fixed {
diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue
index 27aad260..4188b0d0 100644
--- a/src/views/PlaylistView.vue
+++ b/src/views/PlaylistView.vue
@@ -50,7 +50,6 @@ export default {
     display: none;
   }
   .songlist {
-    background-color: $card-dark;
     padding: $small;
     min-height: 100%;
   }