From 14fd5c816871c4db7b50573c8bf9327f122624cc Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Wed, 25 Oct 2023 16:53:46 -0400 Subject: [PATCH] Remove some usage of changeCss and some unused CSS (#25049) * Inline .more-modal__gm-icon background * Remove superceded .user-popover__role background * Inline .svg-text-color fill * Inline .multi-select__note background * Remove superceded .status--group background rule * Split rules * Remove unused .modal-tabs rule and CSS * Inline .system-notice border-color rule * Inline .image-loaded border-color * Remove superceded .dropdown-menu button border-color * Removed unused .member-list__popover rules and CSS * Inline .alert-transparent border-color * Inline .access-history-modal .table border-color * Inline .post-list__arrows fill * Inline .card-icon__container color * Inline .post-image__download svg border-color and stroke * Split rules * Remove unused .channel-header__links rules and CSS * Remove unused .usage__icon rule and CSS * Remove unused .more-modal__header rule * Remove unused .icon--body rule * Inline .post-menu border-color * Remove unused .post-waiting rule and CSS * Inline .post__body color * Split rules * Inline .nav-tab color * Inline .input-group-addon color * Inline .app_content color rule * Remove unused .post-create-body rule and CSS * Inline .msg-typing color * Inline .dropdown-menu color * Inline .popover color * Remove superceded .suggestion-list__main color * Remove .tip-overlay rule and unused _tutorial.scss * Inline .form-control disabled and readonly color * Inline fieldset[disabled] color * Inline .post__link color * Remove unused #archive-link-home rule and CSS * Remove unused .video-thumbnail__error rule and CSS * Inline #post-create color * Remove unused .mentions--top rules * Inline .system-notice box-shadow and remove unneeded .shadow--2 rules * Split rules * Inline .shortcut-key background rule * Remove superceded .post__body hr background rule * Inline .loading__content .round background-color * Inline .tutorial__circles .circle background-color * Inline .channel-header .heading color * Update missed snapshots --------- Co-authored-by: Mattermost Build --- .../access_history_modal.test.tsx.snap | 4 +- .../access_history_modal.scss | 8 + .../access_history_modal.tsx | 4 +- .../list_item/list_item.tsx | 2 +- .../product_notices_modal.scss | 1 + .../components/shortcut_key/shortcut_key.scss | 1 + .../__snapshots__/system_notice.test.tsx.snap | 14 +- .../system_notice/system_notice.tsx | 2 +- .../widgets/icons/info_small_icon.tsx | 1 - .../channels/src/sass/components/_alerts.scss | 1 + .../src/sass/components/_dropdown.scss | 1 + .../channels/src/sass/components/_files.scss | 3 + .../channels/src/sass/components/_forms.scss | 5 + .../channels/src/sass/components/_inputs.scss | 10 + .../channels/src/sass/components/_modal.scss | 62 +- .../channels/src/sass/components/_module.scss | 1 - .../src/sass/components/_multi-select.scss | 1 + .../src/sass/components/_popover.scss | 201 +----- .../src/sass/components/_post-menu.scss | 2 +- .../channels/src/sass/components/_post.scss | 80 +-- .../channels/src/sass/components/_search.scss | 6 - .../src/sass/components/_system-notice.scss | 4 +- .../src/sass/components/_tutorial.scss | 584 ------------------ .../channels/src/sass/components/_videos.scss | 16 - webapp/channels/src/sass/layout/_content.scss | 19 +- webapp/channels/src/sass/layout/_headers.scss | 53 +- .../channels/src/sass/layout/_navigation.scss | 2 + .../src/sass/layout/_sidebar-menu.scss | 8 - .../src/sass/layout/_sidebar-right.scss | 7 - .../channels/src/sass/responsive/_mobile.scss | 25 - .../channels/src/sass/responsive/_tablet.scss | 17 - webapp/channels/src/sass/routes/_loading.scss | 2 +- webapp/channels/src/sass/routes/_print.scss | 1 - webapp/channels/src/utils/utils.tsx | 40 +- 34 files changed, 74 insertions(+), 1114 deletions(-) create mode 100644 webapp/channels/src/components/access_history_modal/access_history_modal.scss delete mode 100644 webapp/channels/src/sass/components/_tutorial.scss diff --git a/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap b/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap index d245fe15e1..945a069e72 100644 --- a/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap +++ b/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap @@ -8,7 +8,7 @@ exports[`components/AccessHistoryModal should match snapshot when audits exist 1 backdrop={true} bsClass="modal" bsSize="large" - dialogClassName="a11y__modal modal--scroll" + dialogClassName="a11y__modal modal--scroll access-history-modal" dialogComponentClass={[Function]} enforceFocus={true} keyboard={true} @@ -89,7 +89,7 @@ exports[`components/AccessHistoryModal should match snapshot when no audits exis backdrop={true} bsClass="modal" bsSize="large" - dialogClassName="a11y__modal modal--scroll" + dialogClassName="a11y__modal modal--scroll access-history-modal" dialogComponentClass={[Function]} enforceFocus={true} keyboard={true} diff --git a/webapp/channels/src/components/access_history_modal/access_history_modal.scss b/webapp/channels/src/components/access_history_modal/access_history_modal.scss new file mode 100644 index 0000000000..5ca57e645d --- /dev/null +++ b/webapp/channels/src/components/access_history_modal/access_history_modal.scss @@ -0,0 +1,8 @@ +.access-history-modal { + .table { + thead > tr > th, + tbody > tr > td { + border-color: rgba(var(--center-channel-color-rgb), 0.12); + } + } +} diff --git a/webapp/channels/src/components/access_history_modal/access_history_modal.tsx b/webapp/channels/src/components/access_history_modal/access_history_modal.tsx index 3a991e0bb5..8188f96138 100644 --- a/webapp/channels/src/components/access_history_modal/access_history_modal.tsx +++ b/webapp/channels/src/components/access_history_modal/access_history_modal.tsx @@ -10,6 +10,8 @@ import type {Audit} from '@mattermost/types/audits'; import AuditTable from 'components/audit_table'; import LoadingScreen from 'components/loading_screen'; +import './access_history_modal.scss'; + type Props = { onHide: () => void; actions: { @@ -52,7 +54,7 @@ const AccessHistoryModal = ({ return ( -
+
{option.profiles.length}
diff --git a/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss b/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss index d8b1f05dc7..76d6035d45 100644 --- a/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss +++ b/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss @@ -50,6 +50,7 @@ width: 6px; height: 6px; margin: 0 3px; + background-color: var(--center-channel-color); vertical-align: middle; } diff --git a/webapp/channels/src/components/shortcut_key/shortcut_key.scss b/webapp/channels/src/components/shortcut_key/shortcut_key.scss index 3188da0a80..37ff6a4f20 100644 --- a/webapp/channels/src/components/shortcut_key/shortcut_key.scss +++ b/webapp/channels/src/components/shortcut_key/shortcut_key.scss @@ -2,6 +2,7 @@ .shortcut-key { display: inline-block; padding: 10px 9px 8px 8px; + background: var(--center-channel-color); border-radius: 4px; color: var(--center-channel-bg); font-size: 14px; diff --git a/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap b/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap index ccf8d5ae0e..8e06026188 100644 --- a/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap +++ b/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap @@ -2,7 +2,7 @@ exports[`components/SystemNotice should match snapshot for admin, admin notice 1`] = `
{ return (
{icon} diff --git a/webapp/channels/src/components/widgets/icons/info_small_icon.tsx b/webapp/channels/src/components/widgets/icons/info_small_icon.tsx index 5614f76d94..452ec80ab1 100644 --- a/webapp/channels/src/components/widgets/icons/info_small_icon.tsx +++ b/webapp/channels/src/components/widgets/icons/info_small_icon.tsx @@ -9,7 +9,6 @@ export default function InfoSmallIcon(props: React.HTMLAttributes li { - width: 50%; - border: none; - border-bottom: 2px $light-gray solid; - margin-right: 0; - text-align: center; - - &.active { - border-bottom: 2px $primary-color solid; - - a { - opacity: 1; - } - } - - >a { - display: flex; - height: 40px; - align-items: center; - justify-content: center; - padding-bottom: 12px; - border: none; - background: var(--center-channel-bg); - color: inherit; - font-weight: 900; - opacity: 0.5; - outline: none; - - &:active { - opacity: 1; - } - } - } - } -} - .more-modal__button { .btn { width: 100%; diff --git a/webapp/channels/src/sass/components/_module.scss b/webapp/channels/src/sass/components/_module.scss index 44cd3ad9a2..fb7ad41d9a 100644 --- a/webapp/channels/src/sass/components/_module.scss +++ b/webapp/channels/src/sass/components/_module.scss @@ -32,7 +32,6 @@ @import 'status-icon'; @import 'suggestion-list'; @import 'tooltip'; -@import 'tutorial'; @import 'videos'; @import 'color-input'; @import 'system-notice'; diff --git a/webapp/channels/src/sass/components/_multi-select.scss b/webapp/channels/src/sass/components/_multi-select.scss index 079caba51c..fe34b53f28 100644 --- a/webapp/channels/src/sass/components/_multi-select.scss +++ b/webapp/channels/src/sass/components/_multi-select.scss @@ -42,6 +42,7 @@ display: table; width: 100%; padding: 8px 13px; + background: rgba(var(--center-channel-color-rgb), 0.12); border-radius: 3px; > div { diff --git a/webapp/channels/src/sass/components/_popover.scss b/webapp/channels/src/sass/components/_popover.scss index f0bb0c8fe3..615b0cf717 100644 --- a/webapp/channels/src/sass/components/_popover.scss +++ b/webapp/channels/src/sass/components/_popover.scss @@ -17,7 +17,7 @@ background: var(--center-channel-bg); border-radius: $border-rad * 2; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - color: lighten($black, 25%); + color: var(--center-channel-color); font-family: inherit; .app__body & { @@ -447,205 +447,6 @@ } } -.member-list__popover { - max-width: initial; - margin-left: 110px; - - &.popover.bottom { - margin-top: 2px; - } - - .more-modal__body { - position: relative; - overflow: auto; - max-height: 275px; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - } - - .more-modal__header { - display: flex; - padding: 14px 20px; - - .icon { - position: relative; - margin: 0 38px 0 24px; - opacity: 0.8; - } - - span { - align-self: center; - font-weight: 600; - } - - button { - width: fit-content; - margin-left: auto; - - i { - margin: 0 5px !important; - } - } - - .subhead { - font-size: 12px; - opacity: 0.6; - - span { - font-weight: normal; - } - } - } - - .more-modal__button { - display: flex; - - .btn { - width: 100%; - height: 42px; - padding: 0; - margin: 0 auto; - } - } - - .more-modal__list { - .more-modal__row { - overflow: hidden; - height: 50px; - padding: 0 12px 0 20px; - border: none; - margin: 1px 0; - cursor: pointer; - - .more-modal__actions { - padding: 0; - margin-left: 12px; - opacity: 1; - - button { - width: 2em; - height: 2em; - border-radius: 4px; - line-height: 0; - opacity: 0; - - &:hover { - background-color: rgba(var(--button-bg-rgb), 0.24); - } - - &:active { - background-color: rgba(var(--button-bg-rgb), 0.32); - } - - &.a11y--focused { - opacity: 1; - } - } - } - - &:hover { - padding-left: 17px; - border-left: 3px solid transparent; - - .more-modal__actions { - button { - opacity: 1; - } - } - - .more-modal__name { - font-weight: 600; - } - } - - &.more-modal__row--button { - position: relative; - height: 40px; - border-left: none; - - button { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - font-weight: 500; - } - } - - .shared-user-icon { - margin-top: 5px; - color: rgba(61, 60, 64, 0.56); - font-size: 16px; - } - } - - .more-modal__name { - display: block; - font-size: 13.5px; - font-weight: normal; - } - - .more-modal__image { - position: relative; - top: -1px; - margin: 0; - } - - .more-modal__details { - padding-left: 16px; - line-height: 39px; - - .shared-user-icon { - width: 16px; - height: 16px; - margin-top: 16px; - margin-left: 8px; - color: rgba(61, 60, 64, 0.72); - font-size: 16px; - line-height: 16px; - - &::before { - margin: 0; - } - } - } - - .more-modal__actions { - margin: 0; - line-height: 42px; - opacity: 0; - - .icon { - position: relative; - top: 2px; - } - } - } - - .popover-content { - position: relative; - width: 260px; - max-height: 380px; - padding: 0; - - .text-nowrap { - overflow: hidden; - width: 100%; - padding: 6px 10px; - font-size: 13px; - line-height: 26px; - } - - .more__name { - overflow: hidden; - max-width: 140px; - margin-left: 6px; - text-overflow: ellipsis; - } - } -} - .channel_search { display: flex; diff --git a/webapp/channels/src/sass/components/_post-menu.scss b/webapp/channels/src/sass/components/_post-menu.scss index 7dc5c51941..e385eca791 100644 --- a/webapp/channels/src/sass/components/_post-menu.scss +++ b/webapp/channels/src/sass/components/_post-menu.scss @@ -79,7 +79,7 @@ &.post--hovered, &.a11y--active { .post-menu { - border-color: rgba(v(center-channel-color-rgb), 0.08); + border-color: rgba(var(--center-channel-color-rgb), 0.2); background-color: v(center-channel-bg); box-shadow: $elevation-1; } diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss index 3836424846..d32b28fc14 100644 --- a/webapp/channels/src/sass/components/_post.scss +++ b/webapp/channels/src/sass/components/_post.scss @@ -326,7 +326,7 @@ width: 40px; height: 40px; background-repeat: no-repeat; - fill: #444; + fill: rgba(var(--center-channel-color-rgb), 0.3); opacity: 0; text-align: center; transition: all 0.6s; @@ -351,6 +351,7 @@ width: 100%; flex: 0 0 auto; background: var(--center-channel-bg); + color: var(--center-channel-color); label { font-weight: normal; @@ -399,62 +400,12 @@ } } - .post-create-body { - position: relative; - padding: 0 0 2px; - - .post-body__cell { - position: relative; - vertical-align: top; - } - - .send-button { - display: none; - width: 45px; - height: 100%; - padding-right: 4px; - border-left: 1px solid transparent; - cursor: pointer; - font-size: 17px; - line-height: 49px; - text-align: center; - transition: all 0.15s; - vertical-align: bottom; - - &:active { - opacity: 0.75; - } - - &.disabled { - i { - color: inherit; - } - } - - .android &, - .ios & { - display: block; - } - } - - .icon--emoji-picker { - cursor: pointer; - opacity: 0.5; - transition: all 0.15s; - - &:hover, - &:active { - box-shadow: none; - opacity: 0.9; - } - } - } - .msg-typing { display: block; overflow: hidden; height: 20px; margin: 2px 0; + color: var(--center-channel-color); font-size: 11px; line-height: 16px; opacity: 0.7; @@ -714,6 +665,10 @@ min-width: 0; } } + + .post__body { + color: rbga(var(--center-channel-color-rgb), 0.6); + } } &:hover, @@ -1588,6 +1543,7 @@ .post__link { overflow: hidden; margin: 2px 0 5px; + color: rgba(var(--center-channel-color), 0.65); font-size: 13px; text-overflow: ellipsis; -webkit-user-select: none; /* Chrome all / Safari all */ @@ -1776,22 +1732,6 @@ color: #d58a8a; } - .post-waiting { - position: relative; - color: #999; - - .spinner { - position: absolute; - top: 4px; - right: 8px; - width: 20px; - } - - .post-message { - padding-right: 24px; - } - } - .permalink-icon { display: inline-block; color: $primary-color; @@ -1872,6 +1812,7 @@ z-index: 1; top: 2px; margin: 0 6px 0 4px; + color: rgba(var(--center-channel-color-rgb), 0.3); opacity: 0.24; vertical-align: top; @@ -1886,6 +1827,7 @@ svg { width: 14px; height: 14px; + fill: var(--center-channel-color); } } @@ -2375,7 +2317,7 @@ .post.current--user { &.other--root, - &.post--root, { + &.post--root { .post__header-set-custom-status { display: revert; padding: 0 6px; diff --git a/webapp/channels/src/sass/components/_search.scss b/webapp/channels/src/sass/components/_search.scss index f069a5027b..10ae6b10df 100644 --- a/webapp/channels/src/sass/components/_search.scss +++ b/webapp/channels/src/sass/components/_search.scss @@ -6,12 +6,6 @@ } .search-bar__container { - .channel-header__links { - .sidebar--right & { - line-height: 25px; - } - } - padding: 0 4px 0 8px; } diff --git a/webapp/channels/src/sass/components/_system-notice.scss b/webapp/channels/src/sass/components/_system-notice.scss index 88aceceff8..d565a3fd8f 100644 --- a/webapp/channels/src/sass/components/_system-notice.scss +++ b/webapp/channels/src/sass/components/_system-notice.scss @@ -8,10 +8,10 @@ display: flex; width: 386px; padding: 18px 20px 0; - border: 1px solid alpha-color($black, 0.15); + border: 1px solid rgba(var(--center-channel-color-rgb, 0.12)); background-color: var(--center-channel-bg); border-radius: 4px; - box-shadow: 0 20px 30px alpha-color($black, 0.07), 0 14px 20px alpha-color($black, 0.07); + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 20px 30px 0, rgba(var(--center-channel-color-rgb), 0.1) 0 14px 20px 0; } .system-notice__logo { diff --git a/webapp/channels/src/sass/components/_tutorial.scss b/webapp/channels/src/sass/components/_tutorial.scss deleted file mode 100644 index 2a0d1ab319..0000000000 --- a/webapp/channels/src/sass/components/_tutorial.scss +++ /dev/null @@ -1,584 +0,0 @@ -@charset "UTF-8"; - -@import "sass/utils/variables"; -@import "sass/utils/functions"; - -$backdrop-index: 999; -$tip-index: 1000; - -.tutorial-tip { - &__header { - display: flex; - align-items: center; - justify-content: flex-start; - - &__title { - flex: auto; - order: 0; - margin: 0; - font-family: inherit; - font-size: 1.4rem; - font-style: normal; - font-weight: 600; - line-height: 2rem; - } - - &__close { - display: flex; - overflow: hidden; - width: 3.2rem; - height: 3.2rem; - flex-shrink: 0; - align-items: center; - justify-content: center; - border: unset; - margin-left: 1.2rem; - background: transparent; - border-radius: 4px; - color: rgba(var(--center-channel-color-rgb), 0.56); - font-weight: 600; - - &:hover { - background: rgba(var(--center-channel-color-rgb), 0.08); - } - - &.active { - background: rgba(var(--center-channel-color-rgb), 0.08); - } - - i { - font-size: 1.8rem; - line-height: 1.8rem; - - ::before { - margin-right: 0; - } - } - } - } - - &__body { - display: flex; - flex-direction: column; - margin-top: 0.6rem; - - p { - margin: 0 0 0.8rem; - font-size: 1.4rem; - line-height: 2rem; - - &:last-of-type { - margin-bottom: 0; - } - } - } - - &__btn-ctr { - display: flex; - flex-grow: 1; - justify-content: flex-end; - } - - &__btn { - display: inline-flex; - height: 3.2rem; - align-items: center; - padding: 10px 16px; - border: none; - border-radius: 4px; - font-size: 12px; - font-weight: 600; - line-height: 12px; - } - - &__confirm-btn { - background: var(--button-bg); - color: var(--button-color); - - &:hover:not(.disabled) { - background: - linear-gradient( - 0deg, - rgba(var(--center-channel-color-rgb), 0.16), - rgba(var(--center-channel-color-rgb), 0.16) - ), - var(--button-bg); - } - - &:active { - background: - linear-gradient( - 0deg, - rgba(var(--center-channel-color-rgb), 0.32), - rgba(var(--center-channel-color-rgb), 0.32) - ), - var(--button-bg); - } - - &:focus { - box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border); - } - - .icon-chevron-right::before { - margin-right: -7px; - } - } - - &__cancel-btn { - display: inline-flex; - align-items: center; - margin-right: 4px; - background: rgba(var(--button-bg-rgb), 0.08); - border-radius: 4px; - color: var(--button-bg); - text-decoration: none; - - &:hover { - background: rgba(var(--button-bg-rgb), 0.04); - } - - &:active { - background: rgba(var(--button-bg-rgb), 0.08); - } - - &:focus { - box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border); - } - - .icon-chevron-left::before { - margin-left: -7px; - } - } - - &__circles-ctr { - display: flex; - align-items: center; - justify-content: flex-start; - } - - &__circular-ring { - position: relative; - display: flex; - width: 12px; - height: 12px; - align-items: center; - justify-content: center; - margin-right: 4px; - background: transparent; - border-radius: 50%; - - &:last-child { - margin-right: 0; - } - } - - &__circular-ring-active { - background: rgba(var(--button-bg-rgb), 0.16); - } - - &__circle { - position: absolute; - top: 3px; - left: 3px; - width: 6px; - height: 6px; - background: rgba(var(--button-bg-rgb), 0.32); - border-radius: 6px; - - &.active { - background: rgba(var(--button-bg-rgb), 1); - } - } - - &__footer { - display: flex; - flex-direction: column; - margin-top: 2.4rem; - - &-buttons { - display: flex; - align-items: center; - justify-content: start; - } - } - - &__opt { - align-self: flex-end; - margin-top: 1.2rem; - font-size: 12px; - - span { - opacity: 0.9; - } - } -} - -.tip-backdrop { - position: absolute; - z-index: $backdrop-index; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: alpha-color($black, 0.5); -} - -.tip-overlay { - position: absolute; - z-index: $tip-index; - width: 32rem; - padding: 1.8rem 2.4rem 2.4rem; - border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); - background: var(--center-channel-bg); - border-radius: 4px; - filter: drop-shadow(0 12px 32px rgba($black, 0.12)); - - .arrow { - position: absolute; - left: 24px; - display: block; - width: 1.7rem; - height: 1.7rem; - border-width: 1px 0 0 1px; - border-style: solid; - border-color: rgba(var(--center-channel-color-rgb), 0.16); - background: var(--center-channel-bg); - transform: rotate(-45deg); - } - - .svg-wrapper { - display: flex; - - svg { - margin: 0 auto; - } - } - - .handSvg.svg-wrapper { - margin: 20px 0 30px 0; - } - - &.tip-overlay--sidebar { - margin: 154px 0 0 6px; - - .tutorial__footer { - position: absolute; - bottom: 20px; - left: 0; - width: 100%; - padding: 0 20px; - } - - .arrow { - top: 32px; - left: -9px; - margin-top: -10px; - } - - &.first-channel { - margin-top: 131px; - } - } - - &.tip-overlay--header--left { - margin: 10px 0 0 7px; - - .arrow { - top: 34px; - left: -9px; - } - - &.tip-overlay--header--heading { - .arrow { - top: 40px; - } - } - } - - &.tip-overlay--header--bottom { - margin-top: -10px; - - .arrow { - top: -9px; - left: 50%; - margin-left: -10px; - } - } - - &.tip-overlay--start-trial { - margin-top: 100px; - margin-left: 5px; - box-shadow: var(--elevation-2); - - .arrow { - top: 25px; - left: -10px; - border-right-color: var(--center-channel-bg); - border-left-width: 0; - } - } - - &.tip-overlay--chat { - width: 40.8rem; - margin-top: -7px; - box-shadow: var(--elevation-2); - - .arrow { - bottom: -10px; - left: calc(50% - 7px); - transform: rotate(-135deg); - } - } - - &.tip-overlay--add-channels { - margin-left: 6px; - - .arrow { - top: 81px; - left: -9px; - } - - &.tip-overlay--top-row-placement { - .arrow { - top: 41px; - } - } - } - - &.tip-overlay--threads-welcome { - margin: 85px 0 0 6px; - - .arrow { - top: 24px; - left: -9px; - } - } - - &.tip-overlay--threads-list { - margin: 99px 0 0 6px; - - .arrow { - top: 24px; - left: -9px; - } - } - - &.tip-overlay--threads-unread { - margin: 6px 0 0 126px; - - .arrow { - top: -9px; - left: 24px; - transform: rotate(45deg); - } - } - - &.tip-overlay--threads-pane { - margin: 37px 0 0 -6px; - - .arrow { - top: 24px; - right: -9px; - left: unset; - transform: rotate(135deg); - } - } - - &.tip-overlay--product-switcher { - margin-top: 6px; - margin-left: 4px; - - .arrow { - top: -9px; - left: 24px; - transform: rotate(45deg); - } - } - - &.tip-overlay--settings { - margin: 7px 0 0 -20px; - - .arrow { - top: -9px; - right: 24px; - left: unset; - transform: rotate(45deg); - } - } -} - -.tip-button { - position: relative; - z-index: 998; - top: -10px; - right: -10px; - cursor: pointer; -} - -.tip-div { - position: absolute; - top: 0; - right: 0; - - &.tip-overlay--chat { - right: unset; - left: 0; - } - - &.tip-overlay--start-trial { - top: 15px; - right: -15px; - left: unset; - } - - &.tip-overlay--header { - top: 21px; - right: 2px; - - .tip-button { - opacity: 0.8; - } - } - - &.tip-overlay--header--left { - // needs to be over the top of the dropdown trigger - z-index: 1; - top: 8px; - right: 14px; - padding: 0 0 12px 12px; - - &.tip-overlay--header--heading { - top: 0; - right: -6px; - padding: 0 0 12px 12px; - } - } - - &.tip-overlay--actions { - margin-top: -7px; - margin-right: 8px; - } - - &.tip-overlay--sidebar { - top: 10px; - right: 10px; - } - - &.tip-overlay--add-channels { - top: -6px; - right: -13px; - padding: 0 8px 24px 24px; - cursor: pointer; - } - - &.tip-overlay--threads-welcome { - top: 10px; - right: 5px; - padding: 0 8px 24px 24px; - cursor: pointer; - } - - &.tip-overlay--threads-list { - top: 58px; - right: -2px; - padding: 0 8px 24px 24px; - cursor: pointer; - } - - &.tip-overlay--threads-unread { - top: 35px; - right: 24px; - padding: 0 8px 24px 24px; - cursor: pointer; - } - - &.tip-overlay--threads-pane { - top: 25px; - right: unset; - left: 4px; - cursor: pointer; - } - - &.tip-overlay--product-switcher { - z-index: $backdrop-index + 1; - right: unset; - padding: 16px 0 0 20px; - margin: 0; - cursor: pointer; - - .arrow { - top: -13px; - right: 44px; - } - } - - &.tip-overlay--settings { - // needs to be over: - // the highest .channel-header setting - // the tip backdrop because it spills over the highlighted punchout - // needs to be underneath the tip. - z-index: $backdrop-index + 1; - top: 23px; - right: 38px; - padding: 10px; - margin: 0; - } -} - -body.announcement-bar--fixed { - .tip-overlay { - &.tip-overlay--add-channels { - margin-top: $announcement-bar-height; - } - - &.tip-overlay--header--left { - margin-top: 10px + $announcement-bar-height; - } - } -} - -// Mobile view -@media screen and (max-width: 768px) { - .tip-div { - &.tip-overlay--chat { - left: calc(50% - 4px); - } - - &.tip-overlay--sidebar, - &.tip-overlay--threads-welcome { - top: 17px; - } - - &.tip-overlay--threads-list { - top: unset; - right: unset; - bottom: -16px; - left: calc(50% - 16px); - } - } - - .tip-overlay { - top: unset !important; - bottom: 0 !important; - left: calc(50% - 16rem) !important; - margin: 0 0 20px 0 !important; - - .arrow { - display: none; - } - - &.tip-overlay--chat { - left: calc(50% - 204px) !important; - margin-left: unset; - } - } -} - -@media screen and (max-width: 425px) { - .tip-overlay { - &.tip-overlay--chat { - left: calc(50% - 16rem) !important; - width: 32rem; - } - } -} diff --git a/webapp/channels/src/sass/components/_videos.scss b/webapp/channels/src/sass/components/_videos.scss index a70b77b265..ea59f2be52 100644 --- a/webapp/channels/src/sass/components/_videos.scss +++ b/webapp/channels/src/sass/components/_videos.scss @@ -21,22 +21,6 @@ cursor: pointer; } - .video-thumbnail__error { - width: 100%; - height: 100%; - padding: 110px 0; - line-height: 2; - text-align: center; - - .fa { - opacity: 0.5; - } - - div { - font-size: 1.2em; - } - } - .block { position: absolute; top: 50%; diff --git a/webapp/channels/src/sass/layout/_content.scss b/webapp/channels/src/sass/layout/_content.scss index 9e6284582e..34e37eefa9 100644 --- a/webapp/channels/src/sass/layout/_content.scss +++ b/webapp/channels/src/sass/layout/_content.scss @@ -54,30 +54,13 @@ flex-direction: column; padding-top: 50px; background: var(--center-channel-bg); + color: var(--center-channel-text); .channel__wrap & { padding-top: 0; } } -#archive-link-home { - flex: 0 0 auto; - cursor: pointer; - font-size: 13px; - - .fa { - font-size: 11px; - opacity: 0.7; - } - - a { - display: block; - width: 100%; - padding: 10px 20px; - color: inherit; - } -} - .delete-message-text { margin-top: 10px; } diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss index cac525ebb5..f9bcd0ceec 100644 --- a/webapp/channels/src/sass/layout/_headers.scss +++ b/webapp/channels/src/sass/layout/_headers.scss @@ -217,6 +217,7 @@ .heading { overflow: hidden; margin: 0 0 0 2px; + color: var(--center-channel-color); font-family: Metropolis, sans-serif; font-size: 16px; font-weight: 600; @@ -819,59 +820,9 @@ } } -.app__body { - .channel-header__links { - display: inline-block; - width: 30px; - height: 30px; - margin-right: 1px; - font-family: "Open Sans", sans-serif; - font-size: 22px; - line-height: 26px; - text-align: center; - - th { - &:last-child { - div { - margin-right: 10px; - } - } - } - - .channel__wrap.move--left & { - position: absolute; - top: 14px; - right: -400px; - } - - > a { - color: inherit; - opacity: 0.6; - text-decoration: none; - transition: all 0.1s ease-in; - - &:hover { - opacity: 0.7; - } - - &:focus { - color: inherit; - } - - &.active { - color: $primary-color; - opacity: 1; - - .icon { - fill: $primary-color; - } - } - } - } -} - .channel-header-archived-icon { position: relative; top: 2px; margin-right: 5px; + fill: var(--center-channel-color); } diff --git a/webapp/channels/src/sass/layout/_navigation.scss b/webapp/channels/src/sass/layout/_navigation.scss index 33518f42c9..18a543b583 100644 --- a/webapp/channels/src/sass/layout/_navigation.scss +++ b/webapp/channels/src/sass/layout/_navigation.scss @@ -8,6 +8,7 @@ .nav-tabs { margin-bottom: 10px; background: var(--center-channel-bg); + color: var(--center-channel-color); > li { margin-right: 5px; @@ -15,6 +16,7 @@ &.active { > a { background: var(--center-channel-bg); + color: var(--center-channel-color); } } diff --git a/webapp/channels/src/sass/layout/_sidebar-menu.scss b/webapp/channels/src/sass/layout/_sidebar-menu.scss index 7afb8b8f01..b2a8e79379 100644 --- a/webapp/channels/src/sass/layout/_sidebar-menu.scss +++ b/webapp/channels/src/sass/layout/_sidebar-menu.scss @@ -111,11 +111,3 @@ } } } - -.app__body { - .modal-tabs { - .nav-tabs > li { - background-color: var(--center-channel-bg); - } - } -} diff --git a/webapp/channels/src/sass/layout/_sidebar-right.scss b/webapp/channels/src/sass/layout/_sidebar-right.scss index d484ff8cdb..0485bf3551 100644 --- a/webapp/channels/src/sass/layout/_sidebar-right.scss +++ b/webapp/channels/src/sass/layout/_sidebar-right.scss @@ -281,13 +281,6 @@ font-size: 0.95em; } - .usage__icon { - position: relative; - top: 3px; - margin: 0 3px; - opacity: 0.9; - } - &.sidebar-expanded { width: 52%; } diff --git a/webapp/channels/src/sass/responsive/_mobile.scss b/webapp/channels/src/sass/responsive/_mobile.scss index ab862df57d..67a03837c9 100644 --- a/webapp/channels/src/sass/responsive/_mobile.scss +++ b/webapp/channels/src/sass/responsive/_mobile.scss @@ -747,27 +747,6 @@ padding: 0; } - .post-create-body { - padding: 0; - - .send-button { - display: block; - } - - textarea { - .app-content & { - border-right: none; - border-left: none; - } - } - - .post-body__actions { - .Menu.dropdown-menu { - max-height: 80vh; - } - } - } - .msg-typing { display: none; } @@ -1420,10 +1399,6 @@ border-radius: 3px; } } - - .channel-header__links { - display: none; - } } .sidebar--menu { diff --git a/webapp/channels/src/sass/responsive/_tablet.scss b/webapp/channels/src/sass/responsive/_tablet.scss index 64daa5c5af..1fb7f7d997 100644 --- a/webapp/channels/src/sass/responsive/_tablet.scss +++ b/webapp/channels/src/sass/responsive/_tablet.scss @@ -59,17 +59,6 @@ display: none; } - .post-right__scroll { - .post-create__container { - .post-create-body { - .icon__emoji_picker { - top: -7px; - display: none; - } - } - } - } - .signup-team__container { &.branded { display: block; @@ -507,12 +496,6 @@ width: 100% !important; } } - - .channel-header__links { - position: relative; - top: auto; - right: auto; - } } &.move--left, diff --git a/webapp/channels/src/sass/routes/_loading.scss b/webapp/channels/src/sass/routes/_loading.scss index 964515fe6b..cd072db799 100644 --- a/webapp/channels/src/sass/routes/_loading.scss +++ b/webapp/channels/src/sass/routes/_loading.scss @@ -42,7 +42,7 @@ height: 4px; margin: 0 2px; animation: move 0.75s infinite linear; - background-color: #444; + background-color: var(--center-channel-color); border-radius: 10px; opacity: 0.1; } diff --git a/webapp/channels/src/sass/routes/_print.scss b/webapp/channels/src/sass/routes/_print.scss index 6ebb28c66a..7463306a90 100644 --- a/webapp/channels/src/sass/routes/_print.scss +++ b/webapp/channels/src/sass/routes/_print.scss @@ -62,7 +62,6 @@ .post__body .img-div, .post-image__thumbnail, .post.post--system, - #archive-link-home, .channel-intro { display: none; } diff --git a/webapp/channels/src/utils/utils.tsx b/webapp/channels/src/utils/utils.tsx index ad0cdeade0..84e5515ce0 100644 --- a/webapp/channels/src/utils/utils.tsx +++ b/webapp/channels/src/utils/utils.tsx @@ -321,33 +321,8 @@ export function toRgbValues(hexStr: string): string { export function applyTheme(theme: Theme) { if (theme.centerChannelColor) { - changeCss('.app__body .bg-text-200', 'background:' + changeOpacity(theme.centerChannelColor, 0.2)); - changeCss('.app__body .user-popover__role', 'background:' + changeOpacity(theme.centerChannelColor, 0.3)); - changeCss('.app__body .svg-text-color', 'fill:' + theme.centerChannelColor); - changeCss('.app__body .suggestion-list__icon .status.status--group, .app__body .multi-select__note', 'background:' + changeOpacity(theme.centerChannelColor, 0.12)); - changeCss('.app__body .modal-tabs .nav-tabs > li, .app__body .system-notice, .app__body .file-view--single .file__image .image-loaded, .app__body .post .MenuWrapper .dropdown-menu button, .app__body .member-list__popover .more-modal__body, .app__body .alert.alert-transparent, .app__body .table > thead > tr > th, .app__body .table > tbody > tr > td', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.12)); - changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3)); - changeCss('.app__body .post .card-icon__container', 'color:' + changeOpacity(theme.centerChannelColor, 0.3)); - changeCss('.app__body .post-image__details .post-image__download svg', 'stroke:' + changeOpacity(theme.centerChannelColor, 0.4)); - changeCss('.app__body .post-image__details .post-image__download svg', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.35)); - changeCss('.app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon, .app__body .more-modal__header svg, .app__body .icon--body', 'fill:' + theme.centerChannelColor); - changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .post-menu, .app__body .post.post--hovered .post__header .post-menu, .app__body .post.a11y--active .post__header .post-menu', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); - changeCss('.app__body .help-text, .app__body .post .post-waiting, .app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6)); - changeCss('.app__body .nav-tabs, .app__body .nav-tabs > li.active > a, pp__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .dropdown-menu, .app__body .popover, .app__body .suggestion-list__item .suggestion-list__ellipsis .suggestion-list__main, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor); - changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65)); - changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15)); - changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor); - changeCss('.app__body .mentions--top', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px'); - changeCss('.app__body .mentions--top', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px'); - changeCss('.app__body .mentions--top', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px'); - changeCss('.app__body .shadow--2', 'box-shadow: 0 20px 30px 0' + changeOpacity(theme.centerChannelColor, 0.1) + ', 0 14px 20px 0 ' + changeOpacity(theme.centerChannelColor, 0.1)); - changeCss('.app__body .shadow--2', '-moz-box-shadow: 0 20px 30px 0 ' + changeOpacity(theme.centerChannelColor, 0.1) + ', 0 14px 20px 0 ' + changeOpacity(theme.centerChannelColor, 0.1)); - changeCss('.app__body .shadow--2', '-webkit-box-shadow: 0 20px 30px 0 ' + changeOpacity(theme.centerChannelColor, 0.1) + ', 0 14px 20px 0 ' + changeOpacity(theme.centerChannelColor, 0.1)); - changeCss('.app__body .shortcut-key, .app__body .post__body hr, .app__body .loading-screen .loading__content .round, .app__body .tutorial__circles .circle', 'background:' + theme.centerChannelColor); - changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor); changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07)); changeCss('.app__body .channel-header__info .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8)); - changeCss('.app__body .post-create__container .post-create-body .send-button.disabled i', 'color:' + changeOpacity(theme.centerChannelColor, 0.4)); changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6)); changeCss('.app__body .channel-header .channel-header_plugin-dropdown svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6)); changeCss('.app__body .file-preview, .app__body .post-image__details, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .webhooks__container, .app__body .dropdown-menu', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); @@ -387,7 +362,7 @@ export function applyTheme(theme: Theme) { changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor); changeCss('.app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor); - changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .status svg, .app__body .edit-post__actions .icon svg', 'fill:' + theme.centerChannelColor); + changeCss('.app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .status svg, .app__body .edit-post__actions .icon svg', 'fill:' + theme.centerChannelColor); changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5)); changeCss('@media(min-width: 768px){.app__body .post.post--compact.same--root.post--comment .post__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); @@ -409,16 +384,15 @@ export function applyTheme(theme: Theme) { } if (theme.linkColor) { - changeCss('.app__body .more-modal__list .a11y--focused, .app__body .post.a11y--focused, .app__body .channel-header.a11y--focused, .app__body .post-create.a11y--focused, .app__body .user-popover.a11y--focused, .app__body .post-message__text.a11y--focused, #archive-link-home>a.a11y--focused', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', inset 0 0 0 1px ' + theme.linkColor); + changeCss('.app__body .more-modal__list .a11y--focused, .app__body .post.a11y--focused, .app__body .channel-header.a11y--focused, .app__body .post-create.a11y--focused, .app__body .user-popover.a11y--focused, .app__body .post-message__text.a11y--focused', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', inset 0 0 0 1px ' + theme.linkColor); changeCss('.app__body .a11y--focused', 'box-shadow: 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', 0 0 0 1px ' + theme.linkColor); - changeCss('.app__body .channel-header .channel-header__favorites.inactive:hover, .app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .channel-header__links > .color--link.active, .app__body .color--link, .app__body a:focus, .app__body .color--link:hover', 'color:' + theme.linkColor); + changeCss('.app__body .channel-header .channel-header__favorites.inactive:hover, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .color--link, .app__body a:focus, .app__body .color--link:hover', 'color:' + theme.linkColor); changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5)); - changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover, .app__body .member-list__popover .more-modal__list .more-modal__row:hover', 'background:' + changeOpacity(theme.linkColor, 0.08)); - changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .post__reply', 'fill:' + theme.linkColor); - changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .card-icon__container.active svg, .app__body .post .post__reply', 'fill:' + theme.linkColor); + changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover', 'background:' + changeOpacity(theme.linkColor, 0.08)); + changeCss('.app__body .post .post__reply', 'fill:' + theme.linkColor); + changeCss('.app__body .post .card-icon__container.active svg, .app__body .post .post__reply', 'fill:' + theme.linkColor); changeCss('.app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + changeOpacity(theme.linkColor, 0.6)); - changeCss('.app__body .member-list__popover .more-modal__actions svg', 'fill:' + theme.linkColor); - changeCss('.app__body .modal-tabs .nav-tabs > li.active, .app__body .channel-header .channel-header_plugin-dropdown a:hover, .app__body .member-list__popover .more-modal__list .more-modal__row:hover', 'border-color:' + theme.linkColor); + changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover', 'border-color:' + theme.linkColor); changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover svg', 'fill:' + theme.linkColor); changeCss('.app__body .channel-header .dropdown-toggle:hover .heading, .app__body .channel-header .dropdown-toggle:hover .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .heading', 'color:' + theme.linkColor); changeCss('.emoji-picker__container .icon--emoji.active svg', 'fill:' + theme.linkColor);