From 35218aca712035f4cd192c1cfe61af4596651aa8 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 16 Dec 2025 22:34:42 +0200
Subject: [PATCH] style/note title & icon: add a circular background for the
 note icon

---
 apps/client/src/widgets/note_icon.css  | 31 ++++++++++++++++++++++++++
 apps/client/src/widgets/note_title.css |  3 ++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index 4d023b6fe..f0fdb8c4d 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -74,3 +74,34 @@ div.note-icon-widget {
     width: 1em;
     height: 1em;
 }
+
+body.experimental-feature-new-layout {
+    --note-icon-button-background-color: #444444;
+    --note-icon-button-color: white;
+
+    .note-icon-widget button.note-icon {
+        position: relative;
+        background: transparent !important;
+
+        &:hover {
+            transform: scale(1.15);
+            transition: transform 150ms ease-out;
+        }
+
+        /* The icon */
+        &::before {
+            position: relative;
+            z-index: 1;
+            color: var(--note-icon-button-color);
+        }
+
+        /* The background circle */
+        &::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            background: var(--note-icon-button-background-color);
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 72ccb0139..6f64b79bf 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -45,7 +45,8 @@ body.experimental-feature-new-layout {
 
         .note-icon-widget {
             --note-icon-size: 20px;
-            --note-icon-padding-size: 8px;
+            --note-icon-container-padding-size: 4px;
+            margin-inline: 8px;
         }
         
         .note-title-widget {