chore: Update auth pages ui @Isaac-Tait

web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js

@@ -1,11 +1,13 @@
 import { useEffect, useRef } from 'react'
 
 import { useAuth } from '@redwoodjs/auth'
-import { Form, Label, TextField, Submit, FieldError } from '@redwoodjs/forms'
+import { Form, Label, TextField, FieldError } from '@redwoodjs/forms'
 import { navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import Button from 'src/components/Button'
+
 const ForgotPasswordPage = () => {
   const { forgotPassword } = useAuth()
 
@@ -68,9 +70,7 @@ const ForgotPasswordPage = () => {
                     <FieldError name="username" className="rw-field-error" />
                   </div>
 
-                  <div className="rw-button-group">
-                    <Submit className="rw-button rw-button-blue">Submit</Submit>
-                  </div>
+                  <Button>Submit</Button>
                 </Form>
               </div>
             </div>

web/src/pages/LoginPage/LoginPage.js

@@ -1,19 +1,19 @@
-import { useRef } from 'react'
-import { useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 
 import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
   EmailField,
   PasswordField,
-  Submit,
   FieldError,
 } from '@redwoodjs/forms'
 import { Link, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import Button from 'src/components/Button'
+
 const LoginPage = () => {
   const { logIn } = useAuth()
 
@@ -102,9 +102,7 @@ const LoginPage = () => {
 
                   <FieldError name="password" className="rw-field-error" />
 
-                  <div className="rw-button-group">
-                    <Submit className="rw-button rw-button-blue">Login</Submit>
-                  </div>
+                  <Button>Login</Button>
                 </Form>
               </div>
             </div>

web/src/pages/ResetPasswordPage/ResetPasswordPage.js

@@ -5,13 +5,14 @@ import {
   Form,
   Label,
   PasswordField,
-  Submit,
   FieldError,
 } from '@redwoodjs/forms'
 import { navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import Button from 'src/components/Button'
+
 const ResetPasswordPage = ({ resetToken }) => {
   const { reauthenticate, validateResetToken, resetPassword } = useAuth()
   const [enabled, setEnabled] = useState(true)
@@ -92,14 +93,7 @@ const ResetPasswordPage = ({ resetToken }) => {
                     <FieldError name="password" className="rw-field-error" />
                   </div>
 
-                  <div className="rw-button-group">
-                    <Submit
-                      className="rw-button rw-button-blue"
-                      disabled={!enabled}
-                    >
-                      Submit
-                    </Submit>
-                  </div>
+                  <Button disabled={!enabled}>Submit</Button>
                 </Form>
               </div>
             </div>

web/src/pages/SignupPage/SignupPage.js

@@ -1,19 +1,19 @@
-import { useRef } from 'react'
-import { useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 
 import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
   EmailField,
   PasswordField,
-  FieldError,
-  Submit,
+  FieldError
 } from '@redwoodjs/forms'
 import { Link, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import Button from 'src/components/Button'
+
 const SignupPage = () => {
   const { signUp } = useAuth()
 
@@ -95,11 +95,7 @@ const SignupPage = () => {
 
                   <FieldError name="password" className="rw-field-error" />
 
-                  <div className="rw-button-group">
-                    <Submit className="rw-button rw-button-blue">
-                      Sign Up
-                    </Submit>
-                  </div>
+                  <Button>Sign Up</Button>
                 </Form>
               </div>
             </div>

web/src/scaffold.css

@@ -215,6 +215,7 @@
 .rw-input {
   display: block;
   margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   width: 100%;
   padding: 0.5rem;
   border-width: 1px;