Updated design of dialog and its logic and made overlay dimmer

src/renderer/components/Dialog.vue

@@ -18,13 +18,29 @@ export default {
 
 <style scoped lang="sass">
 .dialog-wrapper.open
-    .overlay
     position: absolute
     left: 0
     top: 0
     width: 100vw
     height: 100vh
-        background: rgba(black,0.1)
+    display: flex
+    align-items: center
+    justify-content: center 
+    .overlay
+        position: absolute
+        left: 0
+        top: 0
+        width: 100%
+        height: 100%
+        background: rgba(black,0.3)
         z-index: 1400
-    display: block
+    .dialog
+        position: relative
+        padding: 1rem
+        background: white
+        border-radius: 1rem
+        max-width: 250px
+        min-width: 250px
+        z-index: 1400
+        box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
 </style>

src/renderer/layouts/DockableSidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Dialog />
+        <Dialog open="true" />
         <section class="handle" :class="{'open': menuStatus}">
             <div @click="toggleMenuStatus" class="icon">
                 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">