From 58f7ea13519c02068350838d6a2e7fa4363d735c Mon Sep 17 00:00:00 2001
From: Guste Gaubaite <219.guste@gmail.com>
Date: Mon, 17 Nov 2025 21:35:52 +0100
Subject: [PATCH 1/2] feat(#572 note): add selection glow effect to notes

---
 src/pods/canvas/canvas-svg.component.tsx      |  2 ++
 .../components/note/components/index.ts       |  1 +
 .../note/components/note-border.component.tsx |  7 +++++-
 ...lected-note-filter-highlight.component.tsx | 14 ++++++++++++
 .../canvas/components/note/note.module.css    | 22 +++++++------------
 5 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 src/pods/canvas/components/note/components/selected-note-filter-highlight.component.tsx

diff --git a/src/pods/canvas/canvas-svg.component.tsx b/src/pods/canvas/canvas-svg.component.tsx
index 2a71fb40..9cf35180 100644
--- a/src/pods/canvas/canvas-svg.component.tsx
+++ b/src/pods/canvas/canvas-svg.component.tsx
@@ -9,6 +9,7 @@ import {
 import { DatabaseTable } from './components/table/database-table.component';
 import { DatabaseRelationCollectionComponent } from './components/relation';
 import { SelectedTableFilterHighlightComponent } from './components/table/components/selected-table-filter-highlight.component';
+import { SelectedNoteFilterHighlightComponent } from './components/note/components';
 import { CANVAS_MAX_HEIGHT, CANVAS_MAX_WIDTH } from '@/core/providers';
 import { Note } from './components/note';
 
@@ -65,6 +66,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
         onSelectRelation={onSelectElement}
       />
       <SelectedTableFilterHighlightComponent />
+      <SelectedNoteFilterHighlightComponent />
       {canvasSchema.tables.map(table => (
         <DatabaseTable
           key={table.id}
diff --git a/src/pods/canvas/components/note/components/index.ts b/src/pods/canvas/components/note/components/index.ts
index d2947a8a..c651e797 100644
--- a/src/pods/canvas/components/note/components/index.ts
+++ b/src/pods/canvas/components/note/components/index.ts
@@ -1,3 +1,4 @@
 export * from './note-body.component';
 export * from './note-title.component';
 export * from './note-border.component';
+export * from './selected-note-filter-highlight.component';
diff --git a/src/pods/canvas/components/note/components/note-border.component.tsx b/src/pods/canvas/components/note/components/note-border.component.tsx
index 87010908..76d9b0e9 100644
--- a/src/pods/canvas/components/note/components/note-border.component.tsx
+++ b/src/pods/canvas/components/note/components/note-border.component.tsx
@@ -10,13 +10,18 @@ interface Props {
 export const NoteBorder: React.FC<Props> = props => {
   const { width, height, isSelected } = props;
 
+  const rectStyle = {
+    filter: isSelected ? 'url(#note_component_selected)' : 'none',
+  };
+
   return (
     <rect
       x="0"
       y="0"
       width={width}
       height={height}
-      className={isSelected ? classes.noteBorderSelected : classes.noteBorder}
+      style={rectStyle}
+      className={classes.noteBorder}
     />
   );
 };
diff --git a/src/pods/canvas/components/note/components/selected-note-filter-highlight.component.tsx b/src/pods/canvas/components/note/components/selected-note-filter-highlight.component.tsx
new file mode 100644
index 00000000..e5d22e87
--- /dev/null
+++ b/src/pods/canvas/components/note/components/selected-note-filter-highlight.component.tsx
@@ -0,0 +1,14 @@
+export const SelectedNoteFilterHighlightComponent: React.FC = () => {
+  return (
+    <defs>
+      <filter id="note_component_selected" x="0" y="0">
+        <feDropShadow
+          dx="4"
+          dy="4"
+          stdDeviation="3"
+          floodColor="var(--shadow-note)"
+        />
+      </filter>
+    </defs>
+  );
+};
diff --git a/src/pods/canvas/components/note/note.module.css b/src/pods/canvas/components/note/note.module.css
index 67a0a5f0..5d87b434 100644
--- a/src/pods/canvas/components/note/note.module.css
+++ b/src/pods/canvas/components/note/note.module.css
@@ -1,5 +1,5 @@
 .noteTitleContainer {
-  fill: #f8f4d3;
+  fill: var(--bg-note);
 }
 
 .noteTitle {
@@ -15,7 +15,7 @@
 }
 
 .noteBody {
-  fill: #f8f4d3;
+  fill: var(--bg-note);
 }
 
 .noteBodyText {
@@ -36,22 +36,16 @@
   white-space: pre-wrap;
 }
 
-.noteBorder {
-  fill: none;
-  stroke: #d4c896;
-  stroke-width: 1;
-}
-
-.noteBorderSelected {
-  fill: none;
-  stroke: #c9b155;
-  stroke-width: 3;
-}
-
 .noteContainer {
   cursor: grabbing;
 }
 
+.noteBorder {
+  fill: var(--bg-note);
+  stroke: var(--border-note);
+  stroke-width: 1;
+}
+
 .editIcon {
   color: var(--text-dark);
 }

From f44be87afb3b0e8a47692b5ba87b697aa05afd44 Mon Sep 17 00:00:00 2001
From: Guste Gaubaite <219.guste@gmail.com>
Date: Mon, 17 Nov 2025 21:36:06 +0100
Subject: [PATCH 2/2] style(App.css): add new CSS variables for note
 background, border and shadow

---
 src/App.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/App.css b/src/App.css
index e447cfc7..844225be 100644
--- a/src/App.css
+++ b/src/App.css
@@ -106,6 +106,11 @@
   --bg-table: var(--background-700);
   --header-table: var(--primary-300);
 
+  /* Note */
+  --bg-note: #f8f4d3;
+  --border-note: #d4c896;
+  --shadow-note: #9a8550;
+
   /* Input */
   --bg-input: var(--background-500);
   --bg-input-disabled: var(--background-600);
@@ -165,6 +170,11 @@ body {
   --bg-table: #f6f7f9;
   --header-table: var(--primary-300);
 
+  /* Note */
+  --bg-note: #f8f4d3;
+  --border-note: #d4c896;
+  --shadow-note: #9a8550;
+
   /* Toolbar */
   --bg-toolbar: #f0f2f5;
   --border-toolbar: 1.5px solid var(--primary-200);