🎨 Update cell deleted popup styling (#3148)

fonsp · Feb 25, 2025 · f8724fc · f8724fc
1 parent a27ffb3
commit f8724fc
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);