fix: dashboard updates from visual enhancements

[hanlinc27]

Brief description. What is this change?

Donor Dashboard Visual Enhancements

Add the updated donation dashboard changes from visual enhancements (P1).

Implementation description. How did you make this change?

Before

After

23722ff6-33ba-4d16-8931-b580f231bd08.mp4

Steps to test

1. Schedule some recurring donations, with and without volunteer requirements
2. Check if it's close to designs on Figma

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages follow conventional commits and are descriptive. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR
• The appropriate tests if necessary have been written

[github-actions]

Visit the preview URL for this PR (updated for commit 4b07df7):

https://communityfridgekw-staging--pr90-hanlin-dashboard-sty-40uvbcww.web.app

_{(expires Tue, 25 Jan 2022 02:50:00 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[xsharonhe]

This looks good! Looks a lot like the Figma design. I just wanted to show some behaviour that's showing on my laptop that I can't really figure out why:

1. Not really vertically aligned (it's aligned in your video though so I'm curious what someone else's computer)

shows)

2. In the same screenshot, I have no idea why the one time donation shows the ending date of 1969. This was one I made before the branch so maybe that accounts for why? It works for a new one I created.

[xsharonhe]

I was previously taught that booleans in this format should have the !! ahead of it so: !!volunteerNeeded to account for possibly undefined behaviour - just a nitpick though because I don't know if we will get to this situation.

[hanlinc27]

good note! However, !! is usually used to cast a non-boolean variable to a boolean for checking (for instance, a string or a number) --> in our case, since volunteerNeeded is already of type boolean, we don't need to add it. Additionally, this is a mandatory type (you can see the scheduling model) so it'll always have a value :)

[xsharonhe]

yea just saw that haha woops my bad - thanks for the following up!

[xsharonhe]

Definitely nitpick but an extra line here for consistency with the rest of the file?