From ed8de1ecdad9b6cd231f87189b867800bf423b4c Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 2 Sep 2022 17:26:22 +0300
Subject: [PATCH] show plain background if playlist has no banner image

---
 src/assets/scss/Global/app-grid.scss      |  2 ++
 src/assets/scss/Global/index.scss         |  2 +-
 src/assets/scss/Global/scrollbars.scss    |  4 ++--
 src/assets/scss/index.scss                |  4 ++--
 src/assets/scss/moz.scss                  | 11 +++++++----
 src/components/LeftSidebar/Navigation.vue |  5 +----
 src/components/PlaylistView/Header.vue    |  8 ++++----
 src/components/modals/NewPlaylist.vue     | 15 ---------------
 8 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index 8999a1f2..fc97a87d 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/src/assets/scss/Global/app-grid.scss
@@ -55,6 +55,8 @@
   grid-area: content;
   max-width: 1955px;
   overflow: hidden scroll;
+  margin-right: -1rem;
+  padding-right: calc($medium - 1px);
 
   .nav {
     margin: $small;
diff --git a/src/assets/scss/Global/index.scss b/src/assets/scss/Global/index.scss
index b61c9d7c..373c9ea6 100644
--- a/src/assets/scss/Global/index.scss
+++ b/src/assets/scss/Global/index.scss
@@ -12,7 +12,7 @@
 
 body {
   background-color: $body;
-  color: #fff;
+  color: $white;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-family: "SFCompactDisplay" !important;
diff --git a/src/assets/scss/Global/scrollbars.scss b/src/assets/scss/Global/scrollbars.scss
index 3311f5ba..fcfc40d7 100644
--- a/src/assets/scss/Global/scrollbars.scss
+++ b/src/assets/scss/Global/scrollbars.scss
@@ -1,5 +1,5 @@
 ::-webkit-scrollbar {
-  width: 3px;
+  width: $smaller;
 }
 
 /* Track */
@@ -12,7 +12,7 @@
 /* Handle */
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.322);
+  background: $gray1;
   border-radius: 1rem;
 }
 
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 9a2e4604..736750c1 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -1,10 +1,10 @@
 @import 
 "./mixins.scss",
 "./variables",
-"./moz.scss",
 "./ProgressBar.scss",
 "./BottomBar/BottomBar.scss",
-"./Global"
+"./Global",
+"./moz.scss"
 ;
 
 
diff --git a/src/assets/scss/moz.scss b/src/assets/scss/moz.scss
index fe7e1ea5..3cb0b112 100644
--- a/src/assets/scss/moz.scss
+++ b/src/assets/scss/moz.scss
@@ -1,5 +1,8 @@
-// Styles that only apply on our dear Firefox 
+// Styles that only apply on our dear Firefox
 
-// @-moz-document url-prefix() {
-
-// }
+@-moz-document url-prefix() {
+  #acontent {
+    margin-right: -1rem;
+    padding-right: 1rem;
+  }
+}
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 3409a2c4..948acd6d 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -101,10 +101,7 @@ const menus = [
     margin: 0 $small 0 $small;
     border-radius: $small;
     transform: scale(0.9);
-  }
-
-  svg > path {
-    fill: $accent;
+    opacity: .75;
   }
 }
 </style>
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 1eeebc31..3f9a9cea 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -4,11 +4,12 @@
     ref="playlistheader"
     :style="[
       {
-        backgroundImage: `url(${imguri + info.image})`,
+        backgroundImage: info.image ? `url(${imguri + info.image})` : '',
       },
     ]"
+    :class="{ border: !info.image }"
   >
-    <div class="gradient"></div>
+    <div class="gradient" v-if="info.image"></div>
     <div class="carddd">
       <div class="info">
         <div class="btns">
@@ -76,8 +77,7 @@ function showDropdown(e: any) {
   grid-template-columns: 1fr;
   height: 100%;
   position: relative;
-  color: $white;
-  background-color: transparent;
+
 
   .gradient {
     position: absolute;
diff --git a/src/components/modals/NewPlaylist.vue b/src/components/modals/NewPlaylist.vue
index 81e6f300..130e4f0c 100644
--- a/src/components/modals/NewPlaylist.vue
+++ b/src/components/modals/NewPlaylist.vue
@@ -96,20 +96,5 @@ function create(e: Event) {
     margin: 0 auto;
     width: 6rem;
   }
-
-  // input[type="submit"] {
-  //   margin: $small 0;
-  //   background-color: rgba(40, 132, 252, 0.884) !important;
-  //   color: $white;
-  //   padding: $small 1rem;
-  //   font-size: 1rem;
-  //   border: solid 2px transparent !important;
-  //   outline: none;
-  //   cursor: pointer;
-
-  //   &:focus {
-  //     border: 2px solid $gray1 !important;
-  //   }
-  // }
 }
 </style>