message styling for themes

marigold-ui · Jul 19, 2023 · e4e2b51 · e4e2b51 · vercel · Jul 19, 2023
1 parent ba12cea
commit e4e2b51
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/packages/components/src/Message/Message.tsx b/packages/components/src/Message/Message.tsx
@@ -43,20 +43,15 @@ export const Message = ({
   return (
     <div
       className={cn(
-        'grid auto-cols-auto auto-rows-min gap-x-1 gap-y-2',
+        'grid auto-cols-auto auto-rows-min gap-1',
         classNames.container
       )}
       {...props}
     >
-      <div
-        className={cn(
-          'col-span-1 row-span-2 h-4 w-4 self-start',
-          classNames.icon
-        )}
-      >
-        {icon}
+      <div className={cn('col-span-1 h-6 w-6', classNames.icon)}>{icon}</div>
+      <div className={cn('col-start-2 row-start-1', classNames.title)}>
+        {messageTitle}
       </div>
-      <div className={cn('col-start-2', classNames.title)}>{messageTitle}</div>
       <div className={cn('col-start-2', classNames.content)}>{children}</div>
     </div>
   );

diff --git a/themes/theme-b2b/src/components/Message.styles.ts b/themes/theme-b2b/src/components/Message.styles.ts
@@ -16,8 +16,9 @@ export const Message: ThemeComponent<'Message'> = {
       },
     }
   ),
-  content: cva('pt-1 leading-[1.125]'),
-  icon: cva('flex h-4 w-4', {
+  title: cva('font-bold'),
+  content: cva(''),
+  icon: cva('', {
     variants: {
       variant: {
         warning: 'fill-fill-warning',
@@ -26,5 +27,4 @@ export const Message: ThemeComponent<'Message'> = {
       },
     },
   }),
-  title: cva('pl-1 font-bold leading-[1.125]'),
 };
diff --git a/themes/theme-core/src/components/Message.styles.ts b/themes/theme-core/src/components/Message.styles.ts
@@ -10,7 +10,7 @@ export const Message: ThemeComponent<'Message'> = {
       },
     },
   }),
-  title: cva('col-span-full font-bold leading-8', {
+  title: cva('font-bold', {
     variants: {
       variant: {
         warning: 'text-text-warning',
@@ -19,7 +19,7 @@ export const Message: ThemeComponent<'Message'> = {
       },
     },
   }),
-  icon: cva(''),
+  icon: cva('hidden'),
   content: cva('leading-4', {
     variants: {
       variant: {