Merge pull request #17212 from overleaf/jpa-writefull-promo-spacing

[web] fix spacing of notifications on the project dashboard

GitOrigin-RevId: 565159334d92c6f73da4c6a7174536cd0a3c5616

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}

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