redesign sigup form

2022-05-02 21:37:00 +05:30 · 2022-05-02 21:37:00 +05:30 · 288a364ef5
parent adff989973
commit 288a364ef5
8 changed files with 153 additions and 108 deletions
--- a/src/components/Card/Title.tsx
+++ b/src/components/Card/Title.tsx
@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { Typography, TypographyProps } from '@mui/material';
+
+const CardTitle: FC<TypographyProps> = (props) => {
+    return (
+        <Typography
+            sx={{
+                fontSize: '32px',
+                fontWeight: '600',
+                textAlign: 'left',
+                mb: 8,
+            }}
+            {...props}>
+            {props.children}
+        </Typography>
+    );
+};
+
+export default CardTitle;
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@ -1,25 +1,30 @@
 import React, { useState } from 'react';
-import Form from 'react-bootstrap/Form';
-import FormControl from 'react-bootstrap/FormControl';
 import constants from 'utils/strings/constants';
 import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import { getOtt } from 'services/userService';
-import Card from 'react-bootstrap/Card';
 import { setData, LS_KEYS } from 'utils/storage/localStorage';
 import { useRouter } from 'next/router';
 import SubmitButton from 'components/SubmitButton';
-import { Button } from 'react-bootstrap';
 import {
    generateAndSaveIntermediateKeyAttributes,
    generateKeyAttributes,
    SaveKeyInSessionStore,
 } from 'utils/crypto';
 import { setJustSignedUp } from 'utils/storage';
-import LogoImg from './LogoImg';
 import { logError } from 'utils/sentry';
 import { SESSION_KEYS } from 'utils/storage/sessionStorage';
 import { PAGES } from 'constants/pages';
+import {
+    Checkbox,
+    Container,
+    Divider,
+    FormControlLabel,
+    FormGroup,
+    TextField,
+} from '@mui/material';
+import CardTitle from './Card/Title';
+import LinkButton from './pages/gallery/LinkButton';

 interface FormValues {
    email: string;
@ -87,10 +92,7 @@ export default function SignUp(props: SignUpProps) {

    return (
        <>
-            <Card.Title style={{ marginBottom: '32px' }}>
-                <LogoImg src="/icon.svg" />
-                {constants.SIGN_UP}
-            </Card.Title>
+            <CardTitle> {constants.SIGN_UP}</CardTitle>
            <Formik<FormValues>
                initialValues={{
                    email: '',
@ -110,83 +112,87 @@ export default function SignUp(props: SignUpProps) {
                {({
                    values,
                    errors,
-                    touched,
                    handleChange,
                    handleSubmit,
                }): JSX.Element => (
-                    <Form noValidate onSubmit={handleSubmit}>
-                        <Form.Group controlId="registrationForm.email">
-                            <Form.Control
-                                type="email"
-                                placeholder={constants.ENTER_EMAIL}
-                                value={values.email}
-                                onChange={handleChange('email')}
-                                isInvalid={Boolean(
-                                    touched.email && errors.email
-                                )}
-                                autoFocus
-                                disabled={loading}
+                    <>
+                        <form noValidate onSubmit={handleSubmit}>
+                            <Container disableGutters sx={{ mb: 1 }}>
+                                <TextField
+                                    variant="filled"
+                                    fullWidth
+                                    margin="dense"
+                                    type="email"
+                                    label={constants.ENTER_EMAIL}
+                                    value={values.email}
+                                    onChange={handleChange('email')}
+                                    error={Boolean(errors.email)}
+                                    helperText={errors.email}
+                                    autoFocus
+                                    disabled={loading}
+                                />
+
+                                <TextField
+                                    fullWidth
+                                    variant="filled"
+                                    margin="dense"
+                                    type="password"
+                                    label={constants.PASSPHRASE_HINT}
+                                    value={values.passphrase}
+                                    onChange={handleChange('passphrase')}
+                                    error={Boolean(errors.passphrase)}
+                                    helperText={errors.passphrase}
+                                    disabled={loading}
+                                />
+
+                                <TextField
+                                    fullWidth
+                                    variant="filled"
+                                    margin="dense"
+                                    type="password"
+                                    label={constants.CONFIRM_PASSPHRASE}
+                                    value={values.confirm}
+                                    onChange={handleChange('confirm')}
+                                    error={Boolean(errors.confirm)}
+                                    helperText={errors.confirm}
+                                    disabled={loading}
+                                />
+                                <FormGroup>
+                                    <FormControlLabel
+                                        sx={{
+                                            color: 'text.secondary',
+                                            mt: 2,
+                                        }}
+                                        control={
+                                            <Checkbox
+                                                disabled={loading}
+                                                checked={acceptTerms}
+                                                onChange={(e) =>
+                                                    setAcceptTerms(
+                                                        e.target.checked
+                                                    )
+                                                }
+                                                color="success"
+                                            />
+                                        }
+                                        label={constants.TERMS_AND_CONDITIONS()}
+                                    />
+                                </FormGroup>
+                            </Container>
+                            <SubmitButton
+                                buttonText={constants.CREATE_ACCOUNT}
+                                loading={loading}
+                                disabled={!acceptTerms}
                            />
-                            <FormControl.Feedback type="invalid">
-                                {errors.email}
-                            </FormControl.Feedback>
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Control
-                                type="password"
-                                placeholder={constants.PASSPHRASE_HINT}
-                                value={values.passphrase}
-                                onChange={handleChange('passphrase')}
-                                isInvalid={Boolean(
-                                    touched.passphrase && errors.passphrase
-                                )}
-                                disabled={loading}
-                            />
-                            <Form.Control.Feedback type="invalid">
-                                {errors.passphrase}
-                            </Form.Control.Feedback>
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Control
-                                type="password"
-                                placeholder={constants.RE_ENTER_PASSPHRASE}
-                                value={values.confirm}
-                                onChange={handleChange('confirm')}
-                                isInvalid={Boolean(
-                                    touched.confirm && errors.confirm
-                                )}
-                                disabled={loading}
-                            />
-                            <Form.Control.Feedback type="invalid">
-                                {errors.confirm}
-                            </Form.Control.Feedback>
-                        </Form.Group>
-                        <Form.Group
-                            style={{
-                                marginBottom: '0',
-                                textAlign: 'left',
-                            }}
-                            controlId="formBasicCheckbox-1">
-                            <Form.Check
-                                checked={acceptTerms}
-                                onChange={(e) =>
-                                    setAcceptTerms(e.target.checked)
-                                }
-                                type="checkbox"
-                                label={constants.TERMS_AND_CONDITIONS()}
-                            />
-                        </Form.Group>
-                        <br />
-                        <SubmitButton
-                            buttonText={constants.SUBMIT}
-                            loading={loading}
-                            disabled={!acceptTerms}
-                        />
-                        <br />
-                        <Button block variant="link" onClick={props.login}>
+                        </form>
+                        <Divider />
+                        <LinkButton
+                            onClick={props.login}
+                            color={'text.secondary'}
+                            sx={{ mt: 3 }}>
                            {constants.ACCOUNT_EXISTS}
-                        </Button>
-                    </Form>
+                        </LinkButton>
+                    </>
                )}
            </Formik>
        </>
--- a/src/components/SubmitButton.tsx
+++ b/src/components/SubmitButton.tsx
@ -15,7 +15,8 @@ const SubmitButton: FC<ButtonProps<'button', Props>> = ({
 }: Props) => {
    return (
        <Button
-            sx={{ my: 2 }}
+            size="large"
+            sx={{ my: 4, p: '12.25px', fontSize: '18px' }}
            variant="contained"
            color="success"
            type="submit"
--- a/src/components/pages/gallery/LinkButton.tsx
+++ b/src/components/pages/gallery/LinkButton.tsx
@ -31,13 +31,20 @@ export function getVariantColor(variant: string) {

 const LinkButton: FC<LinkProps<'button', { color?: ButtonProps['color'] }>> = ({
    children,
+    sx,
    ...props
 }) => {
    return (
        <Link
            component="button"
-            {...props}
-            sx={{ color: props.color && `${props.color}.main` }}>
+            sx={{
+                color:
+                    props.color && typeof props.color === 'object'
+                        ? `${props.color}.main`
+                        : props.color,
+                ...sx,
+            }}
+            {...props}>
            {children}
        </Link>
    );
--- a/src/darkThemeOptions.tsx
+++ b/src/darkThemeOptions.tsx
@ -34,7 +34,20 @@ const darkThemeOptions = createTheme({
    components: {
        MuiPaper: {
            styleOverrides: {
-                root: { borderRadius: '8px', backgroundColor: '#040404' },
+                root: { borderRadius: '8px', backgroundColor: '#0f0f0f' },
+            },
+        },
+        MuiLink: {
+            defaultProps: {
+                color: 'inherit',
+            },
+            styleOverrides: {
+                root: {
+                    textDecorationColor: 'inherit',
+                    '&:hover': {
+                        color: 'hsla(141, 66%, 50%, 1)',
+                    },
+                },
            },
        },
        MuiButton: {
--- a/src/pages/signup/index.tsx
+++ b/src/pages/signup/index.tsx
@ -1,12 +1,13 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useRouter } from 'next/router';
-import Card from 'react-bootstrap/Card';
 import { AppContext } from 'pages/_app';
 import Container from 'components/Container';
 import EnteSpinner from 'components/EnteSpinner';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import SignUp from 'components/SignUp';
 import { PAGES } from 'constants/pages';
+import Card from '@mui/material/Card';
+import { CardContent } from '@mui/material';

 export default function SignUpPage() {
    const router = useRouter();
@ -29,14 +30,14 @@ export default function SignUpPage() {
    };

    return (
-        <Container>
+        <Container style={{ alignItems: 'flex-end' }}>
            {loading ? (
                <EnteSpinner />
            ) : (
-                <Card style={{ minWidth: '320px' }} className="text-center">
-                    <Card.Body style={{ padding: '40px 30px' }}>
+                <Card sx={{ maxWidth: '360px' }}>
+                    <CardContent sx={{ py: 4, px: 2 }}>
                        <SignUp login={login} />
-                    </Card.Body>
+                    </CardContent>
                </Card>
            )}
        </Container>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -233,12 +233,8 @@ html, body {
    background-color: #44774d;
 }

-a {
-    color: #fff;
-}
-a:hover {
-    color: #51cd7c;
-}
+
+
 .btn-link {
    color: #fff;
 }
@ -469,9 +465,7 @@ div.otp-input input:not(:placeholder-shown) , div.otp-input input:focus{
 .react-datepicker__day--disabled:hover {
    background-color: #202020;
 }
-.ente-form-group{
-    margin:0;
-}
+
 .form-check-input:hover, .form-check-label :hover{
    cursor:pointer;
 }
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@ -1,3 +1,4 @@
+import Link from '@mui/material/Link';
 import React from 'react';
 import styled from 'styled-components';

@ -49,7 +50,7 @@ const englishConstants = {
        'reliably replicated to a fallout shelter, designed to outlive',
    COMPANY_NAME: 'ente',
    LOGIN: 'log in',
-    SIGN_UP: 'sign up',
+    SIGN_UP: 'Signup',
    NAME: 'name',
    ENTER_NAME: 'your name',
    EMAIL: 'email',
@ -89,8 +90,7 @@ const englishConstants = {
        </p>
    ),
    PASSPHRASE_HINT: 'password',
-    RE_ENTER_PASSPHRASE: 'password again',
-    CONFIRM_PASSPHRASE: 'confirm your password',
+    CONFIRM_PASSPHRASE: 'confirm password',
    PASSPHRASE_MATCH_ERROR: "passwords don't match",
    CONSOLE_WARNING_STOP: 'STOP!',
    CONSOLE_WARNING_DESC:
@ -389,16 +389,19 @@ const englishConstants = {
        <span>try searching for New York, April 14, Christmas...</span>
    ),
    TERMS_AND_CONDITIONS: () => (
-        <p>
+        <>
            I agree to the{' '}
-            <a href="https://ente.io/terms" target="_blank" rel="noreferrer">
+            <Link href="https://ente.io/terms" target="_blank" rel="noreferrer">
                terms
-            </a>{' '}
+            </Link>{' '}
            and{' '}
-            <a href="https://ente.io/privacy" target="_blank" rel="noreferrer">
+            <Link
+                href="https://ente.io/privacy"
+                target="_blank"
+                rel="noreferrer">
                privacy policy
-            </a>{' '}
-        </p>
+            </Link>{' '}
+        </>
    ),
    CONFIRM_PASSWORD_NOT_SAVED: () => (
        <p>
@ -722,6 +725,7 @@ const englishConstants = {
    ENDS: 'Ends',
    ENTER_TWO_FACTOR_OTP:
        ' enter the 6-digit code from your authenticator app.',
+    CREATE_ACCOUNT: 'Create Account',
 };

 export default englishConstants;