From ba9ae174b2b22f10d8be3ebe14502059098b0836 Mon Sep 17 00:00:00 2001
From: Jakob Ackermann <jakob.ackermann@overleaf.com>
Date: Wed, 21 Feb 2024 13:59:04 +0000
Subject: [PATCH] Merge pull request #17212 from
 overleaf/jpa-writefull-promo-spacing

[web] fix spacing of notifications on the project dashboard

GitOrigin-RevId: 565159334d92c6f73da4c6a7174536cd0a3c5616
---
 .../components/notifications/notification.tsx         | 11 ++++++-----
 .../notifications/writefull-premium-promo-banner.tsx  |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
index 3d6664c6a5..7d9a4cf742 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
@@ -16,6 +16,7 @@ type NotificationProps = {
   action?: React.ReactElement
   onDismiss?: AlertProps['onDismiss']
   className?: string
+  newNotificationStyle?: boolean
 }
 
 /**
@@ -35,12 +36,12 @@ function Notification({
   className,
   body,
   action,
+  newNotificationStyle,
   ...props
 }: NotificationProps) {
-  const newNotificationStyle = getMeta(
-    'ol-newNotificationStyle',
-    false
-  ) as boolean
+  newNotificationStyle =
+    newNotificationStyle ??
+    (getMeta('ol-newNotificationStyle', false) as boolean)
 
   const [show, setShow] = useState(true)
 
@@ -61,7 +62,7 @@ function Notification({
       bsStyle === 'danger' ? 'error' : bsStyle
     ) as NotificationType
     return (
-      <li>
+      <li className={classnames('notification-entry', className)}>
         <NewNotification
           type={newNotificationType}
           isDismissible={onDismiss != null}
diff --git a/services/web/frontend/js/features/project-list/components/notifications/writefull-premium-promo-banner.tsx b/services/web/frontend/js/features/project-list/components/notifications/writefull-premium-promo-banner.tsx
index dcc243b9a2..033d3193a7 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/writefull-premium-promo-banner.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/writefull-premium-promo-banner.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react'
-import Notification from '@/shared/components/notification'
+import Notification from './notification'
 import { sendMB } from '@/infrastructure/event-tracking'
 import customLocalStorage from '@/infrastructure/local-storage'
 import WritefullLogo from '@/shared/svgs/writefull-logo'
@@ -32,10 +32,10 @@ function WritefullPremiumPromoBanner({
 
   return (
     <Notification
-      type="info"
-      isDismissible
+      bsStyle="info"
+      newNotificationStyle
       onDismiss={handleClose}
-      content={
+      body={
         <>
           Enjoying Writefull? Get <strong>10% off Writefull Premium</strong>,
           giving you access to TeXGPT—AI assistance to generate LaTeX code. Use{' '}