Adjusting modals and updating close icon on input (mattermost-communi…

…ty#4458) * Adjusting modals and updating close icon on input * Updating test * Updating css * Updating dialog css
kamre · Jan 16, 2023 · 297e8f4 · 297e8f4
1 parent 7d663ef
commit 297e8f4
Show file tree

Hide file tree

Showing 19 changed files with 130 additions and 144 deletions.
diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap b/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"

diff --git a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap b/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"

diff --git a/webapp/src/components/__snapshots__/confirmAddUserForNotifications.test.tsx.snap b/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"

diff --git a/webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap b/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"

diff --git a/webapp/src/components/__snapshots__/dialog.test.tsx.snap b/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"

diff --git a/...rc/components/boardTemplateSelector/__snapshots__/boardTemplateSelectorItem.test.tsx.snap b/...rc/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"

diff --git a/webapp/src/components/boardsSwitcherDialog/__snapshots__/boardSwitcherDialog.test.tsx.snap b/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"

diff --git a/webapp/src/components/cardDialog.scss b/webapp/src/components/cardDialog.scss
@@ -1,11 +1,26 @@
-.Dialog {
-    &.cardDialog {
-        .dialog {
+.cardDialog {
+    .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;
-                max-width: 100%;
+                padding: 10px 126px;
+            }
+
+            @media screen and (max-width: 975px) {
+                padding: 16px 32px;
             }
         }
+
+        >.CardDetail--fullwidth {
+            padding-left: 78px;
+        }
     }
 }
 

diff --git a/webapp/src/components/confirmationDialogBox.scss b/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;
         }
     }
 }

diff --git a/webapp/src/components/confirmationDialogBox.tsx b/webapp/src/components/confirmationDialogBox.tsx
@@ -28,6 +28,7 @@ export const ConfirmationDialogBox = (props: Props) => {
 
     return (
         <Dialog
+            size='small'
             className='confirmation-dialog-box'
             onClose={handleOnClose}
         >

diff --git a/webapp/src/components/createCategory/__snapshots__/createCategory.test.tsx.snap b/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"

diff --git a/webapp/src/components/createCategory/createCategory.scss b/webapp/src/components/createCategory/createCategory.scss
@@ -6,62 +6,71 @@
             width: 600px;
             height: auto;
         }
+    }
 
-        .CreateCategory {
-            display: flex;
-            flex-direction: column;
-            padding: 0 32px 24px;
-            gap: 24px;
-
-            .inputWrapper {
-                position: relative;
+    .CreateCategory {
+        display: flex;
+        flex-direction: column;
+        padding: 0 32px 24px;
+        gap: 24px;
 
-                .CloseCircle {
-                    cursor: pointer;
-                    position: absolute;
-                    font-size: 18px;
-                    width: 16px;
-                    height: 16px;
-                    right: 16px;
-                    top: 6px;
-                    color: rgba(var(--center-channel-color-rgb), 0.64);
-                }
-            }
+        .inputWrapper {
+            position: relative;
 
-            .categoryNameInput {
-                width: 100%;
+            .inputWrapper__close-wrapper {
+                position: absolute;
+                height: 100%;
+                top: 0;
+                right: 0;
+                display: flex;
+                align-items: center;
+                padding-right: 12px;
             }
 
-            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;
+            .CloseCircle {
+                cursor: pointer;
+                font-size: 18px;
+                color: rgba(var(--center-channel-color-rgb), 0.64);
 
-                &:focus {
-                    border-color: var(--button-bg);
-                    box-shadow: inset 0 0 0 1px var(--button-bg);
+                &:hover {
+                    color: rgba(var(--center-channel-color-rgb), 0.8);
                 }
             }
+        }
 
-            .footer {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
-            }
+        .categoryNameInput {
+            width: 100%;
+        }
 
-            .createCategoryActions {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
-                margin-top: auto;
-                gap: 12px;
+        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;
+        }
     }
 }
diff --git a/webapp/src/components/createCategory/createCategory.tsx b/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/>
-Original file line number
+Diff line change
@@ Expand Up @@
       </div>
       <div>
         <div
-          class="Dialog dialog-back DeleteBoardDialog"
+          class="Dialog dialog-back DeleteBoardDialog size--medium"
         >
           <div
             class="backdrop"
@@ Expand Down @@