From bbbf0d1217d23f02a81f88b6fc62202ec118317f Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Thu, 27 Jun 2024 16:14:52 +0200
Subject: [PATCH] fix(frontend): UI Notification Ring and Fix Page Header
 Display on Mobile (#2771)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…y and responsiveness.

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 .../Notification/Notification.module.scss         |  6 +-----
 .../Notifications/Notifications.module.scss       | 14 +++++++-------
 .../PageHeader/Notifications/Notifications.tsx    |  6 +++++-
 .../components/PageHeader/PageHeader.module.scss  | 15 ++++++++++-----
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss b/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss
index 26a3282d7..60819d828 100644
--- a/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss
+++ b/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss
@@ -14,10 +14,6 @@
     border-bottom: none;
   }
 
-  &.read {
-    opacity: 0.4;
-  }
-
   .header {
     display: flex;
     justify-content: space-between;
@@ -76,4 +72,4 @@
     font-size: Typography.$tiny;
     color: var(--text-2);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss b/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss
index 7b99c4f49..04a5821cb 100644
--- a/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss
+++ b/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss
@@ -11,16 +11,16 @@
   .badge {
     position: absolute;
     color: var(--white-0);
-    background-color: var(--accent);
-    border-radius: Radius.$circle;
-    width: 14px;
-    height: 14px;
+    background-color: var(--dangerous-dark);
+    border-radius: Radius.$normal;
+    width: 16px;
+    height: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: Typography.$very_tiny;
-    top: -(Spacings.$spacing02);
-    right: -(Spacings.$spacing01);
+    top: -(Spacings.$spacing03);
+    right: -(Spacings.$spacing02);
   }
 
   .notifications_panel {
@@ -59,4 +59,4 @@
       color: var(--text-2);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/components/PageHeader/Notifications/Notifications.tsx b/frontend/lib/components/PageHeader/Notifications/Notifications.tsx
index 613b2fb38..e7ef74fc0 100644
--- a/frontend/lib/components/PageHeader/Notifications/Notifications.tsx
+++ b/frontend/lib/components/PageHeader/Notifications/Notifications.tsx
@@ -104,7 +104,11 @@ export const Notifications = (): JSX.Element => {
           color="black"
           handleHover={true}
         />
-        <span className={styles.badge}>{unreadNotifications}</span>
+        {!!unreadNotifications && (
+          <span className={styles.badge}>
+            {unreadNotifications > 9 ? "9+" : unreadNotifications}
+          </span>
+        )}
       </div>
       {panelOpened && (
         <div className={styles.notifications_panel}>
diff --git a/frontend/lib/components/PageHeader/PageHeader.module.scss b/frontend/lib/components/PageHeader/PageHeader.module.scss
index 1e49b5e57..6567204dc 100644
--- a/frontend/lib/components/PageHeader/PageHeader.module.scss
+++ b/frontend/lib/components/PageHeader/PageHeader.module.scss
@@ -10,6 +10,7 @@
   padding-left: Spacings.$spacing09;
   border-bottom: 1px solid var(--border-1);
   height: 3rem;
+  width: 100%;
 
   .left {
     @include Typography.H2;
@@ -22,15 +23,19 @@
       visibility: visible;
       padding-left: Spacings.$spacing07;
     }
-
-    @media (max-width: ScreenSizes.$small) {
-      display: none;
-    }
   }
 
   .buttons_wrapper {
     display: flex;
     gap: Spacings.$spacing04;
     align-items: center;
+    justify-content: flex-end;
   }
-}
\ No newline at end of file
+
+  @media (max-width: ScreenSizes.$small) {
+    justify-content: flex-end;
+    .left {
+      display: none;
+    }
+  }
+}