Merge pull request #247 from coderoad/ui/error-view

clean up error ui view

Author: ShMcK

web-app/src/components/Button/index.tsx

@@ -9,6 +9,7 @@ interface Props {
   onClick?: () => void
   size?: 'small' | 'medium' | 'large'
   iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'
+  warning?: boolean
 }
 
 const Button = (props: Props) => (
@@ -19,6 +20,7 @@ const Button = (props: Props) => (
     style={props.style}
     size={props.size}
     iconSize={props.iconSize}
+    warning={props.warning}
   >
     {props.children}
   </AlifdButton>

web-app/src/components/Error/index.tsx

@@ -7,12 +7,28 @@ import Button from '../../components/Button'
 
 const styles = {
   container: {
-    color: '#D8000C',
-    backgroundColor: '#FFBABA',
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    justifyContent: 'center' as 'center',
+    alignItems: 'center' as 'center',
+    border: '0.5rem solid #FFBABA',
     padding: '1rem',
     width: '100%',
     height: '100%',
   },
+  content: {
+    textAlign: 'center' as 'center',
+    color: 'rgb(40, 40, 40);',
+  },
+  options: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    alignItems: 'center',
+  },
+  button: {
+    margin: '0.5rem',
+    width: '10rem',
+  },
 }
 
 interface Props {
@@ -34,15 +50,21 @@ const ErrorMarkdown = ({ error, send }: Props) => {
 
   return (
     <div css={styles.container}>
-      <h1>Error</h1>
-      <Markdown>{error.message}</Markdown>
+      <h1>Oops!</h1>
+      <div css={styles.content}>
+        <Markdown>{error.message}</Markdown>
+      </div>
+      <br />
+      <br />
       {/* Actions */}
-      {error.actions &&
-        error.actions.map((a) => (
-          <Button type="secondary" onClick={() => send({ type: a.transition })}>
-            {a.label}
-          </Button>
-        ))}
+      <div css={styles.options}>
+        {error.actions &&
+          error.actions.map((a) => (
+            <Button type="normal" warning style={styles.button} onClick={() => send({ type: a.transition })}>
+              {a.label}
+            </Button>
+          ))}
+      </div>
     </div>
   )
 }

web-app/stories/Error.stories.tsx

@@ -0,0 +1,20 @@
+import * as E from '../../typings/error'
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import ErrorView from '../src/components/Error'
+import SideBarDecorator from './utils/SideBarDecorator'
+
+storiesOf('Error', module)
+  .addDecorator(SideBarDecorator)
+  .add('Error', () => {
+    const error: E.ErrorMessage = {
+      type: 'UnknownError',
+      message: '### Message summary\n\nSome message about what went wrong under here',
+      actions: [
+        { label: 'First', transition: 'FIRST' },
+        { label: 'Second', transition: 'SECOND' },
+      ],
+    }
+    return <ErrorView error={error} send={action('send')} />
+  })