From 711bfb1ac6776388732640707903860a74208a48 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 3 Sep 2021 18:39:10 +0300
Subject: [PATCH] Layout CreateApplication (#136)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/ui/src/components/Card.svelte        | 38 ++++++++++++++++---
 .../ui/src/components/icons/Folder.svelte     |  9 +++++
 packages/ui/src/index.ts                      |  1 +
 .../src/components/CreateApplication.svelte   |  6 +--
 4 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/src/components/icons/Folder.svelte

diff --git a/packages/ui/src/components/Card.svelte b/packages/ui/src/components/Card.svelte
index cf7a4284a4..3bc236bcae 100644
--- a/packages/ui/src/components/Card.svelte
+++ b/packages/ui/src/components/Card.svelte
@@ -23,6 +23,7 @@
   // import ScrollBox from './ScrollBox.svelte'
   import Button from './Button.svelte'
   import Label from './Label.svelte'
+  import IconFolder from './icons/Folder.svelte'
 
   export let label: IntlString
   export let okLabel: IntlString
@@ -38,6 +39,14 @@
     <div class="tool"><Button label={okLabel} size={'small'} transparent on:click={() => { okAction(); dispatch('close') }} /></div>
   </div>
   <div class="content"><slot /></div>
+  <div class="flex-col pool">
+    <div class="separator" />
+    <div class="overflow-label label">Project</div>
+    <div class="flex-row-center">
+      <span class="icon"><IconFolder size={'small'} /></span>
+      <span class="overflow-label">Select Project</span>
+    </div>
+  </div>
 </form>
 
 <style lang="scss">
@@ -45,15 +54,12 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    padding: 0;
-    background-color: transparent;
+    min-width: 20rem;
     border-radius: 1.25rem;
-    // box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, .55);
 
     .header {
       flex-shrink: 0;
       padding: 1rem 1.25rem 1rem 1.75rem;
-
       .label {
         font-weight: 500;
         font-size: 1rem;
@@ -65,10 +71,32 @@
     .content {
       flex-shrink: 0;
       flex-grow: 1;
-      margin: 0 1.75rem 1.75rem;
+      margin: 0 1.75rem;
       height: fit-content;
     }
 
+    .pool {
+      margin: 0 1.75rem 1.5rem;
+      color: var(--theme-caption-color);
+      .separator {
+        margin: 1rem 0;
+        height: 1px;
+        background-color: #fff;
+        opacity: .1;
+      }
+      .label {
+        margin-bottom: .125rem;
+        font-weight: 500;
+        font-size: .75rem;
+        color: var(--theme-content-accent-color);
+      }
+      .icon {
+        transform-origin: center center;
+        transform: scale(.75);
+        margin-right: .25rem;
+      }
+    }
+
     .card-bg {
       position: absolute;
       top: 0;
diff --git a/packages/ui/src/components/icons/Folder.svelte b/packages/ui/src/components/icons/Folder.svelte
new file mode 100644
index 0000000000..b2616e60b9
--- /dev/null
+++ b/packages/ui/src/components/icons/Folder.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M11.6,2.7H9.4c-0.3,0-0.7-0.1-0.9-0.4L7.8,1.5C7.4,0.9,6.7,0.6,5.9,0.6H4.4C1.5,0.6,0,2.1,0,5.2v5.5 c0,2.9,1.9,4.7,5,4.7H11c3.1,0,5-1.8,5-4.7l0-3.5C16,4.2,14.6,2.7,11.6,2.7z M14.6,10.7C14.6,10.8,14.6,10.8,14.6,10.7 c0,2.2-1.3,3.4-3.7,3.4H5c-2.4,0-3.7-1.2-3.7-3.3V5.2c0-2.4,0.9-3.3,3.1-3.3h1.5c0.3,0,0.7,0.1,0.9,0.4l0.7,0.9C8,3.7,8.7,4,9.4,4 h2.2c2.2,0,3.1,0.9,3.1,3.2L14.6,10.7z"/>
+  <path d="M11.4,9.3H4.3C4,9.3,3.7,9.6,3.7,10c0,0.4,0.3,0.7,0.7,0.7h7.1c0.4,0,0.7-0.3,0.7-0.7 C12.1,9.6,11.8,9.3,11.4,9.3z"/>
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index b9c68ac4f3..de1b4911b4 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -59,6 +59,7 @@ export { default as IconClose } from './components/icons/Close.svelte'
 export { default as IconSearch } from './components/icons/Search.svelte'
 export { default as IconToDo } from './components/icons/ToDo.svelte'
 export { default as IconComments } from './components/icons/Comments.svelte'
+export { default as IconFolder } from './components/icons/Folder.svelte'
 
 export * from './utils'
 
diff --git a/plugins/recruit-resources/src/components/CreateApplication.svelte b/plugins/recruit-resources/src/components/CreateApplication.svelte
index 8adc1af02a..fe4b76c785 100644
--- a/plugins/recruit-resources/src/components/CreateApplication.svelte
+++ b/plugins/recruit-resources/src/components/CreateApplication.svelte
@@ -48,10 +48,8 @@
       okLabel={'Save'} 
       okAction={createCandidate}
       on:close={() => { dispatch('close') }}>
-  <Grid rowGap={1.5}>
-    <Row><EditBox label={'Name'} placeholder={'John Connor'} /></Row>
-    <Row><UserInfo value={{firstName: 'First', lastName: 'Last', city: 'Cityvech'}} size={'large'} subtitle={'Candidate'} /></Row>
+  <Grid column={1} rowGap={1.75}>
     <UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} />
-    <DatePicker title={'Pick due date'} />
+    <UserBox _class={recruit.class.Candidate} title='Assigned recruiter' caption='Recruiters' bind:value={candidate} />
   </Grid>
 </Card>