Minor improvements for moments pages

mozilla / bedrock

Making mozilla.org awesome, one pebble at a time

https://www.mozilla.org

Mozilla Public License 2.0

1.18k stars 916 forks source link

Minor improvements for moments pages #15404

Open slightlyoffbeat opened 1 month ago

slightlyoffbeat commented 1 month ago

Description

A UX designer has requested some minor improvements to the moments pages that recently went live.

The first moments page will have traffic on Dec 10, so we have some time.

This is a lower priority, but would be nice to have.

Requested Changes

highest priority is:

Smaller headline to fit the page better and allow for more room for CTA on smaller screens
- h1 - lower font size to title-md-size

More subtle suggestions:

Closer connection between the CTA and the time estimate
- Change .update-firefox margin-bottom to 10px
More differentiation between time estimate and privacy link
- Privacy link - lower font-size to 11px
- Time estimate - Add parentheses around the copy

Figma File

ITSMEPRIYANSHUUCHAT commented 1 month ago

Hi @slightlyoffbeat , I’d love to work on this good first bug. Could you please assign it to me? Also the Figma File is unavailable at the moment, can you please look into that too.

slightlyoffbeat commented 1 month ago

@ITSMEPRIYANSHUUCHAT I assigned it to you and updated the Figma file so that you can view it. Thank you for volunteering!

ITSMEPRIYANSHUUCHAT commented 4 weeks ago

Just another question, to make sure we are on the same page, the modifications are required for page 20,21,22,23 and 24. Am i right? As all of them are having similar issue.

ITSMEPRIYANSHUUCHAT commented 4 weeks ago

Some more things that I stumbled upon: according to : https://github.com/mozilla/bedrock/blob/main/media/css/protocol/protocol-mozilla-2024.scss

--title-md-size: 2.5rem; (The current Font-size) --title-sm-size: 2rem;

I would suggest that we rather use inline styling( if some custom size is required) or use {--title-2xs-size} instead. (Figma_File) For reference at different font-sizes

Personally, I would go for 1.75rem, as it is the middle ground between too small to too big, please give your inputs for next steps.

slightlyoffbeat commented 3 weeks ago

@ITSMEPRIYANSHUUCHAT that is correct. It is for page 20, 21, 22, 23, and 24.

For your second question, i'm going to tag some Mozilla websites team members to see if they can advise @craigcook @alexgibson @stephaniehobson

alexgibson commented 3 weeks ago

@ITSMEPRIYANSHUUCHAT if we can try and stick to one of our standard heading sizes as defined in our design system, that would be preferable thanks. --title-xs-size: 1.75rem; seems like a reasonable choice to me.