fix(ui): banner for mobile

DimensionDev · Jul 16, 2019 · f697f4b · f697f4b
1 parent 9efd0aa
commit f697f4b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 31 deletions.
diff --git a/src/components/Welcomes/Banner.tsx b/src/components/Welcomes/Banner.tsx
@@ -2,22 +2,22 @@ import * as React from 'react'
 import CloseIcon from '@material-ui/icons/Close'
 import { geti18nString } from '../../utils/i18n'
 import { makeStyles } from '@material-ui/styles'
-import { AppBar, Toolbar, Typography, Button, IconButton, Box } from '@material-ui/core'
+import { AppBar, Typography, Button, IconButton, Hidden, SnackbarContent, Theme } from '@material-ui/core'
 
 interface Props {
     getStarted(): void
     close(): void
     disabled?: boolean
 }
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme: Theme) => ({
     root: {
         border: '1px solid #ccc',
         borderRadius: 4,
         marginBottom: 10,
     },
-    toolbar: {
-        display: 'flex',
-        paddingRight: 0,
+    snackbar: {
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.primary,
     },
     button: {
         padding: '4px 3em',
@@ -26,32 +26,44 @@ const useStyles = makeStyles({
         margin: 6,
         padding: 6,
     },
-})
+}))
 export function Banner(props: Props) {
     const classes = useStyles()
+    const Title = (
+        <Typography variant="subtitle1" color="inherit">
+            {props.disabled ? geti18nString('banner_collecting_identity') : geti18nString('banner_title')}
+        </Typography>
+    )
+    const GetStarted = (
+        <Button
+            onClick={props.getStarted}
+            classes={{ root: classes.button }}
+            variant="contained"
+            disabled={props.disabled}
+            color="primary">
+            {geti18nString('banner_get_started')}
+        </Button>
+    )
+    const DismissIcon = (
+        <IconButton
+            aria-label={geti18nString('banner_dismiss_aria')}
+            onClick={props.close}
+            classes={{ root: classes.close }}>
+            <CloseIcon />
+        </IconButton>
+    )
     return (
         <AppBar position="static" color="default" elevation={0} classes={{ root: classes.root }}>
-            <Toolbar className={classes.toolbar}>
-                <Box flex={1}>
-                    <Typography variant="subtitle1" color="inherit">
-                        {props.disabled ? geti18nString('banner_collecting_identity') : geti18nString('banner_title')}
-                    </Typography>
-                </Box>
-                <Button
-                    onClick={props.getStarted}
-                    classes={{ root: classes.button }}
-                    variant="contained"
-                    disabled={props.disabled}
-                    color="primary">
-                    {geti18nString('banner_get_started')}
-                </Button>
-                <IconButton
-                    aria-label={geti18nString('banner_dismiss_aria')}
-                    onClick={props.close}
-                    classes={{ root: classes.close }}>
-                    <CloseIcon />
-                </IconButton>
-            </Toolbar>
+            <SnackbarContent
+                classes={{ root: classes.snackbar }}
+                message={Title}
+                action={
+                    <>
+                        {GetStarted}
+                        <Hidden smDown>{DismissIcon}</Hidden>
+                    </>
+                }
+            />
         </AppBar>
     )
 }
diff --git a/src/stories/Welcome.tsx b/src/stories/Welcome.tsx
@@ -7,11 +7,13 @@ import Welcome1a4v2 from '../components/Welcomes/1a4.v2'
 import Welcome1b1 from '../components/Welcomes/1b1'
 import Welcome2 from '../components/Welcomes/2'
 import { linkTo as to, linkTo } from '@storybook/addon-links'
-import { text } from '@storybook/addon-knobs'
+import { text, boolean } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import { Banner } from '../components/Welcomes/Banner'
 storiesOf('Welcome', module)
-    .add('Banner', () => <Banner disabled={false} close={action('Close')} getStarted={to('Welcome', 'Step 0')} />)
+    .add('Banner', () => (
+        <Banner disabled={boolean('disabled', false)} close={action('Close')} getStarted={to('Welcome', 'Step 0')} />
+    ))
     .add('Step 0', () => (
         <Welcome0 close={action('Close')} create={to('Welcome', 'Step 1a-2')} restore={to('Welcome', 'Step 1b-1')} />
     ))

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -30,11 +30,9 @@ const baseTheme = (theme: 'dark' | 'light') =>
             MuiButton: {
                 root: {
                     textTransform: 'none',
-                    padding: _refTheme.spacing(1, 3),
                 },
                 outlined: {
                     background: theme === 'light' ? 'white' : _refThemeDark.palette.background.default,
-                    padding: _refTheme.spacing(1, 3),
                 },
             },
             MuiCard: {