benetech / MathShare

MIT License
9 stars 3 forks source link

Problem Set & Problem Cards: Background Color (Mobile > Dashboard)  #1458

Open alexrcabral opened 3 years ago

alexrcabral commented 3 years ago

This task is an update to the background color assignment for problem set cards and problem cards. 

Full Mockup

Mockup of new dashboard, showing the Your Sets page, with rounded pastel problem cards in a single column. Along the top of the page is a Mathshare logo and a profile image. Underneath is the heading, Your Sets, next to a search icon and a dropdown showing the words, Most Recent. Each problem card shows a profile image, the designation Algebra 101, a three dot drop down, the problem set title, and the word Progress, followed by 02 of 06 Problems, and a progress bar beneath.

The above mockup shows the problem set cards in context of the dashboard (Mobile version). 

Color Assignment

The three colors used in the mockups are the full set of colors we will be using for this initial mobile release. (Light gray, light green, and light orange.) 

Colors should be randomly assigned between these three options.

Color Impermanence 

Due to the difficulties associating the color with the database for a color persisting with a set, for this initial release, we will not operate with the assumption of persistence. 

Reference

Style Guides: https://invis.io/CQYLLW8J49U Mobile Mockups: https://invis.io/5HYLLW1G4BD Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0

Acceptance criteria: 

Given that I'm a logged-in user with sets available, when I access my dashboard, I should be able to view my problem set cards with randomized colors for their cards. When I enter an individual set, I should similarly be able to view my problem cards with randomized colors for each card. 

abaranowska1 commented 3 years ago

Tested with success When I access my dashboard, I'm able to view my problem set cards with randomized 3 colors. When I enter an individual set, I'm similarly able to view my problem cards with randomized colors for each card. image image

Verified on: