fix: layout of actions for Alert component

supabase · Aug 5, 2022 · 7e81a92 · 7e81a92
1 parent 484cebd
commit 7e81a92
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -61,13 +61,13 @@ function Alert({
     <>
       {visible && (
         <div className={containerClasses.join(' ')}>
-          <div className="flex space-x-4">
-            {withIcon ? (
-              <div className={__styles.variant[variant].icon}>
-                {withIcon && icons[variant]}
-              </div>
-            ) : null}
-            {icon && icon}
+          {withIcon ? (
+            <div className={__styles.variant[variant].icon}>
+              {withIcon && icons[variant]}
+            </div>
+          ) : null}
+          {icon && icon}
+          <div className="flex flex-1 justify-between">
             <div>
               <h3
                 className={[
@@ -79,8 +79,8 @@ function Alert({
               </h3>
               <div className={descriptionClasses.join(' ')}>{children}</div>
             </div>
+            {actions}
           </div>
-          {actions}
           {closable && (
             <button
               aria-label="Close alert"

diff --git a/src/lib/theme/defaultTheme.ts b/src/lib/theme/defaultTheme.ts
@@ -253,7 +253,7 @@ export default {
   alert: {
     base: `
       relative rounded border py-4 px-6 
-      flex justify-between space-x-4 items-start 
+      flex space-x-4 items-start 
     `,
     header: 'block text-sm font-normal mb-1',
     description: `text-xs`,