💄 style: New notification style (more discrete)

Author: vict0rsch

src/content_scripts/content_script.css

@@ -41,25 +41,26 @@
 }
 
 #feedback-notif {
-    padding: 1em;
-    z-index: 1000;
+    font-size: 14px;
+    font-family: Mukta, Arial, sans-serif, Helvetica;
+    color: #b31b1b;
+    height: 36px;
+    background: white;
+    opacity: 1;
+    position: fixed;
+    border-radius: 4px;
+    border: 1px solid;
+    padding: 0px;
+    bottom: 48px;
+    right: -200px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    color: white;
-    background: #b31b1b;
-    border-radius: 4px;
-    position: fixed;
-    font-size: 14px;
-    bottom: 64px;
-    right: -200px;
-    opacity: 0;
-    padding: 1rem;
-    -webkit-box-shadow: 14px 30px 122px -30px rgba(0, 0, 0, 0.75);
-    -moz-box-shadow: 14px 30px 122px -30px rgba(0, 0, 0, 0.75);
-    box-shadow: 14px 30px 122px -30px rgba(0, 0, 0, 0.75);
-    font-family: Mukta, Arial, sans-serif, Helvetica;
+    z-index: 1000;
+    box-shadow: #b31b1b 4px 4px 0px 0px;
+    -moz-box-shadow: #b31b1b 4px 4px 0px 0px;
+    -webkit-box-shadow: #b31b1b 4px 4px 0px 0px;
 }
 
 #feedback-pwc {
@@ -98,22 +99,22 @@
     justify-content: center;
     align-items: center;
     padding: 0px 16px;
-    min-height: 60px;
 }
 
 #notif-cancel {
+    color: #b31b1b;
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 60px;
     padding: 0px 16px;
     cursor: pointer;
-    border-left: 1px solid #7f2828;
+    border-left: 1px solid #ffe9e9;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 }
-#notif-cancel:hover {
-    background: #7f2828;
+
+.notif-small {
+    width: 36px;
 }
 
 /*

src/content_scripts/content_script.js

@@ -136,14 +136,14 @@ const svg = (name) => {
 
         case "notif-cancel":
             return /*html*/ `<svg
-                width="25"
-                height="25"
+                width="20"
+                height="20"
                 viewBox="0 0 24 24"
                 stroke-width="1"
                 fill="none"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                stroke="white"
+                stroke="#b31b1b"
             >
                 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                 <line x1="4" y1="7" x2="20" y2="7" />
@@ -163,9 +163,9 @@ const injectNotifCSS = () => {
     el.type = "text/css";
     el.innerText = `
         .pm-notif-loader {
-            width: 24px;
-            height: 24px;
-            border: 2px solid #FFF;
+            width: 16px;
+            height: 16px;
+            border: 1px solid #b31b1b;
             border-bottom-color: transparent;
             border-radius: 50%;
             display: inline-block;
@@ -416,6 +416,7 @@ const hideNotif = () =>
         const end = ({ dontWait = false } = {}) => {
             global.notif.prevent = false;
             global.notif.isLoading = false;
+            querySelector("#feedback-notif")?.classList.remove("notif-small");
             setTimeout(resolve, dontWait ? 0 : 150);
         };
 
@@ -495,10 +496,11 @@ const feedback = async ({
                 <div>${text}</div>
             </div>
             <div title="Cancel" id="notif-cancel">
-                <div>${svg("notif-cancel")}</div>
+                ${svg("notif-cancel")}
             </div>`;
     } else if (loading) {
         global.notif.isLoading = true;
+        querySelector("#feedback-notif")?.classList.add("notif-small");
         content = /*html*/ `<div id="notif-text"><span class="pm-notif-loader"></span></div>`;
     } else {
         content = /*html*/ ` <div id="notif-text">

src/shared/js/utils/paper.js

@@ -685,7 +685,7 @@ const addOrUpdatePaper = async ({
                 }
                 log("paper: ", paper);
 
-                notifText = "Added to your Memory";
+                notifText = "Saved ✓";
                 if (pwc.codeLink) {
                     notifText +=
                         "<br/><div id='feedback-pwc'>(+ repo from PapersWithCode) </div>";