Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling the page - map #43

Open
TianshengC opened this issue Oct 6, 2023 · 1 comment
Open

Styling the page - map #43

TianshengC opened this issue Oct 6, 2023 · 1 comment
Assignees

Comments

@TianshengC
Copy link
Collaborator

fullscreen map lightbox (open and close like a modal)

(To Matthew: I am a little confused about this part.)

@mferryRV
Copy link
Collaborator

mferryRV commented Oct 7, 2023

We will be updating the UI of our application to match this Figma design on page "Prototype web".

image

To accomplish this, we need to create a <MapSection> component and add it to our Home page component. This Map Section should have:

  • A white background
  • A dot-based map image (download from Figma or from Greg's shared files)
  • Help text at the top in Roboto Regular 16, #CB3100
  • An "expand" icon in the top righthand corner that, when clicked, makes the map fullscreen in a "Lightbox" or "modal"
  • When the map is fullscreened, "Click to exit full screen mode" should appear in the top right in Roboto Regular 16, #CB3100

To see the styling information for the page, activate Figma's Dev Mode in the top righthand corner:
image

This design is desktop-first, so we will review mobile designs later in the week.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

3 participants