style: AlertFieldLevel - icon centering, margin fix on text

cfpb · Jan 11, 2024 · 314464f · 314464f
1 parent cee0329
commit 314464f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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;
-}
+}
+
+.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
@@ -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>