From 2adfb7bd15f4486559028547a55907f0d8fa2aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 12 Oct 2023 16:29:19 +0100
Subject: [PATCH] fix: error icon, add only relevant variants (#5014)

https://linear.app/unleash/issue/2-1508/fix-message-banner-error-variant-icon

After aligning with @nicolaesocaciu, we fixed the `error` variant icon
and removed irrelevant message variants for now.

Co-authored-by: Nicolae <nicolae@getunleash.ai>
---
 .../MessageBanner/MessageBanner.tsx           | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx b/frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx
index 105aa21c07a1..150053694c31 100644
--- a/frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx
+++ b/frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx
@@ -1,4 +1,9 @@
-import { Check, Close, InfoOutlined, WarningAmber } from '@mui/icons-material';
+import {
+    Check,
+    ErrorOutlineRounded,
+    InfoOutlined,
+    WarningAmber,
+} from '@mui/icons-material';
 import { styled, Icon, Link } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useNavigate } from 'react-router-dom';
@@ -37,13 +42,7 @@ const StyledIcon = styled('div', {
     color: theme.palette[variant].main,
 }));
 
-type BannerVariant =
-    | 'warning'
-    | 'info'
-    | 'error'
-    | 'success'
-    | 'neutral'
-    | 'secondary';
+type BannerVariant = 'warning' | 'info' | 'error' | 'success';
 
 export interface IMessageBanner {
     message: string;
@@ -66,7 +65,7 @@ export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => {
 
     const {
         message,
-        variant = 'neutral',
+        variant = 'info',
         sticky,
         icon,
         link,
@@ -103,10 +102,8 @@ export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => {
 const VariantIcons = {
     warning: <WarningAmber />,
     info: <InfoOutlined />,
-    error: <Close />,
+    error: <ErrorOutlineRounded />,
     success: <Check />,
-    neutral: <InfoOutlined />,
-    secondary: <InfoOutlined />,
 };
 
 interface IBannerIconProps {