Uploaded image for project: 'GeoDashboard'
  1. GeoDashboard
  2. GEOD-1168

Updated color scheme for explore page pills

    XMLWordPrintableJSON

    Details

    • Type: Task
    • Status: Done
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: None
    • Labels:

      Description

      I came up with a color system for the Data Source primary color, the accordian bar colors and the pill colors in both default and selected state.

      I'm not sure if the CSS translates very well for this in InVision Inspect mode so I'll put it down here:

      Both Accordian bars and Pills have 2 fill colors applied one on top of the other---a percentage of the primary color and a percentage of black. For both UI elements, the color percentages are fixed and should work for all of the primary colors.

      I did this to prevent it from looking too pastel.

      Accordians:
      Fill #1: 5% Black
      Fill #2: 20% of Primary Color (Data Source)

      Pill - Default State:
      Fill #1: 3% Black
      Fill #2: 10% of Primary Color

      Pill - Selected or Hover State
      Fill: 100% primary color
      Text: Roboto, bold, 11pt, #FFFFFF

      This system will make it easier to add additional data sources in future or for other instances of the dashboard with different requirements.

      Let me know if you want to discuss this in person . . .

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                Assignee:
                diegoac2 Diego Rivera
                Reporter:
                indiragp Indira Gutierrez Polo
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved:

                    Tasks

                    Progress: 
                     0/0