From 1e1166978b93d36a443518ffde8117a669560bb9 Mon Sep 17 00:00:00 2001 From: Rob Cameron Date: Wed, 7 Oct 2020 16:12:09 -0700 Subject: [PATCH] Adds styling --- web/src/components/BlogPost/BlogPost.js | 8 +-- .../components/BlogPostsCell/BlogPostsCell.js | 10 +++- web/src/index.css | 16 ----- web/src/index.html | 4 +- web/src/layouts/BlogLayout/BlogLayout.js | 43 +++++++++++--- web/src/pages/BlogPostPage/BlogPostPage.js | 4 +- web/src/pages/ContactPage/ContactPage.js | 58 ++++++++++++------- 7 files changed, 89 insertions(+), 54 deletions(-) diff --git a/web/src/components/BlogPost/BlogPost.js b/web/src/components/BlogPost/BlogPost.js index fe0979b..746c4b7 100644 --- a/web/src/components/BlogPost/BlogPost.js +++ b/web/src/components/BlogPost/BlogPost.js @@ -1,14 +1,14 @@ -import { Link,routes } from '@redwoodjs/router' +import { Link, routes } from '@redwoodjs/router' const BlogPost = ({ post }) => { return ( -
+
-

+

{post.title}

-
{post.body}
+
{post.body}
) } diff --git a/web/src/components/BlogPostsCell/BlogPostsCell.js b/web/src/components/BlogPostsCell/BlogPostsCell.js index fd44b4b..4fb5570 100644 --- a/web/src/components/BlogPostsCell/BlogPostsCell.js +++ b/web/src/components/BlogPostsCell/BlogPostsCell.js @@ -1,4 +1,4 @@ -import { Link,routes } from '@redwoodjs/router' +import { Link, routes } from '@redwoodjs/router' import BlogPost from 'src/components/BlogPost' export const QUERY = gql` @@ -19,5 +19,11 @@ export const Empty = () =>
Empty
export const Failure = ({ error }) =>
Error: {error.message}
export const Success = ({ posts }) => { - return posts.map((post) => ) + return ( +
+ {posts.map((post) => ( + + ))} +
+ ) } diff --git a/web/src/index.css b/web/src/index.css index 5c4a39a..931b85e 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -11,19 +11,3 @@ /** * END --- TAILWIND GENERATOR EDIT */ -button, input, label, textarea { - display: block; - outline: none; -} - -label { - margin-top: 1rem; -} - -.error { - color: red; -} - -input.error, textarea.error { - border: 1px solid red; -} diff --git a/web/src/index.html b/web/src/index.html index 8f69230..caa78f0 100644 --- a/web/src/index.html +++ b/web/src/index.html @@ -1,12 +1,12 @@ - + <%= htmlWebpackPlugin.options.title %> - +
diff --git a/web/src/layouts/BlogLayout/BlogLayout.js b/web/src/layouts/BlogLayout/BlogLayout.js index 018437e..6809e82 100644 --- a/web/src/layouts/BlogLayout/BlogLayout.js +++ b/web/src/layouts/BlogLayout/BlogLayout.js @@ -6,28 +6,53 @@ const BlogLayout = ({ children }) => { return ( <> -
-

- Redwood Blog +
+

+ + Redwood Blog +

-
{children}
+
+ {children} +
) } diff --git a/web/src/pages/BlogPostPage/BlogPostPage.js b/web/src/pages/BlogPostPage/BlogPostPage.js index d297e20..e6cb9dd 100644 --- a/web/src/pages/BlogPostPage/BlogPostPage.js +++ b/web/src/pages/BlogPostPage/BlogPostPage.js @@ -4,7 +4,9 @@ import BlogPostCell from 'src/components/BlogPostCell' const BlogPostPage = ({ id }) => { return ( - +
+ +
) } diff --git a/web/src/pages/ContactPage/ContactPage.js b/web/src/pages/ContactPage/ContactPage.js index e239fef..d54d704 100644 --- a/web/src/pages/ContactPage/ContactPage.js +++ b/web/src/pages/ContactPage/ContactPage.js @@ -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 ( - +
{ > -
)