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 - locations and rhythm codes #44

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

Styling the page - map - locations and rhythm codes #44

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

Comments

@TianshengC
Copy link
Collaborator

icon, rhythm code, rhythm list, clickable rhythms

When the mouse hovers over the location icon, the rhythm code and list should appear.
When the rhythm is clicked, the modal will be displayed.

@mferryRV
Copy link
Collaborator

mferryRV commented Oct 7, 2023

NOTE: This issue may be dependent on #16 and #22

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 modify our MapIcon components to represent Rhythm Codes and their Rhythms. The visual icon should have:

  • An icon (download from Figma)
  • The rhythm code in Roboto Bold 16, #CB3100
  • A list of rhythms in Roboto Regular 16, #CB3100
  • Flexbox styling

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