Merge pull request #244 from seamapi/update-alert-style

Author: xplato

src/lib/ui/Alert/Alert.tsx

@@ -24,12 +24,14 @@ export function Alert(props: AlertProps): JSX.Element {
       className={classNames('seam-alert', `seam-${variant}-alert`, className)}
     >
       <div className='seam-alert-content'>
-        <div className='seam-alert-icon'>
-          {variant === 'warning' ? (
-            <TriangleWarningIcon />
-          ) : (
-            <ExclamationCircleIcon />
-          )}
+        <div className='seam-alert-icon-wrap'>
+          <div className='seam-alert-icon'>
+            {variant === 'warning' ? (
+              <TriangleWarningIcon />
+            ) : (
+              <ExclamationCircleIcon />
+            )}
+          </div>
         </div>
         <div className='seam-alert-message-wrap'>
           <p className='seam-alert-message'>{message}</p>

src/styles/_alert.scss

@@ -18,7 +18,7 @@
   // Alert
   .seam-alert {
     width: 100%;
-    min-height: 70px;
+    min-height: 54px;
     padding: 8px 16px;
     border-radius: 8px;
     display: flex;
@@ -68,6 +68,11 @@
       margin-top: 16px;
     }
 
+    .seam-alert-icon-wrap {
+      padding: 7px 8px;
+      padding-left: 0;
+    }
+
     .seam-alert-icon {
       width: 24px;
       height: 24px;
@@ -76,12 +81,13 @@
     .seam-alert-content {
       display: flex;
       justify-content: flex-start;
-      align-items: center;
+      align-items: flex-start;
       flex-direction: row;
-      gap: 8px;
     }
 
     .seam-alert-message-wrap {
+      padding: 8px 0;
+
       .seam-alert-message {
         font-size: 14px;
         font-weight: 400;
@@ -91,7 +97,7 @@
     }
   }
 
-  @media only screen and (width <= 500px) {
+  @media only screen and (width <=500px) {
     .seam-alert {
       justify-content: flex-start;
       flex-direction: column;