css: Use SCSS nesting in stylesheets.

[vrongmeal]

Creating this issue to keep track of all the stylesheets refactored using SCSS nesting.

• static/styles/portico/activity.scss
• static/styles/portico/archive.scss
• static/styles/portico/billing.scss
• static/styles/portico/integrations_dev_panel.css
• static/styles/portico/integrations.scss
• static/styles/portico/landing-page.scss
• static/styles/portico/markdown.scss
• static/styles/portico/portico.scss
• static/styles/portico/portico-signin.scss
• static/styles/portico/portico-styles.scss
• static/styles/portico/stats.scss

---

• static/styles/alerts.scss
• static/styles/app_components.scss
• static/styles/components.scss
• static/styles/compose.scss
• static/styles/drafts.scss
• static/styles/hotspots.scss
• static/styles/informational-overlays.scss
• static/styles/input_pill.scss
• static/styles/left-sidebar.scss
• static/styles/lightbox.scss
• static/styles/media.scss
• static/styles/night_mode.scss
• static/styles/popovers.scss
• static/styles/pygments.scss
• static/styles/reactions.scss
• static/styles/reuseable_components.scss
• static/styles/right-sidebar.scss
• static/styles/settings.scss
• static/styles/subscriptions.scss
• static/styles/typing_notifications.scss
• static/styles/user_circles.scss
• static/styles/user_status.scss
• static/styles/widgets.scss
• static/styles/zulip.scss

[vrongmeal]

Next target: lightbox.scss

[timabbott]

I checked off user_circles.scss since there's nothing to do there.

I wonder if it would be helpful to move the files that are not part of the main app's CSS (portico, stats, activity, etc.) to a subdirectory portico/, like we've done for JavaScript? I think that might help make it clear which pieces are irrelevant if you're looking at the logged-in app codebase.

[vrongmeal]

Yeah we could do that. I'll submit a PR for the same

[zulipbot]

Hello @zulip/server-refactoring members, this issue was labeled with the "area: refactoring" label, so you may want to check it out!

[timabbott]

@vrongmeal can you update the checkboxes above with what's finished?

[vrongmeal]

Done. I separated the portico/* from others.

Also submitted a PR for drafts.scss.

Do we want to do pygments.scss?

[timabbott]

Great. I'm not convinced we want to do pygments; it's partially forked from an upstream setup and we might want to preserve proximity there.

I bet informational-overlays will be quick; we can try to tackle compose after.

[vrongmeal]

Yes. I'm almost done with informational-overlays.

[wryonik]

I am working on refactoring static/styles/left-sidebar.scss

[Abhishek-Balaji]

@shubhamgupta2956 Hi, I've worked on night_mode.scss. I'm also working on portico/landing-page.scss. Hope you don't have a problem. If you have any issues, do tell me.

[vrongmeal]

Hey! Anyone working on this should look at the commit styles and how to make these nesting changes.

Here's an example PR: #13014

Basically the pattern is:

1. Reorder the file
2. Make any functional change if required (such as merging two different elements into one).
3. Nest.

Do ask any questions if required. And also carefully examine the diff of each commit, it's a lot easier to mess up here :)

[timabbott]

Closing as this issue's checkbox list is pretty stale and I think basically every stylesheet is using SCSS nesting at this point.