upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-02-18 18:18:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

MM-56352 - Making modals consistent overall (#25622)

Browse source 
* 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
This commit is contained in:
Asaad Mahmood 2023-12-26 12:36:22 +05:00 committed by GitHub
parent 02e27f78b2
commit 8f0d2b05ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
88 changed files with 423 additions and 1062 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap
View file

@ -11,8 +11,8 @@ exports[`components/SearchableChannelList should match init snapshot 1`] = `
aria-hidden="true"
id="searchIcon"
>
<MagnifyIcon
size={18}
<i
className="icon icon-magnify"
/>
</span>
<QuickInput

14
webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
View file

@ -36,7 +36,7 @@ exports[`components/AddGroupsToChannelModal should match snapshot 1`] = `
>
<ModalTitle
bsClass="modal-title"
componentClass="h4"
componentClass="h1"
>
<MemoizedFormattedMessage
defaultMessage="Add New Groups to {channelName} Channel"
@ -144,7 +144,9 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
<div
className="more-modal__actions--round"
>
<AddIcon />
<i
className="icon icon-plus"
/>
</div>
</div>
</div>
@ -191,7 +193,9 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
<div
className="more-modal__actions--round"
>
<AddIcon />
<i
className="icon icon-plus"
/>
</div>
</div>
</div>
@ -238,7 +242,9 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
<div
className="more-modal__actions--round"
>
<AddIcon />
<i
className="icon icon-plus"
/>
</div>
</div>
</div>

5
webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
View file

@ -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<Props,
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<AddIcon/>
<i className='icon icon-plus'/>
</div>
</div>
</div>
@ -271,7 +270,7 @@ export default class AddGroupsToChannelModal extends React.PureComponent<Props,
onExited={this.props.onExited}
>
<Modal.Header closeButton={true}>
<Modal.Title>
<Modal.Title componentClass='h1'>
<FormattedMessage
id='add_groups_to_channel.title'
defaultMessage='Add New Groups to {channelName} Channel'

8
webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
View file

@ -146,7 +146,9 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
<div
className="more-modal__actions--round"
>
<AddIcon />
<i
className="icon icon-plus"
/>
</div>
</div>
</div>
@ -195,7 +197,9 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
<div
className="more-modal__actions--round"
>
<AddIcon />
<i
className="icon icon-plus"
/>
</div>
</div>
</div>

3
webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
View file

@ -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<Props, Sta
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<AddIcon/>
<i className='icon icon-plus'/>
</div>
</div>
</div>

5
webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx
View file

@ -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(({
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<AddIcon/>
<i
className='icon icon-plus'
/>
</div>
</div>
</div>

5
webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
View file

@ -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<Props, Stat
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<AddIcon/>
<i
className='icon icon-plus'
/>
</div>
</div>
</div>

1
webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx
View file

@ -183,6 +183,7 @@ export default function DeleteWorkspaceModal(props: Props) {
return (
<GenericModal
compassDesign={true}
className='DeleteWorkspaceModal'
onExited={handleClickCancel}
>

9
webapp/channels/src/components/admin_console/license_settings/license_settings.scss
View file

@ -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;

12
webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.scss
View file

@ -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 {

1
webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx
View file

@ -50,6 +50,7 @@ const ConfirmLicenseRemovalModal: React.FC<Props> = (props: Props): JSX.Element
return (
<GenericModal
compassDesign={true}
className={'ConfirmLicenseRemovalModal'}
show={show}
id='ConfirmLicenseRemovalModal'

1
webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx
View file

@ -39,6 +39,7 @@ const EELicenseModal: React.FC<Props> = (props: Props): JSX.Element | null => {
// Note: DO NOT LOCALISE THESE STRINGS. Legally we can not since the license is in English.
return (
<GenericModal
compassDesign={true}
className={'EELicenseModal'}
show={show}
id='EELicenseModal'

1
webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
View file

@ -290,6 +290,7 @@ const UploadLicenseModal = (props: Props): JSX.Element | null => {
className={'UploadLicenseModal'}
show={show}
id='UploadLicenseModal'
compassDesign={true}
onExited={handleOnClose}
>
{uploadLicenseContent}

10
webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx
View file

@ -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.'
/>
<div className='pl-3 pb-3 pt-3'>
<div className='pt-3'>
<div className='pt-3'>
<input
id='anytime'
@ -151,12 +151,12 @@ export default function EditPostTimeLimitModal(props: Props) {
defaultMessage='Set the length of time users have to edit their messages after posting.'
/>
</div>
<div className='edit-post-time-limit-modal__error'>
{errorMessage}
</div>
</div>
</Modal.Body>
<Modal.Footer>
<div className='edit-post-time-limit-modal__error'>
{errorMessage}
</div>
<button
type='button'
className='btn btn-tertiary'
@ -170,7 +170,7 @@ export default function EditPostTimeLimitModal(props: Props) {
<button
id='linkModalCloseButton'
type='button'
className='btn btn-tertiary'
className='btn btn-primary'
onClick={save}
disabled={saving}
>

5
webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
View file

@ -15,7 +15,6 @@ import {filterProfilesStartingWithTerm, profileListToMap, isGuest} from 'matterm
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 AddUsersToRoleModal extends React.PureComponent<Props, Stat
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<AddIcon/>
<i
className='icon icon-plus'
/>
</div>
</div>
</div>

1
webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx
View file

@ -20,6 +20,7 @@ export default function AirGappedSelfHostedPurhcaseModal() {
<GenericModal
onExited={close}
show={true}
compassDesign={true}
className='air-gapped-purchase-modal'
>
<div className='content'>

1
webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx
View file

@ -17,6 +17,7 @@ type NoInternetConnectionProps = {
const NoInternetConnection: React.FC<NoInternetConnectionProps> = (props: NoInternetConnectionProps) => {
return (
<GenericModal
compassDesign={true}
onExited={props.onExited}
modalHeaderText=''
>

11
webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx
View file

@ -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 = (<h1 id='invitation_modal_title'>
{`${modalTitle}${mapFeatureIdToTranslation(props.feature, formatMessage)}`}
</h1>);
const modalHeaderText = (
<h1
id='invitation_modal_title'
className='modal-title'
>
{`${modalTitle}${mapFeatureIdToTranslation(props.feature, formatMessage)}`}
</h1>
);
return (
<GenericModal

9
webapp/channels/src/components/browse_channels/browse_channels.scss
View file

@ -21,8 +21,9 @@
#searchIcon {
position: absolute;
top: 16px;
left: 46px;
z-index: 1;
top: 15px;
left: 42px;
color: rgba(var(--center-channel-color-rgb), 0.64);
pointer-events: none;
}
@ -106,7 +107,7 @@
}
.modal-body {
padding: 15px 0 0;
padding: 0;
.filtered-user-list {
height: 500px;
@ -213,7 +214,7 @@
.modal-header {
.GenericModal__header {
display: flex;
width: 95%;
width: 100%;
align-items: center;
justify-content: space-between;
padding-right: 4px;

99
webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
View file

@ -36,28 +36,29 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
closeButton={true}
closeLabel="Close"
id="channelInviteModalLabel"
/>
>
<ModalTitle
bsClass="modal-title"
componentClass="h1"
id="deletePostModalLabel"
>
<MemoizedFormattedMessage
defaultMessage="Add people to {channel}"
id="channel_invite.addNewMembers"
values={
Object {
"channel": "testing",
}
}
/>
</ModalTitle>
</ModalHeader>
<ModalBody
bsClass="modal-body"
className="overflow--visible"
componentClass="div"
role="application"
>
<div
className="channel-invite__header"
>
<h1>
<MemoizedFormattedMessage
defaultMessage="Add people to {channel}"
id="channel_invite.addNewMembers"
values={
Object {
"channel": "testing",
}
}
/>
</h1>
</div>
<div
className="channel-invite__content"
>
@ -135,28 +136,29 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
closeButton={true}
closeLabel="Close"
id="channelInviteModalLabel"
/>
>
<ModalTitle
bsClass="modal-title"
componentClass="h1"
id="deletePostModalLabel"
>
<MemoizedFormattedMessage
defaultMessage="Add people to {channel}"
id="channel_invite.addNewMembers"
values={
Object {
"channel": "testing",
}
}
/>
</ModalTitle>
</ModalHeader>
<ModalBody
bsClass="modal-body"
className="overflow--visible"
componentClass="div"
role="application"
>
<div
className="channel-invite__header"
>
<h1>
<MemoizedFormattedMessage
defaultMessage="Add people to {channel}"
id="channel_invite.addNewMembers"
values={
Object {
"channel": "testing",
}
}
/>
</h1>
</div>
<div
className="channel-invite__content"
>
@ -256,28 +258,29 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
closeButton={true}
closeLabel="Close"
id="channelInviteModalLabel"
/>
>
<ModalTitle
bsClass="modal-title"
componentClass="h1"
id="deletePostModalLabel"
>
<MemoizedFormattedMessage
defaultMessage="Add people to {channel}"
id="channel_invite.addNewMembers"
values={
Object {
"channel": "testing",
}
}
/>
</ModalTitle>
</ModalHeader>
<ModalBody
bsClass="modal-body"
className="overflow--visible"
componentClass="div"
role="application"
>
<div
className="channel-invite__header"
>
<h1>
<MemoizedFormattedMessage
defaultMessage="Add people to {channel}"
id="channel_invite.addNewMembers"
values={
Object {
"channel": "testing",
}
}
/>
</h1>
</div>
<div
className="channel-invite__content"
>

35
webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
View file

@ -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<Props, State
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<AddIcon/>
<i
className='icon icon-plus'
/>
</div>
</div>
</div>
@ -451,18 +452,6 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
}
const header = (
<h1>
<FormattedMessage
id='channel_invite.addNewMembers'
defaultMessage='Add people to {channel}'
values={{
channel: this.props.channel.display_name,
}}
/>
</h1>
);
const buttonSubmitText = localizeMessage('multiselect.add', 'Add');
const buttonSubmitLoadingText = localizeMessage('multiselect.adding', 'Adding...');
@ -556,14 +545,24 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
<Modal.Header
id='channelInviteModalLabel'
closeButton={true}
/>
>
<Modal.Title
componentClass='h1'
id='deletePostModalLabel'
>
<FormattedMessage
id='channel_invite.addNewMembers'
defaultMessage='Add people to {channel}'
values={{
channel: this.props.channel.display_name,
}}
/>
</Modal.Title>
</Modal.Header>
<Modal.Body
role='application'
className='overflow--visible'
>
<div className='channel-invite__header'>
{header}
</div>
{inviteError}
<div className='channel-invite__content'>
{content}

2
webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
View file

@ -187,7 +187,7 @@ export default class ChannelSelectorModal extends React.PureComponent<Props, Sta
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<i className='fa fa-plus'/>
<i className='icon icon-plus'/>
</div>
</div>
</div>

1
webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx
View file

@ -102,6 +102,7 @@ const RequestBusinessEmailModal = (
return (
<GenericModal
className='RequestBusinessEmailModal'
compassDesign={true}
id='RequestBusinessEmailModal'
onExited={handleOnClose}
>

5
webapp/channels/src/components/common/carousel/carousel.scss
View file

@ -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;

2
webapp/channels/src/components/confirm_modal.tsx
View file

@ -169,7 +169,7 @@ export default class ConfirmModal extends React.Component<Props, State> {
aria-labelledby='confirmModalLabel'
aria-describedby='confirmModalBody'
>
<Modal.Header closeButton={false}>
<Modal.Header closeButton={true}>
<Modal.Title
componentClass='h1'
id='confirmModalLabel'

42
webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
View file

@ -36,26 +36,30 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
closeButton={true}
closeLabel="Close"
>
<button
aria-label="Back"
className="modal-header-back-button btn btn-icon"
onClick={[Function]}
type="button"
<div
className="d-flex align-items-center"
>
<i
className="icon icon-arrow-left"
/>
</button>
<ModalTitle
bsClass="modal-title"
componentClass="h1"
id="createGroupsModalTitleWithBack"
>
<MemoizedFormattedMessage
defaultMessage="Create Group"
id="user_groups_modal.createTitle"
/>
</ModalTitle>
<button
aria-label="Back"
className="modal-header-back-button btn btn-icon"
onClick={[Function]}
type="button"
>
<i
className="icon icon-arrow-left"
/>
</button>
<ModalTitle
bsClass="modal-title"
componentClass="h1"
id="createGroupsModalTitleWithBack"
>
<MemoizedFormattedMessage
defaultMessage="Create Group"
id="user_groups_modal.createTitle"
/>
</ModalTitle>
</div>
</ModalHeader>
<ModalBody
bsClass="modal-body"

4
webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
View file

@ -177,7 +177,7 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
<Modal.Header closeButton={true}>
{
typeof this.props.backButtonCallback === 'function' ? (
<>
<div className='d-flex align-items-center'>
<button
type='button'
className='modal-header-back-button btn btn-icon'
@ -197,7 +197,7 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
defaultMessage='Create Group'
/>
</Modal.Title>
</>
</div>
) : (
<Modal.Title
componentClass='h1'

45
webapp/channels/src/components/custom_status/custom_status.scss
View file

@ -18,23 +18,12 @@
&-body {
overflow: visible;
}
&-content {
width: 100%;
padding: 28px 8px 24px 24px;
}
&-footer {
padding: 0;
padding-right: 16px;
margin-top: 22px;
}
}
.emoji-quick-input {
&.form-control {
height: 4.8rem;
padding: 0 5.2rem;
padding: 0 4.8rem;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
@ -46,7 +35,6 @@
}
.dateTime__calendar-input {
width: 266px;
border: 2px solid var(--button-bg);
font-size: 14px;
@ -88,10 +76,6 @@
}
.GenericModal {
&__header {
padding: 0 0 20px;
}
&__body {
padding: 0;
}
@ -106,15 +90,11 @@
}
}
& &__input {
position: relative;
width: calc(100% - 16px);
}
&__emoji-container {
position: absolute;
top: 6px;
left: 10px;
z-index: 5;
top: 14px;
left: 40px;
margin-right: 2px;
}
@ -220,7 +200,7 @@
&__row {
display: flex;
width: 97%;
width: 100%;
min-height: 40px;
align-items: center;
padding-right: 10px;
@ -251,6 +231,7 @@
height: 24px;
margin-top: 8px;
color: rgba(var(--center-channel-color-rgb), 0.55);
font-size: 12px;
font-weight: 600;
}
@ -301,9 +282,8 @@ span.emoticon[style]:hover {
}
.statusExpiry {
position: absolute;
top: 56px;
display: inline-block;
margin-top: 12px;
font-size: 14px;
&__menu {
@ -318,12 +298,12 @@ span.emoticon[style]:hover {
.dateTime {
display: flex;
width: calc(100% - 24px);
margin-top: 45px;
margin: 24px 0 8px;
gap: 16px;
& &__date {
position: relative;
margin-right: 20px;
width: 100%;
&-icon {
position: absolute;
@ -334,6 +314,11 @@ span.emoticon[style]:hover {
& &__time {
position: relative;
width: 100%;
.style--none {
width: 100%;
}
#expiryTimeMenu .dropdown-menu {
overflow: auto;

1
webapp/channels/src/components/custom_status/custom_status_modal.tsx
View file

@ -373,6 +373,7 @@ const CustomStatusModal: React.FC<Props> = (props: Props) => {
<GenericModal
enforceFocus={false}
onExited={props.onExited}
compassDesign={true}
modalHeaderText={
<FormattedMessage
id='custom_status.set_status'

1
webapp/channels/src/components/delete_category_modal/delete_category_modal.tsx
View file

@ -46,6 +46,7 @@ export default class DeleteCategoryModal extends React.PureComponent<Props, Stat
render() {
return (
<GenericModal
compassDesign={true}
ariaLabel={localizeMessage('delete_category_modal.deleteCategory', 'Delete this category?')}
onExited={this.props.onExited}
modalHeaderText={(

15
webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss
View file

@ -3,18 +3,6 @@
.DndModal {
width: 600px;
.btn-primary {
height: 4rem;
padding: 0 2rem;
border-radius: $border-rad*2;
font-size: 14px;
font-weight: 600;
}
.GenericModal__header {
padding: 28px 24px 0;
}
.DayPickerInput-OverlayWrapper {
position: initial;
}
@ -46,11 +34,10 @@
.DndModal__content {
display: flex;
margin: 32px -10px 10px;
gap: 16px;
> div {
flex: 1;
margin: 0 10px;
}
.dropdown-menu {

1
webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx
View file

@ -237,6 +237,7 @@ export default class DndCustomTimePicker extends React.PureComponent<Props, Stat
return (
<CompassThemeProvider theme={this.props.theme}>
<GenericModal
compassDesign={true}
ariaLabel={localizeMessage('dnd_custom_time_picker_modal.defaultMsg', 'Disable notifications until')}
onExited={this.props.onExited}
modalHeaderText={modalHeaderText}

1
webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx
View file

@ -144,6 +144,7 @@ export default class EditCategoryModal extends React.PureComponent<Props, State>
ariaLabel={localizeMessage('rename_category_modal.renameCategory', 'Rename Category')}
modalHeaderText={modalHeaderText}
confirmButtonText={editButtonText}
compassDesign={true}
onExited={this.props.onExited}
handleEnterKeyPress={this.handleConfirm}
handleConfirm={this.handleConfirm}

5
webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
View file

@ -90,7 +90,6 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
updatePreview={[Function]}
/>
</div>
<br />
</div>
</ModalBody>
<ModalFooter
@ -217,7 +216,6 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
updatePreview={[Function]}
/>
</div>
<br />
<div
className="form-group has-error"
>
@ -362,7 +360,6 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
updatePreview={[Function]}
/>
</div>
<br />
<div
className="form-group has-error"
>
@ -499,7 +496,6 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
updatePreview={[Function]}
/>
</div>
<br />
</div>
</ModalBody>
<ModalFooter
@ -626,7 +622,6 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
updatePreview={[Function]}
/>
</div>
<br />
</div>
</ModalBody>
<ModalFooter

1
webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
View file

@ -286,7 +286,6 @@ export default class EditChannelHeaderModal extends React.PureComponent<Props, S
previewMessageLink={localizeMessage('edit_channel_header.previewHeader', 'Edit Header')}
/>
</div>
<br/>
{this.renderError()}
</div>
</Modal.Body>

75
webapp/channels/src/components/invitation_modal/invitation_modal.scss
View file

@ -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);
}
}
}

2
webapp/channels/src/components/invitation_modal/invitation_modal.tsx
View file

@ -411,7 +411,7 @@ export class InvitationModal extends React.PureComponent<Props, State> {
<Modal
id='invitationModal'
data-testid='invitationModal'
dialogClassName='a11y__modal'
dialogClassName='a11y__modal modal--overflow'
className='InvitationModal'
show={this.state.show}
onHide={this.handleHide}

9
webapp/channels/src/components/invitation_modal/invite_view.tsx
View file

@ -187,7 +187,10 @@ export default function InviteView(props: Props) {
return (
<>
<Modal.Header className={props.headerClass}>
<h1 id='invitation_modal_title'>
<h1
id='invitation_modal_title'
className='modal-title'
>
<FormattedMessage
id='invite_modal.title'
defaultMessage={'Invite {inviteType} to {team_name}'}
@ -201,13 +204,13 @@ export default function InviteView(props: Props) {
</h1>
<button
id='closeIcon'
className='icon icon-close'
className='icon icon-close close'
aria-label='Close'
title='Close'
onClick={props.onClose}
/>
</Modal.Header>
<Modal.Body>
<Modal.Body className='overflow-visible'>
<div className='InviteView__sectionTitle InviteView__sectionTitle--first'>
<FormattedMessage
id='invite_modal.to'

6
webapp/channels/src/components/invitation_modal/result_view.scss
View file

@ -1,6 +0,0 @@
.ResultView {
&__inviteMore {
border: 1px solid var(--button-bg);
background: transparent;
}
}

7
webapp/channels/src/components/invitation_modal/result_view.tsx
View file

@ -13,8 +13,6 @@ import {InviteType} from './invite_as';
import ResultTable from './result_table';
import type {InviteResult} from './result_table';
import './result_view.scss';
export type InviteResults = {
sent: InviteResult[];
notSent: InviteResult[];
@ -46,7 +44,10 @@ export default function ResultView(props: Props) {
return (
<>
<Modal.Header className={props.headerClass}>
<h1 id='invitation_modal_title'>
<h1
id='invitation_modal_title'
className='modal-title'
>
<FormattedMessage
id='invite_modal.invited'
defaultMessage='{inviteType} invited to {team_name}'

2
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
View file

@ -35,6 +35,7 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
>
<ModalHeader
bsClass="modal-header"
className="divider"
closeButton={true}
closeLabel="Close"
>
@ -677,6 +678,7 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
>
<ModalHeader
bsClass="modal-header"
className="divider"
closeButton={true}
closeLabel="Close"
>

36
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss
View file

@ -5,31 +5,13 @@
width: 1100px;
margin-top: 50px;
.shortcuts-content {
.modal-header {
height: 100px;
padding: 20px 40px 20px;
border: none;
background: transparent;
color: inherit;
.modal-header {
.shortcut-line {
margin: 0;
.close {
top: 35px;
right: 35px;
overflow: hidden;
color: inherit;
font-size: 28px;
font-weight: normal;
}
.modal-title {
color: inherit;
font-size: 20px;
>div {
&:first-child {
margin-bottom: 2.5em;
}
span {
&:first-child {
margin-right: 12px;
}
}
}
@ -37,7 +19,7 @@
.modal-body {
max-height: calc(100vh - 200px);
padding: 0 40px 20px;
padding: 40px 48px;
}
.section {
@ -48,7 +30,7 @@
}
.shortcut-line {
margin: 17px 0;
display: flex;
span {
&:first-child {
@ -59,7 +41,7 @@
}
.section-title {
margin: 1.5em 0;
margin: 0 0 24px;
font-size: 18px;
}

5
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
View file

@ -114,7 +114,10 @@ const KeyboardShortcutsModal = ({onExited}: Props): JSX.Element => {
aria-labelledby='shortcutsModalLabel'
>
<div className='shortcuts-content'>
<Modal.Header closeButton={true}>
<Modal.Header
closeButton={true}
className='divider'
>
<Modal.Title
componentClass='h1'
id='shortcutsModalLabel'

2
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss
View file

@ -2,6 +2,8 @@
// See LICENSE.txt for license information.
.shortcut-line {
display: flex;
align-items: center;
margin: 16px 0;
span {

141
webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.scss
View file

@ -1,141 +0,0 @@
.LearnMoreTrialModal {
height: 560px;
&.modal-dialog {
margin-top: calc(50vh - 350px) !important;
}
.modal-content {
height: 560px;
padding: 0 !important;
border-color: rgba(var(--center-channel-color-rgb), 0.16);
background: var(--center-channel-bg);
border-radius: 8px;
color: var(--center-channel-color);
}
.modal-header {
.close {
&:hover,
&:active,
&:focus,
&:active:focus {
background-color: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
opacity: 1;
}
top: 6px;
right: 4px;
width: 4rem;
height: 4rem;
margin-top: 20px;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56) !important;
font-family:
'Open Sans',
sans-serif;
font-size: 32px;
font-weight: 400;
}
height: 38px;
padding: 0;
border: 0;
background: var(--center-channel-bg) !important;
border-radius: 8px;
color: var(--center-channel-color);
}
.modal-body {
display: flex;
overflow: hidden;
width: 100%;
height: calc(100% - 38px);
flex-direction: column;
padding: 0;
.GenericModal__header {
padding-top: 0;
padding-bottom: 20px;
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.1) !important;
margin-bottom: 20px;
}
.GenericModal__body {
height: 100%;
padding: 0 24px 24px 24px;
.container-footer {
bottom: 0;
height: 36px;
}
}
.buttons {
text-align: center;
.previous-btn {
&:hover,
&:active,
&:focus,
&:active:focus {
border: none;
background: rgba(var(--button-bg-rgb), 0.08);
border-radius: 4px;
}
height: 30px;
align-items: center;
align-self: center;
padding: 8px 16px;
border: none;
background: rgba(var(--button-bg-rgb), 0.08);
border-radius: 4px;
color: var(--button-bg);
font-size: 14px;
font-weight: 600;
line-height: 14px;
}
.next-btn {
&:hover,
&:active,
&:focus,
&:active:focus {
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
var(--button-bg);
}
height: 30px;
flex: none;
padding: 8px 16px;
border: none;
margin-left: 8px;
background: var(--button-bg);
border-radius: 4px;
color: var(--sys-button-color);
font-size: 14px;
font-weight: 600;
line-height: 14px;
}
}
.start-cloud-trial-btn,
.start-trial-btn {
margin-top: -16px;
border-radius: 4px;
}
}
.modal-centered {
text-align: center;
}
.modal-footer {
padding: 12px 24px 24px;
border: none;
border-radius: 4px;
}
}

3
webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx
View file

@ -29,8 +29,6 @@ import LearnMoreTrialModalStep from './learn_more_trial_modal_step';
import type {LearnMoreTrialModalStepProps} from './learn_more_trial_modal_step';
import StartTrialBtn from './start_trial_btn';
import './learn_more_trial_modal.scss';
type Props = {
onClose?: () => void;
onExited: () => void;
@ -190,6 +188,7 @@ const LearnMoreTrialModal = (
return (
<GenericModal
compassDesign={true}
className='LearnMoreTrialModal'
id='learnMoreTrialModal'
onExited={handleOnClose}

1
webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.scss
View file

@ -9,7 +9,6 @@
width: fit-content;
padding: 13px 20px;
border: none;
margin-top: 16px;
background: var(--sys-center-channel-bg);
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--sys-button-bg);

2
webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.test.tsx
View file

@ -106,7 +106,7 @@ describe('components/learn_more_trial_modal/start_trial_btn', () => {
});
await act(async () => {
wrapper.find('.start-trial-btn').simulate('click');
wrapper.find('.btn-secondary').simulate('click');
});
expect(mockOnClick).toHaveBeenCalled();

2
webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.tsx
View file

@ -56,7 +56,7 @@ const StartTrialBtn = ({
) : (
<a
id={id}
className='StartTrialBtn start-trial-btn'
className='btn btn-secondary'
onClick={startTrial}
>
{btnText}

4
webapp/channels/src/components/list_modal.tsx
View file

@ -241,7 +241,7 @@ export default class ListModal extends React.PureComponent<Props, State> {
{this.state.page > 0 &&
<button
onClick={this.onPrev}
className='btn btn-tertiary filter-control filter-control__prev'
className='btn btn-sm btn-tertiary filter-control filter-control__prev'
>
<FormattedMessage
id='filtered_user_list.prev'
@ -251,7 +251,7 @@ export default class ListModal extends React.PureComponent<Props, State> {
{this.props.numPerPage && (this.state.items.length >= this.props.numPerPage) && endCount !== this.state.totalCount &&
<button
onClick={this.onNext}
className='btn btn-tertiary filter-control filter-control__next'
className='btn btn-sm btn-tertiary filter-control filter-control__next'
>
<FormattedMessage
id='filtered_user_list.next'

8
webapp/channels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap
View file

@ -36,7 +36,9 @@ exports[`ListItem should match snapshot when rendering GroupChannel 1`] = `
<div
className="more-modal__actions--round"
>
<AddIcon />
<i
className="icon icon-plus"
/>
</div>
</div>
</div>
@ -63,7 +65,9 @@ exports[`ListItem should match snapshot when rendering user 1`] = `
<div
className="more-modal__actions--round"
>
<AddIcon />
<i
className="icon icon-plus"
/>
</div>
</div>
</div>

3
webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx
View file

@ -5,7 +5,6 @@ import classNames from 'classnames';
import React, {useCallback} from 'react';
import Timestamp from 'components/timestamp';
import AddIcon from 'components/widgets/icons/fa_add_icon';
import UserDetails from './user_details';
@ -77,7 +76,7 @@ const ListItem = React.forwardRef((props: Props, ref?: React.Ref<HTMLDivElement>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<AddIcon/>
<i className='icon icon-plus'/>
</div>
</div>
</div>

6
webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
View file

@ -188,7 +188,7 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
className="filter-controls"
>
<button
className="btn btn-tertiary filter-control filter-control__next"
className="btn btn-sm btn-tertiary filter-control filter-control__next"
onClick={[Function]}
>
<MemoizedFormattedMessage
@ -380,7 +380,7 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
className="filter-controls"
>
<button
className="btn btn-tertiary filter-control filter-control__next"
className="btn btn-sm btn-tertiary filter-control filter-control__next"
onClick={[Function]}
>
<MemoizedFormattedMessage
@ -562,7 +562,7 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
className="filter-controls"
>
<button
className="btn btn-tertiary filter-control filter-control__prev"
className="btn btn-sm btn-tertiary filter-control filter-control__prev"
onClick={[Function]}
>
<MemoizedFormattedMessage

6
webapp/channels/src/components/multiselect/multiselect.tsx
View file

@ -361,7 +361,7 @@ export default class MultiSelect<T extends Value> extends React.PureComponent<Pr
if (options.length > pageEnd) {
nextButton = (
<button
className='btn btn-tertiary filter-control filter-control__next'
className='btn btn-sm btn-tertiary filter-control filter-control__next'
onClick={this.nextPage}
>
<FormattedMessage
@ -375,7 +375,7 @@ export default class MultiSelect<T extends Value> extends React.PureComponent<Pr
if (this.state.page > 0) {
previousButton = (
<button
className='btn btn-tertiary filter-control filter-control__prev'
className='btn btn-sm btn-tertiary filter-control filter-control__prev'
onClick={this.prevPage}
>
<FormattedMessage
@ -513,7 +513,7 @@ export default class MultiSelect<T extends Value> extends React.PureComponent<Pr
}
</div>
{this.props.saveButtonPosition === 'bottom' &&
<div className='multi-select__footer'>
<div className='multi-select__footer modal-footer'>
{
this.props.backButtonClick &&
<button

7
webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap
View file

@ -45,6 +45,7 @@ exports[`components/marketplace/ doesn't show web marketplace banner in FeatureF
className="GenericModal__header"
>
<h1
className="modal-title"
id="genericModalLabel"
>
App Marketplace
@ -130,6 +131,7 @@ exports[`components/marketplace/ hides search, shows web marketplace banner in F
className="GenericModal__header"
>
<h1
className="modal-title"
id="genericModalLabel"
>
App Marketplace
@ -216,6 +218,7 @@ exports[`components/marketplace/ should render default 1`] = `
className="GenericModal__header"
>
<h1
className="modal-title"
id="genericModalLabel"
>
App Marketplace
@ -353,6 +356,7 @@ exports[`components/marketplace/ should render with error banner 1`] = `
className="GenericModal__header"
>
<h1
className="modal-title"
id="genericModalLabel"
>
App Marketplace
@ -507,6 +511,7 @@ exports[`components/marketplace/ should render with no plugins available 1`] = `
className="GenericModal__header"
>
<h1
className="modal-title"
id="genericModalLabel"
>
App Marketplace
@ -652,6 +657,7 @@ exports[`components/marketplace/ should render with plugins available 1`] = `
className="GenericModal__header"
>
<h1
className="modal-title"
id="genericModalLabel"
>
App Marketplace
@ -815,6 +821,7 @@ exports[`components/marketplace/ should render with plugins installed 1`] = `
className="GenericModal__header"
>
<h1
className="modal-title"
id="genericModalLabel"
>
App Marketplace

1
webapp/channels/src/components/post_edit_history/restore_post_modal.tsx
View file

@ -46,6 +46,7 @@ const RestorePostModal = ({post, postHeader, actions, onExited}: Props) => {
return (
<GenericModal
compassDesign={true}
onExited={onHide}
enforceFocus={false}
id='restorePostModal'

27
webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss
View file

@ -1,27 +1,12 @@
@import '../../sass/utils/module';
.post-reminder-modal {
width: 600px;
.modal &.GenericModal .modal {
&-body {
overflow: visible;
}
&-content {
width: 100%;
padding: 28px 8px 24px 24px;
}
&-footer {
padding: 0;
padding-right: 16px;
margin-top: 22px;
}
.modal-body {
overflow: visible;
}
.dateTime__calendar-input {
width: 260px;
width: 100%;
border: 2px solid var(--button-bg);
font-size: 14px;
@ -65,12 +50,8 @@
width: 100%;
margin: unset;
.dateTime__date {
margin-right: 16px;
}
.dateTime__input {
width: 260px;
width: 100%;
}
}
}

6
webapp/channels/src/components/pricing_modal/content.tsx
View file

@ -317,11 +317,13 @@ function Content(props: ContentProps) {
</div>
<button
id='closeIcon'
className='icon icon-close'
className='close'
aria-label='Close'
title='Close'
onClick={props.onHide}
/>
>
<span aria-hidden='true'>{'×'}</span>
</button>
</Modal.Header>
<Modal.Body>
{!cloudFreeDeprecated && (

30
webapp/channels/src/components/pricing_modal/pricing_modal.scss
View file

@ -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 {

6
webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
View file

@ -167,14 +167,16 @@ function SelfHostedContent(props: ContentProps) {
</div>
<button
id='closeIcon'
className='icon icon-close'
className='close'
aria-label='Close'
title='Close'
onClick={() => {
trackEvent('self_hosted_pricing', 'close_pricing_modal');
props.onHide();
}}
/>
>
<span aria-hidden='true'>{'×'}</span>
</button>
</Modal.Header>
<Modal.Body>
{renderAlert()}

2
webapp/channels/src/components/quick_input/quick_input.tsx
View file

@ -196,7 +196,7 @@ export class QuickInput extends React.PureComponent<Props> {
);
const showClearButton = this.props.onClear && (clearableWithoutValue || (clearable && value));
return (<div>
return (<div className='input-wrapper'>
{inputElement}
{showClearButton &&
<div

10
webapp/channels/src/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.tsx.snap
View file

@ -32,13 +32,10 @@ exports[`components/QuickSwitchModal should match snapshot 1`] = `
>
<ModalHeader
bsClass="modal-header"
className="modal-header"
closeButton={true}
closeLabel="Close"
id="quickSwitchModalLabel"
/>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="channel-switcher__header"
@ -62,6 +59,11 @@ exports[`components/QuickSwitchModal should match snapshot 1`] = `
/>
</div>
</div>
</ModalHeader>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="channel-switcher__suggestion-box"
>

6
webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx
View file

@ -197,10 +197,10 @@ export default class QuickSwitchModal extends React.PureComponent<Props, State>
animation={false}
>
<Modal.Header
className='modal-header'
id='quickSwitchModalLabel'
closeButton={true}
/>
<Modal.Body>
>
<div
className='channel-switcher__header'
id='quickSwitchHeaderWithHint'
@ -213,6 +213,8 @@ export default class QuickSwitchModal extends React.PureComponent<Props, State>
{help}
</div>
</div>
</Modal.Header>
<Modal.Body>
<div className='channel-switcher__suggestion-box'>
<i className='icon icon-magnify icon-16'/>
<SuggestionBox

20
webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
View file

@ -28,7 +28,9 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
class="sr-only"
role="alert"
/>
<div>
<div
class="input-wrapper"
>
<input
aria-describedby="searchbar-help-popup"
aria-label="Search"
@ -96,7 +98,9 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
class="sr-only"
role="alert"
/>
<div>
<div
class="input-wrapper"
>
<input
aria-describedby="searchbar-help-popup"
aria-label="Search"
@ -156,7 +160,9 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1`
class="sr-only"
role="alert"
/>
<div>
<div
class="input-wrapper"
>
<input
aria-describedby="searchbar-help-popup"
aria-label="Search"
@ -213,7 +219,9 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
class="sr-only"
role="alert"
/>
<div>
<div
class="input-wrapper"
>
<input
aria-describedby="searchbar-help-popup"
aria-label="Search"
@ -262,7 +270,9 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
class="sr-only"
role="alert"
/>
<div>
<div
class="input-wrapper"
>
<input
aria-describedby="searchbar-help-popup"
aria-label="Search"

8
webapp/channels/src/components/searchable_channel_list.tsx
View file

@ -5,7 +5,7 @@ import classNames from 'classnames';
import React from 'react';
import {FormattedMessage, injectIntl, type WrappedComponentProps} from 'react-intl';
import {ArchiveOutlineIcon, CheckIcon, ChevronDownIcon, GlobeIcon, LockOutlineIcon, MagnifyIcon, AccountOutlineIcon, GlobeCheckedIcon} from '@mattermost/compass-icons/components';
import {ArchiveOutlineIcon, CheckIcon, ChevronDownIcon, GlobeIcon, LockOutlineIcon, AccountOutlineIcon, GlobeCheckedIcon} from '@mattermost/compass-icons/components';
import type {Channel, ChannelMembership} from '@mattermost/types/channels';
import type {RelationOneToOne} from '@mattermost/types/utilities';
@ -368,7 +368,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
if (channelsToDisplay.length >= this.props.channelsPerPage && pageEnd < this.props.channels.length) {
nextButton = (
<button
className='btn filter-control filter-control__next outlineButton'
className='btn btn-sm filter-control filter-control__next outlineButton'
onClick={this.nextPage}
disabled={this.state.nextDisabled}
aria-label={localizeMessage('more_channels.next', 'Next')}
@ -384,7 +384,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
if (this.state.page > 0) {
previousButton = (
<button
className='btn filter-control filter-control__prev outlineButton'
className='btn btn-sm filter-control filter-control__prev outlineButton'
onClick={this.previousPage}
aria-label={localizeMessage('more_channels.prev', 'Previous')}
>
@ -403,7 +403,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
id='searchIcon'
aria-hidden='true'
>
<MagnifyIcon size={18}/>
<i className='icon icon-magnify'/>
</span>
<QuickInput
id='searchChannelsTextbox'

4
webapp/channels/src/components/searchable_user_list/searchable_user_list.tsx
View file

@ -246,7 +246,7 @@ class SearchableUserList extends React.PureComponent<Props, State> {
nextButton = (
<button
id='searchableUserListNextBtn'
className='btn btn-tertiary filter-control filter-control__next'
className='btn btn-sm btn-tertiary filter-control filter-control__next'
onClick={this.nextPage}
disabled={this.state.nextDisabled}
>
@ -262,7 +262,7 @@ class SearchableUserList extends React.PureComponent<Props, State> {
previousButton = (
<button
id='searchableUserListPrevBtn'
className='btn btn-tertiary filter-control filter-control__prev'
className='btn btn-sm btn-tertiary filter-control filter-control__prev'
onClick={this.previousPage}
>
<FormattedMessage

1
webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/mark_as_read_confirm_modal.tsx
View file

@ -30,6 +30,7 @@ const MarkAsReadConfirmModal = ({
return (
<GenericModal
ariaLabel={header}
compassDesign={true}
modalHeaderText={header}
handleConfirm={handleConfirm}
handleCancel={handleCancel}

1
webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.tsx
View file

@ -71,6 +71,7 @@ function CollapsedReplyThreadsModal(props: Props) {
return (
<GenericModal
compassDesign={true}
className='CollapsedReplyThreadsModal productNotices'
id={ModalIdentifiers.COLLAPSED_REPLY_THREADS_MODAL}
onExited={props.onExited}

4
webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
View file

@ -309,7 +309,9 @@ exports[`component/user_group_popover should match snapshot 1`] = `
type="text"
value=""
>
<div>
<div
className="input-wrapper"
>
<input
className="user-group-popover_search-bar"
defaultValue=""

22
webapp/channels/src/components/user_groups_modal/user_groups_modal.scss
View file

@ -81,7 +81,7 @@
.upsell-confirm-foreground {
height: 148px;
padding: 16px 24px;
padding: 16px 32px;
background: var(--button-color);
}
@ -133,11 +133,7 @@
h1#createGroupsModalTitleWithBack,
h1#updateGroupsModalTitle,
h1#addUsersToGroupsModalLabel {
margin-left: 44px;
}
.user-groups-create {
margin-right: 42px;
margin-left: 16px;
}
}
}
@ -153,7 +149,7 @@
.user-groups-search {
position: relative;
margin: 6px 24px 8px;
margin: 6px 32px 8px;
.Input_container {
.Input_wrapper {
@ -179,7 +175,7 @@
.more-modal__dropdown {
width: 100%;
padding: 0 24px 24px;
padding: 0 32px 24px;
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
#groupsFilterDropdown {
@ -369,7 +365,7 @@
.group-mention-input-wrapper,
.group-name-input-wrapper {
padding: 6px 24px 12px;
padding: 6px 32px 12px;
.Input_container {
:focus {
@ -391,11 +387,11 @@
}
.group-mention-input-wrapper {
padding: 12px 24px 24px;
padding: 12px 32px 24px;
}
h2 {
padding: 0 24px;
padding: 0 32px;
color: inherit;
font-size: 18px;
font-weight: 600;
@ -406,10 +402,6 @@
.multi-select__wrapper {
margin-top: 0;
}
.multi-select__footer {
padding-top: 24px;
}
}
}
}

7
webapp/channels/src/sass/components/_admin-modal.scss
View file

@ -1,7 +0,0 @@
.admin-modal {
.modal-header {
margin: 1px;
background-color: $black;
color: $white;
}
}

2
webapp/channels/src/sass/components/_buttons.scss
View file

@ -212,7 +212,7 @@ button {
&:disabled:hover,
&:disabled:active {
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.32);
color: rgba(var(--center-channel-color-rgb), 0.32) !important;
opacity: 1;
}
}

26
webapp/channels/src/sass/components/_channel-invite-modal.scss
View file

@ -6,11 +6,12 @@
.modal .channel-invite__content,
.modal .user-groups-modal__content {
.multi-select__container {
padding: 0 2.4rem;
height: auto;
padding: 0 3.2rem;
}
.AlertBanner {
margin: 1.2rem 2.4rem 0;
margin: 1.2rem 3.2rem 0;
button.btn {
border-radius: 4px;
@ -52,20 +53,15 @@
position: absolute;
z-index: 5;
overflow: auto;
width: calc(100% - 28px);
width: calc(100% - 48px);
height: auto;
max-height: 272px;
padding: 12px 0;
margin: -10px 0 0 14px;
margin: -10px 0 0 24px;
border-radius: 4px;
box-shadow: var(--elevation-4);
}
.multi-select__footer {
padding: 0 24px 24px 0;
text-align: right;
}
.no-channel-message {
padding: 1rem;
font-size: 1.4rem;
@ -163,22 +159,20 @@
display: flex;
flex-direction: column;
.modal-footer {
order: 2;
}
.filtered-user-list {
order: 0;
}
.invite-as-guest {
margin-top: 8px;
margin-right: 2.4rem;
margin-bottom: 22px;
margin-right: 3.2rem;
margin-left: auto;
}
.multi-select__footer {
order: 2;
margin-top: 10px;
}
.custom-no-options-message {
padding: 12px 15px;
font-size: 16px;

43
webapp/channels/src/sass/components/_channel-switcher.scss
View file

@ -7,33 +7,14 @@
margin-top: calc(50vh - 240px);
}
.modal-header {
padding-right: 32px;
padding-left: 32px;
}
.modal-body {
max-height: 100%;
padding: 0;
}
.modal-content {
border-radius: 8px;
}
.modal-header {
min-height: 0;
padding: 0;
border: none;
background: transparent;
.close {
top: 6px;
right: 4px;
display: flex;
width: 4rem;
height: 4rem;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 32px;
font-weight: 400;
}
padding: 2px 0 0;
}
}
@ -56,7 +37,7 @@
.icon-magnify {
position: absolute;
top: 1.1rem;
left: 3.4rem;
left: 4.2rem;
display: flex;
width: 2rem;
height: 2rem;
@ -65,15 +46,15 @@
}
.form-control {
width: calc(100% - 48px);
width: calc(100% - 64px);
height: 40px;
padding: 0 34px;
margin: 0 24px;
margin: 0 32px;
border-radius: 4px;
&:focus {
padding: 0 33px;
border: 2px solid v(button-bg);
border: 1px solid v(button-bg);
}
}
@ -125,6 +106,8 @@
}
.suggestion-list__divider {
padding: 1.6rem 3.2rem;
&:first-child {
margin: 0;
@ -198,8 +181,6 @@ body:not(.app__body) {
.channel-switcher__header,
.channel-invite__header {
padding: 2.4rem 2.4rem 1.6rem;
h1 {
margin: 0 0 0.8rem;
font-size: 2rem;

4
webapp/channels/src/sass/components/_edit-post-time-limit-modal.scss
View file

@ -10,5 +10,9 @@
width: 65%;
color: red;
text-align: left;
&:empty {
display: none;
}
}
}

5
webapp/channels/src/sass/components/_forms.scss
View file

@ -163,10 +163,13 @@
.form-control {
border-color: rgba(var(--center-channel-color-rgb), 0.16);
background: v(center-channel-bg);
border-radius: 4px;
box-shadow: none;
color: v(center-channel-color);
&:focus {
border-color: rgba(var(--center-channel-color-rgb), 0.4);
border-color: rgba(var(--button-bg-rgb), 1);
box-shadow: 0 0 0 1px var(--button-bg);
}
&[disabled],

232
webapp/channels/src/sass/components/_modal.scss
View file

@ -17,7 +17,7 @@
.modal-body {
overflow: auto;
max-height: calc(90vh - 80px);
padding: 20px 15px;
padding: 2px 32px;
&.overflow--visible {
overflow: visible;
@ -41,19 +41,12 @@
.app__body {
.modal {
color: rgb(var(--center-channel-color-rgb));
.modal-content {
border-color: rgba(var(--center-channel-color-rgb), 0.16);
background: v(center-channel-bg);
color: v(center-channel-color);
}
.modal-header {
border-color: rgba(var(--center-channel-color-rgb), 0.16);
background: var(--sidebar-header-bg);
.close {
color: var(--sidebar-header-text-color);
}
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
background: var(--center-channel-bg);
border-radius: 12px;
}
}
@ -124,7 +117,7 @@
.modal {
width: 100%;
color: alpha-color($black, 0.9);
color: v(center-channel-color);
.modal--overflow {
.modal-body {
@ -140,9 +133,14 @@
display: flex;
flex-wrap: wrap;
justify-content: end;
background: var(--center-channel-bg);
padding: 24px 32px;
border: none;
grid-row-gap: 8px;
&.divider {
border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
}
&.modal-footer--invisible {
overflow: hidden;
height: 0;
@ -242,77 +240,69 @@
.modal-header {
display: flex;
min-height: 56px;
padding: 14px 48px 11px 15px;
border-bottom: 1px solid $light-gray;
background: #333;
border-radius: 0;
border-radius: 3px 3px 0 0;
color: $white;
min-height: 76px;
align-items: center;
justify-content: space-between;
padding: 16px 64px 16px 32px;
border: none;
background: transparent;
@include clearfix;
.modal-title {
overflow: hidden;
max-width: calc(100% - 80px);
flex: 1;
color: var(--sidebar-header-text-color);
font-size: 17px;
line-height: 27px;
text-overflow: ellipsis;
white-space: nowrap;
.name {
font-weight: 600;
}
.shared-channel-icon {
width: 16px;
height: 16px;
margin: 0 8px;
color: #3d3c40;
font-size: 16px;
line-height: 16px;
&::before {
margin: 0;
}
}
&.divider {
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
}
.modal-action {
padding: 0;
margin: 0;
&::before,
&::after {
content: none;
}
.btn {
position: relative;
top: -2px;
}
.close {
position: absolute;
z-index: 5;
right: 10px;
width: 30px;
height: 30px;
color: white;
font-size: 24px;
line-height: 30px;
opacity: 0.7;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
font-size: 30px;
font-weight: 400;
opacity: 1;
text-shadow: none;
transition: all 0.1s ease-in;
&.icon-close {
font-size: 24px;
}
&:hover {
opacity: 1;
@include alpha-property(background, $black, 0.1);
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
}
.sr-only {
display: none;
&:active {
background: rgba(var(--button-bg-rgb), 0.08);
color: v(button-bg);
}
span {
font-family: 'Open Sans', sans-serif;
line-height: 10px;
.modal-title {
width: 100%;
background: transparent;
color: v(center-channel-color);
font-size: 22px;
line-height: 28px;
}
}
.modal-title {
background: transparent;
color: v(center-channel-color);
font-size: 22px;
line-height: 28px;
}
}
.no-channel-message {
@ -326,10 +316,9 @@
}
.modal-content {
border: 1px solid #777;
background: #fff;
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);
background: var(--sys-center-channel-bg);
border-radius: 12px;
}
.modal-chevron-icon {
@ -656,14 +645,19 @@
}
.modal-body {
padding: 10px 0 15px;
padding: 0;
overflow-x: hidden;
}
.filter-row {
width: 300px;
padding: 0 16px;
margin: 5px 0 10px;
.form-control {
height: 40px;
padding: 0 16px;
}
&.filter-row--full {
width: 100%;
}
@ -847,8 +841,8 @@
display: flex;
min-height: 65px;
align-items: center;
padding: 10px 15px;
border-bottom: 1px solid $light-gray;
padding: 10px 32px;
border-top: 1px solid $light-gray;
&.clickable {
cursor: pointer;
@ -985,7 +979,8 @@
}
.filter-controls {
padding: 1em 1.5em 0;
padding: 24px 32px;
border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
.filter-control__next {
float: right;
@ -1068,82 +1063,3 @@
height: calc(90vh - 180px);
}
}
.user-groups-modal-create,
.user-groups-modal-update,
.view-user-groups-modal,
.user-groups-modal {
.modal-content {
border-radius: 8px;
.modal-header {
display: flex;
min-height: 0;
align-items: center;
padding: 24px 24px;
border: none;
background: transparent;
color: inherit;
button.modal-header-back-button {
position: absolute;
left: 18px;
display: flex;
width: 4rem;
height: 4rem;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
float: left;
&:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
}
&:active {
background-color: rgba(var(--center-channel-color-rgb), 0.12);
background-color: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
}
i {
font-size: 24px;
line-height: 24px;
}
}
.close {
right: 18px;
width: 4rem;
height: 4rem;
margin-top: 0;
color: rgba(var(--center-channel-color-rgb), 0.56);
font-size: 32px;
font-weight: normal;
line-height: 30px;
&:hover {
background: rgba(var(--center-channel-color-rgb), 0.08);
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.72);
fill: rgba(var(--center-channel-color-rgb), 0.72);
}
&:active {
background-color: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
}
}
.modal-title {
color: inherit;
font-size: 22px;
line-height: 28px;
}
}
}
}

1
webapp/channels/src/sass/components/_module.scss
View file

@ -36,7 +36,6 @@
@import 'color-input';
@import 'system-notice';
@import 'permissions';
@import 'admin-modal';
@import 'edit-post-time-limit-button';
@import 'edit-post-time-limit-modal';
@import 'day-picker';

3
webapp/channels/src/sass/components/_multi-select.scss
View file

@ -3,11 +3,12 @@
.multi-select__container {
display: flex;
width: 100%;
height: 40px;
justify-content: space-between;
padding: 0 15px;
.btn {
height: 36px;
height: 40px;
margin-left: 16px;
}
}

36
webapp/channels/src/sass/components/_post.scss
View file

@ -2205,42 +2205,6 @@
}
}
#restorePostModal {
.modal-body {
max-height: calc(100vh - 128px - 61px - 88px);
.GenericModal__header {
padding-top: 0;
}
}
.modal-content {
padding-top: 44px;
}
.modal-footer {
padding-top: 28px;
text-align: center;
}
.GenericModal__button {
margin: 0 4px;
&.cancel-button {
background-color: rgba(var(--button-bg-rgb), 0.08);
border-radius: 4px;
}
}
}
.edit-post-history__restore__modal__header {
text-align: center;
span {
font-size: 22px;
}
}
.edit-post-history__restore__modal__content {
padding: 16px;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);

2
webapp/channels/src/sass/components/_react-select.scss
View file

@ -4,7 +4,7 @@
}
.react-select__value-container {
padding: 0 8px;
padding: 0 14px;
}
.react-select__multi-value {

51
webapp/channels/src/sass/components/_settings-modal.scss
View file

@ -6,6 +6,10 @@
font-size: 18px;
}
.modal-header {
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
}
// Tabs
.nav-pills {
> li {
@ -39,12 +43,6 @@
}
}
.modal-content {
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
background: var(--center-channel-bg);
border-radius: 12px;
}
.settings-table {
.settings-links {
width: 232px;
@ -67,46 +65,5 @@
}
}
}
.modal-header {
height: 76px;
align-items: center;
padding: 0 24px;
border-color: rgba(var(--center-channel-color-rgb), 0.08);
background: transparent;
.close {
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
font-size: 30px;
font-weight: 400;
&:hover {
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
}
&:active {
background: rgba(var(--button-bg-rgb), 0.08);
color: v(button-bg);
}
.modal-title {
background: transparent;
color: v(center-channel-color);
font-size: 22px;
}
}
.modal-title {
background: transparent;
color: v(center-channel-color);
font-size: 22px;
}
}
}
}

8
webapp/channels/src/sass/components/_suggestion-list.scss
View file

@ -196,6 +196,14 @@
line-height: 20px;
white-space: nowrap;
.modal & {
padding: 8px 3.2rem;
.suggestion-list__team-name {
right: 32px;
}
}
.suggestion-list__ellipsis {
display: flex;
overflow: hidden;

54
webapp/channels/src/sass/routes/_about-modal.scss
View file

@ -7,61 +7,9 @@
}
.about-modal {
.modal-content {
.modal-header {
display: flex;
align-items: center;
padding: 20px 25px;
border: none;
border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
background: transparent;
color: inherit;
.close {
right: 15px;
color: inherit;
font-size: 30px;
font-weight: normal;
opacity: 0.5;
}
.more-modal__image {
margin-right: 12px;
}
.modal-title {
color: inherit;
font-size: 17px;
font-weight: 600;
}
.icon {
position: relative;
top: 1px;
margin: 0 5px 0 8px;
svg {
width: 14px;
height: 14px;
opacity: 0.8;
}
}
}
}
.modal-body {
max-height: calc(100vh - 220px);
padding: 15px 25px;
}
.modal-footer {
.btn {
height: 40px;
padding: 0 20px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
}
padding: 16px 32px;
}
label {

8
webapp/channels/src/sass/routes/_admin-console.scss
View file

@ -7,7 +7,7 @@
.admin-console {
overflow: auto;
height: 100%;
color: #333;
color: v(center-channel-color);
grid-area: center;
> div {
@ -903,10 +903,6 @@
}
.manage-teams {
.modal-body {
padding: 15px 15px 0;
}
.manage-teams__user {
display: flex;
align-items: center;
@ -914,7 +910,7 @@
.manage-teams__teams {
border-top: $border-gray;
margin: 1em 0 0.3em;
margin: 1em 0 32px;
margin-top: 1em;
.btn-tertiary {

1
webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap
View file

@ -62,6 +62,7 @@ exports[`GenericModal should match snapshot for base case 1`] = `
class="GenericModal__header"
>
<h1
class="modal-title"
id="genericModalLabel"
>
Modal Header Text

156
webapp/platform/components/src/generic_modal/generic_modal.scss
View file

@ -29,9 +29,13 @@
.form-control {
height: 40px;
box-sizing: border-box;
border: 2px solid var(--button-bg);
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
border-radius: 4px;
&:focus {
border-color: var(--button-bg);
}
&.has-error {
border-color: var(--error-text);
}
@ -54,9 +58,13 @@
}
}
.input-wrapper {
position: relative;
}
.input-clear {
top: 12px;
right: 36px;
right: 12px;
width: 16px;
height: 16px;
color: var(--center-channel-color);
@ -68,113 +76,18 @@
}
}
.modal-content {
padding: 16px 15px;
border-radius: 8px;
}
.modal-header {
min-height: 0;
padding: 0;
border: none;
background: transparent;
.close {
top: 6px;
right: 6px;
display: flex;
width: 4rem;
height: 4rem;
align-items: center;
justify-content: center;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
font-size: 32px;
font-weight: 400;
&:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
}
&:active {
background-color: rgba(var(--button-bg-rgb), 0.08);
color: v(button-bg);
}
}
}
.modal-footer {
padding: 12px 24px 24px 24px;
border: none;
border-radius: 4px;
&.divider {
border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
}
}
&.GenericModal__compassDesign {
.modal-content {
padding: 0;
border-radius: 12px;
.modal-header {
flex-direction: column;
padding: 26px 32px 7px;
.close {
top: 22px;
right: 18px;
width: 40px;
height: 40px;
box-shadow: none;
&:active {
background: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
}
&:focus {
box-sizing: border-box;
border: 2px solid var(--sidebar-text-active-border);
}
}
.GenericModal__header {
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0;
margin-right: 32px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
h1 {
color: var(--center-channel-color);
font-size: 22px;
}
}
}
.modal-body {
.GenericModal__body {
padding: 0;
&.padding {
padding: 15px 32px 0;
padding: 8px 32px 0;
}
}
}
.modal-footer {
padding: 24px 32px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.genericModalError {
display: flex;
box-sizing: border-box;
@ -219,50 +132,3 @@
height: 100%;
}
}
.GenericModal__header {
padding: 28px 24px 16px 24px;
h1 {
margin: 0;
font-size: 20px;
font-weight: 600;
line-height: 28px;
}
}
.GenericModal__body {
position: relative;
width: 100%;
padding: 0 24px;
color: rgba(var(--center-channel-color-rgb), 0.72);
font-family: Open Sans;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 20px;
}
.GenericModal__button {
padding: 12px 16px;
border: none;
font-size: 14px;
font-weight: 600;
line-height: 12px;
&.cancel {
background: var(--center-channel-bg);
color: var(--button-bg);
}
&.confirm {
background: var(--button-bg);
border-radius: 4px;
color: var(--button-color);
&.disabled {
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.32);
}
}
}

5
webapp/platform/components/src/generic_modal/generic_modal.tsx
View file

@ -164,7 +164,10 @@ export class GenericModal extends React.PureComponent<Props, State> {
const headerText = this.props.modalHeaderText && (
<div className='GenericModal__header'>
<h1 id='genericModalLabel'>
<h1
id='genericModalLabel'
className='modal-title'
>
{this.props.modalHeaderText}
</h1>
{this.props.headerButton}