Adds TextSection component #9
Conversation
| const flexDirection = (alignment === "left") ? "row" : "row-reverse"; | ||
| return ( | ||
| <div id="text-section" style={{width: '100%', maxWidth: '50vw', display: "flex", flexDirection: flexDirection, alignItems: 'flex-start', justifyContent: 'space-between'}}> | ||
| <div id="text-section-text" style={{padding: '0 4em'}}> |
There was a problem hiding this comment.
Change this div to a MaterialUI Box element. Eventually we want to add a dark and light theme to the website and using Boxes will allow us to toggle each element's theme much more easier than using normal divs.
There was a problem hiding this comment.
Other than format, everything looks good. Brandon said make it adjustable to themes for light and dark mode.
There was a problem hiding this comment.
Some changes before this can be approved.
Change the div starting in line 18 to a MUI Box.
Divs in the return statement aren't formatted correcty, it should look as the following
There are many ways we can write components in React, but to keep everything uniform to prevent confusion you should write the function header and export statement similar to the TestComponent.
Otherwise everything else looks good.
|
Basic customization needs are image alignments and components that are responsive to themes. Right now we don't have that set up so all you need to do is implement MUI boxes to set that up. The wireframes linked in the webmaster channel shows how the mobile and the desktop views should look like. Your component should adjust to either display layout depending on how large the screen is. |
Please let me know if there are any code conventions I am unaware of (my apologies, first time using React).
I'm not sure how responsive/scalable/customizable these are supposed to be, so please let me know.
Possible issues:
Side note: Brandon, I am still unable to make any edits in the Project. Possibly I need to be invited to that separately from the repository?