fix: alert variants looking similar

soitun · Jan 13, 2021 · f857ee9 · f857ee9
1 parent c8aa1ca
commit f857ee9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/example/storybook/stories/components/composites/Alert/variant.tsx b/example/storybook/stories/components/composites/Alert/variant.tsx
@@ -4,19 +4,19 @@ import { Alert, Stack, AlertTitle, AlertIcon } from 'native-base';
 export default function () {
   return (
     <Stack space={4} mx={3}>
-      <Alert variant="solid" status="success">
+      <Alert variant="solid" status="teal">
         <AlertIcon />
         <AlertTitle>Alert Solid Variant</AlertTitle>
       </Alert>
       <Alert variant="left-accent" status="success">
         <AlertIcon />
         <AlertTitle>Alert Left Accent Variant</AlertTitle>
       </Alert>
-      <Alert variant="top-accent" status="success">
+      <Alert variant="top-accent" status="error">
         <AlertIcon />
         <AlertTitle>Alert Top Accent Variant</AlertTitle>
       </Alert>
-      <Alert status="success">
+      <Alert status="warning">
         <AlertIcon />
         <AlertTitle>Alert Default/Subtle Variant</AlertTitle>
       </Alert>

diff --git a/src/components/composites/Alert/props.tsx b/src/components/composites/Alert/props.tsx
@@ -4,7 +4,7 @@ export type IAlertProps = IBoxProps & {
   style?: any;
   status?: 'info' | 'warning' | 'success' | 'error' | string;
   children?: JSX.Element | JSX.Element[] | any;
-  variant?: string;
+  variant?: 'subtle' | 'solid' | 'left-accent' | 'top-accent';
   fontSize?: number;
 };
 export type IAlertContext = {

diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts
@@ -1,12 +1,18 @@
 import { mode, getColor, getColorScheme, transparentize } from '../tools';
 
 function getBg(props: Record<string, any>) {
-  let { theme, status } = props;
+  let { theme, status, variant } = props;
 
   status = getColorScheme(props, status);
-  const lightBg = getColor(theme, `${status}.100`, status);
+  const lightBg =
+    variant === 'solid'
+      ? getColor(theme, `${status}.400`, status)
+      : getColor(theme, `${status}.100`, status);
   // const darkBg = getColor(theme, `${status}.800`, status);
-  const darkBg = transparentize(`${status}.300`, 0.2)(theme);
+  const darkBg =
+    variant === 'solid'
+      ? transparentize(`${status}.300`, 0.8)(theme)
+      : transparentize(`${status}.300`, 0.2)(theme);
 
   return mode(lightBg, darkBg)(props);
 }
@@ -15,7 +21,7 @@ const variantSubtle = (props: Record<string, any>) => {
   let { status } = props;
   status = getColorScheme(props, status);
   let a = {
-    border: 6,
+    borderWidth: 6,
     borderColor: 'transparent',
     bg: getBg(props),
     iconColor: mode(`${status}.700`, `${status}.200`)(props),
@@ -27,32 +33,32 @@ const variantSolid = (props: Record<string, any>) => {
   let { status } = props;
   status = getColorScheme(props, status);
   return {
-    border: 6,
+    borderWidth: 6,
     borderColor: 'transparent',
     bg: getBg(props),
-    iconColor: mode(`${status}.700`, `${status}.200`)(props),
-    textColor: mode('gray', 'white')(props),
+    iconColor: mode(`white`, `${status}.700`)(props),
+    textColor: mode('white', 'gray')(props),
   };
 };
 const variantLeftAccent = (props: Record<string, any>) => {
   let { status, theme } = props;
   status = getColorScheme(props, status);
   return {
-    border: 6,
+    borderWidth: 4,
     bg: getBg(props),
     iconColor: mode(`${status}.700`, `${status}.200`)(props),
     textColor: mode('gray', 'white')(props),
     borderColor: 'transparent',
-    borderLeftColor: theme.colors[status][100],
+    borderLeftColor: theme.colors[status][300],
   };
 };
 const variantTopAccent = (props: Record<string, any>) => {
   let { status, theme } = props;
   status = getColorScheme(props, status);
   return {
-    border: 6,
+    borderWidth: 4,
     borderColor: 'transparent',
-    borderTopColor: theme.colors[status][100],
+    borderTopColor: theme.colors[status][300],
     bg: getBg(props),
     iconColor: mode(`${status}.700`, `${status}.200`)(props),
     textColor: mode('gray', 'white')(props),