Adjusting modals and updating close icon on input (#4458)

* Adjusting modals and updating close icon on input

* Updating test

* Updating css

* Updating dialog css

mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`components/boardSelector escape button should unmount the component 1`]
     class="focalboard-body"
   >
     <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
     >
       <div
         class="backdrop"
@@ -111,7 +111,7 @@ exports[`components/boardSelector renders with no results 1`] = `
     class="focalboard-body"
   >
     <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
     >
       <div
         class="backdrop"
@@ -217,7 +217,7 @@ exports[`components/boardSelector renders with some results 1`] = `
     class="focalboard-body"
   >
     <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
     >
       <div
         class="backdrop"
@@ -421,7 +421,7 @@ exports[`components/boardSelector renders without start searching 1`] = `
     class="focalboard-body"
   >
     <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
     >
       <div
         class="backdrop"

webapp/src/components/__snapshots__/cardDialog.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/cardDialog already following card 1`] = `
 <div>
   <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -215,7 +215,7 @@ exports[`components/cardDialog already following card 1`] = `
 exports[`components/cardDialog limited card shows hidden view (no toolbar) 1`] = `
 <div>
   <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -447,7 +447,7 @@ exports[`components/cardDialog limited card shows hidden view (no toolbar) 1`] =
 exports[`components/cardDialog return a cardDialog readonly 1`] = `
 <div>
   <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -578,7 +578,7 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
 exports[`components/cardDialog return cardDialog menu content 1`] = `
 <div>
   <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -927,7 +927,7 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
 exports[`components/cardDialog return cardDialog menu content and cancel delete confirmation do nothing 1`] = `
 <div>
   <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -1139,7 +1139,7 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
 exports[`components/cardDialog should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -1351,7 +1351,7 @@ exports[`components/cardDialog should match snapshot 1`] = `
 exports[`components/cardDialog should match snapshot without permissions 1`] = `
 <div>
   <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
   >
     <div
       class="backdrop"

webapp/src/components/__snapshots__/confirmAddUserForNotifications.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`/components/confirmAddUserForNotifications should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
   >
     <div
       class="backdrop"

webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
   >
     <div
       class="backdrop"
@@ -84,7 +84,7 @@ exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1
 exports[`/components/confirmationDialogBox confirmDialog with Confirm Button Text should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
   >
     <div
       class="backdrop"

webapp/src/components/__snapshots__/dialog.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/dialog should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back undefined size--medium"
   >
     <div
       class="backdrop"
@@ -50,7 +50,7 @@ exports[`components/dialog should match snapshot 1`] = `
 exports[`components/dialog should return dialog and click on cancel button 1`] = `
 <div>
   <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back undefined size--medium"
   >
     <div
       class="backdrop"

webapp/src/components/boardTemplateSelector/__snapshots__/boardTemplateSelectorItem.test.tsx.snap

@@ -143,7 +143,7 @@ exports[`components/boardTemplateSelector/boardTemplateSelectorItem should trigg
   </div>
   <div>
     <div
-      class="Dialog dialog-back DeleteBoardDialog"
+      class="Dialog dialog-back DeleteBoardDialog size--medium"
     >
       <div
         class="backdrop"

webapp/src/components/boardsSwitcherDialog/__snapshots__/boardSwitcherDialog.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`component/BoardSwitcherDialog base case 1`] = `
 <div>
   <div
-    class="Dialog dialog-back BoardSwitcherDialog"
+    class="Dialog dialog-back BoardSwitcherDialog size--medium"
   >
     <div
       class="backdrop"

webapp/src/components/cardDialog.scss

@@ -1,10 +1,25 @@
-.Dialog {
+.cardDialog {
-    &.cardDialog {
+    .dialog {
-        .dialog {
+        width: 100%;
+        top: 0;
+        height: 100%;
+
+        >.CardDetail {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
             @media not screen and (max-width: 975px) {
-                width: 800px;
+                padding: 10px 126px;
-                max-width: 100%;
             }
+
+            @media screen and (max-width: 975px) {
+                padding: 16px 32px;
+            }
+        }
+
+        >.CardDetail--fullwidth {
+            padding-left: 78px;
         }
     }
 }

webapp/src/components/confirmationDialogBox.scss

@@ -3,30 +3,11 @@
 .confirmation-dialog-box {
     .dialog {
         @include z-index(confirmation-dialog-box);
-        color: rgb(var(--center-channel-color-rgb));
-        max-width: 512px;
-        width: 100%;
-        position: fixed;
-        top: 30%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        height: max-content;
-
-        background-color: rgb(var(--center-channel-bg-rgb));
-        box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
-            rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
-
-        border-radius: var(--modal-rad);
-        padding: 0;
-        -webkit-overflow-scrolling: touch;
-        overflow-x: hidden;
-        overflow-y: auto;
 
         > .toolbar {
             position: absolute;
             top: 0;
             right: 0;
-            padding: 16px;
         }
     }
 }

webapp/src/components/confirmationDialogBox.tsx

@@ -28,6 +28,7 @@ export const ConfirmationDialogBox = (props: Props) => {
 
     return (
         <Dialog
+            size='small'
             className='confirmation-dialog-box'
             onClose={handleOnClose}
         >

webapp/src/components/createCategory/__snapshots__/createCategory.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/createCategory/CreateCategory base case should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back CreateCategoryModal"
+    class="Dialog dialog-back CreateCategoryModal size--medium"
   >
     <div
       class="backdrop"

webapp/src/components/createCategory/createCategory.scss

@@ -6,62 +6,71 @@
             width: 600px;
             height: auto;
         }
+    }
 
-        .CreateCategory {
+    .CreateCategory {
+        display: flex;
+        flex-direction: column;
+        padding: 0 32px 24px;
+        gap: 24px;
+
+        .inputWrapper {
+            position: relative;
+
+            .inputWrapper__close-wrapper {
+                position: absolute;
+                height: 100%;
+                top: 0;
+                right: 0;
+                display: flex;
+                align-items: center;
+                padding-right: 12px;
+            }
+
+            .CloseCircle {
+                cursor: pointer;
+                font-size: 18px;
+                color: rgba(var(--center-channel-color-rgb), 0.64);
+
+                &:hover {
+                    color: rgba(var(--center-channel-color-rgb), 0.8);
+                }
+            }
+        }
+
+        .categoryNameInput {
+            width: 100%;
+        }
+
+        input {
+            height: 48px;
+            font-size: 16px;
+            border-radius: 4px;
+            border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+            background: var(--center-channel-bg);
+            color: var(--center-channel-color);
+            padding: 0 16px;
+            flex: 1;
+            transition: border 0.15s ease-in;
+
+            &:focus {
+                border-color: var(--button-bg);
+                box-shadow: inset 0 0 0 1px var(--button-bg);
+            }
+        }
+
+        .footer {
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
-            padding: 0 32px 24px;
+            justify-content: flex-end;
-            gap: 24px;
+        }
 
-            .inputWrapper {
+        .createCategoryActions {
-                position: relative;
+            display: flex;
-
+            flex-direction: row;
-                .CloseCircle {
+            justify-content: flex-end;
-                    cursor: pointer;
+            margin-top: auto;
-                    position: absolute;
+            gap: 12px;
-                    font-size: 18px;
-                    width: 16px;
-                    height: 16px;
-                    right: 16px;
-                    top: 6px;
-                    color: rgba(var(--center-channel-color-rgb), 0.64);
-                }
-            }
-
-            .categoryNameInput {
-                width: 100%;
-            }
-
-            input {
-                height: 48px;
-                font-size: 16px;
-                border-radius: 4px;
-                border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-                background: var(--center-channel-bg);
-                color: var(--center-channel-color);
-                padding: 0 16px;
-                flex: 1;
-                transition: border 0.15s ease-in;
-
-                &:focus {
-                    border-color: var(--button-bg);
-                    box-shadow: inset 0 0 0 1px var(--button-bg);
-                }
-            }
-
-            .footer {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
-            }
-
-            .createCategoryActions {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
-                margin-top: auto;
-                gap: 12px;
-            }
         }
     }
 }

webapp/src/components/createCategory/createCategory.tsx

@@ -97,7 +97,7 @@ const CreateCategory = (props: Props): JSX.Element => {
                     {
                         Boolean(name) &&
                         <div
-                            className='clearBtn'
+                            className='clearBtn inputWrapper__close-wrapper'
                             onClick={() => setName('')}
                         >
                             <CloseCircle/>

webapp/src/components/dialog.scss

@@ -10,6 +10,14 @@
         bottom: 0;
     }
 
+    &.size--small {
+        .dialog {
+            max-width: 512px;
+            width: 100%;
+            height: max-content;
+        }
+    }
+
     .dialog-title {
         margin: 0;
         font-weight: 600;
@@ -22,10 +30,6 @@
         margin-top: 8px;
     }
 
-    .dialog__close {
-        margin: 0 -14px 0 0;
-    }
-
     .backdrop {
         @include z-index(dialog-backdrop);
         position: fixed;
@@ -66,14 +70,6 @@
             }
         }
 
-        @media screen and (max-width: 975px) {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-        }
-
         > * {
             flex-shrink: 0;
         }
@@ -106,7 +102,7 @@
         .toolbar {
             display: flex;
             flex-direction: row;
-            padding: 24px 32px;
+            padding: 24px 0;
             justify-content: space-between;
             align-items: flex-start;
         }
@@ -116,24 +112,7 @@
             gap: 8px;
             align-items: center;
             height: 28px;
-        }
+            margin-right: 16px;
-
-        > .CardDetail {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-
-            @media not screen and (max-width: 975px) {
-                padding: 10px 126px;
-            }
-
-            @media screen and (max-width: 975px) {
-                padding: 10px;
-            }
-        }
-
-        > .CardDetail--fullwidth {
-            padding-left: 78px;
         }
     }
 

webapp/src/components/dialog.tsx

@@ -12,6 +12,7 @@ import './dialog.scss'
 
 type Props = {
     children: React.ReactNode
+    size?: string
     toolsMenu?: React.ReactNode // some dialogs may not  require a toolmenu
     toolbar?: React.ReactNode
     hideCloseButton?: boolean
@@ -22,7 +23,7 @@ type Props = {
 }
 
 const Dialog = (props: Props) => {
-    const {toolsMenu, toolbar, title, subtitle} = props
+    const {toolsMenu, toolbar, title, subtitle, size} = props
     const intl = useIntl()
 
     const closeDialogText = intl.formatMessage({
@@ -35,7 +36,7 @@ const Dialog = (props: Props) => {
     const isBackdropClickedRef = useRef(false)
 
     return (
-        <div className={`Dialog dialog-back ${props.className}`}>
+        <div className={`Dialog dialog-back ${props.className} size--${size || 'medium'}`}>
             <div className='backdrop'/>
             <div
                 className='wrapper'

webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap

@@ -905,7 +905,7 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
     </div>
   </div>
   <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
   >
     <div
       class="backdrop"

webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`src/components/shareBoard/shareBoard confirm unlinking linked channel 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -253,7 +253,7 @@ exports[`src/components/shareBoard/shareBoard confirm unlinking linked channel 1
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy link 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -462,7 +462,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy link 2`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -671,7 +671,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Regenerate token 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -903,7 +903,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -1139,7 +1139,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 2`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -1607,7 +1607,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -1843,7 +1843,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 2`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -2311,7 +2311,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard template and click Select 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -2496,7 +2496,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard template and cli
 exports[`src/components/shareBoard/shareBoard return shareBoard template and click Select 2`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -2817,7 +2817,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard template and cli
 exports[`src/components/shareBoard/shareBoard return shareBoard, and click switch 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -3049,7 +3049,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
 exports[`src/components/shareBoard/shareBoard return shareBoardComponent and click Switch without sharing 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -3281,7 +3281,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
 exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -3490,7 +3490,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
 exports[`src/components/shareBoard/shareBoard should match snapshot with sharing 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -3699,7 +3699,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
 exports[`src/components/shareBoard/shareBoard should match snapshot with sharing and subpath 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -3908,7 +3908,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
 exports[`src/components/shareBoard/shareBoard should match snapshot with sharing and without workspaceId and subpath 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"
@@ -4117,7 +4117,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
 exports[`src/components/shareBoard/shareBoard should match snapshot, with template 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
   >
     <div
       class="backdrop"

webapp/src/components/viewLImitDialog/__snapshots__/viewLimitDialog.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/viewLimitDialog/ViewLiimitDialog show notify upgrade button for non sys admin user 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
   >
     <div
       class="backdrop"
@@ -85,7 +85,7 @@ exports[`components/viewLimitDialog/ViewLiimitDialog show notify upgrade button
 exports[`components/viewLimitDialog/ViewLiimitDialog show upgrade button for sys admin user 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
   >
     <div
       class="backdrop"

webapp/src/components/viewLImitDialog/__snapshots__/viewLimitDialogWrapper.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/viewLimitDialog/ViewL]imitDialog show notify admin confirmation msg 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
   >
     <div
       class="backdrop"
@@ -119,7 +119,7 @@ exports[`components/viewLimitDialog/ViewL]imitDialog show notify admin confirmat
 exports[`components/viewLimitDialog/ViewL]imitDialog show view limit dialog 1`] = `
 <div>
   <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
   >
     <div
       class="backdrop"