feat(webapp): style tweaks to authentication pages

packages/webapp/src/containers/Authentication/SendResetPasswordForm.tsx

@@ -1,43 +1,44 @@
 // @ts-nocheck
 import React from 'react';
-import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
-import { Form, ErrorMessage, FastField } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { Intent } from '@blueprintjs/core';
+import { Form } from 'formik';
+import styled from 'styled-components';
+
+import { FInputGroup, FFormGroup, FormattedMessage as T } from '@/components';
+import { AuthSubmitButton } from './_components';
 
 /**
  * Send reset password form.
  */
 export default function SendResetPasswordForm({ isSubmitting }) {
   return (
-    <Form className={'send-reset-password'}>
-      <FastField name={'crediential'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'email_or_phone_number'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'crediential'} />}
-            className={'form-group--crediential'}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              large={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+    <Form>
+      <TopParagraph>
+        Enter the email address associated with your account and we'll send you
+        a link to reset your password.
+      </TopParagraph>
 
-      <div className={'authentication-page__submit-button-wrap'}>
-        <Button
-          type={'submit'}
-          intent={Intent.PRIMARY}
-          fill={true}
-          loading={isSubmitting}
-        >
-          <T id={'send_reset_password_mail'} />
-        </Button>
-      </div>
+      <FFormGroup
+        name={'crediential'}
+        label={<T id={'email_or_phone_number'} />}
+      >
+        <FInputGroup name={'crediential'} large={true} />
+      </FFormGroup>
+
+      <AuthSubmitButton
+        type={'submit'}
+        intent={Intent.PRIMARY}
+        fill={true}
+        large={true}
+        loading={isSubmitting}
+      >
+        Reset Password
+      </AuthSubmitButton>
     </Form>
   );
 }
+
+const TopParagraph = styled.p`
+  margin-bottom: 1.6rem;
+  opacity: 0.8;
+`;