From 460b228837f80e9ae4c92bffb501c32ee4578a12 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:23:25 -0700
Subject: [PATCH] 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
---
 .../add_users_to_group_modal.test.tsx.snap    |  50 +++----
 .../add_users_to_group_modal.tsx              |  38 +++---
 .../delete_workspace/result_modal.scss        |   2 +-
 .../browse_channels/browse_channels.scss      |  17 +--
 .../product_notices_modal.scss                | 122 ++----------------
 .../components/searchable_channel_list.tsx    |   4 +-
 .../collapsed_reply_threads_modal.scss        |  17 +--
 .../view_user_group_modal.scss                |  10 +-
 .../view_user_group_modal_header.tsx          |  32 +++--
 .../channels/src/sass/components/_modal.scss  |   4 +
 10 files changed, 92 insertions(+), 204 deletions(-)

diff --git a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
index 69e7fc958e..a44cfcaecc 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
+++ b/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
-      aria-label="Back"
-      className="modal-header-back-button btn btn-icon"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="d-flex align-items-center"
     >
-      <i
-        className="icon icon-arrow-left"
-      />
-    </button>
-    <ModalTitle
-      bsClass="modal-title"
-      componentClass="h1"
-      id="addUsersToGroupsModalLabel"
-    >
-      <MemoizedFormattedMessage
-        defaultMessage="Add people to {group}"
-        id="user_groups_modal.addPeopleTitle"
-        values={
-          Object {
-            "group": "Group Name",
+      <button
+        aria-label="Back"
+        className="modal-header-back-button btn btn-icon"
+        onClick={[Function]}
+        type="button"
+      >
+        <i
+          className="icon icon-arrow-left"
+        />
+      </button>
+      <ModalTitle
+        bsClass="modal-title"
+        componentClass="h1"
+        id="addUsersToGroupsModalLabel"
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="Add people to {group}"
+          id="user_groups_modal.addPeopleTitle"
+          values={
+            Object {
+              "group": "Group Name",
+            }
           }
-        }
-      />
-    </ModalTitle>
+        />
+      </ModalTitle>
+    </div>
   </ModalHeader>
   <ModalBody
     bsClass="modal-body"
diff --git a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
index 991551a50f..306928a482 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
+++ b/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
-                    type='button'
-                    className='modal-header-back-button btn btn-icon'
-                    aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
-                    onClick={goBack}
-                >
-                    <i className='icon icon-arrow-left'/>
-                </button>
-                <Modal.Title
-                    componentClass='h1'
-                    id='addUsersToGroupsModalLabel'
-                >
-                    <FormattedMessage
-                        id='user_groups_modal.addPeopleTitle'
-                        defaultMessage='Add people to {group}'
-                        values={titleValue}
-                    />
-                </Modal.Title>
+                <div className='d-flex align-items-center'>
+                    <button
+                        type='button'
+                        className='modal-header-back-button btn btn-icon'
+                        aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
+                        onClick={goBack}
+                    >
+                        <i className='icon icon-arrow-left'/>
+                    </button>
+                    <Modal.Title
+                        componentClass='h1'
+                        id='addUsersToGroupsModalLabel'
+                    >
+                        <FormattedMessage
+                            id='user_groups_modal.addPeopleTitle'
+                            defaultMessage='Add people to {group}'
+                            values={titleValue}
+                        />
+                    </Modal.Title>
+                </div>
             </Modal.Header>
             <Modal.Body
                 className='overflow--visible'
diff --git a/webapp/channels/src/components/admin_console/billing/delete_workspace/result_modal.scss b/webapp/channels/src/components/admin_console/billing/delete_workspace/result_modal.scss
index 2d2881517b..4b09b30175 100644
--- a/webapp/channels/src/components/admin_console/billing/delete_workspace/result_modal.scss
+++ b/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;
diff --git a/webapp/channels/src/components/browse_channels/browse_channels.scss b/webapp/channels/src/components/browse_channels/browse_channels.scss
index c40d9d6df9..e0b624315e 100644
--- a/webapp/channels/src/components/browse_channels/browse_channels.scss
+++ b/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;
-
-        button {
-            min-width: 72px;
-            margin: 8px 32px;
-        }
+        padding-top: 24px;
     }
 }
 
diff --git a/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss b/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss
index c40ea375b9..0e8c73d272 100644
--- a/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss
+++ b/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 {
-        margin-top: 8px;
+    .modal-title {
+        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;
-        }
-    }
 }
diff --git a/webapp/channels/src/components/searchable_channel_list.tsx b/webapp/channels/src/components/searchable_channel_list.tsx
index 62767ad446..902ceeaa32 100644
--- a/webapp/channels/src/components/searchable_channel_list.tsx
+++ b/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')}
                     >
diff --git a/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss b/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss
index 6cf22f87a7..cab701db87 100644
--- a/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss
+++ b/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;
-    }
-
-    .modal-footer {
-        margin-top: 20px;
+        margin-top: 22px;
     }
 }
 
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss
index 57d0c94992..7a6852acdf 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss
+++ b/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;
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx
index a2d9c253db..73b6e382fc 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx
+++ b/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
-                type='button'
-                className='modal-header-back-button btn btn-icon'
-                aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
-                onClick={goBack}
-            >
-                <i
-                    className='icon icon-arrow-left'
-                />
-            </button>
-            {modalTitle()}
-            {addPeopleButton()}
-            {restoreGroupButton()}
-            {subMenuButton()}
+            <div className='d-flex align-items-center'>
+                <button
+                    type='button'
+                    className='modal-header-back-button btn btn-icon'
+                    aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
+                    onClick={goBack}
+                >
+                    <i
+                        className='icon icon-arrow-left'
+                    />
+                </button>
+                {modalTitle()}
+            </div>
+            <div className='d-flex align-items-center'>
+                {addPeopleButton()}
+                {restoreGroupButton()}
+                {subMenuButton()}
+            </div>
         </Modal.Header>
     );
 };
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index af6fc3e086..3d1a3a98fa 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/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;