From d6391b13213993bdd4e46af3bf0fd88931d66783 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Fri, 17 Jan 2025 12:34:27 +0100
Subject: [PATCH] feat(message-box): subtle styling

---
 src/components/message-box/index.tsx              | 7 +++++--
 src/components/message-box/message-box.module.css | 4 ++++
 src/modules/global-messages/global-messages.tsx   | 3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/message-box/index.tsx b/src/components/message-box/index.tsx
index e868edbb..947151c5 100644
--- a/src/components/message-box/index.tsx
+++ b/src/components/message-box/index.tsx
@@ -22,6 +22,7 @@ export type MessageBoxProps = {
   noStatusIcon?: boolean;
   onClick?: () => void;
   borderRadius?: boolean;
+  subtle?: boolean;
 };
 
 export const MessageBox = ({
@@ -32,12 +33,13 @@ export const MessageBox = ({
   title,
   onClick,
   borderRadius = true,
+  subtle = false
 }: MessageBoxProps) => {
   const { color: {status} } = useTheme();
   const { t } = useTranslation();
   const backgroundColorStyle: HTMLAttributes<HTMLDivElement>['style'] = {
-    borderColor: status[type].primary.background,
-    backgroundColor: status[type].secondary.background,
+    borderColor: subtle ? undefined : status[type].primary.background,
+    backgroundColor: subtle ? undefined : status[type].secondary.background,
     color: status[type].secondary.foreground.primary,
   };
   const overrideMode = useStatusThemeColor(type);
@@ -50,6 +52,7 @@ export const MessageBox = ({
       className={andIf({
         [style.container]: true,
         [style.borderRadius]: borderRadius,
+        [style.subtle]: subtle
       })}
       style={backgroundColorStyle}
     >
diff --git a/src/components/message-box/message-box.module.css b/src/components/message-box/message-box.module.css
index 8b6d6c6c..4a903e2f 100644
--- a/src/components/message-box/message-box.module.css
+++ b/src/components/message-box/message-box.module.css
@@ -6,6 +6,10 @@
 .borderRadius {
   border-radius: token('border.radius.regular');
 }
+.subtle {
+  background-color: token('color.background.neutral.0.background') !important;
+  border: none;
+}
 .content {
   display: flex;
   flex-direction: column;
diff --git a/src/modules/global-messages/global-messages.tsx b/src/modules/global-messages/global-messages.tsx
index ae39b5ca..2926650c 100644
--- a/src/modules/global-messages/global-messages.tsx
+++ b/src/modules/global-messages/global-messages.tsx
@@ -2,7 +2,7 @@ import { MessageBox } from '@atb/components/message-box';
 import { getTextForLanguage, useTranslation } from '@atb/translations';
 import { and } from '@atb/utils/css';
 import { useActiveGlobalMessages } from './context';
-import { GlobalMessageContextEnum } from './types';
+import { GlobalMessageContextEnum, GlobalMessageType } from './types';
 import style from './global-messages.module.css';
 import { motion } from 'framer-motion';
 
@@ -46,6 +46,7 @@ export function GlobalMessages({ context, className }: GlobalMessagesProps) {
               type={message.type}
               title={getTextForLanguage(message.title, language)}
               message={getTextForLanguage(message.body, language) ?? ''}
+              subtle={message.subtle}
             />
           </motion.div>
         ))}