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

@@ -35,6 +35,9 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
     bsClass="modal-header"
     closeButton={true}
     closeLabel="Close"
+  >
+    <div
+      className="d-flex align-items-center"
     >
       <button
         aria-label="Back"
@@ -61,6 +64,7 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
           }
         />
       </ModalTitle>
+    </div>
   </ModalHeader>
   <ModalBody
     bsClass="modal-body"

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

@@ -100,6 +100,7 @@ const AddUsersToGroupModal = (props: Props) => {
             id='addUsersToGroupsModal'
         >
             <Modal.Header closeButton={true}>
+                <div className='d-flex align-items-center'>
                     <button
                         type='button'
                         className='modal-header-back-button btn btn-icon'
@@ -118,6 +119,7 @@ const AddUsersToGroupModal = (props: Props) => {
                             values={titleValue}
                         />
                     </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 {
-            margin-bottom: 16px;
     }
+
+    .modal-header {
+        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,6 +161,7 @@ const ViewUserGroupModalHeader = ({
 
     return (
         <Modal.Header closeButton={true}>
+            <div className='d-flex align-items-center'>
                 <button
                     type='button'
                     className='modal-header-back-button btn btn-icon'
@@ -172,9 +173,12 @@ const ViewUserGroupModalHeader = ({
                     />
                 </button>
                 {modalTitle()}
+            </div>
+            <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;