Profilepage

[awvala]

Conversion to new design standards on the profile page.. Work-in-progress for Sam to start tinkering with.

NOTE:

• Not yet mobile compliant
• Components outside of profile page have not been update
• Button component still needs updating with Tailwind components

[robbyphillips]

Looks pretty good! My preference would be to decrease font size pretty much globally. right now everything is massive, so we don't have very good information density.

From a technical styling side of things, I think we can use some of the build in rem sizing instead of adding the px measurements. The base font size is 16px, so 1rem === 16px by default. In the sizing that is provided by default 1 === 0.25rem === 4px, so mr-1 would effectively be a right margin of 4px. For any of the built-in rem styles, you can really just multiply the number by 4 to get the default pixel size.

The primary benefit for using rem over px is that it makes it easier for the browser to scale appropriately, and from what I've read, it really seems to be best practice to prefer rem where possible.

All that said, the whole point of using tailwind is to be able to customize a bunch of helper utility styles, so if there are good, reusable cases for px based measurements, that's fine.

[awvala]

Made several updates for review:

• Converted fonts to rems UOM
• Reduced base font to ~14px
• Converted profile page, MainWrapper, Edit button, Card, Sidebar to a more responsive design.
• Halved margins and padding from 40px to 20px.

[robbyphillips]

Looks good so far!