feat(message-box): subtle styling

AtB-AS · Jan 17, 2025 · b0e9c97 · b0e9c97
1 parent 7fcdaf4
commit b0e9c97
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>
         ))}