fix: styles of the option page

DimensionDev · Jul 24, 2019 · 5141b78 · 5141b78
1 parent f116da0
commit 5141b78
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/src/components/Welcomes/0.tsx b/src/components/Welcomes/0.tsx
@@ -57,6 +57,9 @@ const useStyles = makeStyles(theme => ({
     navButtonIcon: {
         marginLeft: theme.spacing(1),
     },
+    commonButton: {
+        margin: '0 0.5rem',
+    },
 }))
 export default function Welcome({ create, restore, close }: Props) {
     const theme = useTheme()
@@ -82,7 +85,7 @@ export default function Welcome({ create, restore, close }: Props) {
                         <Typography variant="h6">{geti18nString('welcome_0_connect_facebook')}</Typography>
                     </Box>
                     <VerticalCenter>
-                        <Button onClick={create} variant="contained" color="primary">
+                        <Button className={classes.commonButton} onClick={create} variant="contained" color="primary">
                             {geti18nString('welcome_0_connect_facebook')}
                         </Button>
                     </VerticalCenter>
@@ -93,7 +96,7 @@ export default function Welcome({ create, restore, close }: Props) {
                         <Typography variant="h6">{geti18nString('welcome_0_restore_key')}</Typography>
                     </Box>
                     <VerticalCenter>
-                        <Button onClick={restore} variant="outlined">
+                        <Button className={classes.commonButton} onClick={restore} variant="outlined">
                             {geti18nString('restore')}
                         </Button>
                     </VerticalCenter>

diff --git a/src/components/Welcomes/1a4.auto.tsx b/src/components/Welcomes/1a4.auto.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'space-around',
     },
-    group: { flexDirection: 'row' },
+    group: { flexDirection: 'row', justifyContent: 'center' },
     radio: {
         marginTop: '-2em',
         marginBottom: '1em',

diff --git a/src/components/Welcomes/1b1.tsx b/src/components/Welcomes/1b1.tsx
@@ -51,6 +51,7 @@ const useStyles = makeStyles(theme => ({
         display: 'none',
     },
     restoreBox: {
+        width: '100%',
         color: 'gray',
         transition: '0.4s',
         '&[data-active=true]': {

diff --git a/src/extension/options-page/Welcome/index.tsx b/src/extension/options-page/Welcome/index.tsx
@@ -17,6 +17,7 @@ import { Identifier, PersonIdentifier } from '../../../database/type'
 import { MessageCenter } from '../../../utils/messages'
 import { ValueRef } from '@holoflows/kit/es'
 import { useValueRef } from '../../../utils/hooks/useValueRef'
+import { makeStyles } from '@material-ui/core'
 
 //#region Welcome
 enum WelcomeState {
@@ -135,10 +136,19 @@ const getMyProveBio = async () => {
 MessageCenter.on('generateKeyPair', getMyProveBio)
 IdentifierRef.addListener(getMyProveBio)
 
+const useStyles = makeStyles(theme => ({
+    full: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+}))
 export default withRouter(function _WelcomePortal(props: RouteComponentProps<{ identifier: string }>) {
     const [step, setStep] = useState(WelcomeState.Start)
     const provePost = useValueRef(ProvePostRef)
     const identifier = useValueRef(IdentifierRef)
+    const classes = useStyles()
 
     useEffect(() => {
         const raw = new URLSearchParams(props.location.search).get('identifier') || ''
@@ -150,7 +160,7 @@ export default withRouter(function _WelcomePortal(props: RouteComponentProps<{ i
     }, [props.location.search])
 
     return (
-        <ResponsiveDialog open>
+        <ResponsiveDialog classes={{ paperWidthSm: classes.full }} open>
             <Welcome
                 provePost={provePost}
                 currentStep={step}