style(components): update Message colors

MTES-MCT · Apr 30, 2024 · 704d9bc · 704d9bc
1 parent a698903
commit 704d9bc
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 20 deletions.
diff --git a/src/components/Message/index.tsx b/src/components/Message/index.tsx
@@ -41,7 +41,6 @@ const Box = styled.div<{
 }>`
   ${getStyledCssFromLevel()}
 
-  border: solid 1px;
   border-radius: 2px;
   display: flex;
   font-size: 13px;

diff --git a/src/components/Message/utils.ts b/src/components/Message/utils.ts
@@ -5,35 +5,19 @@ import { THEME } from '../../theme'
 export function getStyledCssFromLevel() {
   return (props: { $level: Level; theme: typeof THEME }) => {
     switch (true) {
-      // TODO Check with Adeline.
-      case props.$level === Level.ERROR:
-        return `
-          background-color: ${props.theme.color.maximumRed15};
-          border-color: ${props.theme.color.maximumRed};
-          color: ${props.theme.color.gunMetal};
-        `
-
-      // TODO Check with Adeline.
-      case props.$level === Level.SUCCESS:
-        return `
-            background-color: ${props.theme.color.mediumSeaGreen25};
-            border-color: ${props.theme.color.mediumSeaGreen};
-            color: ${props.theme.color.gunMetal};
-          `
-
       case props.$level === Level.WARNING:
         return `
           background-color: ${props.theme.color.goldenPoppy25};
-          border-color: ${props.theme.color.goldenPoppy};
-          color: ${props.theme.color.slateGray};
+          border: solid 1px ${props.theme.color.goldenPoppyBorder};
+          color: ${props.theme.color.gunMetal};
         `
 
       // TODO Check `border-color` with Adeline.
       case props.$level === Level.INFO:
       default:
         return `
             background-color: ${props.theme.color.blueGray25};
-            border-color: #BCD9F2;
+            border: solid 1px ${props.theme.color.blueGrayBorder};
             color: ${props.theme.color.gunMetal};
           `
     }

diff --git a/src/theme.ts b/src/theme.ts
@@ -26,6 +26,7 @@ export const THEME = {
     blueYonder25: '#D4DDE7',
     blueGray: '#5697D2',
     blueGray25: '#D4E5F4',
+    blueGrayBorder: '#AECEEA',
     mayaBlue: '#5FBDFC',
     maximumRed: '#E1000F',
     maximumRed15: '#FBD9DB',
@@ -36,6 +37,7 @@ export const THEME = {
     mediumSeaGreen25: '#c9ecd7',
     goldenPoppy: '#FAC11A',
     goldenPoppy25: '#FDF3C3',
+    goldenPoppyBorder: '#FEE291',
 
     /** CONTEXTUAL COLORS */