- CSS for modal dialog

- User can click outside modal dialog to close it

backend/scss/modal-dialog.scss

@@ -1,19 +1,21 @@
+@use 'mixins';
+@use 'constants' as consts;
+
 #modal-dialog {
-    // visibility: hidden;
-    color: white;
-    width: 800px;
-    margin-left: -400px;
-    background-color: black;
-    text-align: center;
-    border-radius: 2px;
-    padding: 16px; // TODO: 'rem' better?
     position: fixed;
     z-index: 1;
     left: 50%;
-    bottom: 30px;
-    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
-}
+    width: 50%;
+    transform: translate(-50%, 0%);
 
-#modal-dialog.show {
-    visibility: visible;
+    @include mixins.popup;
+
+    // The inner div will cover the entire dialog and prevent user to
+    // click on it to close the dialog. Thus, The use can click outside
+    // the div and it will be considered as a click on the dialog.
+    padding: 0;
+
+    >div {
+        padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
+    }
 }