Liftly | Linda & Izabel #45
Conversation
…d semantic order, fixed total width to not scroll
There was a problem hiding this comment.
Great job!!! It looks fantastic and clean. We love your design.
We didn't use the styled components and from your project we've learnt a lot about it. You made the styled components easy to understand!
We know how difficult it is to implement the sideward scroll, but we're impressed how well you did it! Keep up the great work!
//Sofie & Wen
| ) | ||
| } | ||
|
|
||
| const GlobalStyle = createGlobalStyle` |
There was a problem hiding this comment.
Really cool setup! Make the style consistent.
// Sofie & Wen
| import styled from 'styled-components' | ||
| import arrow from '/arrow-circle.svg' | ||
|
|
||
| export const NormalButton = () => { |
There was a problem hiding this comment.
Smart to put all the button components into one file 👍
// Sofie & Wen
| <div className={burgerClass}></div> | ||
| </div> | ||
|
|
||
| {/* {" "} |
There was a problem hiding this comment.
Maybe worth cleaning up the file and remove the comments?
// Sofie & Wen
|
|
||
| const containerRef = useRef(); | ||
|
|
||
| const handleScroll = (scrollAmount) => { |
There was a problem hiding this comment.
We thought this component really cool! You implemented useRef and useSate pretty well 💯
// Sofie & Wen
| @@ -0,0 +1,133 @@ | |||
| import AppStore from '/AppStore.svg' | |||
| import GooglePlay from '/GooglePlay.svg' | |||
There was a problem hiding this comment.
the applestore and googleplay images look really cool!
// Sofie & Wen
| export const Download = () => { | ||
| return ( | ||
| <StyledDownload> | ||
| <picture className="weightpic"> |
There was a problem hiding this comment.
We are wondering why you chose picture instead of img element.
// Sofie & Wen
|
|
||
| //Styled Components | ||
|
|
||
| const StyledButton = styled.button` |
There was a problem hiding this comment.
We are amazed to see how you bundle the styles of buttons together and utilise so many variables/props.
// Sofie & Wen
|
|
||
| const containerRef = useRef(); | ||
|
|
||
| const handleScroll = (scrollAmount) => { |
There was a problem hiding this comment.
We think it'd be better if this handle scroll function can be extracted and put into a component so it can be reused in several components.
//Sofie & Wen
There was a problem hiding this comment.
Hi Izabel & Linda, and congrats for completing week 12 assignment! Your app looks fabulous! 🔥 The site looks very close to the design and followed our requirements. How did you like Styled Components? Seems like you tackled it in the right way and implemented a great result. Now the design is not pixel perfect, but that's okay, here's a little things that can be taken into consideration to improve it even further:
- Apply the correct rule for aligning the items for example:
download-classes-> justify- content: space-between, orpink-downloadbox: left - accessibility 76 - should score at least 95!
Please fix accessibility and you're good to go 🚀 Thank you and again, well done!! 👑
Netlify link
https://liftly.netlify.app/
Design
https://www.figma.com/file/B7kleMlz4yhtsZgdc90LJi/LIFTLY--Week-9-Elin-Bradway?type=design&node-id=1%3A3&mode=design&t=0iGCAz2gNtngrco8-1
made by Elin Bradway
Collaborators
[linda-f]