Results section

[nickslick03]

Created Results.tsx and ResultsBar.tsx

[cdrice26]

I made a few changes, let me know what you think and let me know if you want me to undo any of them - here's what I changed:

• I made it so that all negative money (aka money spent) is red and all positive money (aka starting balance and money left, if there is any) is green, just to make things clearer.
• I made it so that the starting balance is at the top of the results window rather than the bottom, to me this seems like the more logical placement but let me know if you disagree on this.
• I edited the results bar. I think the $ Over/Under is going to be the most important metric here (more so than the starting balance), so I added it to the results bar. I also made it so that the starting balance is displayed only on desktop (there's no room on mobile for 3 metrics). Finally, I found that I personally was not a fan of having the bar always be a card with a margin at the bottom since you could see what was below it. I set it up to be at the exact bottom of the screen and with no rounded corners when the screen is not scrolled to the bottom, and a normal card with rounded corners when it is. There was some complex logic involved as I had to use a ref to get the scrolling to work properly, and add more checks to it because originally it was rather janky on mobile.

[nickslick03]

All the changes look great! I made a few tweaks to the underlying implementation, the big one being I replaced the complex logic for calculating when the scroll reached the bottom in the ResultsBar with an Intersection Observer. Also, the starting balance metric can be hidden with just tailwind classes. Take a look and merge if you think it's ready.

[cdrice26]

Ok cool! I didn't even think about using CSS to hide the starting balance, that's definitely cleaner! Also never used IntersectionObserver but it definitely makes the code more readable and as a bonus, avoids more of the jankiness on mobile. I'm going to merge.