feat: info page redesign (#390)

* feat: info page redesign

* feat: add chequebook card

src/components/Card.tsx

@@ -0,0 +1,77 @@
+import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { AlertCircle, Check } from 'react-feather'
+import { SwarmButton, SwarmButtonProps } from './SwarmButton'
+
+interface Props {
+  icon: ReactElement
+  title: string
+  subtitle: string
+  buttonProps: SwarmButtonProps
+  status: 'ok' | 'error'
+}
+
+const useStyles = (backgroundColor: string) =>
+  makeStyles((theme: Theme) =>
+    createStyles({
+      root: {
+        flexGrow: 1,
+        flexBasis: '100px',
+      },
+      wrapper: {
+        backgroundColor,
+        padding: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        textAlign: 'center',
+      },
+      iconWrapper: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        marginBottom: '18px',
+      },
+      button: {
+        width: '100%',
+        marginTop: '2px',
+        backgroundColor,
+        '&:hover': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+          // https://github.com/mui-org/material-ui/issues/22543
+          '@media (hover: none)': {
+            backgroundColor: theme.palette.primary.main,
+            color: 'white',
+            boxShadow: 'none',
+          },
+        },
+      },
+    }),
+  )
+
+export default function Card({ buttonProps, icon, title, subtitle, status }: Props): ReactElement {
+  const backgroundColor = status === 'error' ? 'white' : '#f3f3f3'
+  const { className, ...rest } = buttonProps
+  const classes = useStyles(backgroundColor)()
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <div className={classes.iconWrapper}>
+          {icon}
+          {status === 'ok' ? (
+            <Check size="13" stroke="#09ca6c" />
+          ) : (
+            <AlertCircle size="13" fill="#f44336" stroke="white" />
+          )}
+        </div>
+        <Typography variant="h2" style={{ marginBottom: '8px' }}>
+          {title}
+        </Typography>
+        <Typography variant="caption">{subtitle}</Typography>
+      </div>
+      <SwarmButton className={[classes.button, className].join(' ')} {...rest} />
+    </div>
+  )
+}

src/components/Map.tsx

@@ -0,0 +1,9 @@
+import { ReactElement, CSSProperties } from 'react'
+
+interface Props {
+  style?: CSSProperties
+}
+
+export default function Card({ style }: Props): ReactElement {
+  return <div style={Object.assign({}, style, { width: '100%', height: '380px', backgroundColor: '#f3f3f3' })}></div>
+}

src/components/SwarmButton.tsx

@@ -1,13 +1,9 @@
-import { Button, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import React, { ReactElement } from 'react'
 import { IconProps } from 'react-feather'
 
-interface Props {
-  onClick: () => void
+export interface SwarmButtonProps extends ButtonProps {
   iconType: React.ComponentType<IconProps>
-  children: string
-  className?: string
-  disabled?: boolean
   loading?: boolean
   cancel?: boolean
   variant?: 'text' | 'contained' | 'outlined'
@@ -51,7 +47,9 @@ export function SwarmButton({
   loading,
   cancel,
   variant = 'contained',
-}: Props): ReactElement {
+  style,
+  ...other
+}: SwarmButtonProps): ReactElement {
   const classes = useStyles()
 
   function getIconColor() {
@@ -73,14 +71,18 @@ export function SwarmButton({
 
   return (
     <Button
+      style={style}
       className={getButtonClassName()}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        onClick()
-        event.currentTarget.blur()
+        if (onClick) {
+          onClick(event)
+          event.currentTarget.blur()
+        }
       }}
       variant={variant}
       startIcon={icon}
       disabled={disabled}
+      {...other}
     >
       {children}
       {loading && (