List view restructure V.1

Description

Here's the first version of list-view changes to match our wireframes!

Since this is a massive amount of change, I wanted to push up what I had, but there are a few more changes I would like to look into in the future. I'll make issues on each of these, if/when this PR gets merged.

Organizing the items on the max screen display is currently being done with 'ems' and Flexbox. Utilizing CSS grid would be a more sane and reliable way to do this, I would think, as the elements aren't sitting perfectly together as is. I did not implement this right away due to the fact that I'd have to go back and relearn how to use it.
There should be a minimize/maximize functionality to hide/show the addItem form. I haven't implemented this yet, and perhaps this feature doesn't need to be triggered by an actual button but by an icon. We also wanted a sleek sliding animation to show this.
We wanted a divider between the two components of the shareItems form. Apparently, this is hard to do with Flexbox's auto-resizing boxes without a hacky solution. This should be looked into later.
This will temporarily disrupt the styling of the homepage. Jenny and I agreed to just comment out the CSS for the main layout page, as it affects both pages; and we wanted to work independantly.

Related Issue

closes #83

Acceptance Criteria

Looks similar to the wireframes discussed in our last meeting.

Type of Changes

Enhancement

Updates

Before

old

After

new1

new2

Testing Steps / QA Criteria

Select a list, go to list view.

the-collab-lab / tcl-67-smart-shopping-list

List view restructure V.1 #88