feat: update toast colors

WeTrustPlatform · Nov 27, 2019 · 2509dab · 2509dab
1 parent cfd2767
commit 2509dab
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 11 deletions.
diff --git a/src/Alert.stories.tsx b/src/Alert.stories.tsx
@@ -0,0 +1,11 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { Box, Alert, Spacing } from 'paramount-ui';
+
+storiesOf('Alert', module).add('Intents', () => (
+  <Box>
+    <Alert intent="danger" description="primary" />
+    <Spacing />
+    <Alert intent="success" description="loading" />
+  </Box>
+));
diff --git a/src/AppProvider.tsx b/src/AppProvider.tsx
@@ -30,20 +30,78 @@ export const AppProvider = (props: AppProviderProps): JSX.Element => {
             text: 'proxima-nova, Arial, Helvetica, sans-serif',
           },
           overrides: {
+            Alert: {
+              Root: {
+                style: ({ intent }): ViewStyle => {
+                  if (intent === 'danger') {
+                    return {
+                      backgroundColor: '#fffcfc',
+                      borderWidth: 1,
+                      borderLeftWidth: 1,
+                      borderColor: '#d53939',
+                    };
+                  }
+
+                  if (intent === 'success') {
+                    return {
+                      backgroundColor: '#f9fffe',
+                      borderWidth: 1,
+                      borderLeftWidth: 1,
+                      borderColor: '#67c5bb',
+                    };
+                  }
+
+                  return {};
+                },
+              },
+              Description: {
+                props: ({ intent }) => {
+                  if (intent === 'danger') {
+                    return {
+                      align: 'center',
+                      color: '#d53939',
+                    };
+                  }
+
+                  if (intent === 'success') {
+                    return {
+                      align: 'center',
+                      color: '#67c5bb',
+                    };
+                  }
+
+                  return { align: 'center' };
+                },
+              },
+            },
             Button: {
               Touchable: {
-                style: ({ appearance }): ViewStyle => ({
-                  backgroundColor:
-                    appearance === 'primary' ? '#eb7209' : 'transparent',
-                  borderWidth: appearance === 'outline' ? 1 : 0,
-                  borderColor: '#eb7209',
-                }),
+                style: ({ appearance, isLoading }): ViewStyle => {
+                  const backgroundColor = isLoading
+                    ? '#fffcf5'
+                    : appearance === 'primary'
+                    ? '#eb7209'
+                    : 'transparent';
+
+                  return {
+                    backgroundColor,
+                    borderWidth: appearance === 'outline' ? 1 : 0,
+                    borderColor: '#eb7209',
+                  };
+                },
               },
               Title: {
-                style: ({ appearance }: any): TextStyle => ({
-                  fontSize: 18,
-                  color: appearance === 'primary' ? '#ffffff' : '#eb7209',
-                }),
+                style: ({ appearance }: any): TextStyle => {
+                  return {
+                    fontSize: 18,
+                    color: appearance === 'primary' ? '#ffffff' : '#eb7209',
+                  };
+                },
+              },
+              Loading: {
+                props: {
+                  appearance: 'primary',
+                },
               },
             },
           },

diff --git a/src/Button.stories.tsx b/src/Button.stories.tsx
@@ -5,6 +5,7 @@ import { Box, Button } from 'paramount-ui';
 storiesOf('Button', module).add('Appearances', () => (
   <Box>
     <Button appearance="primary" title="primary" />
+    <Button appearance="primary" title="loading" isLoading />
     <Button appearance="minimal" title="minimal" />
     <Button appearance="outline" title="outline" />
   </Box>

diff --git a/src/NavigationBar.tsx b/src/NavigationBar.tsx
@@ -71,7 +71,7 @@ const DesktopNavigationBar = (props: NavigationBarProps): JSX.Element => {
   );
 };
 
-const MobileNavigationMenuLink = (props: LinkProps) => {
+const MobileNavigationMenuLink = (props: LinkProps): JSX.Element => {
   const { children, to, onClick, isExternal } = props;
 
   return (