From 20f8fc2dc03f4bc24c263b9f45b66ab9f6aa97f2 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Mon, 6 Mar 2023 08:36:42 -0700
Subject: [PATCH] Revert "Refactor project list notification by using
 `onDismiss` on `Alert` instead of custom `Close` component (#12043)" (#12133)

This reverts commit 9a3f95c322a063b84094452c21cb734a379da978

GitOrigin-RevId: 31fb4b1d429e2e9c611178afc3dc3c662340be44
---
 .../components/notifications/notification.tsx    | 16 ++++++++--------
 .../web/frontend/stories/style-guide.stories.js  | 16 ----------------
 .../frontend/stylesheets/app/project-list.less   |  3 ++-
 .../frontend/stylesheets/components/alerts.less  |  1 -
 4 files changed, 10 insertions(+), 26 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 27b464c7e3..b60c543b3f 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
@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { Alert, AlertProps } from 'react-bootstrap'
 import Body from './body'
 import Action from './action'
+import Close from './close'
 import classnames from 'classnames'
-import { useTranslation } from 'react-i18next'
 
 type NotificationProps = {
   bsStyle: AlertProps['bsStyle']
@@ -20,7 +20,6 @@ function Notification({
   ...props
 }: NotificationProps) {
   const [show, setShow] = useState(true)
-  const { t } = useTranslation()
 
   const handleDismiss = () => {
     if (onDismiss) {
@@ -36,12 +35,13 @@ function Notification({
 
   return (
     <li className={classnames('notification-entry', className)} {...props}>
-      <Alert
-        bsStyle={bsStyle}
-        onDismiss={onDismiss ? handleDismiss : undefined}
-        closeLabel={t('close')}
-      >
-        <div className="notification-entry-content">{children}</div>
+      <Alert bsStyle={bsStyle}>
+        {children}
+        {onDismiss ? (
+          <div className="notification-close">
+            <Close onDismiss={handleDismiss} />
+          </div>
+        ) : null}
       </Alert>
     </li>
   )
diff --git a/services/web/frontend/stories/style-guide.stories.js b/services/web/frontend/stories/style-guide.stories.js
index d8040a863e..7fb8f68d69 100644
--- a/services/web/frontend/stories/style-guide.stories.js
+++ b/services/web/frontend/stories/style-guide.stories.js
@@ -234,7 +234,6 @@ export const Alerts = () => {
           <Col md={8} mdOffset={2}>
             <h2>Alerts</h2>
 
-            <h3>Non-dismissible alerts</h3>
             <Alert bsStyle="danger">
               An <code>.alert-danger</code> alert
             </Alert>
@@ -247,21 +246,6 @@ export const Alerts = () => {
             <Alert bsStyle="warning">
               An <code>.alert-warning</code> alert
             </Alert>
-
-            <hr />
-            <h3>Dismissible alerts</h3>
-            <Alert bsStyle="danger" onDismiss={() => {}}>
-              An <code>.alert-danger</code> alert
-            </Alert>
-            <Alert bsStyle="success" onDismiss={() => {}}>
-              An <code>.alert-success</code> alert
-            </Alert>
-            <Alert bsStyle="info" onDismiss={() => {}}>
-              An <code>.alert-info</code> alert
-            </Alert>
-            <Alert bsStyle="warning" onDismiss={() => {}}>
-              An <code>.alert-warning</code> alert
-            </Alert>
           </Col>
         </Row>
       </Grid>
diff --git a/services/web/frontend/stylesheets/app/project-list.less b/services/web/frontend/stylesheets/app/project-list.less
index b0bcfb244a..afffeb558c 100644
--- a/services/web/frontend/stylesheets/app/project-list.less
+++ b/services/web/frontend/stylesheets/app/project-list.less
@@ -240,7 +240,8 @@ input.project-list-table-select-item[type='checkbox'] {
     margin-bottom: 0px;
   }
   .notification-entry {
-    .notification-entry-content {
+    .alert {
+      .box-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
       display: flex;
       flex-wrap: wrap;
       @media (min-width: @screen-sm-min) {
diff --git a/services/web/frontend/stylesheets/components/alerts.less b/services/web/frontend/stylesheets/components/alerts.less
index 7702816fc2..e84a12d6e4 100755
--- a/services/web/frontend/stylesheets/components/alerts.less
+++ b/services/web/frontend/stylesheets/components/alerts.less
@@ -48,7 +48,6 @@
     top: -2px;
     right: -21px;
     color: inherit;
-    text-shadow: none;
   }
 }