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

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"
     >
-      <MagnifyIcon
+      <i
-        size={18}
+        className="icon icon-magnify"
       />
     </span>
     <QuickInput

webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap

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

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<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'

webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap

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

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

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

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

webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx

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

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;

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 {

webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx

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

webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx

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

webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx

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

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.'
                 />
-                <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}
                 >

webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx

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

webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx

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

webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx

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

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

webapp/channels/src/components/browse_channels/browse_channels.scss

@@ -21,8 +21,9 @@
 
         #searchIcon {
             position: absolute;
-            top: 16px;
+            z-index: 1;
-            left: 46px;
+            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;

webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap

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

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<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}

webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx

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

webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx

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

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;

webapp/channels/src/components/confirm_modal.tsx

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

webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap

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

webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx

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

webapp/channels/src/components/custom_status/custom_status.scss

@@ -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;
+        z-index: 5;
-        left: 10px;
+        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: 24px 0 8px;
-    margin-top: 45px;
+    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;

webapp/channels/src/components/custom_status/custom_status_modal.tsx

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

webapp/channels/src/components/delete_category_modal/delete_category_modal.tsx

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

webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss

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

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<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}

webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx

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

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]}
         />
       </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

webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx

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

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

webapp/channels/src/components/invitation_modal/invitation_modal.tsx

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

webapp/channels/src/components/invitation_modal/invite_view.tsx

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

webapp/channels/src/components/invitation_modal/result_view.scss

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

webapp/channels/src/components/invitation_modal/result_view.tsx

@@ -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}'

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

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

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss

@@ -5,31 +5,13 @@
         width: 1100px;
         margin-top: 50px;
 
-        .shortcuts-content {
+        .modal-header {
-            .modal-header {
+            .shortcut-line {
-                height: 100px;
+                margin: 0;
-                padding: 20px 40px 20px;
-                border: none;
-                background: transparent;
-                color: inherit;
 
-                .close {
+                span {
-                    top: 35px;
+                    &:first-child {
-                    right: 35px;
+                        margin-right: 12px;
-                    overflow: hidden;
-                    color: inherit;
-                    font-size: 28px;
-                    font-weight: normal;
-                }
-
-                .modal-title {
-                    color: inherit;
-                    font-size: 20px;
-
-                    >div {
-                        &:first-child {
-                            margin-bottom: 2.5em;
-                        }
                     }
                 }
             }
@@ -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;
         }
 

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx

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

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss

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

webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.scss

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

webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx

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

webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.scss

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

webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.test.tsx

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

webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.tsx

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

webapp/channels/src/components/list_modal.tsx

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

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

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

webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx

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

webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap

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

webapp/channels/src/components/multiselect/multiselect.tsx

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

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

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

webapp/channels/src/components/post_edit_history/restore_post_modal.tsx

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

webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss

@@ -1,27 +1,12 @@
 @import '../../sass/utils/module';
 
 .post-reminder-modal {
-    width: 600px;
+    .modal-body {
-
+        overflow: visible;
-    .modal &.GenericModal .modal {
-        &-body {
-            overflow: visible;
-        }
-
-        &-content {
-            width: 100%;
-            padding: 28px 8px 24px 24px;
-        }
-
-        &-footer {
-            padding: 0;
-            padding-right: 16px;
-            margin-top: 22px;
-        }
     }
 
     .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%;
         }
     }
 }

webapp/channels/src/components/pricing_modal/content.tsx

@@ -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 && (

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 {

webapp/channels/src/components/pricing_modal/self_hosted_content.tsx

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

webapp/channels/src/components/quick_input/quick_input.tsx

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

webapp/channels/src/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.tsx.snap

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

webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx

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

webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap

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

webapp/channels/src/components/searchable_channel_list.tsx

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

webapp/channels/src/components/searchable_user_list/searchable_user_list.tsx

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

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/mark_as_read_confirm_modal.tsx

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

webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.tsx

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

webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap

@@ -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=""

webapp/channels/src/components/user_groups_modal/user_groups_modal.scss

@@ -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;
+                margin-left: 16px;
-            }
-
-            .user-groups-create {
-                margin-right: 42px;
             }
         }
     }
@@ -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;
-                }
             }
         }
     }

webapp/channels/src/sass/components/_admin-modal.scss

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

webapp/channels/src/sass/components/_buttons.scss

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

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

@@ -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-right: 3.2rem;
-        margin-bottom: 22px;
         margin-left: auto;
     }
 
-    .multi-select__footer {
-        order: 2;
-        margin-top: 10px;
-    }
-
     .custom-no-options-message {
         padding: 12px 15px;
         font-size: 16px;

webapp/channels/src/sass/components/_channel-switcher.scss

@@ -7,33 +7,14 @@
             margin-top: calc(50vh - 240px);
         }
 
+        .modal-header {
+            padding-right: 32px;
+            padding-left: 32px;
+        }
+
         .modal-body {
             max-height: 100%;
-            padding: 0;
+            padding: 2px 0 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;
-            }
         }
     }
 
@@ -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;

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

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

webapp/channels/src/sass/components/_forms.scss

@@ -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],

webapp/channels/src/sass/components/_modal.scss

@@ -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);
+            border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-            background: v(center-channel-bg);
+            background: var(--center-channel-bg);
-            color: v(center-channel-color);
+            border-radius: 12px;
-        }
-
-        .modal-header {
-            border-color: rgba(var(--center-channel-color-rgb), 0.16);
-            background: var(--sidebar-header-bg);
-
-            .close {
-                color: var(--sidebar-header-text-color);
-            }
         }
     }
 
@@ -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;
+        min-height: 76px;
-        padding: 14px 48px 11px 15px;
+        align-items: center;
-        border-bottom: 1px solid $light-gray;
+        justify-content: space-between;
-        background: #333;
+        padding: 16px 64px 16px 32px;
-        border-radius: 0;
+        border: none;
-        border-radius: 3px 3px 0 0;
+        background: transparent;
-        color: $white;
 
-        @include clearfix;
+        &.divider {
-
+            border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
-        .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;
-                }
-            }
         }
 
-        .modal-action {
+        &::before,
-            padding: 0;
+        &::after {
-            margin: 0;
+            content: none;
+        }
+
+        .btn {
+            position: relative;
+            top: -2px;
         }
 
         .close {
             position: absolute;
-            z-index: 5;
+            top: 18px;
-            right: 10px;
+            right: 18px;
-            width: 30px;
+            width: 40px;
-            height: 30px;
+            height: 40px;
-            color: white;
+            border-radius: 4px;
-            font-size: 24px;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
-            line-height: 30px;
+            font-size: 30px;
-            opacity: 0.7;
+            font-weight: 400;
+            opacity: 1;
             text-shadow: none;
-            transition: all 0.1s ease-in;
+
+            &.icon-close {
+                font-size: 24px;
+            }
 
             &:hover {
-                opacity: 1;
+                background: rgba(var(--center-channel-color-rgb), 0.08);
-
+                color: rgba(var(--center-channel-color-rgb), 0.72);
-                @include alpha-property(background, $black, 0.1);
             }
 
-            .sr-only {
+            &:active {
-                display: none;
+                background: rgba(var(--button-bg-rgb), 0.08);
+                color: v(button-bg);
             }
 
-            span {
+            .modal-title {
-                font-family: 'Open Sans', sans-serif;
+                width: 100%;
-                line-height: 10px;
+                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;
+        border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);
-        background: #fff;
+        background: var(--sys-center-channel-bg);
-        border-radius: 4px;
+        border-radius: 12px;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     }
 
     .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;
+        padding: 10px 32px;
-        border-bottom: 1px solid $light-gray;
+        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;
-            }
-        }
-    }
-}

webapp/channels/src/sass/components/_module.scss

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

webapp/channels/src/sass/components/_multi-select.scss

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

webapp/channels/src/sass/components/_post.scss

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

webapp/channels/src/sass/components/_react-select.scss

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

webapp/channels/src/sass/components/_settings-modal.scss

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

webapp/channels/src/sass/components/_suggestion-list.scss

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

webapp/channels/src/sass/routes/_about-modal.scss

@@ -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;
+            padding: 16px 32px;
-        }
-
-        .modal-footer {
-            .btn {
-                height: 40px;
-                padding: 0 20px;
-                border-radius: 4px;
-                font-size: 14px;
-                font-weight: 600;
-            }
         }
 
         label {

webapp/channels/src/sass/routes/_admin-console.scss

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

webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap

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

webapp/platform/components/src/generic_modal/generic_modal.scss

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

webapp/platform/components/src/generic_modal/generic_modal.tsx

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