Merge pull request #18454 from overleaf/rd-managed-account

[web] Use the Notification component for the managed account alert

GitOrigin-RevId: 3839b171348bf0f670b6a033b99078b8543ce2e5

services/web/frontend/js/features/settings/components/managed-account-alert.tsx

@@ -1,5 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next'
-import getMeta from '../../../utils/meta'
+import getMeta from '@/utils/meta'
+import Notification from '@/shared/components/notification'
 
 export default function ManagedAccountAlert() {
   const { t } = useTranslation()
@@ -14,19 +15,17 @@ export default function ManagedAccountAlert() {
   }
 
   return (
-    <div className="enrollment-alert">
-      <div className="icon">
-        <span className="info-badge" />
-      </div>
-      <div>
-        <div>
-          <strong>
-            {t('account_managed_by_group_administrator', {
-              admin: currentManagedUserAdminEmail,
-            })}
-          </strong>
-        </div>
-        <div>
+    <Notification
+      type="info"
+      content={
+        <>
+          <div>
+            <strong>
+              {t('account_managed_by_group_administrator', {
+                admin: currentManagedUserAdminEmail,
+              })}
+            </strong>
+          </div>
           <Trans
             i18nKey="need_contact_group_admin_to_make_changes"
             components={[
@@ -37,8 +36,8 @@ export default function ManagedAccountAlert() {
               />,
             ]}
           />
-        </div>
-      </div>
-    </div>
+        </>
+      }
+    />
   )
 }

services/web/frontend/stylesheets/app/account-settings.less

@@ -242,25 +242,6 @@ tbody > tr.affiliations-table-warning-row > td {
   padding: 2px 4px;
 }
 
-.enrollment-alert {
-  width: 100%;
-  border-radius: 4px;
-  padding: 12px;
-  background-color: @blue-10;
-  border: 1px solid @blue-20;
-  display: flex;
-  flex-direction: row;
-
-  .icon {
-    flex: 1 1 auto;
-    padding: 0 16px 0 4px;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-}
-
 .security-row {
   .line-header > b {
     color: @ol-blue-gray-6;

services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss

@@ -138,25 +138,6 @@
   padding: var(--spacing-01) var(--spacing-02);
 }
 
-.enrollment-alert {
-  width: 100%;
-  border-radius: var(--border-radius-base);
-  padding: var(--spacing-05);
-  background-color: var(--bg-info-03);
-  border: 1px solid var(--border-divider);
-  display: flex;
-  flex-direction: row;
-
-  .icon {
-    flex: 1 1 auto;
-    padding: 0 var(--spacing-06) 0 var(--spacing-02);
-  }
-
-  a {
-    text-decoration: underline;
-  }
-}
-
 .security-row {
   .line-header > b {
     color: var(--content-primary);