feat: update UI of MessageBox

pyrohost · Aug 25, 2024 · 0639aee · 0639aee
1 parent edb0f8c
commit 0639aee
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/resources/scripts/components/MessageBox.tsx b/resources/scripts/components/MessageBox.tsx
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import Code from './elements/Code';
+
 export type FlashMessageType = 'success' | 'info' | 'warning' | 'error';
 
 interface Props {
@@ -12,9 +14,13 @@ const Container = styled.div<{ $type?: FlashMessageType }>``;
 Container.displayName = 'MessageBox.Container';
 
 const MessageBox = ({ title, children, type }: Props) => (
-    <Container className='flex items-center gap-2 bg-[#ffffff11] px-4 py-2 rounded-full' $type={type} role={'alert'}>
-        {title && <h2 className='uppercase text-xs font-bold'>{title}</h2>}
-        <p>{children}</p>
+    <Container
+        className='flex flex-col gap-2 bg-black border-[2px] border-brand/70 p-4 rounded-2xl mb-4'
+        $type={type}
+        role={'alert'}
+    >
+        {title && <h2 className='font-bold text-xl'>{title}</h2>}
+        <Code>{children}</Code>
     </Container>
 );
 MessageBox.displayName = 'MessageBox';