hiyaryan
commented
9 months ago This PR does the following.
- Reverts the previous styles added from the Home branch. It was decided that it would be better to establish a good styles architecture, or standardize one, before creating a Home page.
- Establishes styles architectural flow using styled components stored in a new styles directory.
This directory makes styled MUI (or standard React) components that are used to apply styles to components throughout the react app. This makes it easy to standardize and apply styles while ensuring that no styles override other styles with the same class name (due to
styled's naming conventions). - Updates how the App is laid out using the new styles standard, by applying styles from a
Documentcomponent that evenly spaces the Header, Body, and Footer components within a MUI Box. This is useful because now the Footer can always maintain its position at the bottom of the page regardless of the body-in-view's (Outlet's) height. - Creates a Body styles component that takes all of the space in between the Header and Footer within the viewport by using
flexGrow: 1which enforces the Box component to fill the entire space. - Updates the Footer so that it only shows at the bottom of the page as opposed to being sticky and viewable always at the bottom of the view. This is more natural and standard across most commercial websites since the footer does not contain any actual controls over the app the way the Header does.
This PR extends PR #35 which is supposed to only add the Home page. These PRs may likely get out of sync so this PR might become a sort of playground, or it may be merged into #35.
The primary purpose of this PR is to determine an approach to applying styles to components. Styles will likely be applied either through using the same named style sheets (the name of the component with .css as opposed to .jsx then importing into the component), or through Styled components (making components with a style that can wrap other components in).
The initial commits of this PR aim to pull inline styles out and either into their own css files, styled components, or up to the parent component such that it may then be applied to all of its sibling components.
While pulling styles up might seem to be a more efficient approach and more CSS like where styles are applied in a cascading way, it might be easier to use styled components (even if it may add a few extra lines of code) to improve readability and enable tracking which styles are being applied to what more easily.