Style tweaks

[swellander]

Screen.Recording.2024-02-19.at.9.46.40.AM.mov

Description

Makes a few style changes to mirror the figma a bit more.

Note

Based off of @0xChijoke 's recent PR #30, which should be reviewed and merged before this PR.

Additional Information

• Removes the stock SE2 header/footer
• Adjusts padding
• Color and size of sliders
• Adds column sorting to vector table
• Changes Line chart to Area chart with (an attempt) at the linear gradient
• Adds smaller project images to each x-axis tick

Remaining style TODOs

1. Make linear gradient color actually match the figma. I'm not too familiar with them and wasn't too successful but maybe someone else can have a go?
2. Z-index of hovered project images needs adjusting. Smaller project images to the right of the hovered image still render on top
3. Placeholder image for projects without one
4. I don't think the mac-app-bar-style image rendering works too well when adding more vectors and projects. If y'all think it looks too crowded, maybe we could limit the number of projects rendered on the graph, or just put the image in the tooltip that renders near the cursor.

Related Issues

Related to Issue #25

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
impact-calculator	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 19, 2024 7:59pm

[swellander]

Rebased with main

[swellander]

Here's the linear gradient definition, and here's the css for the gradient from figma:

background: linear-gradient(180deg, rgba(20, 124, 73, 0.1) 0%, #FBDD5D 100%);

[escottalexander]

Looks amazing! Nice work!