From deafd23e9cc894f20c30773036c9bcea7d10e000 Mon Sep 17 00:00:00 2001
From: Isaac Tait <isaac@mountaintopcoding.com>
Date: Tue, 21 Jun 2022 19:45:49 -0400
Subject: [PATCH 1/2] chore: Update auth pages ui @Isaac-Tait

---
 .../pages/ForgotPasswordPage/ForgotPasswordPage.js |  6 +++---
 web/src/pages/LoginPage/LoginPage.js               | 10 ++++------
 .../pages/ResetPasswordPage/ResetPasswordPage.js   | 12 +++---------
 web/src/pages/SignupPage/SignupPage.js             | 14 +++++---------
 web/src/scaffold.css                               |  1 +
 5 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js b/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js
index 3dd6f973..7e892d41 100644
--- a/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js
+++ b/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js
@@ -6,6 +6,8 @@ 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>
diff --git a/web/src/pages/LoginPage/LoginPage.js b/web/src/pages/LoginPage/LoginPage.js
index 9145a56f..5f01210a 100644
--- a/web/src/pages/LoginPage/LoginPage.js
+++ b/web/src/pages/LoginPage/LoginPage.js
@@ -1,5 +1,4 @@
-import { useRef } from 'react'
-import { useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 
 import { useAuth } from '@redwoodjs/auth'
 import {
@@ -7,13 +6,14 @@ import {
   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>
diff --git a/web/src/pages/ResetPasswordPage/ResetPasswordPage.js b/web/src/pages/ResetPasswordPage/ResetPasswordPage.js
index 24e773d9..6f8f950a 100644
--- a/web/src/pages/ResetPasswordPage/ResetPasswordPage.js
+++ b/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>
diff --git a/web/src/pages/SignupPage/SignupPage.js b/web/src/pages/SignupPage/SignupPage.js
index d31c96a6..3ad6f775 100644
--- a/web/src/pages/SignupPage/SignupPage.js
+++ b/web/src/pages/SignupPage/SignupPage.js
@@ -1,5 +1,4 @@
-import { useRef } from 'react'
-import { useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 
 import { useAuth } from '@redwoodjs/auth'
 import {
@@ -7,13 +6,14 @@ import {
   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>
diff --git a/web/src/scaffold.css b/web/src/scaffold.css
index 30928ab8..b47efa98 100644
--- a/web/src/scaffold.css
+++ b/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;

From ecec04278d7c35aadcef3c67a1304ea674246e42 Mon Sep 17 00:00:00 2001
From: Isaac Tait <isaac@mountaintopcoding.com>
Date: Thu, 14 Jul 2022 12:51:27 -0400
Subject: [PATCH 2/2] chore: fix error Submit is defined but never used

---
 web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js b/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js
index 7e892d41..66d4fc1e 100644
--- a/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js
+++ b/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.js
@@ -1,7 +1,7 @@
 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'