Mattermost-server: Migrate changeCSS() to CSS variable in utils/utils.jsx, ln.504

[deanwhillier]

Context:

We are working on replacing our older custom theme implementation (applyTheme()) currently used to change component colors throughout the webapp to match the selected theme. We have decided to utilize CSS variables as a replacement and so we now need to replace all occurrences of changeCSS() within the applyTheme() function with corresponding CSS variables directly in the CSS files. This ticket is part of a larger campaign.

How to migrate

Go to line number 504 in the file utils/utlis.jsx. You should see the following:

changeCss('@media(max-width: 768px){.app__body .modal .settings-modal:not(.settings-modal--tabless):not(.display--content) .modal-content', 'background:' + theme.sidebarBg);

For this ticket, we will be replacing the use of the Javascript variable theme.sidebarBg from this line of code with the CSS variable --sidebar-bg

Run through these steps to determine where to apply the new CSS variable followed by removing the call to changeCSS() from utils/utlis.jsx:

1. Make note of the CSS statement from the first argument to changeCSS and specifically the final selector (eg. .app__body .sidebar--menu)
2. Using your browsers dev tools, locate the element targeted by the css statement in the webapp
3. With the element selected in your dev tools, use the style browser to get an idea of how styles are currently applied to this element. This will help you track down where in the source code you will need to add the appropriate CSS variable in order to replace the style identified in the second argument to changeCSS() above (eg. 'background:' </ins> theme.sidebarBg)
4. Locate the appropriate file(s) within the source code where edits will need to be made (eg. sass/layout/_sidebar-menu.scss, ln.3)
5. Make the necessary changes/additions to the CSS to apply the CSS variable and then remove the call to changeCSS() from utils/utlis.jsx.
6. Create a pull request with your changes against the branch campaign/applytheme_sidebar-bg. We will be using this branch to review and QA changes in batches on a regular basis instead of on each individual ticket in the campaign given the number of overall tickets for this campaign.

Notes:

• Some instances of changeCSS() affect the styles of sections of the UI that might not be visible by default. Remember to check modals, pop-ups, menus and different interaction states (hover, active, etc.) as necessary based on the particular ticket you are working on
• Some instances of changeCSS() include the use of a custom changeOpacity() function when applying colours that need to be partially transparent. These instances will need to be replaced with the rgba CSS function. For example, changeOpacity(theme.sidebarBg, 0.3)) in utils/utlis.jsx would become rgba(var(--sidebar-bg-rgb), 0.3) in CSS. Appending -rgb to the CSS variable name is necessary when using one of the theme variables to work with the rgba CSS function.
• Some UI elements in the desktop web view will actually be different elements in the mobile web view, eg. the desktop and mobile primary/hamburger menus have completely separate markup
• Please be sure to test the primary responsive breakpoint widths after migration (Desktop: 1920px, Tablet: 960px, Mobile: 768px)
• Please be sure to test changing themes after migration to ensure the new CSS variable is being applied correctly. Switching back and forth between light and dark themes would be a good way to help determine this. Responsive breakpoints should also be tested with different themes.
• It is possible that an existing changeCSS() line is no longer valid, in which case, just removing the line as part of your PR is a perfectly valid solution.

Example of migrated code

PR #6655

• This PR includes several commits that each address a slightly different CSS statement in order to provide several examples of differing situations and how they were migrated. We suggest taking a look at each to get an idea of possible differences you could run across and how the resulting migration was accomplished.

Questions

Feel free to can ask for help by messaging either @deanwhillier or @hmhealey or by posting in the ~webapp channel on the Mattermost Community server.

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA ticket: https://mattermost.atlassian.net/browse/MM-29387

[ng29]

Hey Dean,

I will like to give a shot to this one 👍
Cheers,

[deanwhillier]

All yours @ng29, thanks!

[ng29]

All yours @ng29, thanks!

Hey Dean,

Apology for the delay, got stuck in shifting. I Will try my best to resolve this before weekend.

[deanwhillier]

Hi Nitin, no problem at all and thanks again!

[ng29]

Hi Nitin, no problem at all and thanks again!

Can you please help how to start with this, as per my understanding them.sidebarbg needs to be replaced with --sidebar-bg, is there anything else that needs to be catered ??

[deanwhillier]

Can you please help how to start with this, as per my understanding them.sidebarbg needs to be replaced with --sidebar-bg, is there anything else that needs to be catered ??

That's pretty much it. Not difficult on the surface, however, you will need to track down where to put the CSS variable so that it applies the same styling as the JS line it is replacing. The ticket description includes some steps you can take with additional notes to consider.

Give it a go and if you are having trouble, message again and I can give you a hand!