fix(ui): upgrades background colors and spacing in message component

Author: MartinS-git

packages/ui-components/src/components/Message/Message.component.tsx

@@ -14,24 +14,29 @@ const messageBaseStyles = `
     jn:rounded
     jn:leading-5
     jn:overflow-hidden
-    jn:items-center
+    jn:items-top
+`
+const messageIconStyles = `
+    jn:mt-2
+	jn:mb-2 // In case without message title, to keep height consistent
 `
 
 const messageHeadingStyles = `
     jn:font-bold
 `
 
 const messageContentStyles = `
-    jn:py-3
+    jn:pt-2
+	jn:pb-2.5
     jn:pr-4
-    jn:ml-7
+    jn:ml-2.5
 `
 
 const messageBorderStyles = `
     jn:w-[4px]
     jn:self-stretch
     jn:border-l-4
-    jn:mr-6
+    jn:mr-2.5
     jn:shrink-0
 `
 
@@ -40,7 +45,7 @@ const dismissButtonStyles = `
     jn:self-stretch
     jn:flex
     jn:flex-col
-    jn:py-2.5
+    jn:py-2
     jn:pr-2.5
 `
 
@@ -257,7 +262,7 @@ export const Message = ({
       {...props}
     >
       <div className={`juno-message-border ${messageBorderStyles} ${variantStyle}`}></div>
-      <Icon icon={iconToRender} className={`${getIconStyles(variant)}`} />
+      <Icon icon={iconToRender} size={21} className={`${getIconStyles(variant)} ${messageIconStyles}`} />
       <div className={`juno-message-content ${messageContentStyles}`}>
         {title && <h1 className={messageHeadingStyles}>{title}</h1>}
         <div>{children || text}</div>

packages/ui-components/src/global.css

@@ -385,12 +385,12 @@
   --background-color-theme-topnavigation-item: var(--color-topnavigation-item-bg);
   --background-color-theme-topnavigation-item-active: var(--color-topnavigation-item-active-bg);
 
-  /* Component Background Images: */
-  --background-image-theme-message-default: var(--gradient-message-default-bg);
-  --background-image-theme-message-success: var(--gradient-message-success-bg);
-  --background-image-theme-message-warning: var(--gradient-message-warning-bg);
-  --background-image-theme-message-danger: var(--gradient-message-danger-bg);
-  --background-image-theme-message-error: var(--gradient-message-error-bg);
+  /* Component Background Colors: */
+  --background-color-theme-message-default: var(--color-message-default-bg);
+  --background-color-theme-message-success: var(--color-message-success-bg);
+  --background-color-theme-message-warning: var(--color-message-warning-bg);
+  --background-color-theme-message-danger: var(--color-message-danger-bg);
+  --background-color-theme-message-error: var(--color-message-error-bg);
 
   /* Component Text Colors: */
   --text-color-theme-highest: var(--color-text-highest);
@@ -612,15 +612,15 @@
 
   /* LT Message */
   --color-message-danger-border: var(--color-danger);
-  --gradient-message-danger-bg: linear-gradient(90deg, rgb(255, 231, 224) 0%, rgb(255, 180, 158) 100%);
+  --color-message-danger-bg: rgb(249, 229, 229);
   --color-message-default-border: var(--color-info);
-  --gradient-message-default-bg: linear-gradient(90deg, rgb(229, 244, 248) 0%, rgb(46, 168, 196) 100%);
+  --color-message-default-bg: rgb(229, 241, 250);
   --color-message-error-border: var(--color-error);
-  --gradient-message-error-bg: linear-gradient(90deg, rgb(255, 231, 224) 0%, rgb(255, 180, 158) 100%);
+  --color-message-error-bg: rgb(249, 229, 229);
   --color-message-warning-border: var(--color-warning);
-  --gradient-message-warning-bg: linear-gradient(90deg, rgb(253, 245, 226) 0%, rgb(255, 231, 147) 100%);
+  --color-message-warning-bg: rgb(255, 247, 229);
   --color-message-success-border: var(--color-success);
-  --gradient-message-success-bg: linear-gradient(90deg, rgb(230, 247, 233) 0%, rgb(170, 229, 180) 100%);
+  --color-message-success-bg: rgb(237, 248, 232);
 
   /* LT Introbox */
   --color-introbox-bg: var(--color-background-lvl-2);
@@ -862,15 +862,15 @@
 
   /* DT Message */
   --color-message-danger-border: var(--color-danger);
-  --gradient-message-danger-bg: linear-gradient(90deg, rgb(57, 39, 38) 0%, rgb(124, 48, 30) 100%);
+  --color-message-danger-bg: rgb(49, 27, 26);
   --color-message-default-border: var(--color-info);
-  --gradient-message-default-bg: linear-gradient(90deg, rgb(28, 57, 65) 0%, rgb(25, 108, 119) 100%);
+  --color-message-default-bg: rgb(14, 48, 57);
   --color-message-error-border: var(--color-error);
-  --gradient-message-error-bg: linear-gradient(90deg, rgb(57, 39, 38) 0%, rgb(124, 48, 30) 100%);
+  --color-message-error-bg: rgb(49, 27, 26);
   --color-message-warning-border: var(--color-warning);
-  --gradient-message-warning-bg: linear-gradient(90deg, rgb(57, 56, 36) 0%, rgb(124, 104, 24) 100%);
+  --color-message-warning-bg: rgb(49, 47, 24);
   --color-message-success-border: var(--color-success);
-  --gradient-message-success-bg: linear-gradient(90deg, rgb(32, 55, 46) 0%, rgb(39, 102, 57) 100%);
+  --color-message-success-bg: rgb(20, 48, 34);
   /* DT Introbox */
   --color-introbox-bg: var(--color-background-lvl-2);
   --color-introbox-border: var(--color-accent);

packages/ui-components/src/theme.css

@@ -376,11 +376,11 @@
   --background-color-theme-topnavigation-item-active: var(--color-topnavigation-item-active-bg);
 
   /* Component Background Images: */
-  --background-image-theme-message-default: var(--gradient-message-default-bg);
-  --background-image-theme-message-success: var(--gradient-message-success-bg);
-  --background-image-theme-message-warning: var(--gradient-message-warning-bg);
-  --background-image-theme-message-danger: var(--gradient-message-danger-bg);
-  --background-image-theme-message-error: var(--gradient-message-error-bg);
+  --background-color-theme-message-default: var(--color-message-default-bg);
+  --background-color-theme-message-success: var(--color-message-success-bg);
+  --background-color-theme-message-warning: var(--color-message-warning-bg);
+  --background-color-theme-message-danger: var(--color-message-danger-bg);
+  --background-color-theme-message-error: var(--color-message-error-bg);
 
   /* Component Text Colors: */
   --text-color-theme-highest: var(--color-text-highest);
@@ -603,15 +603,15 @@
 
   /* LT Message */
   --color-message-danger-border: var(--color-danger);
-  --gradient-message-danger-bg: linear-gradient(90deg, rgb(255, 231, 224) 0%, rgb(255, 180, 158) 100%);
+  --color-message-danger-bg: rgb(249, 229, 229);
   --color-message-default-border: var(--color-info);
-  --gradient-message-default-bg: linear-gradient(90deg, rgb(229, 244, 248) 0%, rgb(46, 168, 196) 100%);
+  --color-message-default-bg: rgb(229, 241, 250);
   --color-message-error-border: var(--color-error);
-  --gradient-message-error-bg: linear-gradient(90deg, rgb(255, 231, 224) 0%, rgb(255, 180, 158) 100%);
+  --color-message-error-bg: rgb(249, 229, 229);
   --color-message-warning-border: var(--color-warning);
-  --gradient-message-warning-bg: linear-gradient(90deg, rgb(253, 245, 226) 0%, rgb(255, 231, 147) 100%);
+  --color-message-warning-bg: rgb(255, 247, 229);
   --color-message-success-border: var(--color-success);
-  --gradient-message-success-bg: linear-gradient(90deg, rgb(230, 247, 233) 0%, rgb(170, 229, 180) 100%);
+  --color-message-success-bg: rgb(237, 248, 232);
 
   /* LT Introbox */
   --color-introbox-bg: var(--color-background-lvl-2);
@@ -853,15 +853,15 @@
 
   /* DT Message */
   --color-message-danger-border: var(--color-danger);
-  --gradient-message-danger-bg: linear-gradient(90deg, rgb(57, 39, 38) 0%, rgb(124, 48, 30) 100%);
+  --color-message-danger-bg: rgb(49, 27, 26);
   --color-message-default-border: var(--color-info);
-  --gradient-message-default-bg: linear-gradient(90deg, rgb(28, 57, 65) 0%, rgb(25, 108, 119) 100%);
+  --color-message-default-bg: rgb(14, 48, 57);
   --color-message-error-border: var(--color-error);
-  --gradient-message-error-bg: linear-gradient(90deg, rgb(57, 39, 38) 0%, rgb(124, 48, 30) 100%);
+  --color-message-error-bg: rgb(49, 27, 26);
   --color-message-warning-border: var(--color-warning);
-  --gradient-message-warning-bg: linear-gradient(90deg, rgb(57, 56, 36) 0%, rgb(124, 104, 24) 100%);
+  --color-message-warning-bg: rgb(49, 47, 24);
   --color-message-success-border: var(--color-success);
-  --gradient-message-success-bg: linear-gradient(90deg, rgb(32, 55, 46) 0%, rgb(39, 102, 57) 100%);
+  --color-message-success-bg: rgba(20, 48, 34);
   /* DT Introbox */
   --color-introbox-bg: var(--color-background-lvl-2);
   --color-introbox-border: var(--color-accent);