Added a new mapping to the button (#73)

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

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;
-    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
     z-index: 1001;
   }
   .modal-overlay {