Restructure front end

[miggs125]

Issue This PR Addresses

#583 #584

Type of Change

This PR restructures the frontend to contain component logic and styling under the same directory. It also removes SASS as a dependency.

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/humphd/telescope/ku98rctan
✅ Preview: https://telescope-git-fork-miggs125-restructurefrontend.humphd.now.sh

[humphd]

Code-wise this looks fine to me. The only thing I'd suggest you consider is that you're somewhat inconsistent with your naming of .js vs. .jsx vs. .css files for components. For example:

textArea.css vs. TextArea.jsx

and then

ListItem.jsx and ListItem.css

I'd probaby keep everyting the same (i.e,. same as name of component).

[miggs125]

Code-wise this looks fine to me. The only thing I'd suggest you consider is that you're somewhat inconsistent with your naming of .js vs. .jsx vs. .css files for components. For example:

textArea.css vs. TextArea.jsx

and then

ListItem.jsx and ListItem.css

I'd probaby keep everyting the same (i.e,. same as name of component).

@humphd I wasn't sure what the standard is. Are styles usually lower case but the same name?

[humphd]

@miggs125 usually I've seen it done with the same name for all files, e.g. https://create-react-app.dev/docs/adding-a-stylesheet. You could also consider flattening your .jsx and .js into a single .js file.

[cindyorangis]

It's weird being able to see our frontend on mobile (I'm at my bus stop looking at this PR) now. It's a good weird. Thanks for getting rid of the SASS stuff.

[wlto]

I think we're missing the number of padding for top and bottom here. Other than this the code looks good to me :)