Fixing modal styles for some modals (#26635)

* Updating modal styles

* Updating modal header for notices

* Updating dispatch

* Updating padding

* Fixing css

* Updating modal

* Updating css

* Updating modal scss

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

@@ -36,31 +36,35 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
     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="addUsersToGroupsModalLabel"
+          className="icon icon-arrow-left"
-    >
+        />
-      <MemoizedFormattedMessage
+      </button>
-        defaultMessage="Add people to {group}"
+      <ModalTitle
-        id="user_groups_modal.addPeopleTitle"
+        bsClass="modal-title"
-        values={
+        componentClass="h1"
-          Object {
+        id="addUsersToGroupsModalLabel"
-            "group": "Group Name",
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="Add people to {group}"
+          id="user_groups_modal.addPeopleTitle"
+          values={
+            Object {
+              "group": "Group Name",
+            }
           }
-        }
+        />
-      />
+      </ModalTitle>
-    </ModalTitle>
+    </div>
   </ModalHeader>
   <ModalBody
     bsClass="modal-body"

webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx

@@ -100,24 +100,26 @@ const AddUsersToGroupModal = (props: Props) => {
             id='addUsersToGroupsModal'
         >
             <Modal.Header closeButton={true}>
-                <button
+                <div className='d-flex align-items-center'>
-                    type='button'
+                    <button
-                    className='modal-header-back-button btn btn-icon'
+                        type='button'
-                    aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
+                        className='modal-header-back-button btn btn-icon'
-                    onClick={goBack}
+                        aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
-                >
+                        onClick={goBack}
-                    <i className='icon icon-arrow-left'/>
+                    >
-                </button>
+                        <i className='icon icon-arrow-left'/>
-                <Modal.Title
+                    </button>
-                    componentClass='h1'
+                    <Modal.Title
-                    id='addUsersToGroupsModalLabel'
+                        componentClass='h1'
-                >
+                        id='addUsersToGroupsModalLabel'
-                    <FormattedMessage
+                    >
-                        id='user_groups_modal.addPeopleTitle'
+                        <FormattedMessage
-                        defaultMessage='Add people to {group}'
+                            id='user_groups_modal.addPeopleTitle'
-                        values={titleValue}
+                            defaultMessage='Add people to {group}'
-                    />
+                            values={titleValue}
-                </Modal.Title>
+                        />
+                    </Modal.Title>
+                </div>
             </Modal.Header>
             <Modal.Body
                 className='overflow--visible'

webapp/channels/src/components/admin_console/billing/delete_workspace/result_modal.scss

@@ -66,7 +66,7 @@
             .IconMessage-buttons {
                 justify-content: right;
                 padding-right: 24px;
-                margin-top: 60px;
+                margin-top: 32px;
 
                 .btn {
                     font-family: 'Open sans', sans-serif;

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

@@ -1,11 +1,6 @@
 @charset 'UTF-8';
 
 #browseChannelsModal {
-    .modal-content {
-        min-height: 600px;
-        max-height: calc(50vh - 240px);
-    }
-
     .modal-dialog {
         margin-top: calc(45vh - 240px) !important;
     }
@@ -21,6 +16,7 @@
 
         #searchIcon {
             position: absolute;
+            z-index: 2;
             top: 16px;
             left: 46px;
             color: rgba(var(--center-channel-color-rgb), 0.64);
@@ -227,19 +223,10 @@
             justify-content: space-between;
             padding-right: 4px;
         }
-
-        .close {
-            top: 22px;
-        }
     }
 
     .filter-controls {
-        padding: 0;
+        padding-top: 24px;
-
-        button {
-            min-width: 72px;
-            margin: 8px 32px;
-        }
     }
 }
 

webapp/channels/src/components/product_notices_modal/product_notices_modal.scss

@@ -3,25 +3,23 @@
 .productNotices {
     width: 692px;
 
-    .app__body .modal & .modal-content {
-        padding: 40px;
-    }
-
-    .GenericModal__header {
-        padding: 0;
-        margin-bottom: 16px;
-    }
-
     .GenericModal__body {
         padding: 0;
     }
 
-    .productNotices__helpText {
+    .modal-title {
-        margin-top: 8px;
+        font-size: 22px;
+        line-height: 28px;
+    }
 
-        p {
+    .modal-header {
-            margin-bottom: 16px;
+        min-height: auto;
-        }
+        padding-top: 48px;
+        padding-bottom: 0px;
+    }
+
+    .productNotices__helpText {
+        opacity: 0.75;
     }
 
     .productNotices__img {
@@ -36,10 +34,6 @@
         margin: 0 auto;
     }
 
-    .modal-footer {
-        margin-top: 32px;
-    }
-
     .productNotices__info {
         position: fixed;
         z-index: 1;
@@ -59,96 +53,4 @@
         margin-left: 23px;
         vertical-align: middle;
     }
-
-    .app__body .modal &.modal-dialog {
-        height: unset;
-        margin-top: calc(50vh - 307px);
-    }
-
-    .app__body .modal & .modal-footer {
-        position: relative;
-        padding: 0;
-    }
-
-    .GenericModal__button {
-        display: inline-flex;
-        align-items: center;
-        padding: 13px 20px;
-        border: none;
-        font-size: 14px;
-        line-height: 14px;
-
-        &.confirm {
-            background: var(--button-bg);
-            color: var(--button-color);
-
-            &:hover:not(.disabled) {
-                background:
-                    linear-gradient(
-                        0deg,
-                        rgba(var(--center-channel-color-rgb), 0.16),
-                        rgba(var(--center-channel-color-rgb), 0.16)
-                    ),
-                    var(--button-bg);
-            }
-
-            &:active {
-                background:
-                    linear-gradient(
-                        0deg,
-                        rgba(var(--center-channel-color-rgb), 0.32),
-                        rgba(var(--center-channel-color-rgb), 0.32)
-                    ),
-                    var(--button-bg);
-            }
-
-            &:focus {
-                box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
-            }
-        }
-
-        &.cancel,
-        &.actionButton {
-            display: inline-flex;
-            align-items: center;
-            border-radius: 4px;
-            background: var(--center-channel-bg);
-            color: var(--button-bg);
-            text-decoration: none;
-
-            &:hover {
-                background: rgba(var(--button-bg-rgb), 0.04);
-            }
-
-            &:active {
-                background: rgba(var(--button-bg-rgb), 0.08);
-            }
-
-            &:focus {
-                box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
-            }
-        }
-
-        &.actionButton {
-            box-shadow: inset 0 0 0 1px var(--button-bg);
-        }
-
-        &.cancel {
-            margin-right: 12px;
-        }
-
-        .fa {
-            font-size: 14px;
-
-            // only target `.fa` that is the first child (left aligned icon)
-            &:first-child {
-                margin-right: 7px;
-            }
-        }
-
-        // only target `.fa` that follows a `span` (right aligned icon)
-        span ~ .fa {
-            margin-left: 7px;
-        }
-    }
 }

webapp/channels/src/components/searchable_channel_list.tsx

@@ -377,7 +377,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             if (channelsToDisplay.length >= this.props.channelsPerPage && pageEnd < this.props.channels.length) {
                 nextButton = (
                     <button
-                        className='btn btn-sm filter-control filter-control__next outlineButton'
+                        className='btn btn-sm btn-tertiary filter-control filter-control__next'
                         onClick={this.nextPage}
                         disabled={this.state.nextDisabled}
                         aria-label={localizeMessage('more_channels.next', 'Next')}
@@ -393,7 +393,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             if (this.state.page > 0) {
                 previousButton = (
                     <button
-                        className='btn btn-sm filter-control filter-control__prev outlineButton'
+                        className='btn btn-sm btn-tertiary filter-control filter-control__prev'
                         onClick={this.previousPage}
                         aria-label={localizeMessage('more_channels.prev', 'Previous')}
                     >

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

@@ -3,26 +3,11 @@
 
 .GenericModal.CollapsedReplyThreadsModal {
     width: 692px;
-    padding: 0 1.6rem;
-
-    .modal-content {
-        padding: 16px 15px;
-
-        @media screen and (max-width: 767px) {
-            .app__body .modal & {
-                padding: 24px;
-            }
-        }
-    }
 
     .CollapsedReplyThreadsModal__img {
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
         border-radius: 4px;
-        margin-top: 40px;
+        margin-top: 22px;
-    }
-
-    .modal-footer {
-        margin-top: 20px;
     }
 }
 

webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss

@@ -1,10 +1,11 @@
 .view-user-groups-modal {
     .modal-content .modal-header {
         overflow: visible;
+        padding-top: 0;
         padding-bottom: 0;
 
         .modal-title {
-            margin-left: 46px;
+            margin-left: 16px;
 
             i {
                 margin-left: 5px;
@@ -13,8 +14,6 @@
         }
 
         .details-action {
-            margin-right: 42px;
-
             .MenuWrapper {
                 margin-left: auto;
             }
@@ -22,12 +21,14 @@
     }
 
     .modal-body {
+        overflow: visible;
+
         .no-results__wrapper {
             padding-bottom: 60px;
         }
 
         .group-mention-name {
-            margin-bottom: 25px;
+            margin: -24px 0 24px 6px;
 
             span.group-name {
                 margin-left: 70px;
@@ -90,7 +91,6 @@
                     }
 
                     .group-member-username {
-                        padding-left: 8px;
                         color: rgba(var(--center-channel-color-rgb), 0.75);
                         font-size: 12px;
                         line-height: 18px;

webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx

@@ -161,20 +161,24 @@ const ViewUserGroupModalHeader = ({
 
     return (
         <Modal.Header closeButton={true}>
-            <button
+            <div className='d-flex align-items-center'>
-                type='button'
+                <button
-                className='modal-header-back-button btn btn-icon'
+                    type='button'
-                aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
+                    className='modal-header-back-button btn btn-icon'
-                onClick={goBack}
+                    aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
-            >
+                    onClick={goBack}
-                <i
+                >
-                    className='icon icon-arrow-left'
+                    <i
-                />
+                        className='icon icon-arrow-left'
-            </button>
+                    />
-            {modalTitle()}
+                </button>
-            {addPeopleButton()}
+                {modalTitle()}
-            {restoreGroupButton()}
+            </div>
-            {subMenuButton()}
+            <div className='d-flex align-items-center'>
+                {addPeopleButton()}
+                {restoreGroupButton()}
+                {subMenuButton()}
+            </div>
         </Modal.Header>
     );
 };

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

@@ -268,6 +268,10 @@
             content: none;
         }
 
+        .modal-header-back-button {
+            margin-left: -12px;
+        }
+
         .btn {
             position: relative;
             top: -2px;