Layout for CreateApplicationPresenter. Fix shadow and blur for popups. (#164)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/ui/src/components/Card.svelte

@@ -57,6 +57,8 @@
     flex-direction: column;
     min-width: 20rem;
     border-radius: 1.25rem;
+    backdrop-filter: blur(30px);
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .6));
 
     .header {
       flex-shrink: 0;

packages/ui/src/components/PopupInstance.svelte

@@ -80,8 +80,6 @@ $: {
   .popup {
     position: fixed;
     background-color: transparent;
-    backdrop-filter: blur(30px);
-    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .6));
   }
   .modal-overlay {
     position: fixed;

plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte

@@ -17,7 +17,7 @@
 <script lang="ts">
 
   import type { Doc } from '@anticrm/core'
-  import { Button, showPopup } from '@anticrm/ui'
+  import { Label, showPopup } from '@anticrm/ui'
   import CreateApplication from './CreateApplication.svelte'
 
   export let object: Doc
@@ -26,4 +26,20 @@
 
 </script>
 
-<div bind:this={button}><Button label="Create Application" size="small" on:click={ () => { showPopup(CreateApplication, { candidate: object._id }, button) } }/></div>
+<div class="flex-center presenter-container" bind:this={button}
+  on:click={() => { showPopup(CreateApplication, { candidate: object._id }, button) }}
+>
+  <Label label="Create Application" />
+</div>
+
+<style lang="scss">
+  .presenter-container {
+    padding: .25rem .75rem;
+    width: max-content;
+    font-size: .75rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-bg-accent-color);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .5rem;
+  }
+</style>

plugins/recruit-resources/src/components/EditCandidate.svelte

@@ -94,6 +94,7 @@
     height: 100%;
     background-color: var(--theme-bg-color);
     border-radius: 1.25rem;
+    box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
 
     .tabs-container {
       flex-grow: 1;