[IMP] demo: improve notification styling

The notifications were quite ugly in o-spreadsheet demo. This commit
adds a bit of styling to make them look better.

closes #7457

Task: 5261751
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>

Author: hokolomopo

demo/main.css

@@ -7,3 +7,30 @@ body {
     "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji" !important;
 }
+
+.o-spreadsheet .o-test-notification {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  border: 1px solid var(--os-gray-300);
+  border-left-width: 5px;
+  border-left-style: solid;
+  z-index: 10000;
+  width: 400px;
+
+  &.info {
+    border-left-color: var(--bs-info);
+  }
+
+  &.warning {
+    border-left-color: var(--bs-warning);
+  }
+
+  &.danger {
+    border-left-color: var(--bs-danger);
+  }
+
+  &.success {
+    border-left-color: var(--bs-success);
+  }
+}

demo/main.js

@@ -26,15 +26,6 @@ const { useStoreProvider } = o_spreadsheet.stores;
 
 const uuidGenerator = new o_spreadsheet.helpers.UuidGenerator();
 
-const NOTIFICATION_STYLE =
-  "position:absolute;\
-  right:0px;\
-  border:2px solid black;\
-  background:#F5F5DCD5;\
-  padding:20px;\
-  z-index:10000;\
-  width:140px;";
-
 topbarMenuRegistry.addChild("reload", ["file"], {
   name: "Clear & reload demo",
   sequence: 10,
@@ -311,7 +302,14 @@ class Demo extends Component {
     const div = document.createElement("div");
     const text = document.createTextNode(notification.text);
     div.appendChild(text);
-    div.style = NOTIFICATION_STYLE;
+    div.classList.add(
+      "o-test-notification",
+      "bg-white",
+      "p-3",
+      "shadow",
+      "rounded",
+      notification.type
+    );
     const element = document.querySelector(".o-spreadsheet") || document.body; // if we crash on launch, the spreadsheet is not mounted yet
     div.onclick = () => {
       element.removeChild(div);