Index Builder: Address feedback with CSS styling

[bodom0015]

Problem

@shubhamk008 and I met last Friday to discuss the styling of the Index Builder

He shared a list of styling updates to improve the look and feel of the prototype and bring it more in line with the design on Figma

Approach

Addressed the Following feedback:

• [x] Moved Index builder link - place under /map Variable dropdown as "Try with multiple variables?"

Select Indicators - Left side:

• [x] Back button should go to Map
• [x] Custom icons in banner / categories
• [x] Spacing between Header and multi-step
• [x] CSS for Vertical multi-step - literally connecting the dots + 2px wide (see screenshot)
• [x] Nice to have: Spacing between text for 1 & 2
• [x] Font for header: Lora, Everywhere else: Roboto
• [x] "More ->". => copy link to highlight variable - attempted this, but still seems flaky and only supported in Chrome browser

Select Indicators - Right side:

• [x] Text-transform: Capitalize (instead of uppercase)
• [x] Color-match: info icon lightgreen (more pale)
• [x] Slightly more spacing between each indicator? Nice to group them together since they're closely related
• [x] Borders less prominent color? Light green? Grey?
  • [ ] Experiment with Box Shadow? I did not try this, but can give it another shot if we think it's important
• [x] Fix CSS for nested Info button icon
  • [x] Step 1: padding=0.5rem
  • [x] Step 2: on button position=relative, on SVG position=absolute
  • [x] Step 3: SVG should have top=1rem, right=1rem)
  • [x] Step 4: Remove margin-left
  • [x] Step 5: text-transform=capitalize
  • [x] Step 6: on button, align-items=flex-end
  • [x] Maybe boxes could be 9x9? (Instead of current 8x8)
• [x] Custom icon for each category, show this same (large/pink) icon in variable description
• [x] Number of selected items in each category (Green, small, uppercase, bolded, and pulled right - same horizontal axis as the category)

Select Indicators - Bottom:

• [x] Reset button should have font-weight: 700
• [x] Background color should be #ECECEC
• [x] When clicking Next, deselect variable (hide description)

Choose Weights - Left Side:

• [x] Custom icon (weights => scales)
• [x] Nice to have: Hide the line between 2 pink steps
• [x] Try moving pie chart to top right (above the sliders)

Choose Weights - Right side:

• [x] Grey tooltips, move beside variable name (space, space, tooltip)

Summary&Map - Left side:

• [x] More padding around Header
• [x] Fix linefeeds in text themes description
• [x] Remove last paragraph of description
• [x] Remove primary green/pink from color palette
• [x] Set Min/Max height on the panel
• [ ] @media queries for supporting different screen sizes?
• [x] EXIT link should have font-weight=700
• [x] PNG grey bar can be ignored for now - assume this is an artifact from Netlify, and retest in production
• [x] CSV has an extraneous comma for some reason - get rid of it

TODO

Ask for feedback about/discuss these:

• [ ] Accordion with TXT description of how we calculate custom index
• [ ] Sliders: change step to 0.1, min=0.1, max=10.0
• [ ] Alternatively: Accordion with description of how we calculate weights percentages + weightMax

Screenshots

How to Test

1. Navigate to https://deploy-preview-137--chicago-env-explorer.netlify.app/builder
2. Step through the index builder and note the style changes above
3. Provide further feedback on styling updates/changes as needed :pray:

[netlify[bot]]

✅ Deploy Preview for chicago-env-explorer ready!

Name	Link
🔨 Latest commit	624c11c0c1c13a5b9aed9ade8c465452d5cdba8f
🔍 Latest deploy log	https://app.netlify.com/sites/chicago-env-explorer/deploys/6601bf0f0804960008603112
😎 Deploy Preview	https://deploy-preview-137--chicago-env-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bodom0015]

Thank you @mradamcox, that sounds perfect :+1:

I can definitely work next week only the final bits to adjust "Custom Index" to "Custom Vulnerability Index" and add an accordion that explains these calculations (including directionality and the other custom bits we've added recently).

One of the other last remaining bits is to try to clarify weights vs percentages for the sliders - one suggestion was to change the min/max on the sliders to 0.1 - 10.0 (with a step size of 0.1). This way, we get the same granularity as we have now, but the values should make it more clear that these weights are not exactly percentages. Alternatively, we could include another accordion that explains how we calculate the weight maximum and that should make it more clear that since weightMax is not always 100, the numbers provided will not always match the pie chart percentages

[mradamcox]

Looks good, I've made a new ticket to cover the extra text descriptions here, so I think it's time to merge this.