Small improvments

src/components/modals/Modal.tsx

@@ -65,7 +65,7 @@ export default abstract class Modal<T> {
                this.props.modal.result(null)
             }
          }}>
-            <div id="ModalContent" class="uk-card uk-card-body uk-card-body" >
+            <div id="ModalContent" class="uk-card uk-card-body uk-card-body modal-body" >
                <div class="modal-title uk-card-title" style="">
                   <h3>{this.props.modal.title}</h3>
                   {/* <div> */}

src/components/modals/modal.scss

@@ -4,8 +4,19 @@
    left: 0;
    width: 100%;
    height: 100%;
-   background: rgba(0, 0, 0, 0.8);
    z-index: 32;
+   animation: darkenBackground .2s linear;
+   background: rgba(0, 0, 0, 0.8)
+}
+
+@keyframes darkenBackground {
+   from {
+      background: rgba(0, 0, 0, 0);
+   }
+
+   to {
+      background: rgba(0, 0, 0, 0.8);
+   }
 }
 
 .modal-container>.uk-card {
@@ -20,9 +31,24 @@
 }
 
 .modal-title {
-   display:flex; 
-   justify-content:space-between;
+   display: flex;
+   justify-content: space-between;
+
    >svg {
       height: 1em;
    }
+}
+
+.modal-body {
+   animation: growModalBox .2s linear;
+}
+
+@keyframes growModalBox {
+   from {
+      transform: scale(0);
+   }
+
+   to {
+      transform: scale(1);
+   }
 }