Added a new mapping to the button (#73)

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

packages/theme/styles/_colors.scss

@@ -25,6 +25,15 @@
   --primary-button-outline: rgba(87, 132, 255, .3);
   --primary-button-border: rgba(255, 255, 255, .09);
 
+  --image-primary-button-color: #000;
+  --image-primary-button-bg: #fff;
+  --image-primary-button-border: rgba(255, 255, 255, .2);
+  --image-button-color: #fff;
+  --image-button-bg: rgba(255, 255, 255, .17);
+  --image-button-border: rgba(255, 255, 255, .14);
+  --image-button-bg-hover: rgba(255, 255, 255, .22);
+  --image-button-border-hover: rgba(255, 255, 255, .19);
+
   --system-error-color: #EE7A7A;
   --system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%
 

packages/ui/src/components/Button.svelte

@@ -22,10 +22,11 @@
   export let size: 'small' | 'medium' = 'medium'
   export let disabled: boolean = false
   export let loading: boolean = false
+  export let onImage: boolean = false
   export let width: string | undefined = undefined
 </script>
 
-<button class="button {size}" class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
+<button class="button {size}" class:primary class:onImage disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
   {#if loading}
     <Spinner />
   {:else}
@@ -90,4 +91,39 @@
       cursor: not-allowed;
     }
   }
+
+  .onImage {
+    padding: 0 1.25rem;
+    color: var(--image-button-color);
+    background-color: var(--image-button-bg);
+    border-color: var(--image-button-border);
+    border-radius: .5rem;
+    backdrop-filter: blur(3px);
+
+    .primary {
+      color: var(--image-primary-button-color);
+      background-color: var(--image-primary-button-bg);
+      border-color: var(--image-button-primary-border);
+    }
+
+    &:hover {
+      background-color: var(--image-button-bg-hover);
+      border-color: var(--image-button-border-hover);
+      box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
+    }
+    &:focus {
+      background-color: var(--image-button-bg-hover);
+      border-color: var(--image-button-border-hover);
+      box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
+    }
+    &:active {
+      background-color: var(--image-button-bg);
+      border-color: var(--image-button-border);
+      box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
+    }
+    &:disabled {
+      background-color: var(--image-button-bg);
+      border-color: var(--image-button-border);
+    }
+  }
 </style>

packages/ui/src/components/Popup.svelte

@@ -80,8 +80,7 @@
   .popup {
     position: fixed;
     background-color: transparent;
-    border-radius: 1.25rem;
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
-    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
     z-index: 1001;
   }
   .modal-overlay {

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

@@ -18,7 +18,7 @@
   import { getMetadata } from '@anticrm/platform'
   import login from '@anticrm/login'
 
-  import { EditBox, Label } from '@anticrm/ui'
+  import { EditBox, Button, Label } from '@anticrm/ui'
   import ImageButton from './ImageButton.svelte'
   import FileUpload from './icons/FileUpload.svelte'
 
@@ -58,6 +58,9 @@
   <div class="resume-btn">
     <ImageButton label={'Upload resume'} icon={FileUpload} />
   </div>
+  <div class="save-btn">
+    <Button label={'Save'} size={'small'} onImage />
+  </div>
 </div>
 
 <style lang="scss">
@@ -105,6 +108,11 @@
       left: 1rem;
       bottom: 1rem;
     }
+    .save-btn {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+    }
   }
 
 </style>