Add Profile Page #17
Add Profile Page #17
Conversation
Codecov Report
@@ Coverage Diff @@
## master #17 +/- ##
==========================================
+ Coverage 62.2% 69.23% +7.02%
==========================================
Files 12 17 +5
Lines 127 156 +29
Branches 15 15
==========================================
+ Hits 79 108 +29
Misses 48 48
Continue to review full report at Codecov.
|
src/index.css
Outdated
| @@ -3,3 +3,23 @@ body { | |||
| padding: 0; | |||
| font-family: sans-serif; | |||
| } | |||
|
|
|||
| .profile-form form { | |||
There was a problem hiding this comment.
Any reason why you chose to put some styles in index.css and some directly in the React component?
There was a problem hiding this comment.
For the form, I couldn't figure out a way to add transparency to the backgroundColor property. I don't think there was any reasoning behind the others. I could put them all in the React component if that's the best style.
src/Profile/ProfileForm.tsx
Outdated
| borderRadius: 5, | ||
| }); | ||
|
|
||
| const SubmitButton = glamorous.button({ |
There was a problem hiding this comment.
@binerys what are your thoughts on having multiple styled components in the same file? I think I remember you saying we should only have one component/file but idk what's the best practice here.
There was a problem hiding this comment.
Oh hey s/o to JavaScript twitter, which led me to this StackOverflow post which I really like!
There was a problem hiding this comment.
Oh, I think I understand now. So each different styled component usually gets their own file?
There was a problem hiding this comment.
Yeah I think that'd be best
|
This looks like a really good start, thanks @bsakhuja! Once you finish adding the image part too, I'd recommend looking into testing your components with Jest and Enzyme. Here's a little writeup on using it with Typescript-flavored Create-React-App. I was also thinking it might be a good idea to add some type of component documentation/management thing like Storybook before too long to our project; what are your thoughts? Here's a relevant thread on options. |
package-lock.json
Outdated
| "name": "panel", | ||
| "version": "0.1.0", | ||
| "lockfileVersion": 1, | ||
| "requires": true, |
There was a problem hiding this comment.
Let's not add a package-lock.json file, since yarn uses yarn.lock!
There was a problem hiding this comment.
Oops, I'm not sure how that got file got added/generated.
|
Looks great! Can we center and make shrek circular? |
|
Also can we reduce the spacing between each input field too? |
|
Updated screenshot |
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
| const shrek = require('./classy-shrek.png'); | ||
|
|
||
| const ProfilePicture = () => ( | ||
| <Img src={shrek} height="260" width="260" borderRadius="50%" /> |
There was a problem hiding this comment.
This image is missing a text alternative (alt attribute). This is a problem for people using screen readers.
…o/panel into brian/make-profile-page
Progress towards adding a profile page.
Types of changes
Purpose
Approach
Screenshot(s)
Checklist
masterwithout error.