pixel perfect signup form

src/components/Form/FormPaper/index.tsx

@@ -2,7 +2,6 @@ import { Paper, styled } from '@mui/material';
 
 const FormPaper = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(4, 2),
-    maxWidth: '360px',
     marginRight: theme.spacing(10),
     [theme.breakpoints.down('md')]: {
         marginRight: theme.spacing(5),

src/components/SignUp.tsx

@@ -157,7 +157,7 @@ export default function SignUp(props: SignUpProps) {
                                 helperText={errors.confirm}
                                 disabled={loading}
                             />
-                            <FormGroup>
+                            <FormGroup sx={{ width: '100%' }}>
                                 <FormControlLabel
                                     sx={{
                                         color: 'text.secondary',
@@ -170,7 +170,7 @@ export default function SignUp(props: SignUpProps) {
                                             onChange={(e) =>
                                                 setAcceptTerms(e.target.checked)
                                             }
-                                            color="success"
+                                            color="accent"
                                         />
                                     }
                                     label={constants.TERMS_AND_CONDITIONS()}
@@ -187,7 +187,7 @@ export default function SignUp(props: SignUpProps) {
             </Formik>
             <Divider />
             <FormPaperFooter>
-                <LinkButton onClick={props.login} color={'text.secondary'}>
+                <LinkButton onClick={props.login}>
                     {constants.ACCOUNT_EXISTS}
                 </LinkButton>
             </FormPaperFooter>

src/components/SubmitButton.tsx

@@ -18,7 +18,7 @@ const SubmitButton: FC<ButtonProps<'button', Props>> = ({
             size="large"
             sx={{ my: 4, p: '12.25px', fontSize: '18px' }}
             variant="contained"
-            color="success"
+            color="accent"
             type="submit"
             fullWidth={!inline}
             disabled={loading || disabled}>

src/pages/signup/index.tsx

@@ -33,7 +33,7 @@ export default function SignUpPage() {
             {loading ? (
                 <EnteSpinner />
             ) : (
-                <FormPaper>
+                <FormPaper sx={{ minWidth: '360px' }}>
                     <SignUp login={login} />
                 </FormPaper>
             )}