From 46f355143954e1e2d2c25195151d52b330d598fe Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 29 Jan 2025 13:21:50 +0100
Subject: [PATCH] Move notifications style outside of component

---
 src/assets/css/index.css                      |  1 +
 src/assets/css/src/2.blocks.notifications.css | 51 ++++++++++++++++++
 src/views/Notifications.vue                   | 54 -------------------
 3 files changed, 52 insertions(+), 54 deletions(-)
 create mode 100644 src/assets/css/src/2.blocks.notifications.css

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 148a9cb..631352d 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -23,6 +23,7 @@
 @import 'src/2.blocks.header.css';
 @import 'src/2.blocks.image.css';
 @import 'src/2.blocks.kanban.css';
+@import 'src/2.blocks.notifications.css';
 @import 'src/2.blocks.pill.css';
 @import 'src/2.blocks.pdf-viewer.css';
 @import 'src/2.blocks.project.css';
diff --git a/src/assets/css/src/2.blocks.notifications.css b/src/assets/css/src/2.blocks.notifications.css
new file mode 100644
index 0000000..5af4733
--- /dev/null
+++ b/src/assets/css/src/2.blocks.notifications.css
@@ -0,0 +1,51 @@
+/* NOTIFICATIONS BLOCK */
+
+.notifications {
+  --flow-space: var(--space-16);
+}
+
+.notification {
+  --flow-space: var(--space-12);
+  font-size: var(--text-sm);
+  position: relative;
+  cursor: pointer;
+}
+.notification[data-status="unread"]::after {
+  content: "";
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  outline: 2px solid var(--color-white);
+  background: var(--color-primary);
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.notification p {
+  max-width: 100%;
+}
+.notification header p {
+  column-gap: 0;
+}
+.notification__type {
+  display: flex;
+}
+.notification__type::before {
+  margin-right: var(--space-8);
+}
+.notification__client {
+  display: inline-block;
+}
+.notification__client::before {
+  content: "";
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  background: var(--color-grey-700);
+  border-radius: 50%;
+  margin: 0.2em 0.5em;
+}
+.notification__body {
+  --line-clamp: 2;
+}
diff --git a/src/views/Notifications.vue b/src/views/Notifications.vue
index 7af6dc0..d07ddce 100644
--- a/src/views/Notifications.vue
+++ b/src/views/Notifications.vue
@@ -173,58 +173,4 @@ main > header {
 main > header [role="tablist"] {
   margin-left: 0;
 }
-
-/* Notifications */
-.notifications {
-  --flow-space: var(--space-16);
-}
-</style>
-
-<!-- WARNING : below styles are not scoped so as to be applied to the children components  -->
-<style>
-.notifications .notification {
-  --flow-space: var(--space-12);
-  font-size: var(--text-sm);
-  position: relative;
-  cursor: pointer;
-}
-.notifications .notification[data-status="unread"]::after {
-  content: "";
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  outline: 2px solid var(--color-white);
-  background: var(--color-primary);
-  border-radius: 50%;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.notifications .notification p {
-  max-width: 100%;
-}
-.notifications .notification header p {
-  column-gap: 0;
-}
-.notifications .notification__type {
-  display: flex;
-}
-.notifications .notification__type::before {
-  margin-right: var(--space-8);
-}
-.notifications .notification__client {
-  display: inline-block;
-}
-.notifications .notification__client::before {
-  content: "";
-  display: inline-block;
-  width: 3px;
-  height: 3px;
-  background: var(--color-grey-700);
-  border-radius: 50%;
-  margin: 0.2em 0.5em;
-}
-.notifications .notification__body {
-  --line-clamp: 2;
-}
 </style>