Merge pull request #933 from blockscout/indexing-alert/change-color-scheme

change color scheme for indexing alert

theme/components/Alert/Alert.pw.tsx

+import type { AlertProps } from '@chakra-ui/react';
+import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+test.use({ viewport: { width: 400, height: 720 } });
+
+const TEST_CASES: Array<AlertProps> = [
+  {
+    status: 'info',
+  },
+  {
+    status: 'warning',
+  },
+  {
+    status: 'success',
+  },
+  {
+    status: 'error',
+  },
+  {
+    status: 'info',
+    colorScheme: 'gray',
+  },
+];
+
+TEST_CASES.forEach((props) => {
+  const testName = Object.entries(props).map(([ key, value ]) => `${ key }=${ value }`).join(', ');
+
+  test(`${ testName } +@dark-mode`, async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Alert { ...props }>
+          <AlertIcon/>
+          <AlertTitle>
+            This is alert text
+          </AlertTitle>
+        </Alert>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

theme/components/Alert.ts → theme/components/Alert/Alert.ts

 import { alertAnatomy as parts } from '@chakra-ui/anatomy';
 import type { StyleFunctionProps } from '@chakra-ui/styled-system';
-import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
-import { getColor, mode, transparentize } from '@chakra-ui/theme-tools';
+import { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/styled-system';
+import { transparentize } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
-function getBg(props: StyleFunctionProps): string {
+const $fg = cssVar('alert-fg');
+const $bg = cssVar('alert-bg');
+
+function getBg(props: StyleFunctionProps) {
   const { theme, colorScheme: c } = props;
-  const lightBg = getColor(theme, `${ c }.100`, c);
   const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
-
-  return mode(lightBg, darkBg)(props);
+  return {
+    light: `colors.${ c }.100`,
+    dark: darkBg,
+  };
 }
 
 const baseStyle = definePartsStyle({
   container: {
+    bg: $bg.reference,
     borderRadius: 'md',
     px: 6,
     py: 3,
   },
+  title: {
+    fontWeight: 'bold',
+    lineHeight: '6',
+    marginEnd: '2',
+  },
+  description: {
+    lineHeight: '6',
+  },
+  icon: {
+    color: $fg.reference,
+    flexShrink: 0,
+    marginEnd: '3',
+    w: '5',
+    h: '6',
+  },
+  spinner: {
+    color: $fg.reference,
+    flexShrink: 0,
+    marginEnd: '3',
+    w: '5',
+    h: '5',
+  },
 });
 
 const variantSubtle = definePartsStyle((props) => {
+  const { colorScheme } = props;
+  const bg = getBg(props);
+
+  return {
+    container: {
+      [$fg.variable]: colorScheme === 'gray' ? 'colors.blackAlpha.800' : `colors.${ colorScheme }.500`,
+      [$bg.variable]: colorScheme === 'gray' ? 'colors.gray.100' : bg.light,
+      _dark: {
+        [$fg.variable]: colorScheme === 'gray' ? 'colors.whiteAlpha.800' : `colors.${ colorScheme }.200`,
+        [$bg.variable]: colorScheme === 'gray' ? 'colors.gray.800' : bg.dark,
+      },
+    },
+  };
+});
+
+const variantSolid = definePartsStyle((props) => {
+  const { colorScheme: c } = props;
   return {
     container: {
-      bgColor: getBg(props),
+      [$fg.variable]: `colors.white`,
+      [$bg.variable]: `colors.${ c }.500`,
+      _dark: {
+        [$fg.variable]: `colors.gray.900`,
+        [$bg.variable]: `colors.${ c }.200`,
+      },
+      color: $fg.reference,
     },
   };
 });
 
 const variants = {
   subtle: variantSubtle,
+  solid: variantSolid,
 };
 
 const Alert = defineMultiStyleConfig({
   baseStyle,
   variants,
+  defaultProps: {
+    variant: 'subtle',
+    colorScheme: 'blue',
+  },
 });
 
 export default Alert;

theme/components/index.ts

-import Alert from './Alert';
+import Alert from './Alert/Alert';
 import Badge from './Badge';
 import Button from './Button/Button';
 import Checkbox from './Checkbox';

ui/home/IndexingAlert.tsx

@@ -97,7 +97,7 @@ const IndexingAlert = ({ className }: { className?: string }) => {
   }
 
   return (
-    <Alert status="warning" variant="solid" py={ 3 } borderRadius="12px" mb={ 6 } className={ className }>
+    <Alert status="info" colorScheme="gray" py={ 3 } borderRadius="12px" mb={ 6 } className={ className }>
       { !isMobile && <AlertIcon/> }
       <AlertTitle>
         { content }