From e4e2b51d2ed4d8156b5abc53edbd8fe2f1aceb4a Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Wed, 19 Jul 2023 19:45:55 +0200
Subject: [PATCH] message styling for themes

---
 packages/components/src/Message/Message.tsx        | 13 ++++---------
 themes/theme-b2b/src/components/Message.styles.ts  |  6 +++---
 themes/theme-core/src/components/Message.styles.ts |  4 ++--
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/Message/Message.tsx b/packages/components/src/Message/Message.tsx
index 2af017da36..1f371dadbf 100755
--- 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
index 5f94bd56a3..7d54672909 100644
--- 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
index edabb63c4c..6c901d8499 100644
--- 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: {