Pja sk pretty welcome screen #42
Conversation
…t-shopping-list into pja-sk-pretty-welcome-screen
|
That background is super cute. ❤️ 🍳 |
SaraSweetie
requested review from
erostribe,
espain16,
jaysonjphillips and
laurenmbeatty
| */ | ||
|
|
||
| body { | ||
| background-size: 22%; |
There was a problem hiding this comment.
background-size can be used to adjust the scale of the repeat image.
src/components/Header.js
Outdated
| @@ -0,0 +1,13 @@ | |||
| import React from 'react'; | |||
|
|
|||
| class Header extends React.Component { | |||
There was a problem hiding this comment.
Awesome to separate this out into its own component. If you wanted, you could make this a simple functional component like:
const Header = () => <h1>Eggheadded</h1>
and then export default at the bottom as you have currently.
src/components/ShareList.js
Outdated
| 'We couldn't find that shopping list. Please try again or create a | ||
| new list.' | ||
| </p> | ||
| <React.Fragment> |
There was a problem hiding this comment.
Another way to write a React.Fragment is: <></> instead of <React.Fragment></React.Fragment>
There was a problem hiding this comment.
I just learned about <React.Fragement>. So thanks for teaching me a shorthand! It's good to know.
| @@ -10,13 +40,91 @@ | |||
| display: flex; | |||
| flex-direction: column; | |||
| font-size: 1em; | |||
| background-color: #dff2f2; | |||
| max-width: 450px; | |||
There was a problem hiding this comment.
You may end up making this a little wider. The other team added an item details link/button to the shopping details page.
|
I think this looks very cute. I'm a vote for either way for the background colors. I think they both look great! Well done! Love that you ran this through a contrast-checker for a11y. |
| --light-gray: #cccccc; | ||
| --dark-gray: #282c34; | ||
| --black: #0f272a; |
There was a problem hiding this comment.
I like the green inflected black! nice.
|
Great work. Your incremental commits are 🔥 . |
|
Awesome work! |
For an example of how to fill this template out, see this Pull Request.
To Do
ShareList.js? If the token field is empty the app breaks.Description
We had a design meeting as a group and collaborated on an app name, fonts, and colors.
Taking that information we designed the welcome screen.
.errorwas created for error messages. I had difficulty finding a bright color that would pass contrast ratio standards for accessibility on top of the light blue background color.<h1>tags were converted to<h2>tags. After the Header component is the tag and it's contents.Related Issue
closes #16
Acceptance Criteria
The welcome screen (the screen a user sees before they’ve created their list) looks something like the following (or equivalent, use your creativity!):
Type of Changes
Updates
Before
Welcome Screen
Error message on the Welcome Screen
After
Home Screen showing a dark button hover state and error message
Testing Steps / QA Criteria
View our branch pja-sk-pretty-welcom-screen