Closed Bug 1490954 Opened 3 years ago Closed 3 years ago

[remote-dbg-next] Review CSS used for ConnectPage


(DevTools :: about:debugging, enhancement, P1)



(firefox64 fixed)

Firefox 64
Tracking Status
firefox64 --- fixed


(Reporter: jdescottes, Assigned: ladybenko)




(3 files)

Follow up to Bug 1489872 

See comments in

- all sections in Connect should have the same width, maybe avoid hardcoding it in px
- do not render empty <ul></ul> when there are no network locations (I think we should rather render "something" such as "No network location saved" or something similar)
- use grid for connect-page__section__title
Priority: P3 → P2
Assignee: nobody → balbeza
Priority: P2 → P1
Hi Victoria, I couldn't find in about:preferences a section heading with an icon, so I'm not sure how big they should be – and how separate from the text.

I have tentatively set a height of 1.25em and a margin from the text of 0.25em –what appears on the attached screenshot–, but would like your input here. Thanks! 🙏
Flags: needinfo?(victoria)
Hi Victoria, other measurements we'd need is the distance between the container and the number points, as well as the distance between those and the text (highlighted in red). Thanks!
- Fixed some values so they match what it's being used in about:preferences (font sizes, margins, etc.)
- Fixed page width in Connect page
- Refactored some rules to be more generic and not tied up to this specific component
- Now a default message appears instead of an empty <ul> when there are no network locations in the list
- Adjusted icon & alignment in the Connect sections' headings
Hi Belén, indeed, looks like there's no established pattern for these.

I like how the section heading icons look! 

As for the numbered list, I like the numbers to be left-aligned with the heading text (so looks like it just needs to be nudged left a few px). As for distance between numbers and text, I would suggest the equivalent of 8px (there's a general "multiples of 4px" grid system in Photon that I'm trying to line up with more).

Flags: needinfo?(victoria)
Comment on attachment 9012641 [details]
Bug 1490954 - Review Connect page CSS. r=jdescottes,daisuke

Julian Descottes [:jdescottes][:julian] has approved the revision.
Attachment #9012641 - Flags: review+
Pushed by
Review Connect page CSS. r=jdescottes,daisuke
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
You need to log in before you can comment on or make changes to this bug.