From 6dd4084b610fce5790504acfeca46e8ea92f4ea7 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 8 Sep 2021 18:21:40 +0300
Subject: [PATCH] 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        |  2 ++
 .../ui/src/components/PopupInstance.svelte    |  2 --
 .../CreateApplicationPresenter.svelte         | 20 +++++++++++++++++--
 .../src/components/EditCandidate.svelte       |  1 +
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Card.svelte b/packages/ui/src/components/Card.svelte
index 7b78bd9325..88df818876 100644
--- a/packages/ui/src/components/Card.svelte
+++ b/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;
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index a5dc06d121..7aca119c82 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/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;
diff --git a/plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte b/plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte
index 8fdfc29dfd..133b0bbcda 100644
--- a/plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte
+++ b/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>
diff --git a/plugins/recruit-resources/src/components/EditCandidate.svelte b/plugins/recruit-resources/src/components/EditCandidate.svelte
index 391fbb4a28..3e2dc6fcf2 100644
--- a/plugins/recruit-resources/src/components/EditCandidate.svelte
+++ b/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;