fix(frontend): UI Notification Ring and Fix Page Header Display on Mobile (#2771)

…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):

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);
   }
-}
+}

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);
     }
   }
-}
+}

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}>

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;
   }
-}
+
+  @media (max-width: ScreenSizes.$small) {
+    justify-content: flex-end;
+    .left {
+      display: none;
+    }
+  }
+}