From 56bcbb908ffbea3ab7b9e61878647dac80d0c17d Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Wed, 28 Aug 2024 12:10:46 +0300
Subject: [PATCH] Merge pull request #20063 from
 overleaf/ii-bs5-system-notifications

[web] BS5 system notifications

GitOrigin-RevId: a5a17a418193e325c0f561708c99240191cff8e7
---
 .../frontend/js/shared/components/close.tsx   | 13 +++++++++-
 .../bootstrap-5/components/all.scss           |  1 +
 .../components/system-messages.scss           | 25 +++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/system-messages.scss

diff --git a/services/web/frontend/js/shared/components/close.tsx b/services/web/frontend/js/shared/components/close.tsx
index ac3d622cdd..ecf2bf6e63 100644
--- a/services/web/frontend/js/shared/components/close.tsx
+++ b/services/web/frontend/js/shared/components/close.tsx
@@ -1,4 +1,6 @@
 import { useTranslation } from 'react-i18next'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 
 type CloseProps = {
   onDismiss: React.MouseEventHandler<HTMLButtonElement>
@@ -14,7 +16,16 @@ function Close({ onDismiss, variant = 'light' }: CloseProps) {
       className={`close pull-right ${variant}`}
       onClick={onDismiss}
     >
-      <span aria-hidden="true">&times;</span>
+      <BootstrapVersionSwitcher
+        bs3={<span aria-hidden="true">&times;</span>}
+        bs5={
+          <MaterialIcon
+            type="close"
+            className="align-text-bottom"
+            accessibilityLabel={t('close')}
+          />
+        }
+      />
       <span className="sr-only">{t('close')}</span>
     </button>
   )
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index dfa4110286..a6ca65667c 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -3,6 +3,7 @@
 @import 'dropdown-menu';
 @import 'split-button';
 @import 'notifications';
+@import 'system-messages';
 @import 'tooltip';
 @import 'card';
 @import 'badge';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/system-messages.scss b/services/web/frontend/stylesheets/bootstrap-5/components/system-messages.scss
new file mode 100644
index 0000000000..f244107521
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/system-messages.scss
@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+.system-messages {
+  @include list-unstyled;
+
+  margin: 0;
+
+  .system-message {
+    padding: var(--spacing-03) var(--spacing-05);
+    background-color: var(--bg-info-01);
+    color: var(--content-primary-dark);
+    border-bottom: solid 1px color.adjust($blue-50, $lightness: 10%);
+
+    a {
+      color: var(--content-primary-dark);
+      text-decoration: underline;
+    }
+  }
+}
+
+.system-message .close {
+  @include reset-button;
+
+  color: var(--content-primary-dark);
+}