Automatically add the .focalboard-body class to all sass classes on plugin mode (#1068)

* Automatically add the .focalboard-body class to all sass classes on plugin mode * Addressing review comment
2024-12-24 13:43:12 +02:00 · 2021-08-25 13:05:12 +02:00 · 2021-08-25 13:05:12 +02:00 · dfb34d81a2
commit dfb34d81a2
parent a3fabc45a0
95 changed files with 158 additions and 136 deletions
--- a/mattermost-plugin/webapp/loaders/globalScssClassLoader.js
+++ b/mattermost-plugin/webapp/loaders/globalScssClassLoader.js
@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+function blockList(line) {
+    return line.startsWith('.focalboard-body') ||
+        line.startsWith('.GlobalHeaderComponent') ||
+        line.startsWith('.channel-header__icon .LogoIcon') ||
+        line.startsWith('.focalboard-plugin-root');
+}
+
+module.exports = function loader(source) {
+    var newSource = [];
+    source.split('\n').forEach((line) => {
+        if ((line.startsWith('.') || line.startsWith('#')) && !blockList(line)) {
+            newSource.push('.focalboard-body ' + line);
+        } else {
+            newSource.push(line);
+        }
+    });
+    return newSource.join('\n');
+};
--- a/mattermost-plugin/webapp/webpack.config.js
+++ b/mattermost-plugin/webapp/webpack.config.js
@ -90,6 +90,7 @@ module.exports = {
                    'style-loader',
                    'css-loader',
                    'sass-loader',
+                    path.resolve(__dirname, 'loaders/globalScssClassLoader'),
                ],
            },
            {
--- a/webapp/src/components/blockIconSelector.scss
+++ b/webapp/src/components/blockIconSelector.scss
@ -1,4 +1,4 @@
-.focalboard-body .BlockIconSelector {
+.BlockIconSelector {
    .octo-icon {
        display: flex;
        line-height: 1.1;
--- a/webapp/src/components/cardDetail/cardDetail.scss
+++ b/webapp/src/components/cardDetail/cardDetail.scss
@ -1,4 +1,4 @@
-.focalboard-body .CardDetail {
+.CardDetail {
    .title {
        width: 100%;
    }
--- a/webapp/src/components/cardDetail/comment.scss
+++ b/webapp/src/components/cardDetail/comment.scss
@ -1,4 +1,4 @@
-.focalboard-body .Comment {
+.Comment {
    display: flex;
    flex-direction: column;
    margin: 5px 0;
--- a/webapp/src/components/cardDetail/commentsList.scss
+++ b/webapp/src/components/cardDetail/commentsList.scss
@ -1,4 +1,4 @@
-.focalboard-body .CommentsList {
+.CommentsList {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
--- a/webapp/src/components/centerPanel.scss
+++ b/webapp/src/components/centerPanel.scss
@ -1,4 +1,4 @@
-.focalboard-body .CenterPanel {
+.CenterPanel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
@ -12,7 +12,7 @@
 }


-.focalboard-body .BoardComponent {
+.BoardComponent {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
--- a/webapp/src/components/content/checkboxElement.scss
+++ b/webapp/src/components/content/checkboxElement.scss
@ -1,4 +1,4 @@
-.focalboard-body .CheckboxElement {
+.CheckboxElement {
    display: flex;
    align-items: center;
    min-height: 34px;
--- a/webapp/src/components/content/dividerElement.scss
+++ b/webapp/src/components/content/dividerElement.scss
@ -1,4 +1,4 @@
-.focalboard-body .DividerElement {
+.DividerElement {
    padding-top: 16px;
    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.09);
    margin-bottom: 17px;
--- a/webapp/src/components/contentBlock.scss
+++ b/webapp/src/components/contentBlock.scss
@ -1,4 +1,4 @@
-.focalboard-body .ContentBlock {
+.ContentBlock {
    .MenuWrapper,
    .dnd-handle {
        display: none;
--- a/webapp/src/components/dialog.scss
+++ b/webapp/src/components/dialog.scss
@ -1,4 +1,4 @@
-.focalboard-body .Dialog {
+.Dialog {
    &.dialog-back {
        position: fixed;
        top: 0;
--- a/webapp/src/components/emptyCenterPanel.scss
+++ b/webapp/src/components/emptyCenterPanel.scss
@ -1,4 +1,4 @@
-.focalboard-body .EmptyCenterPanel {
+.EmptyCenterPanel {
    display: flex;
    flex-direction: column;

--- a/webapp/src/components/flashMessages.scss
+++ b/webapp/src/components/flashMessages.scss
@ -1,4 +1,4 @@
-.focalboard-body .FlashMessages {
+.FlashMessages {
    display: flex;
    align-items: center;
    justify-content: center;
--- a/webapp/src/components/gallery/gallery.scss
+++ b/webapp/src/components/gallery/gallery.scss
@ -1,4 +1,4 @@
-.focalboard-body .Gallery {
+.Gallery {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
--- a/webapp/src/components/gallery/galleryCard.scss
+++ b/webapp/src/components/gallery/galleryCard.scss
@ -1,4 +1,4 @@
-.focalboard-body .GalleryCard {
+.GalleryCard {
    position: relative;
    border: 1px solid rgba(var(--center-channel-color-rgb), 0.09);
    border-radius: var(--default-rad);
--- a/webapp/src/components/kanban/kanban.scss
+++ b/webapp/src/components/kanban/kanban.scss
@ -1,4 +1,4 @@
-.focalboard-body .Kanban {
+.Kanban {
    overflow: auto;
    flex: 1;

--- a/webapp/src/components/kanban/kanbanCard.scss
+++ b/webapp/src/components/kanban/kanbanCard.scss
@ -1,4 +1,4 @@
-.focalboard-body .KanbanCard {
+.KanbanCard {
    flex: 0 0 auto;
    position: relative;
    display: flex;
--- a/webapp/src/components/kanban/kanbanColumn.scss
+++ b/webapp/src/components/kanban/kanbanColumn.scss
@ -1,4 +1,4 @@
-.focalboard-body .octo-board-column {
+.octo-board-column {
    &.dragover {
        background-color: rgba(128, 192, 255, 0.15);
    }
--- a/webapp/src/components/markdownEditor.scss
+++ b/webapp/src/components/markdownEditor.scss
@ -1,6 +1,6 @@
 /* Markdown Editor */

-.focalboard-body .MarkdownEditor {
+.MarkdownEditor {
    cursor: text;
    /* CodeMirror / SimpleMDE / EasyMDE overrides */

--- a/webapp/src/components/modal.scss
+++ b/webapp/src/components/modal.scss
@ -1,4 +1,4 @@
-.focalboard-body .Modal {
+.Modal {
    position: absolute;
    top: 25px;
    left: -240px;
--- a/webapp/src/components/modalWrapper.scss
+++ b/webapp/src/components/modalWrapper.scss
@ -1,4 +1,4 @@
-.focalboard-body .ModalWrapper {
+.ModalWrapper {
    position: relative;
    overflow: unset;
 }
--- a/webapp/src/components/properties/link/link.scss
+++ b/webapp/src/components/properties/link/link.scss
@ -1,4 +1,4 @@
-.focalboard-body .property-link {
+.property-link {
    display: flex;
    align-items: center;

--- a/webapp/src/components/properties/user/user.scss
+++ b/webapp/src/components/properties/user/user.scss
@ -1,4 +1,4 @@
-.focalboard-body .UserProperty {
+.UserProperty {
    margin-right: 20px;
    min-width: 120px;

--- a/webapp/src/components/shareBoardComponent.scss
+++ b/webapp/src/components/shareBoardComponent.scss
@ -1,4 +1,4 @@
-.focalboard-body .ShareBoardComponent {
+.ShareBoardComponent {
    display: flex;
    flex-direction: column;
    padding: 5px;
--- a/webapp/src/components/sidebar/registrationLink.scss
+++ b/webapp/src/components/sidebar/registrationLink.scss
@ -1,4 +1,4 @@
-.focalboard-body .RegistrationLink {
+.RegistrationLink {
    display: flex;
    flex-direction: column;
    padding: 5px;
--- a/webapp/src/components/sidebar/sidebar.scss
+++ b/webapp/src/components/sidebar/sidebar.scss
@ -1,4 +1,4 @@
-.focalboard-body .Sidebar {
+.Sidebar {
    flex: 0 0 240px;

    display: flex;
--- a/webapp/src/components/sidebar/sidebarAddBoardMenu.scss
+++ b/webapp/src/components/sidebar/sidebarAddBoardMenu.scss
@ -1,4 +1,4 @@
-.focalboard-body .SidebarAddBoardMenu {
+.SidebarAddBoardMenu {
    .menu-entry {
        display: flex;
        flex-direction: row;
--- a/webapp/src/components/sidebar/sidebarBoardItem.scss
+++ b/webapp/src/components/sidebar/sidebarBoardItem.scss
@ -1,4 +1,4 @@
-.focalboard-body .SidebarBoardItem {
+.SidebarBoardItem {
    .octo-sidebar-item {
        display: flex;
        flex-direction: row;
--- a/webapp/src/components/sidebar/sidebarSettingsMenu.scss
+++ b/webapp/src/components/sidebar/sidebarSettingsMenu.scss
@ -1,4 +1,4 @@
-.focalboard-body .SidebarSettingsMenu {
+.SidebarSettingsMenu {
    .menu-entry {
        display: flex;
        flex-direction: row;
--- a/webapp/src/components/sidebar/sidebarUserMenu.scss
+++ b/webapp/src/components/sidebar/sidebarUserMenu.scss
@ -1,4 +1,4 @@
-.focalboard-body .SidebarUserMenu {
+.SidebarUserMenu {
    .logo {
        display: flex;
        flex-direction: row;
--- a/webapp/src/components/table/horizontalGrip.scss
+++ b/webapp/src/components/table/horizontalGrip.scss
@ -1,4 +1,4 @@
-.focalboard-body .HorizontalGrip {
+.HorizontalGrip {
    width: 5px;
    cursor: ew-resize;
    flex-shrink: 0;
--- a/webapp/src/components/table/tableRow.scss
+++ b/webapp/src/components/table/tableRow.scss
@ -1,4 +1,4 @@
-.focalboard-body .TableRow {
+.TableRow {
    .open-button {
        display: none;

--- a/webapp/src/components/topBar.scss
+++ b/webapp/src/components/topBar.scss
@ -1,4 +1,4 @@
-.focalboard-body .TopBar {
+.TopBar {
    position: absolute;
    top: 10px;
    right: 25px;
--- a/webapp/src/components/viewHeader/filterComponent.scss
+++ b/webapp/src/components/viewHeader/filterComponent.scss
@ -1,3 +1,3 @@
-.focalboard-body .FilterComponent {
+.FilterComponent {
    min-width: 430px;
 }
--- a/webapp/src/components/viewHeader/filterEntry.scss
+++ b/webapp/src/components/viewHeader/filterEntry.scss
@ -1,4 +1,4 @@
-.focalboard-body .FilterEntry {
+.FilterEntry {
    display: flex;
    flex-direction: row;
    > div {
--- a/webapp/src/components/viewHeader/filterValue.scss
+++ b/webapp/src/components/viewHeader/filterValue.scss
@ -1,2 +1,2 @@
-.focalboard-body .FilterValue {
+.FilterValue {
 }
--- a/webapp/src/components/viewHeader/viewHeader.scss
+++ b/webapp/src/components/viewHeader/viewHeader.scss
@ -1,4 +1,4 @@
-.focalboard-body .ViewHeader {
+.ViewHeader {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
--- a/webapp/src/components/viewTitle.scss
+++ b/webapp/src/components/viewTitle.scss
@ -1,4 +1,4 @@
-.focalboard-body .ViewTitle {
+.ViewTitle {
    > div {
        flex: 0 0 auto;
        display: flex;
--- a/webapp/src/components/workspace.scss
+++ b/webapp/src/components/workspace.scss
@ -1,4 +1,4 @@
-.focalboard-body .Workspace {
+.Workspace {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
--- a/webapp/src/pages/boardPage.scss
+++ b/webapp/src/pages/boardPage.scss
@ -1,4 +1,4 @@
-.focalboard-body .BoardPage {
+.BoardPage {
    > .error {
        background-color: rgba(230, 192, 192, 0.9);
        text-align: center;
--- a/webapp/src/pages/changePasswordPage.scss
+++ b/webapp/src/pages/changePasswordPage.scss
@ -1,4 +1,4 @@
-.focalboard-body .ChangePasswordPage {
+.ChangePasswordPage {
    border: 1px solid #cccccc;
    border-radius: 15px;
    width: 450px;
--- a/webapp/src/pages/errorPage.scss
+++ b/webapp/src/pages/errorPage.scss
@ -1,4 +1,4 @@
-.focalboard-body .ErrorPage {
+.ErrorPage {
    border: 1px solid #cccccc;
    border-radius: 15px;
    width: 450px;
--- a/webapp/src/pages/loginPage.scss
+++ b/webapp/src/pages/loginPage.scss
@ -1,4 +1,4 @@
-.focalboard-body .LoginPage {
+.LoginPage {
    border: 1px solid #cccccc;
    border-radius: 15px;
    width: 450px;
--- a/webapp/src/pages/registerPage.scss
+++ b/webapp/src/pages/registerPage.scss
@ -1,4 +1,4 @@
-.focalboard-body .RegisterPage {
+.RegisterPage {
    border: 1px solid #cccccc;
    border-radius: 15px;
    width: 450px;
--- a/webapp/src/styles/labels.scss
+++ b/webapp/src/styles/labels.scss
@ -1,67 +1,67 @@
-.focalboard-body .propColor0,
-.focalboard-body .propColorDefault {
+.propColor0,
+.propColorDefault {
    background-color: var(--prop-default);
 }

-.focalboard-body .propColor1,
-.focalboard-body .propColor1:hover,
-.focalboard-body .propColorGray,
-.focalboard-body .propColorGray:hover {
+.propColor1,
+.propColor1:hover,
+.propColorGray,
+.propColorGray:hover {
    background-color: var(--prop-gray);
 }

-.focalboard-body .propColor2,
-.focalboard-body .propColor2:hover,
-.focalboard-body .propColorBrown,
-.focalboard-body .propColorBrown:hover {
+.propColor2,
+.propColor2:hover,
+.propColorBrown,
+.propColorBrown:hover {
    background-color: var(--prop-brown);
 }

-.focalboard-body .propColor3,
-.focalboard-body .propColor3:hover,
-.focalboard-body .propColorOrange,
-.focalboard-body .propColorOrange:hover {
+.propColor3,
+.propColor3:hover,
+.propColorOrange,
+.propColorOrange:hover {
    background-color: var(--prop-orange);
 }

-.focalboard-body .propColor4,
-.focalboard-body .propColor4:hover,
-.focalboard-body .propColorYellow,
-.focalboard-body .propColorYellow:hover {
+.propColor4,
+.propColor4:hover,
+.propColorYellow,
+.propColorYellow:hover {
    background-color: var(--prop-yellow);
 }

-.focalboard-body .propColor5,
-.focalboard-body .propColor5:hover,
-.focalboard-body .propColorGreen,
-.focalboard-body .propColorGreen:hover {
+.propColor5,
+.propColor5:hover,
+.propColorGreen,
+.propColorGreen:hover {
    background-color: var(--prop-green);
 }

-.focalboard-body .propColor6,
-.focalboard-body .propColor6:hover,
-.focalboard-body .propColorBlue,
-.focalboard-body .propColorBlue:hover {
+.propColor6,
+.propColor6:hover,
+.propColorBlue,
+.propColorBlue:hover {
    background-color: var(--prop-blue);
 }

-.focalboard-body .propColor7,
-.focalboard-body .propColor7:hover,
-.focalboard-body .propColorPurple,
-.focalboard-body .propColorPurple:hover {
+.propColor7,
+.propColor7:hover,
+.propColorPurple,
+.propColorPurple:hover {
    background-color: var(--prop-purple);
 }

-.focalboard-body .propColor8,
-.focalboard-body .propColor8:hover,
-.focalboard-body .propColorPink,
-.focalboard-body .propColorPink:hover {
+.propColor8,
+.propColor8:hover,
+.propColorPink,
+.propColorPink:hover {
    background-color: var(--prop-pink);
 }

-.focalboard-body .propColor9,
-.focalboard-body .propColor9:hover,
-.focalboard-body .propColorRed,
-.focalboard-body .propColorRed:hover {
+.propColor9,
+.propColor9:hover,
+.propColorRed,
+.propColorRed:hover {
    background-color: var(--prop-red);
 }
--- a/webapp/src/widgets/buttons/button.scss
+++ b/webapp/src/widgets/buttons/button.scss
@ -1,4 +1,4 @@
-.focalboard-body .Button {
+.Button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
--- a/webapp/src/widgets/buttons/buttonWithMenu.scss
+++ b/webapp/src/widgets/buttons/buttonWithMenu.scss
@ -1,4 +1,4 @@
-.focalboard-body .ButtonWithMenu {
+.ButtonWithMenu {
    display: flex;
    align-items: stretch;
    text-align: center;
--- a/webapp/src/widgets/buttons/iconButton.scss
+++ b/webapp/src/widgets/buttons/iconButton.scss
@ -1,4 +1,4 @@
-.focalboard-body .IconButton {
+.IconButton {
    height: 24px;
    width: 24px;
    padding: 0;
--- a/webapp/src/widgets/editable.scss
+++ b/webapp/src/widgets/editable.scss
@ -1,4 +1,4 @@
-.focalboard-body .Editable {
+.Editable {
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
--- a/webapp/src/widgets/editableDayPicker.scss
+++ b/webapp/src/widgets/editableDayPicker.scss
@ -1,4 +1,4 @@
-.focalboard-body .EditableDayPicker {
+.EditableDayPicker {
    .DayPickerInput {
        input {
            cursor: text;
--- a/webapp/src/widgets/emojiPicker.scss
+++ b/webapp/src/widgets/emojiPicker.scss
@ -1,4 +1,4 @@
-.focalboard-body .EmojiPicker {
+.EmojiPicker {
    .emoji-mart {
        color: rgb(var(--center-channel-color-rgb));
        background: rgb(var(--center-channel-bg-rgb));
--- a/webapp/src/widgets/icons/add.scss
+++ b/webapp/src/widgets/icons/add.scss
@ -1,4 +1,4 @@
-.focalboard-body .AddIcon {
+.AddIcon {
    color: rgb(var(--center-channel-color-rgb), 0.5);
    font-size: 16px;
 }
--- a/webapp/src/widgets/icons/board.scss
+++ b/webapp/src/widgets/icons/board.scss
@ -1,6 +1,6 @@
@use './standardIcon.scss';

-.focalboard-body .BoardIcon {
+.BoardIcon {
    @extend .StandardIcon;
    stroke-width: 8px;
 }
--- a/webapp/src/widgets/icons/card.scss
+++ b/webapp/src/widgets/icons/card.scss
@ -1,6 +1,6 @@
@use './standardIcon.scss';

-.focalboard-body .CardIcon {
+.CardIcon {
    @extend .StandardIcon;
    stroke-width: 6px;
 }
--- a/webapp/src/widgets/icons/check.scss
+++ b/webapp/src/widgets/icons/check.scss
@ -1,4 +1,4 @@
-.focalboard-body .CheckIcon {
+.CheckIcon {
    stroke: rgba(var(--center-channel-color-rgb), 0.5);
    stroke-width: 8px;
    fill: none;
--- a/webapp/src/widgets/icons/close.scss
+++ b/webapp/src/widgets/icons/close.scss
@ -1,4 +1,4 @@
-.focalboard-body .CloseIcon {
+.CloseIcon {
    color: rgb(var(--center-channel-color-rgb), 0.5);
    font-size: 24px;
 }
--- a/webapp/src/widgets/icons/delete.scss
+++ b/webapp/src/widgets/icons/delete.scss
@ -1,4 +1,4 @@
-.focalboard-body .DeleteIcon {
+.DeleteIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.5);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/disclosureTriangle.scss
+++ b/webapp/src/widgets/icons/disclosureTriangle.scss
@ -1,4 +1,4 @@
-.focalboard-body .DisclosureTriangleIcon {
+.DisclosureTriangleIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/divider.scss
+++ b/webapp/src/widgets/icons/divider.scss
@ -1,4 +1,4 @@
-.focalboard-body .DividerIcon {
+.DividerIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/dot.scss
+++ b/webapp/src/widgets/icons/dot.scss
@ -1,4 +1,4 @@
-.focalboard-body .DotIcon {
+.DotIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.5);
    width: 24px;
    height: 24px;
--- a/webapp/src/widgets/icons/dropdown.scss
+++ b/webapp/src/widgets/icons/dropdown.scss
@ -1,4 +1,4 @@
-.focalboard-body .DropdownIcon {
+.DropdownIcon {
    color: rgb(var(--center-channel-color-rgb));
    font-size: 16px;
 }
--- a/webapp/src/widgets/icons/duplicate.scss
+++ b/webapp/src/widgets/icons/duplicate.scss
@ -1,4 +1,4 @@
-.focalboard-body .DuplicateIcon {
+.DuplicateIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/edit.scss
+++ b/webapp/src/widgets/icons/edit.scss
@ -1,4 +1,4 @@
-.focalboard-body .EditIcon {
+.EditIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.5);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/emoji.scss
+++ b/webapp/src/widgets/icons/emoji.scss
@ -1,4 +1,4 @@
-.focalboard-body .EmojiIcon {
+.EmojiIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/focalboard_logo.scss
+++ b/webapp/src/widgets/icons/focalboard_logo.scss
@ -1,4 +1,4 @@
-.focalboard-body .FocalboardLogoIcon {
+.FocalboardLogoIcon {
    width: 32px;
    height: 32px;
    fill: rgba(var(--sidebar-text-rgb), 0.7);
--- a/webapp/src/widgets/icons/gallery.scss
+++ b/webapp/src/widgets/icons/gallery.scss
@ -1,4 +1,4 @@
-.focalboard-body .GalleryIcon {
+.GalleryIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/grip.scss
+++ b/webapp/src/widgets/icons/grip.scss
@ -1,4 +1,4 @@
-.focalboard-body .GripIcon {
+.GripIcon {
    fill: rgb(var(--center-channel-color-rgb), 0.5);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/hamburger.scss
+++ b/webapp/src/widgets/icons/hamburger.scss
@ -1,4 +1,4 @@
-.focalboard-body .HamburgerIcon {
+.HamburgerIcon {
    stroke: rgba(var(--center-channel-color-rgb), 0.5);
    stroke-width: 6px;
    fill: none;
--- a/webapp/src/widgets/icons/help.scss
+++ b/webapp/src/widgets/icons/help.scss
@ -1,4 +1,4 @@
-.focalboard-body .HelpIcon {
+.HelpIcon {
    color: rgba(var(--sidebar-text-rgb), 0.7);
    font-size: 16px;
 }
--- a/webapp/src/widgets/icons/hide.scss
+++ b/webapp/src/widgets/icons/hide.scss
@ -1,4 +1,4 @@
-.focalboard-body .HideIcon {
+.HideIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/hideSidebar.scss
+++ b/webapp/src/widgets/icons/hideSidebar.scss
@ -1,4 +1,4 @@
-.focalboard-body .HideSidebarIcon {
+.HideSidebarIcon {
    stroke: rgba(var(--center-channel-color-rgb), 0.5);
    stroke-width: 6px;
    fill: none;
--- a/webapp/src/widgets/icons/image.scss
+++ b/webapp/src/widgets/icons/image.scss
@ -1,4 +1,4 @@
-.focalboard-body .ImageIcon {
+.ImageIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/logo.scss
+++ b/webapp/src/widgets/icons/logo.scss
@ -1,4 +1,4 @@
-.focalboard-body .LogoIcon {
+.LogoIcon {
    font-size: 16px;
    color: rgba(var(--sidebar-text-rgb), 0.7);
 }
--- a/webapp/src/widgets/icons/logoWithName.scss
+++ b/webapp/src/widgets/icons/logoWithName.scss
@ -1,4 +1,4 @@
-.focalboard-body .LogoWithNameIcon {
+.LogoWithNameIcon {
    width: 150px;
    height: 32px;
 }
--- a/webapp/src/widgets/icons/logoWithNameWhite.scss
+++ b/webapp/src/widgets/icons/logoWithNameWhite.scss
@ -1,4 +1,4 @@
-.focalboard-body .LogoWithNameWhiteIcon {
+.LogoWithNameWhiteIcon {
    width: 150px;
    height: 32px;
 }
--- a/webapp/src/widgets/icons/options.scss
+++ b/webapp/src/widgets/icons/options.scss
@ -1,4 +1,4 @@
-.focalboard-body .OptionsIcon {
+.OptionsIcon {
    color: rgba(var(--center-channel-color-rgb), 0.5);
    font-size: 16px;
 }
--- a/webapp/src/widgets/icons/show.scss
+++ b/webapp/src/widgets/icons/show.scss
@ -1,4 +1,4 @@
-.focalboard-body .ShowIcon {
+.ShowIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/showSidebar.scss
+++ b/webapp/src/widgets/icons/showSidebar.scss
@ -1,4 +1,4 @@
-.focalboard-body .ShowSidebarIcon {
+.ShowSidebarIcon {
    stroke: rgba(var(--center-channel-color-rgb), 0.5);
    stroke-width: 6px;
    fill: none;
--- a/webapp/src/widgets/icons/sortDown.scss
+++ b/webapp/src/widgets/icons/sortDown.scss
@ -1,4 +1,4 @@
-.focalboard-body .SortDownIcon {
+.SortDownIcon {
    stroke: rgba(var(--center-channel-color-rgb), 0.5);
    stroke-width: 8px;
    fill: none;
--- a/webapp/src/widgets/icons/sortUp.scss
+++ b/webapp/src/widgets/icons/sortUp.scss
@ -1,4 +1,4 @@
-.focalboard-body .SortUpIcon {
+.SortUpIcon {
    stroke: rgba(var(--center-channel-color-rgb), 0.5);
    stroke-width: 8px;
    fill: none;
--- a/webapp/src/widgets/icons/standardIcon.scss
+++ b/webapp/src/widgets/icons/standardIcon.scss
@ -1,4 +1,4 @@
-.focalboard-body .StandardIcon {
+.StandardIcon {
    stroke: rgba(var(--center-channel-color-rgb), 0.5);
    stroke-width: 4px;
    fill: none;
--- a/webapp/src/widgets/icons/submenuTriangle.scss
+++ b/webapp/src/widgets/icons/submenuTriangle.scss
@ -1,4 +1,4 @@
-.focalboard-body .SubmenuTriangleIcon {
+.SubmenuTriangleIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/icons/table.scss
+++ b/webapp/src/widgets/icons/table.scss
@ -1,6 +1,6 @@
@use './standardIcon.scss';

-.focalboard-body .TableIcon {
+.TableIcon {
    @extend .StandardIcon;
    stroke-width: 8px;
 }
--- a/webapp/src/widgets/icons/text.scss
+++ b/webapp/src/widgets/icons/text.scss
@ -1,4 +1,4 @@
-.focalboard-body .TextIcon {
+.TextIcon {
    fill: rgba(var(--center-channel-color-rgb), 0.7);
    stroke: none;
    width: 24px;
--- a/webapp/src/widgets/label.scss
+++ b/webapp/src/widgets/label.scss
@ -1,4 +1,4 @@
-.focalboard-body .Label {
+.Label {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
--- a/webapp/src/widgets/menu/colorOption.scss
+++ b/webapp/src/widgets/menu/colorOption.scss
@ -1,4 +1,4 @@
-.focalboard-body .ColorOption {
+.ColorOption {
    .menu-colorbox {
        display: inline-block;
        margin-right: 8px;
--- a/webapp/src/widgets/menu/labelOption.scss
+++ b/webapp/src/widgets/menu/labelOption.scss
@ -1,4 +1,4 @@
-.focalboard-body .Menu {
+.Menu {
    .LabelOption.menu-option {
        cursor: auto;
        &:hover {
--- a/webapp/src/widgets/menu/menu.scss
+++ b/webapp/src/widgets/menu/menu.scss
@ -1,4 +1,4 @@
-.focalboard-body .Menu {
+.Menu {
    display: flex;
    flex-direction: column;
    position: absolute;
@ -93,8 +93,8 @@
    }
 }

-.focalboard-body .Menu,
-.focalboard-body .SubMenuOption .SubMenu {
+.Menu,
+.SubMenuOption .SubMenu {
    @media screen and (max-width: 430px) {
        position: fixed;
        top: 0;
--- a/webapp/src/widgets/menu/separatorOption.scss
+++ b/webapp/src/widgets/menu/separatorOption.scss
@ -1,4 +1,4 @@
-.focalboard-body .MenuSeparator {
+.MenuSeparator {
    border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
    margin: 8px 0;
 }
--- a/webapp/src/widgets/menu/subMenuOption.scss
+++ b/webapp/src/widgets/menu/subMenuOption.scss
@ -1,11 +1,11 @@
-.focalboard-body .Menu .menu-options .SubMenuOption.open-left {
+.Menu .menu-options .SubMenuOption.open-left {
    padding: 4px 5px;
    .menu-name {
        margin-left: 0;
    }
 }

-.focalboard-body .SubMenuOption {
+.SubMenuOption {
    position: relative;

    &.open-left {
--- a/webapp/src/widgets/menuWrapper.scss
+++ b/webapp/src/widgets/menuWrapper.scss
@ -1,4 +1,4 @@
-.focalboard-body .MenuWrapper {
+.MenuWrapper {
    position: relative;
    cursor: pointer;

--- a/webapp/src/widgets/propertyMenu.scss
+++ b/webapp/src/widgets/propertyMenu.scss
@ -1,4 +1,4 @@
-.focalboard-body .PropertyMenu {
+.PropertyMenu {
    &.menu-textbox {
        font-weight: 400;
        padding: 2px 10px;
--- a/webapp/src/widgets/switch.scss
+++ b/webapp/src/widgets/switch.scss
@ -1,4 +1,4 @@
-.focalboard-body .Switch {
+.Switch {
    display: flex;
    flex-shrink: 0;

--- a/webapp/src/widgets/tooltip.scss
+++ b/webapp/src/widgets/tooltip.scss
@ -40,7 +40,7 @@ $tooltop-vertical-offset: 2px;
    z-index: 99;
 }

-.focalboard-body .octo-tooltip {
+.octo-tooltip {
    display: inline;
    // Tooltip itself needs to be relative so
    // content and arrow can be absolute to it
--- a/webapp/src/widgets/valueSelector.scss
+++ b/webapp/src/widgets/valueSelector.scss
@ -1,4 +1,4 @@
-.focalboard-body .ValueSelector {
+.ValueSelector {
    width: 100%;
    border-radius: var(--default-rad);
    color: rgb(var(--center-channel-color-rgb));
@ -79,7 +79,7 @@
    }
 }

-.focalboard-body .label-container > .Label {
+.label-container > .Label {
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
@ -88,7 +88,7 @@

 }

-.focalboard-body .octo-property-value > .Label {
+.octo-property-value > .Label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;