Merge pull request #349 from qdrant/CF-1463

Author: nikhil-varma

src/theme/dark-theme.js

@@ -108,13 +108,58 @@ const darkPalette = {
   alertErrorColor: '#f4c7c7ff',
   stepperConnector: grey[600],
   chipDefaultFocusFill: '#ffffff33',
-  alertErrorBackground: '#291414ff',
-  alertWarningColor: '#ffe2b7ff',
-  alertWarningBackground: '#291d0bff',
-  alertInfoColor: '#b8e7fbff',
-  alertInfoBackground: '#0c2029ff',
-  alertSuccessColor: '#cce8cdff',
-  alertSuccessBackground: '#1a291cff',
+  alert: {
+    dark: {
+      standardSuccess: {
+        backgroundColor: '#1A2928',
+        color: '#CCE8E4',
+      },
+      standardError: {
+        backgroundColor: '#291414',
+        color: '#F4C7C7',
+      },
+      standardWarning: {
+        backgroundColor: '#291D0B',
+        color: '#FFE2B7',
+      },
+      standardInfo: {
+        backgroundColor: '#0C2029',
+        color: '#B8E7FB',
+      },
+      filledSuccess: {
+        backgroundColor: '#26A69A',
+        color: '#0B0F19',
+      },
+      filledError: {
+        backgroundColor: '#F44336',
+        color: '#FCFDFF',
+      },
+      filledWarning: {
+        backgroundColor: '#FFA726',
+        color: '#0B0F19',
+      },
+      filledInfo: {
+        backgroundColor: '#29B6F6',
+        color: '#0B0F19',
+      },
+      outlinedSuccess: {
+        borderColor: '#26A69A',
+        color: '#CCE8E4',
+      },
+      outlinedError: {
+        borderColor: '#F44336',
+        color: '#F4C7C7',
+      },
+      outlinedWarning: {
+        borderColor: '#FFA726',
+        color: '#FFE2B7',
+      },
+      outlinedInfo: {
+        borderColor: '#29B6F6',
+        color: '#B8E7FB',
+      },
+    },
+  },
   switchKnowFillDisabled: grey[600],
   nativeScrollbarBg: grey[700],
   divider: '#ffffff1f',
@@ -125,24 +170,7 @@ export const darkThemeOptions = {
   components: {
     MuiAlert: {
       styleOverrides: {
-        root: {
-          '&.MuiAlert-standardSuccess': {
-            backgroundColor: darkPalette.alertSuccessBackground,
-            color: darkPalette.alertSuccessColor,
-          },
-          '&.MuiAlert-standardInfo': {
-            backgroundColor: darkPalette.alertInfoBackground,
-            color: darkPalette.alertInfoColor,
-          },
-          '&.MuiAlert-standardWarning': {
-            backgroundColor: darkPalette.alertWarningBackground,
-            color: darkPalette.alertWarningColor,
-          },
-          '&.MuiAlert-standardError': {
-            backgroundColor: darkPalette.alertErrorBackground,
-            color: darkPalette.alertErrorColor,
-          },
-        },
+        ...darkPalette.alert.dark,
       },
     },
   },

src/theme/light-theme.js

@@ -108,13 +108,58 @@ const lightPalette = {
   alertErrorColor: '#5f2120ff',
   stepperConnector: grey[400],
   chipDefaultFocusFill: '#00000033',
-  alertErrorBackground: '#fdededff',
-  alertWarningColor: '#663c00ff',
-  alertWarningBackground: '#fff4e5ff',
-  alertInfoColor: '#014361ff',
-  alertInfoBackground: '#e5f6fdff',
-  alertSuccessColor: '#1e4641ff',
-  alertSuccessBackground: '#edf7f5ff',
+  alert: {
+    light: {
+      standardSuccess: {
+        backgroundColor: '#EDF7F5',
+        color: '#1E4641',
+      },
+      standardError: {
+        backgroundColor: '#FDEDED',
+        color: '#5F2120',
+      },
+      standardWarning: {
+        backgroundColor: '#FFF4E5',
+        color: '#663C00',
+      },
+      standardInfo: {
+        backgroundColor: '#E5F6FD',
+        color: '#014361',
+      },
+      filledSuccess: {
+        backgroundColor: '#00897B',
+        color: '#FFFFFF',
+      },
+      filledError: {
+        backgroundColor: '#D32F2F',
+        color: '#FFFFFF',
+      },
+      filledWarning: {
+        backgroundColor: '#EF6C00',
+        color: '#FFFFFF',
+      },
+      filledInfo: {
+        backgroundColor: '#0288D1',
+        color: '#FFFFFF',
+      },
+      outlinedSuccess: {
+        borderColor: '#1F978B',
+        color: '#1E4641',
+      },
+      outlinedError: {
+        borderColor: '#D32F2F',
+        color: '#5F2120',
+      },
+      outlinedWarning: {
+        borderColor: '#EF6C00',
+        color: '#663C00',
+      },
+      outlinedInfo: {
+        borderColor: '#0288D1',
+        color: '#014361',
+      },
+    },
+  },
   switchKnowFillDisabled: grey[100],
   nativeScrollbarBg: grey[200],
   divider: '#0000001f',
@@ -134,24 +179,7 @@ export const lightThemeOptions = {
     },
     MuiAlert: {
       styleOverrides: {
-        root: {
-          '&.MuiAlert-standardSuccess': {
-            backgroundColor: lightPalette.alertSuccessBackground,
-            color: lightPalette.alertSuccessColor,
-          },
-          '&.MuiAlert-standardInfo': {
-            backgroundColor: lightPalette.alertInfoBackground,
-            color: lightPalette.alertInfoColor,
-          },
-          '&.MuiAlert-standardWarning': {
-            backgroundColor: lightPalette.alertWarningBackground,
-            color: lightPalette.alertWarningColor,
-          },
-          '&.MuiAlert-standardError': {
-            backgroundColor: lightPalette.alertErrorBackground,
-            color: lightPalette.alertErrorColor,
-          },
-        },
+        ...lightPalette.alert.light,
       },
     },
   },