From 8f0d2b05ea367b1d7b815586b68c1f0577aa747a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 26 Dec 2023 12:36:22 +0500 Subject: [PATCH] MM-56352 - Making modals consistent overall (#25622) * Modal UI Improvements * Updating modal header * Updating modals * Updating invite as a guest * Updating modals * Modal fixes * Updating modal footer DMs * Updating footer buttons next prev * Updating tests * Updating tests * Updating modal css * Updating modal * Updating UI * Updating modal snap * Updating modal issues * Updating modal * Updating modal scss * Updating modal changes * Updating sys console modal * Updating modal css * Updating modal issue * Removing css file * Updating test * Updating modal * Updating test spec --- .../searchable_channel_list.test.tsx.snap | 4 +- .../add_groups_to_channel_modal.test.tsx.snap | 14 +- .../add_groups_to_channel_modal.tsx | 5 +- .../add_groups_to_team_modal.test.tsx.snap | 8 +- .../add_groups_to_team_modal.tsx | 3 +- .../multiselect_option/multiselect_option.tsx | 5 +- .../add_users_to_team_modal.tsx | 5 +- .../delete_workspace_modal.tsx | 1 + .../license_settings/license_settings.scss | 9 - .../modals/confirm_license_removal_modal.scss | 12 +- .../modals/confirm_license_removal_modal.tsx | 1 + .../modals/ee_license_modal.tsx | 1 + .../modals/upload_license_modal.tsx | 1 + .../edit_post_time_limit_modal.tsx | 10 +- .../add_users_to_role_modal.tsx | 5 +- .../index.tsx | 1 + .../no_internet_connection.tsx | 1 + .../notification_from_members_modal.tsx | 11 +- .../browse_channels/browse_channels.scss | 9 +- .../channel_invite_modal.test.tsx.snap | 99 ++++---- .../channel_invite_modal.tsx | 35 ++- .../channel_selector_modal.tsx | 2 +- .../request_business_email_modal.tsx | 1 + .../components/common/carousel/carousel.scss | 5 +- .../channels/src/components/confirm_modal.tsx | 2 +- .../create_user_groups_modal.test.tsx.snap | 42 ++-- .../create_user_groups_modal.tsx | 4 +- .../custom_status/custom_status.scss | 45 ++-- .../custom_status/custom_status_modal.tsx | 1 + .../delete_category_modal.tsx | 1 + .../dnd_custom_time_picker_modal.scss | 15 +- .../dnd_custom_time_picker_modal.tsx | 1 + .../edit_category_modal.tsx | 1 + .../edit_channel_header_modal.test.tsx.snap | 5 - .../edit_channel_header_modal.tsx | 1 - .../invitation_modal/invitation_modal.scss | 75 ------ .../invitation_modal/invitation_modal.tsx | 2 +- .../invitation_modal/invite_view.tsx | 9 +- .../invitation_modal/result_view.scss | 6 - .../invitation_modal/result_view.tsx | 7 +- .../keyboard_shortcuts_modal.test.tsx.snap | 2 + .../keyboard_shortcuts_modal.scss | 36 +-- .../keyboard_shortcuts_modal.tsx | 5 +- .../keyboard_shortcuts_sequence.scss | 2 + .../learn_more_trial_modal.scss | 141 ----------- .../learn_more_trial_modal.tsx | 3 +- .../start_trial_btn.scss | 1 - .../start_trial_btn.test.tsx | 2 +- .../start_trial_btn.tsx | 2 +- webapp/channels/src/components/list_modal.tsx | 4 +- .../__snapshots__/list_item.test.tsx.snap | 8 +- .../list_item/list_item.tsx | 3 +- .../__snapshots__/multiselect.test.tsx.snap | 6 +- .../components/multiselect/multiselect.tsx | 6 +- .../marketplace_modal.test.tsx.snap | 7 + .../post_edit_history/restore_post_modal.tsx | 1 + ...ost_reminder_custom_time_picker_modal.scss | 27 +- .../src/components/pricing_modal/content.tsx | 6 +- .../pricing_modal/pricing_modal.scss | 30 --- .../pricing_modal/self_hosted_content.tsx | 6 +- .../components/quick_input/quick_input.tsx | 2 +- .../quick_switch_modal.test.tsx.snap | 10 +- .../quick_switch_modal/quick_switch_modal.tsx | 6 +- .../__snapshots__/search_bar.test.tsx.snap | 20 +- .../components/searchable_channel_list.tsx | 8 +- .../searchable_user_list.tsx | 4 +- .../mark_as_read_confirm_modal.tsx | 1 + .../collapsed_reply_threads_modal.tsx | 1 + .../user_group_popover.test.tsx.snap | 4 +- .../user_groups_modal/user_groups_modal.scss | 22 +- .../src/sass/components/_admin-modal.scss | 7 - .../src/sass/components/_buttons.scss | 2 +- .../components/_channel-invite-modal.scss | 26 +- .../sass/components/_channel-switcher.scss | 43 +--- .../_edit-post-time-limit-modal.scss | 4 + .../channels/src/sass/components/_forms.scss | 5 +- .../channels/src/sass/components/_modal.scss | 232 ++++++------------ .../channels/src/sass/components/_module.scss | 1 - .../src/sass/components/_multi-select.scss | 3 +- .../channels/src/sass/components/_post.scss | 36 --- .../src/sass/components/_react-select.scss | 2 +- .../src/sass/components/_settings-modal.scss | 51 +--- .../src/sass/components/_suggestion-list.scss | 8 + .../src/sass/routes/_about-modal.scss | 54 +--- .../src/sass/routes/_admin-console.scss | 8 +- .../__snapshots__/generic_modal.test.tsx.snap | 1 + .../src/generic_modal/generic_modal.scss | 156 +----------- .../src/generic_modal/generic_modal.tsx | 5 +- 88 files changed, 423 insertions(+), 1062 deletions(-) delete mode 100644 webapp/channels/src/components/invitation_modal/result_view.scss delete mode 100644 webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.scss delete mode 100644 webapp/channels/src/sass/components/_admin-modal.scss diff --git a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap index ac38d239515..41b1a9b018a 100644 --- a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap +++ b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap @@ -11,8 +11,8 @@ exports[`components/SearchableChannelList should match init snapshot 1`] = ` aria-hidden="true" id="searchIcon" > - - + @@ -191,7 +193,9 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
- +
@@ -238,7 +242,9 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
- +
diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx index 03d55748aae..2b9a63ee21b 100644 --- a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx +++ b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx @@ -13,7 +13,6 @@ import type {ActionFunc} from 'mattermost-redux/types/actions'; import MultiSelect from 'components/multiselect/multiselect'; import type {Value} from 'components/multiselect/multiselect'; -import AddIcon from 'components/widgets/icons/fa_add_icon'; import groupsAvatar from 'images/groups-avatar.png'; import Constants from 'utils/constants'; @@ -218,7 +217,7 @@ export default class AddGroupsToChannelModal extends React.PureComponent
- +
@@ -271,7 +270,7 @@ export default class AddGroupsToChannelModal extends React.PureComponent - + - + @@ -195,7 +197,9 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
- +
diff --git a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx index 6b768a1b95a..757309aecff 100644 --- a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx +++ b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx @@ -12,7 +12,6 @@ import {SyncableType} from '@mattermost/types/groups'; import Nbsp from 'components/html_entities/nbsp'; import MultiSelect from 'components/multiselect/multiselect'; import type {Value} from 'components/multiselect/multiselect'; -import AddIcon from 'components/widgets/icons/fa_add_icon'; import groupsAvatar from 'images/groups-avatar.png'; import Constants from 'utils/constants'; @@ -222,7 +221,7 @@ export default class AddGroupsToTeamModal extends React.PureComponent
- +
diff --git a/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx b/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx index 778c81160f4..ceb6c98bc10 100644 --- a/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx +++ b/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx @@ -12,7 +12,6 @@ import {isGuest} from 'mattermost-redux/utils/user_utils'; import type {Value} from 'components/multiselect/multiselect'; import ProfilePicture from 'components/profile_picture'; -import AddIcon from 'components/widgets/icons/fa_add_icon'; import BotTag from 'components/widgets/tag/bot_tag'; import GuestTag from 'components/widgets/tag/guest_tag'; @@ -58,7 +57,9 @@ const MultiSelectOption = React.forwardRef(({
- +
diff --git a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx index 42eae05cf4d..3191e623d41 100644 --- a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx +++ b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx @@ -14,7 +14,6 @@ import {isGuest} from 'mattermost-redux/utils/user_utils'; import MultiSelect from 'components/multiselect/multiselect'; import type {Value} from 'components/multiselect/multiselect'; import ProfilePicture from 'components/profile_picture'; -import AddIcon from 'components/widgets/icons/fa_add_icon'; import BotTag from 'components/widgets/tag/bot_tag'; import GuestTag from 'components/widgets/tag/guest_tag'; @@ -134,7 +133,9 @@ export default class AddUsersToTeamModal extends React.PureComponent
- +
diff --git a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx b/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx index 88f6299482a..046f4c9a3e0 100644 --- a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx +++ b/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx @@ -183,6 +183,7 @@ export default function DeleteWorkspaceModal(props: Props) { return ( diff --git a/webapp/channels/src/components/admin_console/license_settings/license_settings.scss b/webapp/channels/src/components/admin_console/license_settings/license_settings.scss index 1782039420b..88ba400075c 100644 --- a/webapp/channels/src/components/admin_console/license_settings/license_settings.scss +++ b/webapp/channels/src/components/admin_console/license_settings/license_settings.scss @@ -39,15 +39,6 @@ } } -.modal .modal-header .close { - opacity: 0.7; - - &:hover { - background: none; - opacity: 1; - } -} - .banner-start-trial { .license-trial-legal-terms { color: #3f4350; diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.scss b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.scss index 64255eb5a10..765a04b0d46 100644 --- a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.scss +++ b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.scss @@ -1,17 +1,7 @@ .ConfirmLicenseRemovalModal { - .modal-header { - border-bottom: none !important; - background: none !important; - - button.close { - span { - color: rgba(63, 67, 80, 0.56) !important; - } - } - } - .modal-body { padding-top: 0 !important; + padding-bottom: 40px !important; } .content-body { diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx index 20ccd49ee63..a707ffe7142 100644 --- a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx @@ -50,6 +50,7 @@ const ConfirmLicenseRemovalModal: React.FC = (props: Props): JSX.Element return ( = (props: Props): JSX.Element | null => { // Note: DO NOT LOCALISE THESE STRINGS. Legally we can not since the license is in English. return ( { className={'UploadLicenseModal'} show={show} id='UploadLicenseModal' + compassDesign={true} onExited={handleOnClose} > {uploadLicenseContent} diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx index b14d7378a2b..8fc18a07a7e 100644 --- a/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx +++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx @@ -95,7 +95,7 @@ export default function EditPostTimeLimitModal(props: Props) { id='edit_post.time_limit_modal.description' defaultMessage='Setting a time limit **applies to all users** who have the "Edit Post" permissions in any permission scheme.' /> -
+
+
+ {errorMessage} +
-
- {errorMessage} -
diff --git a/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx b/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx index 4f95572b01a..d802cee2372 100644 --- a/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx +++ b/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx @@ -20,6 +20,7 @@ export default function AirGappedSelfHostedPurhcaseModal() {
diff --git a/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx b/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx index 8a20657c114..e75427dec7f 100644 --- a/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx +++ b/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx @@ -17,6 +17,7 @@ type NoInternetConnectionProps = { const NoInternetConnection: React.FC = (props: NoInternetConnectionProps) => { return ( diff --git a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx b/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx index 4500ec23197..70dbb84f5fa 100644 --- a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx +++ b/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx @@ -115,9 +115,14 @@ function NotificationFromMembersModal(props: Props) { const modalTitle = formatMessage({id: 'postypes.custom_open_pricing_modal_post_renderer.membersThatRequested', defaultMessage: 'Members that requested '}); - const modalHeaderText = (

- {`${modalTitle}${mapFeatureIdToTranslation(props.feature, formatMessage)}`} -

); + const modalHeaderText = ( +

+ {`${modalTitle}${mapFeatureIdToTranslation(props.feature, formatMessage)}`} +

+ ); return ( + > + + + + -
-

- -

-
@@ -135,28 +136,29 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit closeButton={true} closeLabel="Close" id="channelInviteModalLabel" - /> + > + + + + -
-

- -

-
@@ -256,28 +258,29 @@ exports[`components/channel_invite_modal should match snapshot with exclude and closeButton={true} closeLabel="Close" id="channelInviteModalLabel" - /> + > + + + + -
-

- -

-
diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx index acd278f1d56..058e75a334c 100644 --- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx +++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx @@ -23,7 +23,6 @@ import MultiSelect from 'components/multiselect/multiselect'; import type {Value} from 'components/multiselect/multiselect'; import ProfilePicture from 'components/profile_picture'; import ToggleModalButton from 'components/toggle_modal_button'; -import AddIcon from 'components/widgets/icons/fa_add_icon'; import BotTag from 'components/widgets/tag/bot_tag'; import GuestTag from 'components/widgets/tag/guest_tag'; @@ -425,7 +424,9 @@ export default class ChannelInviteModal extends React.PureComponent
- +
@@ -451,18 +452,6 @@ export default class ChannelInviteModal extends React.PureComponent{this.state.inviteError}); } - const header = ( -

- -

- ); - const buttonSubmitText = localizeMessage('multiselect.add', 'Add'); const buttonSubmitLoadingText = localizeMessage('multiselect.adding', 'Adding...'); @@ -556,14 +545,24 @@ export default class ChannelInviteModal extends React.PureComponent + > + + + + -
- {header} -
{inviteError}
{content} diff --git a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx index 17e58036017..153820d2f31 100644 --- a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx +++ b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx @@ -187,7 +187,7 @@ export default class ChannelSelectorModal extends React.PureComponent
- +
diff --git a/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx b/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx index 7638730c917..e4c6f449dd9 100644 --- a/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx +++ b/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx @@ -102,6 +102,7 @@ const RequestBusinessEmailModal = ( return ( diff --git a/webapp/channels/src/components/common/carousel/carousel.scss b/webapp/channels/src/components/common/carousel/carousel.scss index 160396bac4c..a0b53f8cadc 100644 --- a/webapp/channels/src/components/common/carousel/carousel.scss +++ b/webapp/channels/src/components/common/carousel/carousel.scss @@ -4,7 +4,7 @@ width: 100%; min-width: 400px; height: 100%; - min-height: 400px; + min-height: 450px; @media screen and (max-width: 700px) { .container-slider { @@ -57,11 +57,12 @@ .container-footer { position: absolute; z-index: 2; - bottom: 3%; + bottom: 0; display: flex; width: 100%; align-items: center; justify-content: flex-start; + padding: 24px 0; .container-buttons { margin-left: auto; diff --git a/webapp/channels/src/components/confirm_modal.tsx b/webapp/channels/src/components/confirm_modal.tsx index 1e9057c3702..31508bed239 100644 --- a/webapp/channels/src/components/confirm_modal.tsx +++ b/webapp/channels/src/components/confirm_modal.tsx @@ -169,7 +169,7 @@ export default class ConfirmModal extends React.Component { aria-labelledby='confirmModalLabel' aria-describedby='confirmModalBody' > - + - - - - + + + + +
{ { typeof this.props.backButtonCallback === 'function' ? ( - <> +
) : ( = (props: Props) => { div { flex: 1; - margin: 0 10px; } .dropdown-menu { diff --git a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx index 42dc1b152f7..ad8252c74bd 100644 --- a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx +++ b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx @@ -237,6 +237,7 @@ export default class DndCustomTimePicker extends React.PureComponent ariaLabel={localizeMessage('rename_category_modal.renameCategory', 'Rename Category')} modalHeaderText={modalHeaderText} confirmButtonText={editButtonText} + compassDesign={true} onExited={this.props.onExited} handleEnterKeyPress={this.handleConfirm} handleConfirm={this.handleConfirm} diff --git a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap index 104d8008a55..c5b1470a59e 100644 --- a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap +++ b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap @@ -90,7 +90,6 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = ` updatePreview={[Function]} />
-
-
@@ -362,7 +360,6 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = ` updatePreview={[Function]} />
-
@@ -499,7 +496,6 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = ` updatePreview={[Function]} />
-
-
-
{this.renderError()} diff --git a/webapp/channels/src/components/invitation_modal/invitation_modal.scss b/webapp/channels/src/components/invitation_modal/invitation_modal.scss index f82eac2189f..45646d93ba0 100644 --- a/webapp/channels/src/components/invitation_modal/invitation_modal.scss +++ b/webapp/channels/src/components/invitation_modal/invitation_modal.scss @@ -13,79 +13,4 @@ margin: auto; transform: translate(-50%, -50%) !important; } - - .modal-header, - .modal-footer { - padding: 24px; - } - - .modal-body { - overflow: visible; - max-height: none; - padding: 0 24px; - } - - .InvitationModal__header { - display: flex; - align-items: center; - justify-content: space-between; - border: none; - font-size: 22px; - font-weight: 600; - - h1 { - margin: 0; - font-size: 22px; - font-weight: 600; - } - - &::before, - &::after { - display: none; - } - - // beat regular modal-header in specificity - &.modal-header { - background-color: var(--center-channel-bg); - color: var(--center-channel-color); - } - - .icon-close { - padding: 0; - border: none; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - background: none; - color: rgb(var(--center-channel-color-rgb), 0.56); - cursor: pointer; - font: inherit; - outline: inherit; - - &:hover, - &:active, - &:focus { - color: rgb(var(--center-channel-color-rgb), 0.56); - } - } - } - - &__footer { - border-top: none; - - .btn { - border-radius: 4px; - } - } - - .btn.btn-primary:disabled { - background-color: rgba(var(--center-channel-color-rgb), 0.08); - color: rgba(var(--center-channel-color-rgb), 0.32); - - &:hover { - border-color: rgba(var(--center-channel-color-rgb), 0.08); - background-color: rgba(var(--center-channel-color-rgb), 0.08); - color: rgba(var(--center-channel-color-rgb), 0.32); - } - } } diff --git a/webapp/channels/src/components/invitation_modal/invitation_modal.tsx b/webapp/channels/src/components/invitation_modal/invitation_modal.tsx index 2859a526813..fe5701125eb 100644 --- a/webapp/channels/src/components/invitation_modal/invitation_modal.tsx +++ b/webapp/channels/src/components/invitation_modal/invitation_modal.tsx @@ -411,7 +411,7 @@ export class InvitationModal extends React.PureComponent { -

+

{!cloudFreeDeprecated && ( diff --git a/webapp/channels/src/components/pricing_modal/pricing_modal.scss b/webapp/channels/src/components/pricing_modal/pricing_modal.scss index 2366782e897..40247dc2f46 100644 --- a/webapp/channels/src/components/pricing_modal/pricing_modal.scss +++ b/webapp/channels/src/components/pricing_modal/pricing_modal.scss @@ -6,10 +6,6 @@ width: 1440px; margin: auto; transform: translate(-50%, -50%) !important; - - .modal-content { - background-color: var(--center-channel-bg); - } } .modal-header { @@ -21,7 +17,6 @@ display: flex; align-items: center; justify-content: space-between; - padding: 28px 32px; border: none; border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08); font-size: 22px; @@ -58,31 +53,6 @@ &::after { display: none; } - - // beat regular modal-header in specificity - &.modal-header { - background-color: var(--center-channel-bg); - color: var(--center-channel-color); - } - - .icon-close { - padding: 0; - border: none; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - background: none; - color: rgb(var(--center-channel-color-rgb), 0.56); - cursor: pointer; - font: inherit; - outline: inherit; - - &:hover, - &:active, - &:focus { - color: rgb(var(--center-channel-color-rgb), 0.56); - } - } } .modal-body { diff --git a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx index 93948118103..cf5e7dcd7cb 100644 --- a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx +++ b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx @@ -167,14 +167,16 @@ function SelfHostedContent(props: ContentProps) { {renderAlert()} diff --git a/webapp/channels/src/components/quick_input/quick_input.tsx b/webapp/channels/src/components/quick_input/quick_input.tsx index fd1c3d82ea9..426bbca321e 100644 --- a/webapp/channels/src/components/quick_input/quick_input.tsx +++ b/webapp/channels/src/components/quick_input/quick_input.tsx @@ -196,7 +196,7 @@ export class QuickInput extends React.PureComponent { ); const showClearButton = this.props.onClear && (clearableWithoutValue || (clearable && value)); - return (
+ return (
{inputElement} {showClearButton &&
-
+ +
diff --git a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx index 13e82081403..7b128460bd7 100644 --- a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx +++ b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx @@ -197,10 +197,10 @@ export default class QuickSwitchModal extends React.PureComponent animation={false} > - + >
{help}
+ +
-
+
-
+
-
+
-
+
-
+
{ if (channelsToDisplay.length >= this.props.channelsPerPage && pageEnd < this.props.channels.length) { nextButton = (