refactor stuff and change notification styles

CHANGELOG.md

@@ -6,4 +6,5 @@ Fixed:
 
 Improved:
 - Add `embedWidgetGenerator` modals to custom modal styles. (Things like the [spicetify-marketplace](https://github.com/CharlieS1103/spicetify-marketplace) options)
-- Changed custom app tab styles to fit in with the theme
+- Changed custom app tab styles to fit in with the theme
+- Changed notification styles to fit in with other elements of the theme

src/js/Dribbblish.js

@@ -1,7 +1,8 @@
 import ConfigMenu from "./ConfigMenu";
 import Info from "./Info";
 import Loader from "./Loader";
-import { icons } from "./Icons";
+import Overlay from "./Overlay";
+import Icon, { icons } from "./Icons";
 
 export default class Dribbblish {
     /**
@@ -23,7 +24,10 @@ export default class Dribbblish {
     /** @type {Loader} */
     loader;
 
-    /** @type {Icons} */
+    /** @type {Overlay} */
+    overlay;
+
+    /** @type {Icon} */
     icons;
 
     /** @type {Object.<string, listener[]>} */
@@ -36,6 +40,7 @@ export default class Dribbblish {
         this.config = new ConfigMenu();
         this.info = new Info();
         this.loader = new Loader();
+        this.overlay = new Overlay();
         this.icons = icons;
 
         let tries = 0;

src/js/Loader.js

@@ -1,28 +1,18 @@
-import { icons } from "./Icons";
+import Overlay from "./Overlay";
 
 export default class Loader {
-    /** @type {HTMLDivElement} */
+    /** @type {Overlay} */
-    #container;
+    #overlay;
 
     constructor() {
-        this.#container = document.createElement("div");
+        this.#overlay = new Overlay();
-        this.#container.id = "dribbblish-loader";
-        this.#container.innerHTML = /* html */ `
-            <div>
-                ${icons.get("loading", { size: 64 })}
-                <span></span>
-            </div>
-        `;
-
-        document.body.appendChild(this.#container);
     }
 
     show(text) {
-        this.#container.querySelector("span").innerText = text ?? "Loading...";
+        this.#overlay.show({ icon: "loading", text });
-        this.#container.setAttribute("active", "");
     }
 
     hide() {
-        this.#container.removeAttribute("active");
+        this.#overlay.hide();
     }
 }

src/js/Overlay.js

@@ -0,0 +1,68 @@
+import { defaults } from "./Util";
+import { icons } from "./Icons";
+
+export default class Overlay {
+    /**
+     * @typedef {Object} DribbblishOverlayOptions
+     * @property {String} icon
+     * @property {String} text
+     * @property {DribbblishOverlayColor} color
+     */
+
+    /**
+     * @typedef {Object} DribbblishOverlayColor
+     * @property {String} [icon]
+     * @property {String} [text]
+     */
+
+    /** @type {HTMLDivElement} */
+    #container;
+
+    /** @type {HTMLElement} */
+    #iconElem;
+
+    /** @type {HTMLSpanElement} */
+    #textElem;
+
+    constructor() {
+        this.#container = document.createElement("div");
+        this.#container.id = "dribbblish-overlay";
+        this.#container.innerHTML = /* html */ `
+            <div>
+                <i></i>
+                <span>Loading...</span>
+            </div>
+        `;
+
+        this.#iconElem = this.#container.querySelector("i");
+        this.#textElem = this.#container.querySelector("span");
+
+        document.body.appendChild(this.#container);
+    }
+
+    /**
+     *
+     * @param {DribbblishOverlayOptions} options
+     */
+    show(options) {
+        const defaultOptions = {
+            icon: "",
+            text: "",
+            color: {
+                icon: "var(--spice-text)",
+                text: "var(--spice-subtext)"
+            }
+        };
+        options = defaults(options, defaultOptions);
+        if (options.icon != "" && !options.icon.startsWith("<svg")) options.icon = icons.get(options.icon, { size: 64 });
+        this.#iconElem.innerHTML = options.icon;
+        this.#iconElem.style.setProperty("--color", options.color.icon);
+        this.#textElem.innerHTML = options.text;
+        this.#textElem.style.setProperty("--color", options.color.text);
+        this.#container.setAttribute("active", "");
+    }
+
+    hide() {
+        this.#container.removeAttribute("active");
+    }
+}

src/styles/ConfigMenu.scss

@@ -23,16 +23,13 @@
         z-index: 1;
         position: relative;
         width: clamp(500px, 50%, 650px);
-        background-color: spiceColor("main", 0.95);
-        backdrop-filter: blur(3px);
         padding: 20px 15px;
-        border-radius: var(--main-corner-radius);
         display: flex;
         gap: 8px;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        @include spiceShadow();
+        @include spiceGlass();
 
         > h2 {
             font-size: 32px;

src/styles/ConnectDeviceList.scss

@@ -1,13 +1,6 @@
 .connect-device-list-container {
-    $border-color: spiceColor("subtext", 0.1, 0.1);
-
-    border: 1px solid $border-color;
-    border-radius: var(--main-corner-radius);
     padding: 8px;
-    background-color: spiceColor("main", 0.75, -0.1) !important;
+    @include spiceGlass(lightOffset(0.8, -0.1));
-    backdrop-filter: blur(10px);
-    border-radius: var(--main-corner-radius);
-    @include spiceShadow();
 
     &::before {
         display: none;

src/styles/ContextMenu.scss

@@ -1,10 +1,7 @@
 .main-contextMenu-menu {
-    $border-color: spiceColor("subtext", 0.1, 0.1);
-
     position: relative;
     overflow: visible;
     background-color: transparent !important;
-    border: 1px solid $border-color;
     border-radius: var(--main-corner-radius);
     padding: 8px;
 
@@ -13,10 +10,7 @@
         content: "";
         position: absolute;
         inset: 0px;
-        background-color: spiceColor("main", 0.75, -0.1) !important;
+        @include spiceGlass(lightOffset(0.8, -0.1));
-        backdrop-filter: blur(10px);
-        border-radius: var(--main-corner-radius);
-        @include spiceShadow();
     }
 
     .main-contextMenu-menuItem {
@@ -34,7 +28,7 @@
             &::after {
                 left: 8px;
                 right: 8px;
-                border-color: $border-color;
+                border-color: spiceColor("subtext", 0.1, 0.1);
             }
         }
     }

src/styles/Lyrics.scss

@@ -0,0 +1 @@
+// TODO: improve default lyrics styles when the classes are mapped `see: https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/144`

src/styles/Modals.scss

@@ -5,15 +5,12 @@
     .GenericModal {
         z-index: 1;
         position: relative;
-        background-color: spiceColor("main", 0.95);
-        backdrop-filter: blur(3px);
         padding: 24px 16px;
-        border-radius: var(--main-corner-radius);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        @include spiceShadow();
+        @include spiceGlass();
 
         // Popups (`Spicetify.PopupModal.display()`)
         generic-modal & {

src/styles/Overlay.scss

@@ -1,4 +1,4 @@
-#dribbblish-loader {
+#dribbblish-overlay {
     z-index: 999999;
     position: fixed;
     inset: 0px;
@@ -31,8 +31,12 @@
         gap: 16px;
         align-items: center;
 
-        svg {
+        & > * {
-            color: spiceColor("text");
+            color: var(--color);
+
+            &:empty {
+                display: none;
+            }
         }
     }
 }

src/styles/Popup.scss

@@ -1,50 +0,0 @@
-.GenericModal__overlay {
-    backdrop-filter: blur(3px) brightness(60%);
-    background-color: transparent;
-
-    .GenericModal {
-        z-index: 1;
-        position: relative;
-        width: clamp(500px, 50%, 650px);
-        background-color: spiceColor("main", 0.95);
-        backdrop-filter: blur(3px);
-        padding: 24px 16px;
-        border-radius: var(--main-corner-radius);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        @include spiceShadow();
-
-        .main-trackCreditsModal-container {
-            display: flex;
-            gap: 16px;
-            background-color: transparent;
-            width: 100%;
-
-            .main-trackCreditsModal-header {
-                display: flex;
-                gap: 16px;
-                padding: 0px;
-                width: 100%;
-                border: none;
-
-                h1 {
-                    text-align: center;
-                    width: 100%;
-                    @include spiceFont("glue", 2em, "Bold");
-                }
-
-                button {
-                    position: absolute;
-                    top: 16px;
-                    right: 16px;
-                }
-            }
-
-            .main-trackCreditsModal-mainSection {
-                padding: 0px 26px;
-            }
-        }
-    }
-}

src/styles/Util.scss

@@ -11,3 +11,11 @@
 @mixin spiceShadow() {
     box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1);
 }
+
+@mixin spiceGlass($opacity: 0.95) {
+    background-color: spiceColor("main", $opacity);
+    backdrop-filter: blur(10px);
+    border: 1px solid spiceColor("subtext", 0.1, 0.1);
+    border-radius: var(--main-corner-radius);
+    @include spiceShadow();
+}

src/styles/main.scss

@@ -7,10 +7,11 @@
 @import "NoAds";
 @import "Markdown";
 @import "Info";
-@import "Loader";
 @import "Modals";
 @import "ConnectDeviceList";
+@import "Lyrics";
 @import "Icons";
+@import "Overlay";
 @import "CustomAppTabBar";
 
 :root {
@@ -595,13 +596,8 @@ html.sidebar-hide-text .GlueDropTarget span {
     text-align: center;
     white-space: nowrap;
     pointer-events: none;
-    border: 1px solid spiceColor("subtext", 0.1, 0.1);
-    border-radius: var(--main-corner-radius);
     color: spiceColor("subtext");
-    background-color: spiceColor("main", 0.75, -0.1) !important;
+    @include spiceGlass();
-    backdrop-filter: blur(10px);
-    border-radius: var(--main-corner-radius);
-    @include spiceShadow();
 }
 
 .minimal-player .player-controls__buttons {
@@ -1288,6 +1284,14 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     display: none;
 }
 
+// Notifications
+.main-notificationBubbleContainer-NotificationBubbleContainer {
+    .main-notificationBubble-NotificationBubble {
+        color: spiceColor("subtext");
+        @include spiceGlass();
+    }
+}
+
 // ! WORKAROUNDS / TEMP FIXES
 // Spotify UI breaks after advertisements #63
 canvas[width="250"][height="250"] {