From f8724fca0198d182ca2eac1e8230805b35dc5d15 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Tue, 25 Feb 2025 09:00:39 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Update=20cell=20deleted=20popup?=
 =?UTF-8?q?=20styling=20(#3148)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/UndoDelete.js | 11 ++---------
 frontend/editor.css               | 11 ++++-------
 frontend/themes/dark.css          |  2 +-
 frontend/themes/light.css         |  2 +-
 4 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/frontend/components/UndoDelete.js b/frontend/components/UndoDelete.js
index 33b8118be6..b8b153b753 100644
--- a/frontend/components/UndoDelete.js
+++ b/frontend/components/UndoDelete.js
@@ -22,22 +22,15 @@ export const UndoDelete = ({ recently_deleted, on_click }) => {
     let text = recently_deleted == null ? "" : recently_deleted.length === 1 ? "Cell deleted" : `${recently_deleted.length} cells deleted`
 
     return html`
-        <nav
-            id="undo_delete"
-            inert=${hidden}
-            class=${cl({
-                hidden: hidden,
-            })}
-        >
+        <nav id="undo_delete" inert=${hidden} class=${cl({ hidden })}>
             ${text} (<a
                 href="#"
                 onClick=${(e) => {
                     e.preventDefault()
                     set_hidden(true)
-
                     on_click()
                 }}
-                >UNDO</a
+                ><strong>UNDO</strong></a
             >)
         </nav>
     `
diff --git a/frontend/editor.css b/frontend/editor.css
index 6dd70143f9..76f8c271be 100644
--- a/frontend/editor.css
+++ b/frontend/editor.css
@@ -2953,14 +2953,11 @@ nav#undo_delete {
     left: 0px;
     margin: 0.75rem;
     padding: 0.5rem;
-
-    font-family: var(--roboto-mono-font-stack);
-    font-size: 0.75rem;
-
-    background-color: var(--white);
-    border-radius: 3px;
+    font-family: var(--system-ui-font-stack);
+    font-size: .8rem;
+    background-color: var(--helpbox-header-tab-bg-color);
+    border-radius: 8px;
     color: var(--black);
-
     box-shadow: 00px 00px 10px 2px var(--undo-delete-box-shadow-color);
     opacity: 1;
     transition: 0.2s linear box-shadow, 0.2s ease-out margin-bottom, 0.05s linear opacity;
diff --git a/frontend/themes/dark.css b/frontend/themes/dark.css
index d72c9ea39c..b103705a9c 100644
--- a/frontend/themes/dark.css
+++ b/frontend/themes/dark.css
@@ -175,7 +175,7 @@
         --footnote-border-color: rgba(114, 225, 231, 0.15);
 
         /* undo delete cell*/
-        --undo-delete-box-shadow-color: rgba(213, 213, 214, 0.2);
+        --undo-delete-box-shadow-color: rgb(0 0 0 / 6%);
 
         /*codemirror hints*/
         --cm-color-editor-tooltip-border: rgba(0, 0, 0, 0.2);
diff --git a/frontend/themes/light.css b/frontend/themes/light.css
index c1bd8b4f03..8190254a4a 100644
--- a/frontend/themes/light.css
+++ b/frontend/themes/light.css
@@ -175,7 +175,7 @@
         --footnote-border-color: rgba(23, 115, 119, 0.15);
 
         /* undo delete cell*/
-        --undo-delete-box-shadow-color: #0083;
+        --undo-delete-box-shadow-color: #0000000f;
 
         /*codemirror hints*/
         --cm-color-editor-tooltip-border: rgba(0, 0, 0, 0.2);