Chore/alert tw (#1898)

Co-authored-by: Kyle Holmberg <[email protected]>

Author: billy-le

components/Alert/Alert.module.css

@@ -1,7 +1,6 @@
 import { cx } from 'common/utils/cva';
 import { ALERT, ALERT_CLOSE_BUTTON } from 'common/constants/testIDs';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
-import styles from './Alert.module.css';
 
 export interface AlertPropsType {
   type: 'error' | 'success' | 'warning';
@@ -20,10 +19,10 @@ function Alert({
 }: AlertPropsType) {
   return (
     <div
-      className={cx(styles.Alert, className, {
-        [styles.error]: type === 'error',
-        [styles.success]: type === 'success',
-        [styles.warning]: type === 'warning',
+      className={cx('border border-solid border-black rounded shadow-md text-sm px-3', className, {
+        'bg-error border-error-deep text-error-deep': type === 'error',
+        'bg-success border-success-deep text-success-deep': type === 'success',
+        'bg-warning border-warning-deep text-warning-deep': type === 'warning',
       })}
       data-testid={testID}
       role="alert"
@@ -32,7 +31,7 @@ function Alert({
       {Boolean(onClose) && (
         <button
           type="button"
-          className={styles.alertCloseButton}
+          className="text-2xl align-middle py-1 px-2 mr-1 transition-all duration-200 ease-linear cursor-pointer hover:text-black hover:scale-110"
           onClick={onClose}
           data-testid={ALERT_CLOSE_BUTTON}
         >

components/Alert/Alert.tsx

@@ -2,7 +2,7 @@
 
 exports[`Alert > should render error alert with required props 1`] = `
 <div
-  className="Alert error"
+  className="border border-solid rounded shadow-md text-sm px-3 bg-error border-error-deep text-error-deep"
   data-testid="ALERT"
   role="alert"
 >

components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`UpdateProfileForm/Steps/MilitaryStatus > should render in context of Fo
     className="row"
   >
     <div
-      className="Alert warning"
+      className="border border-solid rounded shadow-md text-sm px-3 bg-warning border-warning-deep text-warning-deep"
       data-testid="ALERT"
       role="alert"
     >

components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.tsx.snap

@@ -26,6 +26,12 @@ module.exports = {
         themeGray800: '#e2e2e2',
         burntOrange500: 'hsl(14, 55%, 45%, 1)',
         white: '#f7f7f7',
+        error: 'var(--error)',
+        'error-deep': 'var(--errorDeep)',
+        success: 'var(--success)',
+        'success-deep': 'var(--successDeep)',
+        warning: 'var(--warning)',
+        'warning-deep': 'var(--warningDeep)',
       },
       maxWidth: {
         girderWidth: '700px',