[MM-59552] Remove unsafe-inline from internal CSP, replace with nonce and rework some dynamic styling (#3120)

* Remove unsafe-inline

* Fix dynamic dark mode loading

* Include nonce generator for CSP for styles

* Add nonce provider for react-select

* Fix test
This commit is contained in:
Devin Binnie
2024-08-12 09:38:59 -04:00
committed by GitHub
parent e310fa705f
commit c9f671d82a
17 changed files with 177 additions and 61 deletions

View File

@@ -1,36 +0,0 @@
@import '~bootstrap-dark/src/bootstrap-dark.css';
body {
background-color: transparent;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__control {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__menu {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option:hover {
background: rgba(255, 255, 255, 0.16);
}
#settingsModal .modal-body {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--light) rgba(255, 255, 255, 0);
}
.Toggle .Toggle___switch {
background: rgba(var(--center-channel-bg-rgb), 0.24);
}
.Toggle .Toggle___switch.disabled {
background: rgba(var(--center-channel-bg-rgb), 0.08);
}

View File

@@ -0,0 +1,38 @@
@use 'sass:meta';
.darkMode {
@include meta.load-css('bootstrap-dark/src/bootstrap-dark.css');
color: #fff;
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__control {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__menu {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option:hover {
background: rgba(255, 255, 255, 0.16);
}
#settingsModal .modal-body {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--light) rgba(255, 255, 255, 0);
}
.Toggle___switch {
background: rgba(var(--center-channel-bg-rgb), 0.24);
}
.Toggle___switch.disabled {
background: rgba(var(--center-channel-bg-rgb), 0.08);
}
}