CASH-1684: Alert message UI updates

src/layouts/schedule/schedule.vue

@@ -85,6 +85,7 @@
                         ref="alertMSRNotCoveredByInsurance"
                         class="mt-5 mb-5"
                         v-if="isMSRFeeNotCoveredByInsurance"
+                        :leftAlignCopy="true"
                         :manualHeadline="MSRFeeAlertHeadlineText"
                         :manualCopy="MSRFeeAlertBodyText"
                         :showWarningIcon="true"

src/ux-components/alert/alert.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="alert fade show text-center mb-0 py-2 px-4 border-0"
+        class="alert fade show mb-0 py-2 px-4 border-0"
         role="alert"
         v-on="{ 'close.bs.alert': onAlertClose }"
         :class="[
@@ -8,8 +8,9 @@
             this.alertClass,
             this.cssClassNameForCmsWidget,
             this.hasBorder ? 'bordered' : '',
+            this.leftAlignCopy ? 'text-start' : 'text-center',
         ]">
-        <p class="mx-6 my-0 fw-bold alert-heading">
+        <p class="my-0 fw-bold alert-heading" :class="leftAlignCopy ? 'mx-4' : 'mx-6'">
             <img v-if="showInfoIcon" :src="infoIcon" alt="Info Icon" class="info-icon" />
             <img
                 v-if="showWarningIcon"
@@ -74,6 +75,7 @@ export default {
         hasBorder: Boolean,
         isDismissible: Boolean,
         alertClass: String,
+        leftAlignCopy: Boolean,
         /*
             alertClass class names:
             alert-success (green)
@@ -220,13 +222,41 @@ export default {
     }
     &.alert-warning {
         background-color: $yellow-100;
-        .alert-heading {
-            color: $yellow-600;
 
+        &.bordered {
+            border-color: $yellow-400;
+        }
+
+        &.text-start {
+            .alert-heading {
+                display: flex;
+                align-items: center;
+                color: $black;
+                font-weight: 700;
+
+                .warning-icon {
+                    margin-right: 0.5rem;
+                }
+            }
+            hr {
+                margin-top: 0.5rem;
+                margin-bottom: 0.5rem;
+                border-color: $yellow-400;
+            }
+        }
+
+        &.text-center {
+            .alert-heading {
+                color: $yellow-600;
+            }            
+        }
+
+        .alert-heading {
             .warning-icon {
                 height: 1rem;
             }
         }
+        
         svg {
             fill: $yellow-600;
             width: 1rem;