From 48d57498aada9258625cff377921d7329b61720d Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Thu, 11 Nov 2021 19:34:48 +0100
Subject: [PATCH] add markdown styles and change the way the config backdrop is
 shown so notifications are above it

---
 package.json               |  1 +
 src/js/ConfigMenu.js       |  5 ++++-
 src/js/main.js             |  3 +--
 src/styles/ConfigMenu.scss | 10 +++++++++-
 src/styles/Markdown.scss   | 10 +++++++++-
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ec830e3..f5e0040 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "chroma-js": "^2.1.2",
         "jquery": "^3.6.0",
         "markdown-it": "^12.2.0",
+        "markdown-it-attrs": "^4.1.0",
         "moment": "^2.29.1",
         "node-vibrant": "3.1.4",
         "raw-loader": "^4.0.2"
diff --git a/src/js/ConfigMenu.js b/src/js/ConfigMenu.js
index 8778d1b..49668f0 100644
--- a/src/js/ConfigMenu.js
+++ b/src/js/ConfigMenu.js
@@ -1,4 +1,5 @@
 import MarkdownIt from "markdown-it";
+import MarkdownItAttrs from "markdown-it-attrs";
 
 import svgUndo from "../svg/undo.svg";
 
@@ -62,8 +63,10 @@ export default class ConfigMenu {
         this.md = MarkdownIt({
             html: true,
             breaks: true,
-            linkify: true
+            linkify: true,
+            typographer: true
         });
+        this.md.use(MarkdownItAttrs);
 
         const container = document.createElement("div");
         container.id = "dribbblish-config";
diff --git a/src/js/main.js b/src/js/main.js
index a5d4f9f..81a4237 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -355,7 +355,7 @@ waitForElement(["#main"], () => {
         data: "Copy",
         onChange: function () {
             copyToClipboard(this.description.replace(/\`/g, ""));
-            Spicetify.showNotification("Copied Versions");
+            Spicetify.showNotification("Copied!");
         }
     });
 
@@ -546,7 +546,6 @@ DribbblishShared.config.register({
     defaultValue: "dark",
     showChildren: (val) => {
         if (val == "time") return ["darkModeOnTime", "darkModeOffTime"];
-        //if (val == 3) return [""];
         return false;
     },
     onChange: (val) => {
diff --git a/src/styles/ConfigMenu.scss b/src/styles/ConfigMenu.scss
index 05ecd60..cb901c1 100644
--- a/src/styles/ConfigMenu.scss
+++ b/src/styles/ConfigMenu.scss
@@ -9,6 +9,14 @@
 
     &[active] {
         display: flex;
+
+        & ~ #main::after {
+            z-index: 4;
+            position: absolute;
+            content: "";
+            inset: 0px;
+            backdrop-filter: blur(3px) brightness(60%);
+        }
     }
 
     .dribbblish-config-container {
@@ -133,6 +141,7 @@
                                     grid-area: description;
                                     height: min-content;
                                     color: spiceColor("subtext");
+                                    line-height: calc(1em + 6px); // To have line gaps
                                 }
 
                                 .x-settings-secondColumn {
@@ -154,6 +163,5 @@
         position: absolute;
         content: "";
         inset: 0px;
-        backdrop-filter: blur(3px) brightness(60%);
     }
 }
diff --git a/src/styles/Markdown.scss b/src/styles/Markdown.scss
index 6df1fa6..bc8aa29 100644
--- a/src/styles/Markdown.scss
+++ b/src/styles/Markdown.scss
@@ -1,3 +1,11 @@
 *[markdown] {
-    // This would be where we change any styles associated with markdown
+    code {
+        background-color: spiceColor("subtext", 0.1);
+        padding: 0px 5px;
+        border-radius: 3px;
+    }
+
+    .muted {
+        opacity: 0.5;
+    }
 }