Fix Avatar, add button (#305)

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

packages/presentation/src/components/Avatar.svelte

@@ -24,12 +24,12 @@
   $: url = avatar ? getFileUrl(avatar) : undefined
 </script>
 
-<div class="{size} flex-center container" class:no-img={!url}>
+<div class="ava-{size} flex-center avatar-container" class:no-img={!url}>
   {#if url}
     {#if size === 'large' || size === 'x-large'}
-      <img class="{size} blur" src={url} alt={''}/>
+      <img class="{size} ava-blur" src={url} alt={''}/>
     {/if}
-    <img class="{size} mask" src={url} alt={''}/>
+    <img class="{size} ava-mask" src={url} alt={''}/>
   {:else}
     <Avatar {size}/>
   {/if}
@@ -38,7 +38,7 @@
 <style lang="scss">
   @import '../../../../packages/theme/styles/mixins.scss';
 
-  .container {
+  .avatar-container {
     flex-shrink: 0;
     position: relative;
     overflow: hidden;
@@ -53,46 +53,48 @@
       &::after {
         content: '';
         @include bg-layer(var(--theme-avatar-hover), .5);
+        border-radius: 50%;
       }
       &::before {
         content: '';
         @include bg-layer(var(--theme-avatar-bg), .1);
+        border-radius: 50%;
       }
     }
   }
 
-  .x-small {
+  .ava-x-small {
     width: 1.5rem;   // 24
     height: 1.5rem;
-    .mask, &.no-img { border-style: none; }
   }
-  .small {
+  .ava-small {
     width: 2rem;     // 32
     height: 2rem;
-    .mask, &.no-img { border-style: none; }
   }
-  .medium {
+  .ava-medium {
     width: 2.25rem;  // 36
     height: 2.25rem;
-    .mask, &.no-img { border-style: none; }
   }
-  .large {
+  .ava-large {
     width: 4.5rem;   // 72
     height: 4.5rem;
   }
-  .x-large {
+  .ava-x-large {
     width: 7.5rem;   // 120
     height: 7.5rem;
   }
 
-  .blur {
+  .ava-blur {
     position: absolute;
     filter: blur(32px);
   }
-  .mask {
+  .ava-mask {
     position: absolute;
     border: 2px solid var(--theme-avatar-border);
     border-radius: 50%;
   }
-  // .shadow { filter: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8)); }
+
+  .ava-x-small .ava-mask, .ava-x-small.no-img,
+  .ava-small .ava-mask, .ava-small.no-img,
+  .ava-medium .ava-mask, .ava-medium.no-img { border-style: none; }
 </style>

packages/presentation/src/components/SpaceInfo.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div class="flex-row-center">
-  <div class="flex-center {size}"><IconFolder size={'small'} /></div>
+  <div class="flex-center {size} caption-color"><IconFolder size={'small'} /></div>
   <div class="flex-col user-info">
     {#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
     <div class="title">{value.name}</div>

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

@@ -74,7 +74,7 @@
     {#if loading}
       <Spinner/>
     {:else}
-      <a href={'#'} on:click={ () => { inputFile.click() } }><CircleButton icon={IconAdd} size={'small'} /></a>
+      <CircleButton icon={IconAdd} size={'small'} on:click={ () => { inputFile.click() } } />
     {/if}
     <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
   </div>

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

@@ -88,7 +88,10 @@
   </div>
 
   <div class="group">
-    <div class="caption">Applications</div>
+    <div class="flex-row-center">
+      <div class="caption">Applications</div>
+      <CircleButton icon={IconAdd} size={'small'} on:click={ () => { } } />
+    </div>
     <Table 
       _class={recruit.class.Applicant}
       config={['', '$lookup.space.name', '$lookup.state']}
@@ -130,6 +133,7 @@
     margin-top: 3.5rem;
 
     .caption {
+      margin-right: .75rem;
       font-weight: 500;
       font-size: 1.25rem;
       color: var(--theme-caption-color);