colin/redwood-tutorial
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds styling

Browse Source
This commit is contained in:
Rob Cameron
2020-10-07 16:12:09 -07:00
parent b00bd8bba6
commit 1e1166978b
7 changed files with 89 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/pages/ContactPage/ContactPage.js
View File

@@ -7,7 +7,7 @@ import {
Label,
FormError,
} from '@redwoodjs/forms'
import { Flash,useFlash,useMutation } from '@redwoodjs/web'
import { Flash, useFlash, useMutation } from '@redwoodjs/web'
import { useForm } from 'react-hook-form'
import BlogLayout from 'src/layouts/BlogLayout'
@@ -23,10 +23,10 @@ const ContactPage = () => {
const formMethods = useForm()
const { addMessage } = useFlash()
const [create,{ loading,error }] = useMutation(CREATE_CONTACT,{
const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
onCompleted: () => {
addMessage('Thank you for your submission!',{
style: { backgroundColor: 'green',color: 'white',padding: '1rem' },
addMessage('Thank you for your submission!', {
style: { backgroundColor: 'green', color: 'white', padding: '1rem' },
})
formMethods.reset()
},
@@ -39,7 +39,7 @@ const ContactPage = () => {
return (
<BlogLayout>
<Flash timeout={1000} />
<Flash timeout={1000} className="bg-green-100 text-green-700" />
<Form
onSubmit={onSubmit}
validation={{ mode: 'onBlur' }}
@@ -48,45 +48,63 @@ const ContactPage = () => {
>
<FormError
error={error}
wrapperStyle={{ color: 'red',backgroundColor: 'lavenderblush' }}
wrapperClassName="py-4 px-6 rounded-lg bg-red-100 text-red-700"
listClassName="list-disc ml-4"
listItemClassName=""
/>
<Label name="name" errorClassName="error">
<Label
name="name"
className="block text-gray-700 uppercase text-sm"
errorClassName="block uppercase text-sm text-red-700"
>
Name
</Label>
<TextField
name="name"
validation={{ required: true }}
errorClassName="error"
className="border rounded-sm px-2 py-1 outline-none"
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
/>
<FieldError name="name" className="error" />
<FieldError name="name" className="block text-red-700" />
<Label name="name" errorClassName="error">
<Label
name="name"
className="block mt-8 text-gray-700 uppercase text-sm"
errorClassName="block mt-8 text-red-700 uppercase text-sm"
>
Email
</Label>
<TextField
name="email"
validation={{
required: true,
pattern: {
value: /[^@]+@[^.]+\..+/,
message: 'Please enter a valid email address',
},
}}
errorClassName="error"
className="border rounded-sm px-2 py-1"
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
/>
<FieldError name="email" className="error" />
<FieldError name="email" className="block text-red-700" />
<Label name="name" errorClassName="error">
<Label
name="name"
className="block mt-8 text-gray-700 uppercase text-sm"
errorClassName="block mt-8 text-red-700 uppercase text-sm"
>
Message
</Label>
<TextAreaField
name="message"
validation={{ required: true }}
errorClassName="error"
className="block border rounded-sm px-2 py-1"
errorClassName="block border rounded-sm px-2 py-1 border-red-700 outline-none"
/>
<FieldError name="message" className="error" />
<FieldError name="message" className="block text-red-700" />
<Submit disabled={loading}>Save</Submit>
<Submit
className="block bg-blue-700 text-white mt-8 px-4 py-2 rounded"
disabled={loading}
>
Save
</Submit>
</Form>
</BlogLayout>
)