add custom "offline" icon

CHANGELOG.md

@@ -12,4 +12,5 @@ Improved:
 - Settings that have been changed from default will now show a line next to them. Inspired by the [Visual Studio Code settings UI](https://d33wubrfki0l68.cloudfront.net/d1f1ea4def506997ced23d3d912154794e530e1c/063d2/assets/img/blog/2020-09-17-vscode-settings/settings-ui.png)
 - Checkbox / Switch input styles are now more in line with other input styles
 - Available updates are now shown as a clickable button next to your user icon instead of having to open the user menu
+- The "offline" icon is now handled by dribbblish and fits in with the other info icons
 - Hovering over the release date in the album info now shows the full date

src/js/main.js

@@ -9,6 +9,7 @@ import Info from "./Info";
 
 import svgArrowDown from "svg/arrow-down";
 import svgCode from "svg/code";
+import svgWifiSlash from "svg/wifi-slash";
 
 const DribbblishShared = {
     config: new ConfigMenu(),
@@ -760,4 +761,18 @@ waitForElement([".main-topBar-container"], ([topBarContainer]) => {
     checkForUpdate();
 });
 
+// Show "Offline info"
+window.addEventListener("offline", () =>
+    DribbblishShared.info.set("offline", {
+        tooltip: "Offline",
+        icon: svgWifiSlash,
+        order: 999,
+        color: {
+            fg: "#ffffff",
+            bg: "#ff2323"
+        }
+    })
+);
+window.addEventListener("online", () => DribbblishShared.info.remove("offline"));
+
 $("html").css("--warning_message", " ");

src/styles/main.scss

@@ -1227,6 +1227,11 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     height: 100%;
 }
 
+// Hide default Sporify "Offline" notice
+.main-noConnection {
+    display: none;
+}
+
 // ! WORKAROUNDS / TEMP FIXES
 // Spotify UI breaks after advertisements #63
 canvas[width="250"][height="250"] {

src/svg/wifi-slash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16" height="16">
+    <path fill="currentColor" d="M5.09 154.87c-6.66 6.16-6.79 16.59-.35 22.97l34.24 33.96c6.14 6.09 16.02 6.23 22.4.38 6.99-6.4 14.31-12.22 21.65-18.01l-64.96-50.21c-4.3 3.71-8.79 7.04-12.98 10.91zm471.75 181.9l45.42-45.21c6.52-6.46 6.29-17.06-.57-23.17-64.94-57.74-148.91-82.66-230.34-74.98l-83.16-64.27c125.94-38.36 267.75-11.01 370.43 83.05 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.96c6.44-6.39 6.3-16.82-.35-22.97C496.46 26.82 298.08-.76 133.42 71.35L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.03-2.81-22.45L476.84 336.77zm-358.53-68.38c-6.86 6.1-7.08 16.7-.57 23.17l34.28 34.01c5.97 5.93 15.59 6.32 21.94.8 13.35-11.6 28.01-20.66 43.15-28.55l-68.36-52.83c-10.48 7.15-20.74 14.78-30.44 23.4zM256 416c0 35.35 28.65 64 64 64 31.91 0 58.15-23.42 62.99-53.98l-88.7-68.56C271.77 367.37 256 389.82 256 416z"></path>
+</svg>