Storefront page

[SheepTester]

Info

Closes #52.

This branch was branched from #59, so merging this will also merge #59. Merge that one first so the files changed diff doesn't list changes made in #59

Description

What changes did you make? List all distinct problems that this PR addresses. Explain any relevant
motivation or context.

Created the storefront page based on the Figma design. This encompasses the desktop and mobile layout and the help modal. You can toggle between collections and all items; in the former view you can see collection cards, and in the latter view you can see the collection slider. But I think I'm most chuffed about the hero design, particularly that rainbow gradient outline ☺️. The help modal design is pretty nice as well I think.

The help modal doesn't automatically show for first time users.

Changes

• Moved the leaderboard header to its own component as suggested by Leaderboard rows #42 (comment). I don't know if that was a good idea because the header font size changes a lot on different parts of the website, so I ended up having to customize it for each use anyways

• The collection slider component includes the title and description, as well as a horizontally scrolling list of item cards. The card sizes are fixed at 400 px, except on mobile where they shrink so that the entire card fits on the screen. This uses a custom scrollbar to implement the slider, so we might have to test how it looks on multiple browsers and devices. On Windows Chrome, it looks like the Figma design:

  

  on Firefox, the scrollbar is thinner and disappears on its own

  

  with mouse on it

  

  should be fine

  Note that in dark theme, the scrollbar has the same light-colored gutter

  

  Not sure what color to use for this

• The help modal uses a <dialog> element, so pressing escape closes it. You can also close it by clicking outside the modal; I had to disable an eslint rule in order to do this. On mobile, the help modal shrinks to show one step at a time, and it, like the collection slider, uses horizontal scrolling. For pagination, I used section links like #step-2 styled as arrows to take you between pages, and CSS scroll-snap and scroll-behavior: smooth for smooth transitions between steps. This comes with the added bonus that touch users can swipe between pages. I think it's a pretty cool, JavaScript-less implementation of pagination.

  overwrite.mp4

• The hero is its own component. The decorative sparkles were added as SVG elements, but since they're directedly added as inline SVG, I get to add animations and interactivity to them.

  I wasn't sure how to do the rainbow gradient outline around "The ACM Store," and I was thinking of just using an SVG. However, I eventually figured out a way: a pseudo-element containing the same text positioned absolutely behind the original text, with a transparent text color and the rainbow as a background image. It has a transparent text outline using -webkit-text-stroke (also supported by Firefox, -webkit- required), then the background image is clipped using -webkit-background-clip (supported by Firefox, again with -webkit-). I later added an animation of the gradient sliding in when the page loads for extra fancy effects

  Finally, for the rainbow band, the bending part is an SVG element, so I could animate the path using stroke-dasharray and stroke-dashoffset. The sides are just a bunch of divs stacked on top of each other, with flex: auto; so it can stretch out to the edges of the screen. I think it looks better that way. I had to take special care not to let the rotated rainbow on mobile overflow outside of body since it would piss off Google and reduce our SEO score (content wider than screen). It got complicated enough that I made the rainbow its own component.

Type of Change

• Bug Fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Logistics Change (A change to a README, description, or dev workflow setup like
  linting/formatting)
• Continuous Integration Change (Related to deployment steps or continuous integration
  workflows)
• Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

• locally on Desktop.
• locally on mobile - use https://ngrok.io to get a copy on a mobile device
• on the live deployment preview on Desktop.
• on the live deployment preview on Mobile.
• I have run and passed all new and existing Cypress tests. Add screenshots below.

Two places mess with scrolling a little bit, so it would be a good idea to test these parts on Apple devices/browsers with overscrolling:

1. The help modal uses horizontal scrolling to show the steps page by page on mobile
2. The all items view has horizontal scrolling for the lists of items

Checklist

• I have performed a self-review of my own code.
• I have followed the style guidelines of this project.
• I have documented my code's src/lib functions and commented hard to understand areas
  anywhere else.
• My changes produce no new warnings.

Screenshots

Please include a screenshot of your Cypress testing suite passing successfully.

no

If you made any visual changes to the website, please include relevant screenshots below.

Desktop, light theme, collections view	Mobile, dark theme, all items view
	Jokes on the mobile users, though, since it's not possible to navigate to the store on mobile The scrollbars didn't show up in this full page screenshot, oh well

[SheepTester]

notes for myself

[trevorkw7]

Really great job overall taking on such a large scale project and building so much modularity into it. I really liked how you made HeroRainbow and RainbowBars into their own components. Other than the small following nitpick we should be good to go/

• Nitpick: I noticed that at the static RainbowBars on the left and right sides of the page don't perfectly connect with the animated rainbow bar in the center. Maybe we could try using a css transform to force the overlap.