Switch UI scaling from a base-10 to base-16 #1821
Conversation
🧪 Review environmenthttps://5irdypu7g2c6cjajafjnjbbacu0lzpgv.lambda-url.ca-central-1.on.aws/ |
| assert page.select("div[data-test-id='totals']")[0].text == str(sum(x[2] for x in stats)) | ||
| assert page.select("div[data-test-id='services']")[0].text == str(len(services)) |
There was a problem hiding this comment.
Love to see this instead of targetting css classes!
| @@ -15,6 +15,7 @@ import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons/faCircleQues | |||
| import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation"; | |||
| import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation"; | |||
| import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; | |||
| import { faPaperPlane } from "@fortawesome/free-solid-svg-icons"; | |||
There was a problem hiding this comment.
For the scheduler updates
| <div> | ||
| <Calendar /> | ||
| </div> | ||
| <Calendar /> |
There was a problem hiding this comment.
Removing this unclassed div helped make the scheduler responsive don to 320px
| <p> | ||
| <strong> | ||
| <p className="confirmationTime"> | ||
| <time datetime={date}> |
There was a problem hiding this comment.
Added a <time> element like in #1799
| .Calendar-item:focus:not(.Calendar-item--day):not( | ||
| .Calendar-item--unavailable | ||
| ):not(:empty) { | ||
| outline: black inset; | ||
| outline-offset: -4px; | ||
| outline-offset: -4px; | ||
| outline: var(--color-focus) 3px solid; | ||
| } | ||
| .Calendar-item:hover:not(.Calendar-item--day):not( | ||
| .Calendar-item--unavailable | ||
| ):not(:empty) { | ||
| background-color: var(--hover-color); | ||
| color: white; | ||
| } |
There was a problem hiding this comment.
One is hover. Two is focus. always takes me some time to distinguish those two selectors.
| gap: 4px; | ||
| padding: 2px; |
There was a problem hiding this comment.
These are designed to complement border widths, hence why I chose pixel instead of rem.
| @@ -1,76 +1,81 @@ | |||
| :root { | |||
There was a problem hiding this comment.
Github was hiding this file, but it contains quite a lot of manual changes.
In general:
- Update local CSS variables.
- Fix font sizes
- Increased target size of the calendar dates
- Map gutter and gutterHalf dimensions to the new CSS variables
- Removed an entire component that was unused (toggle/switch)
- Cleaned up Nav select and radios to match rest of Notify
- Updated the confirmation box. (see screenshots)
There was a problem hiding this comment.
md and up
base
Good point! I just noticed. Lets make this clearer (Good timing to test this behaviour)
+1, I can make this one darker too. |
Summary | Résumé
Notify is currently setup so that 1rem = 10px at 100% scaling. By default, 1rem = 16px at 100% scaling.
This is not a problem for us now. However, when we tried to import some design system components in the past, we did hit this conflict in UI scaling. The DS uses the default 16px base.
In theory, this should help us be in a better place to slowly implement the design system if we choose to do so.
This PR:
Test instructions | Instructions pour tester la modification
Visual before and after of the size scale. Notice just some rounding for 2.5, 7.5 and 12.5
