updated button styles

src/components/PassphraseForm.tsx

@@ -1,18 +1,10 @@
 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 { Card, Form, Spinner } from 'react-bootstrap';
 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';
 
 interface formValues {
     passphrase: string;
@@ -83,7 +75,12 @@ export default function PassPhraseForm(props: Props) {
                                         {errors.passphrase}
                                     </Form.Control.Feedback>
                                 </Form.Group>
-                                <Button block type="submit" disabled={loading}>
+                                <Button
+                                    variant="success"
+                                    block
+                                    type="submit"
+                                    disabled={loading}
+                                >
                                     {loading ? (
                                         <Spinner animation="border" />
                                     ) : (

src/components/PasswordForm.tsx

@@ -80,7 +80,7 @@ function SetPassword(props: Props) {
                                         onBlur={handleBlur('passphrase')}
                                         isInvalid={Boolean(
                                             touched.passphrase &&
-                                            errors.passphrase
+                                                errors.passphrase
                                         )}
                                         autoFocus={true}
                                         disabled={loading}
@@ -109,6 +109,7 @@ function SetPassword(props: Props) {
                                 </Form.Group>
                                 <Button
                                     type="submit"
+                                    variant="success"
                                     block
                                     disabled={loading}
                                     style={{ marginTop: '28px' }}

src/pages/gallery/components/CreateCollection.tsx

@@ -54,7 +54,7 @@ export default function CreateCollection(props: Props) {
                         />
                     </Form.Group>
                     <Button
-                        variant="primary"
+                        variant="outline-success"
                         type="submit"
                         style={{ width: '100%' }}
                     >

src/pages/gallery/components/PlanSelector.tsx

@@ -164,7 +164,10 @@ function PlanSelector(props: Props) {
                             : constants.CHOOSE_PLAN}
                     </span>
                     <span>
-                        <Button onClick={togglePeriod}>
+                        <Button
+                            variant="outline-primary"
+                            onClick={togglePeriod}
+                        >
                             <div style={{ fontSize: '20px', width: '80px' }}>
                                 {planPeriod}
                                 {'ly'}

src/pages/success.tsx

@@ -30,7 +30,10 @@ export default function SuccessRedirect() {
                                 subscription?.expiryTime
                             )}
                         </h4>
-                        <Button onClick={() => router.push('/gallery')}>
+                        <Button
+                            variant="success"
+                            onClick={() => router.push('/gallery')}
+                        >
                             Go Back To Gallery
                         </Button>
                     </>