fix(frontend): fix notification styles and icon (#2252)

kubeshop · Mar 27, 2023 · c2a4108 · c2a4108
1 parent 9471a24
commit c2a4108
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/web/src/constants/Theme.constants.ts b/web/src/constants/Theme.constants.ts
@@ -31,34 +31,39 @@ export const theme: DefaultTheme = {
   },
   notification: {
     success: {
+      color: '#52C41A',
       style: {
         border: '1px solid #52C41A',
         background: '#F6FFED',
         minWidth: '450px',
       },
     },
     error: {
+      color: '#EE1847',
       style: {
-        border: '1px solid #F5222D',
+        border: '1px solid #EE1847',
         background: '#FFF1F0',
         minWidth: '450px',
       },
     },
     info: {
+      color: '#3B61F6',
       style: {
         border: '1px solid #3B61F6',
-        background: '#3B61F61A',
+        background: '#E7EBFE',
         minWidth: '450px',
       },
     },
     warning: {
+      color: '#FAAD14',
       style: {
         border: '1px solid #FAAD14',
         background: '#FFFBE6',
         minWidth: '450px',
       },
     },
     open: {
+      color: '#3B61F6',
       style: {
         minWidth: '450px',
       },

diff --git a/web/src/hooks/useNotification.tsx b/web/src/hooks/useNotification.tsx
@@ -1,3 +1,4 @@
+import {CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined} from '@ant-design/icons';
 import {notification} from 'antd';
 import {NotificationInstance, ArgsProps} from 'antd/lib/notification/index';
 import {useCallback} from 'react';
@@ -10,6 +11,14 @@ export type IShowNotificationProps = Omit<ArgsProps, 'message' | 'type'> & {
 };
 export type TShowNotification = (props: IShowNotificationProps) => void;
 
+const icons: Record<TNotificationType, React.ComponentType> = {
+  info: InfoCircleOutlined,
+  success: CheckCircleOutlined,
+  error: CloseCircleOutlined,
+  warning: WarningOutlined,
+  open: InfoCircleOutlined,
+};
+
 const useNotification = () => {
   const [api, contextHolder] = notification.useNotification();
   const {notification: notificationStyles} = useTheme();
@@ -18,8 +27,9 @@ const useNotification = () => {
     ({type = 'info', title = '', ...rest}) => {
       const overwrite = notificationStyles[type];
       const notificationFn = api[type];
+      const Icon = icons[type] as React.ComponentType<{style: React.CSSProperties}>;
 
-      notificationFn({...overwrite, ...rest, message: title});
+      notificationFn({icon: <Icon style={{color: overwrite.color}} />, ...overwrite, ...rest, message: title});
     },
     [api, notificationStyles]
   );

diff --git a/web/src/styled.d.ts b/web/src/styled.d.ts
@@ -3,6 +3,7 @@ import {CSSProperties} from 'react';
 import 'styled-components';
 
 type TNotification = {
+  color: string;
   style: CSSProperties;
 };