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 {
@@ -22,7 +33,22 @@
 .modal-title {
    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);
+   }
+}

src/components/routes/vaults/Vaults.tsx

@@ -142,7 +142,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
             Notes.deleteVault(vault.id).then(() => {
                this.updateVaults();
             }).catch(err => {
-               Notifications.sendError("error deleting vault!")
+               Notifications.sendError("Error deleting vault!")
                console.error(err);
             })
          }
@@ -154,7 +154,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
       if (Notes.getVaultKey(vault.id)) {
          delete_key = <button class="uk-button" onClick={() => {
             Notes.forgetVaultKey(vault.id);
-            Notifications.sendSuccess("Forgot key!")
+            Notifications.sendSuccess("Forgot password!")
          }}>
             forget password
          </button>;