updated pages with submitButton

src/components/PassphraseForm.tsx

@@ -1,18 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import Container from 'components/Container';
-import styled from 'styled-components';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import constants from 'utils/strings/constants';
 import { Formik, FormikHelpers } from 'formik';
-import { getData, LS_KEYS } from 'utils/storage/localStorage';
-import { useRouter } from 'next/router';
 import * as Yup from 'yup';
-import { KeyAttributes } from 'types';
-import CryptoWorker, { setSessionKeys } from 'utils/crypto';
-import { Spinner } from 'react-bootstrap';
-import { propTypes } from 'react-bootstrap/esm/Image';
+import SubmitButton from './SubmitButton';
 
 interface formValues {
     passphrase: string;
@@ -83,13 +77,11 @@ export default function PassPhraseForm(props: Props) {
                                         {errors.passphrase}
                                     </Form.Control.Feedback>
                                 </Form.Group>
-                                <Button block type="submit" disabled={loading}>
-                                    {loading ? (
-                                        <Spinner animation="border" />
-                                    ) : (
-                                        props.buttonText
-                                    )}
-                                </Button>
+                                <SubmitButton
+                                    buttonText={props.buttonText}
+                                    loading={loading}
+                                />
+
                                 <br />
                                 <div
                                     style={{

src/components/PasswordForm.tsx

@@ -8,6 +8,7 @@ import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import Button from 'react-bootstrap/Button';
 import { Spinner } from 'react-bootstrap';
+import SubmitButton from './SubmitButton';
 
 interface Props {
     callback: (passphrase: any, setFieldError: any) => Promise<void>;
@@ -80,7 +81,7 @@ function SetPassword(props: Props) {
                                         onBlur={handleBlur('passphrase')}
                                         isInvalid={Boolean(
                                             touched.passphrase &&
-                                            errors.passphrase
+                                                errors.passphrase
                                         )}
                                         autoFocus={true}
                                         disabled={loading}
@@ -107,18 +108,10 @@ function SetPassword(props: Props) {
                                         {errors.confirm}
                                     </Form.Control.Feedback>
                                 </Form.Group>
-                                <Button
-                                    type="submit"
-                                    block
-                                    disabled={loading}
-                                    style={{ marginTop: '28px' }}
-                                >
-                                    {loading ? (
-                                        <Spinner animation="border" />
-                                    ) : (
-                                        props.buttonText
-                                    )}
-                                </Button>
+                                <SubmitButton
+                                    buttonText={props.buttonText}
+                                    loading={loading}
+                                />
                             </Form>
                         )}
                     </Formik>

src/pages/_app.tsx

@@ -110,15 +110,15 @@ const GlobalStyles = createGlobalStyle`
         background-size: cover;
         border: none;
     }
-    .btn-primary {
+    .btn-success {
         background: #2dc262;
         border-color: #29a354;
     }
-    .btn-primary:hover {
+    .btn-success:hover ,.btn-success:focus .btn-success:active{
         background-color: #29a354;
         border-color: #2dc262;
     }
-    .btn-primary:disabled {
+    .btn-success:disabled {
         background-color: #69b383;
     }
     .btn-outline-success {
@@ -129,13 +129,7 @@ const GlobalStyles = createGlobalStyle`
     .btn-outline-success:hover {
         background: #2dc262;
     }
-    .btn-outline-danger {
-        border-width: 2px;
-    }
-    .btn-outline-secondary {
-        border-width: 2px;
-    }
-    .btn-outline-primary {
+    .btn-outline-danger, .btn-outline-secondary, .btn-outline-primary{
         border-width: 2px;
     }
     .card {
@@ -263,7 +257,7 @@ export default function App({ Component, pageProps, err }) {
             </Navbar>
             {loading ? (
                 <Container>
-                    <Spinner animation="border" role="status" variant="primary">
+                    <Spinner animation="border" role="status" variant="success">
                         <span className="sr-only">Loading...</span>
                     </Spinner>
                 </Container>

src/pages/index.tsx

@@ -10,6 +10,7 @@ import * as Yup from 'yup';
 import { getOtt } from 'services/userService';
 import Container from 'components/Container';
 import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
+import SubmitButton from 'components/SubmitButton';
 interface formValues {
     email: string;
 }
@@ -88,15 +89,10 @@ export default function Home() {
                                         {errors.email}
                                     </FormControl.Feedback>
                                 </Form.Group>
-                                <Button
-                                    variant="primary"
-                                    type="submit"
-                                    block
-                                    disabled={loading}
-                                    style={{ marginBottom: '12px' }}
-                                >
-                                    {constants.LOGIN}
-                                </Button>
+                                <SubmitButton
+                                    buttonText={constants.LOGIN}
+                                    loading={loading}
+                                />
                             </Form>
                         )}
                     </Formik>

src/pages/signup/index.tsx

@@ -11,6 +11,7 @@ import { getOtt } from 'services/userService';
 import Container from 'components/Container';
 import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
 import { DisclaimerContainer } from 'components/Container';
+import SubmitButton from 'components/SubmitButton';
 
 interface FormValues {
     name: string;
@@ -105,14 +106,11 @@ export default function Home() {
                                 <DisclaimerContainer>
                                     {constants.DATA_DISCLAIMER}
                                 </DisclaimerContainer>
-                                <Button
-                                    variant="primary"
-                                    type="submit"
-                                    block
-                                    disabled={loading}
-                                >
-                                    {constants.SUBMIT}
-                                </Button>
+
+                                <SubmitButton
+                                    buttonText={constants.SUBMIT}
+                                    loading={loading}
+                                />
                             </Form>
                         )}
                     </Formik>

src/pages/verify/index.tsx

@@ -17,6 +17,7 @@ import {
     isTokenValid,
 } from 'services/userService';
 import { setIsFirstLogin } from 'utils/storage';
+import SubmitButton from 'components/SubmitButton';
 
 const Image = styled.img`
     width: 350px;
@@ -145,9 +146,10 @@ export default function Verify() {
                                         {errors.ott}
                                     </Form.Control.Feedback>
                                 </Form.Group>
-                                <Button type="submit" block disabled={loading}>
-                                    {constants.VERIFY}
-                                </Button>
+                                <SubmitButton
+                                    buttonText={constants.VERIFY}
+                                    loading={loading}
+                                />
                                 <br />
                                 {resend === 0 && (
                                     <a href="#" onClick={resendEmail}>