From 314464fab202862dbbdb499872d8b2f51b859686 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Thu, 11 Jan 2024 06:05:41 -0500
Subject: [PATCH] style: AlertFieldLevel - icon centering, margin fix on text

---
 src/components/Alert/Alert.css           | 17 ++++++++++++++---
 src/components/Alert/AlertFieldLevel.tsx |  8 ++++++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Alert/Alert.css b/src/components/Alert/Alert.css
index 43d147536..9a195a2ca 100644
--- a/src/components/Alert/Alert.css
+++ b/src/components/Alert/Alert.css
@@ -5,11 +5,12 @@
   position: absolute;
 }
 
-.m-notification:not(.m-notification__error, .m-notification__success, .m-notification__warning) .cf-icon-svg {
+.m-notification:not(.m-notification__error, .m-notification__success, .m-notification__warning)
+  .cf-icon-svg {
   fill: #5a5d61;
 }
 
-.cf-icon-svg-wrapper+.m-notification_content {
+.cf-icon-svg-wrapper + .m-notification_content {
   padding-left: 1.5625em;
 }
 
@@ -20,4 +21,14 @@
 
 .m-notification .m-list .cf-icon-svg-wrapper .cf-icon-svg {
   fill: currentcolor;
-}
\ No newline at end of file
+}
+
+.a-alertfieldlevel-text {
+  display: inline;
+  margin-left: 0.5em;
+}
+
+.a-alertfieldlevel-container {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/components/Alert/AlertFieldLevel.tsx b/src/components/Alert/AlertFieldLevel.tsx
index 368f78588..9462bdad7 100644
--- a/src/components/Alert/AlertFieldLevel.tsx
+++ b/src/components/Alert/AlertFieldLevel.tsx
@@ -1,5 +1,6 @@
 import type { JSXElement } from '~/src/types/jsxElement';
 import { Icon } from '../Icon/Icon';
+import './Alert.css';
 
 export type AlertFieldLevelType = 'error' | 'info' | 'success' | 'warning';
 
@@ -41,12 +42,15 @@ export const AlertFieldLevel = ({
 
   return (
     <div
-      className={`a-form-alert a-form-alert${AlertFieldLevelClass[status]}`}
+      className={`a-form-alert a-form-alert${AlertFieldLevelClass[status]} a-alertfieldlevel-container`}
       role='alert'
       {...properties}
     >
       <Icon name={MapTypeToIconName[status]} alt={status} withBg />
-      <span className='a-form-alert_text' data-testid='message'>
+      <span
+        className='a-form-alert_text a-alertfieldlevel-text'
+        data-testid='message'
+      >
         {message}
       </span>
     </div>