MM-58173 fix overlapping UI and modals (#1929)

* fixed styles on textbox and general modal styles * fix modal style issues * rounded corners on select menu * minor tweaks to delete metrics confirm modal * fixed button styling and search input on playbook run modal * tweak to icon position on search input * fix lint issues
mattermost · Aug 22, 2024 · fe87cf6 · fe87cf6
1 parent 72bfd1e
commit fe87cf6
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 42 deletions.
diff --git a/webapp/src/components/actions_modal.tsx b/webapp/src/components/actions_modal.tsx
@@ -85,27 +85,22 @@ const ActionsModal = (props: Props) => {
 const ModalHeader = styled(Modal.Header)`
     &&&& {
         margin-bottom: 0;
+        padding-top: 24px;
+        padding-bottom: 20px;
     }
 `;
 
 const StyledModal = styled(GenericModal)`
     .modal-body {
-        :before {
-            content: '';
-            height: 1px;
-            width: 600px;
-            position: absolute;
-            left: -24px;
-            top: 0px;
-            background: rgba(var(--center-channel-color-rgb), 0.08);
-        }
+        border-top: var(--border-default);
     }
 `;
 
 const ModalTitle = styled.div`
     font-weight: 600;
     font-size: 20px;
     line-height: 20px;
+    margin-top: 4px;
 `;
 
 const ModalFooter = styled(DefaultFooterContainer)`
@@ -132,8 +127,8 @@ const Header = styled.div`
 `;
 
 const IconWrapper = styled.div`
-    margin-right: 14px;
-    margin-top: 2px;
+    margin-right: 12px;
+    margin-left: -4px;
 `;
 
 export const TriggersContainer = styled.div`

diff --git a/webapp/src/components/backstage/playbook_edit/metrics/metrics.tsx b/webapp/src/components/backstage/playbook_edit/metrics/metrics.tsx
@@ -334,6 +334,7 @@ const OptionDesc = styled.div`
 
 const ConfirmModalFooter = styled(DefaultFooterContainer)`
     align-items: center;
+    flex: 1;
     margin-bottom: 24px;
 
     button.confirm {

diff --git a/webapp/src/components/backstage/public_private_selector.tsx b/webapp/src/components/backstage/public_private_selector.tsx
@@ -21,15 +21,20 @@ const HorizontalContainer = styled.div`
 `;
 
 const BigButton = styled.button`
-	padding: 16px;
-	border: 1px solid rgba(var(--button-bg-rgb), 0.08);
-	background: var(--center-channel-bg);
-	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
-	border-radius: 4px;
+    padding: 16px 12px;
+    border: var(--border-default);
+    background: var(--center-channel-bg);
+    box-shadow: var(--elevation-1);
+    border-radius: var(--radius-s);
 	flex-grow: 1;
 	flex-basis: 0;
 	margin: 4px;
 
+    &:hover {
+        border: var(--border-dark);
+        box-shadow: var(--elevation-2);
+    }
+
     &:disabled {
         background: rgba(var(--center-channel-color-rgb), 0.08);
         opacity: 0.6;
@@ -46,9 +51,21 @@ const StackedText = styled.div`
 `;
 
 const GiantIcon = styled.i<{active?: boolean}>`
-	font-size: 36px;
-	line-height: 42px;
-	color: ${(props) => (props.active ? 'var(--button-bg)' : 'rgba(var(--center-channel-color-rgb), 0.56)')};
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    font-size: 28px;
+	line-height: 28px;
+	color: ${(props) => (props.active ? 'var(--button-bg)' : 'rgba(var(--center-channel-color-rgb), 0.64)')};
+    background: ${(props) => (props.active ? 'rgba(var(--button-bg-rgb), 0.08)' : 'rgba(var(--center-channel-color-rgb), 0.08)')};
+    border-radius: var(--radius-full);
+
+    &:before {
+        margin: 0;
+    }
 `;
 
 const CheckIcon = styled.i`

diff --git a/webapp/src/components/backstage/search_input.tsx b/webapp/src/components/backstage/search_input.tsx
@@ -76,6 +76,7 @@ export const Search = styled.div<{width?: string}>`
         width: ${(props) => (props.width ? props.width : '360px')};
         height: 4rem;
         font-size: 14px;
+        font-family: 'Open Sans', sans-serif;
         padding-left: 4rem;
 
         &:focus {
@@ -86,7 +87,7 @@ export const Search = styled.div<{width?: string}>`
 
     &:before {
         left: 16px;
-        top: 8px;
+        top: 7px;
         position: absolute;
         color: rgba(var(--center-channel-color-rgb), 0.56);
         content: '\\f0349';

diff --git a/webapp/src/components/backstage/styles.tsx b/webapp/src/components/backstage/styles.tsx
@@ -76,6 +76,7 @@ export const GlobalSelectStyle = createGlobalStyle`
         .playbooks-rselect__menu-list {
             background-color: var(--center-channel-bg);
             border: none;
+            border-radius: var(--radius-s);
         }
 
         .playbooks-rselect__input {

diff --git a/webapp/src/components/markdown_textbox.tsx b/webapp/src/components/markdown_textbox.tsx
@@ -104,6 +104,7 @@ const Wrapper = styled.div`
     && .textarea-wrapper-preview  {
         .custom-textarea.custom-textarea.textbox-preview-area {
             display: block!important;
+            z-index: 0;
         }
         .input-wrapper {
             display: none;

diff --git a/webapp/src/components/modals/run_playbook_modal.tsx b/webapp/src/components/modals/run_playbook_modal.tsx
@@ -20,7 +20,6 @@ import MenuList from 'src/components/backstage/playbook_edit/automation/menu_lis
 import {HorizontalSpacer, RadioInput} from 'src/components/backstage/styles';
 import {displayPlaybookCreateModal} from 'src/actions';
 import PlaybooksSelector from 'src/components/playbooks_selector';
-import {SecondaryButton} from 'src/components/assets/buttons';
 import SearchInput from 'src/components/backstage/search_input';
 import {useCanCreatePlaybooksInTeam} from 'src/hooks';
 import {RUN_NAME_MAX_LENGTH} from 'src/constants';
@@ -227,9 +226,14 @@ const RunPlaybookModal = ({
                             <FormattedMessage defaultMessage='Select a playbook'/>
                         </HeaderTitle>
                         <HeaderButtonWrapper>
-                            {canCreatePlaybooks && <CreatePlaybookButton onClick={onCreatePlaybook}>
-                                <FormattedMessage defaultMessage='Create new playbook'/>
-                            </CreatePlaybookButton>}
+                            {canCreatePlaybooks &&
+                                <CreatePlaybookButton
+                                    onClick={onCreatePlaybook}
+                                    className='btn btn-sm btn-tertiary'
+                                >
+                                    <FormattedMessage defaultMessage='Create new playbook'/>
+                                </CreatePlaybookButton>
+                            }
                         </HeaderButtonWrapper>
                     </ColContainer>
                     {showsearch && <SearchWrapper>
@@ -501,10 +505,8 @@ const HeaderButtonWrapper = styled.div`
     margin-left: auto;
     margin-right: 30px;
 `;
-const CreatePlaybookButton = styled(SecondaryButton)`
+const CreatePlaybookButton = styled.button`
     font-family: 'Open Sans';
-    height: 32px;
-    padding: 0 10px;
 `;
 
 const SearchWrapper = styled.div`

diff --git a/webapp/src/components/rhs/rhs_run_details_tour_dialog.tsx b/webapp/src/components/rhs/rhs_run_details_tour_dialog.tsx
@@ -71,7 +71,6 @@ const Title = styled.h1`
 const Desc = styled.div`
     font-size: 14px;
     text-align: center;
-
     padding: 0 16px;
     margin: 0;
     margin-top: 8px;
@@ -80,7 +79,6 @@ const Desc = styled.div`
 
 const Footer = styled(DefaultFooterContainer)`
     align-items: center;
-    margin-bottom: 24px;
 `;
 const ChecklistIllustration = () => {
     return (

diff --git a/webapp/src/components/widgets/confirmation_modal_light.tsx b/webapp/src/components/widgets/confirmation_modal_light.tsx
@@ -61,7 +61,7 @@ const ConfirmModalTitle = styled.h1`
     font-family: Metropolis;
     font-size: 22px;
     line-height: 28px;
-
+    margin-top: 0;
     text-align: center;
     color: var(--center-channel-color);
 `;

diff --git a/webapp/src/components/widgets/generic_modal.tsx b/webapp/src/components/widgets/generic_modal.tsx
@@ -169,21 +169,11 @@ export const StyledModal = styled(Modal)`
         place-content: start center;
         padding: 8px;
         /* content-spacing */
-        .modal-header {
-            margin-bottom: 8px;
-        }
         .modal-body {
             overflow: visible;
+            padding: 0 32px;
         }
-        .modal-content {
-            padding: 24px;
-        }
-        .modal-footer {
-            padding: 24px 0 0 0;
-        }
-        .close {
-            margin: 12px 12px 0 0;
-        }
+
         .modal-dialog {
             margin: 0px !important;
             max-width: 100%;
@@ -221,6 +211,7 @@ export const ModalHeading = styled.h1`
     font-size: 22px;
     line-height: 28px;
     color: var(--center-channel-color);
+    margin: 0;
 `;
 
 export const ModalSideheading = styled.h6`
@@ -236,6 +227,7 @@ export const ModalSubheading = styled.h6`
     font-size: 12px;
     line-height: 16px;
     margin-top: 6px;
+    margin-bottom: 0;
     font-family: 'Open Sans';
     color: rgba(var(--center-channel-color-rgb), 0.72);
 `;