Page MenuHomePhabricator

[web] Style the community drawer
ClosedPublic

Authored by inka on Feb 10 2023, 4:15 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Jun 14, 6:26 AM
Unknown Object (File)
Wed, Jun 12, 3:06 AM
Unknown Object (File)
Fri, Jun 7, 7:46 AM
Unknown Object (File)
Thu, Jun 6, 11:22 PM
Unknown Object (File)
Thu, Jun 6, 6:06 PM
Unknown Object (File)
Thu, Jun 6, 6:05 PM
Unknown Object (File)
Sun, May 26, 3:20 AM
Unknown Object (File)
Sun, May 26, 3:20 AM
Subscribers

Details

Summary

issue: https://linear.app/comm/issue/ENG-2671/style-community-drawer-on-web
Styling the community drawer (only the drawer for now, the top bar and other elements changed during the drawer tasks will be styled in a separate diff).
I made the header 4px taller for now, because until there is a navigation state info in the main content's header (see https://linear.app/comm/issue/ENG-2740/add-navigation-state-info-to-the-top-bar,
https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=7780%3A136895&t=xSs7qrxIaOTjRJxA-4) the drawers header and main contents header bottom borders are almost aligned, and having them be off by 4px looked bad.
I also talked to the design team and we agreed that the purple line next to the active "Inbox"/"All communities"/"Settings" should be 3px, because otherwise it "sinks under" the browsers border (is not well visible).

Designs

Test Plan

Run web app, check that the styles display correctly.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

inka requested review of this revision.Feb 10 2023, 4:29 AM

Currently, the scroll applies to the whole community picker and not just to the community drawer:

image.png (730×766 px, 47 KB)

So settings aren't immediately visible and you have to scroll to them. Was it decided somewhere that it should work like this?

web/sidebar/community-picker.react.js
31–34 ↗(On Diff #22327)

Nit: can we move the always true case to the top? Also, could this be moved closer to the inboxButtonContainerClass? (sideLineX are near each other so I think that makes sense)

@michal you're right! It is supposed to scroll differently. Here is how it works now:

This revision is now accepted and ready to land.Feb 13 2023, 2:10 AM

I talked to the design team, and "Settings" / "Inbox" / "All communities" buttons are not supposed to be highlighted after all. There will be the purple line next to them, but no highlight.

inka requested review of this revision.Feb 14 2023, 3:23 AM
This revision is now accepted and ready to land.Feb 14 2023, 4:36 AM