Merge pull request #18 from labcodes/dialog-message-justify

Justify dialog's close button

Author: r-lelis

.babelrc

@@ -1,10 +1,13 @@
 {
   "presets": [
-    ["@babel/env", {
-      "targets": {
-        "browsers": "last 3 versions"
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "browsers": "last 3 versions"
+        }
       }
-    }],
+    ],
     "@babel/react"
   ],
   "plugins": [
@@ -14,6 +17,8 @@
       {
         "loose": true
       }
-    ]
+    ],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }]
   ]
 }

scss/components/_lab-dialog.scss

@@ -197,18 +197,14 @@
 
 // Global elements
 .lab-dialog__close-button {
-  display: none;
+  display: flex;
   cursor: pointer;
   width: 40px;
   height: 40px;
   background-color: unset;
   border: none;
-
-  &.lab-dialog__close-button--message {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+  align-items: center;
+  justify-content: center;
 
   &:focus {
     border-radius: $radius-1;
@@ -371,10 +367,6 @@
   background-color: $mineral-70;
 }
 
-.lab-dialog__close-button--message {
-  display: block;
-}
-
 .lab-dialog__header--message {
   justify-content: flex-end;
 }

src/Dialog/MessageDialog.js

@@ -109,7 +109,7 @@ export default class MessageDialog extends React.Component {
           </button>
           <div className="lab-dialog__header lab-dialog__header--message">
             <button
-              className="lab-dialog__close-button lab-dialog__close-button--message"
+              className="lab-dialog__close-button"
               type="button"
               {...(isModal ? { tabIndex: "2" } : undefined)}
               onClick={handleClose}