change arrow color, dynamic image size

[dchen150]

Description

#55, #72. Arrow changed to primary color. Width is dynamic depending on viewport width and height.

Other considerations

[github-actions]

Visit the preview URL for this PR (updated for commit 603b18b):

https://nwplus-io--pr113-carouselnit-ghf6nmfu.web.app

_{(expires Sat, 25 Sep 2021 00:34:40 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[anneguo3]

@dchen150 when I went to the staging PR it still only lets me navigate through the photos based on clicking the arrow exactly rather than just on the photo area

[kevin-zou]

Does this show up for you locally? The diamonds look like they've seen better days :'(

If not it's probably just the deploy being weird again

[dchen150]

@anneguo3 will work on it. @kevin-zou ya idk why it does that. When you expand it it goes back to regular diamonds. Do you think importing an SVG instead of making the diamonds out of css would be better? Or is it worth investing time in figuring out why the diamonds are doing that when the window shrinks

[kevin-zou]

Oh I think I found out why. The width: 30% property on its container makes it distorted. Removing this seems to fix it - can you try this and see if it doesn't break anything?

[kevin-zou]

Anne's described behaviour on-click of the entire image changing the image isn't implemented yet, but everything else looks good to me 🔥

[kevin-zou]

Can we set a static height like we did for the desktop view? On mobile the different heights between images leads to a "jumpy" experience whenever the picture changes!

[panjenny0]

lgtm!

[anneguo3]

@dchen150 i'm on a widescreen monitor and...