From f3c034bdc1c7c822ef767f02f79c5bea3b38facb Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 27 Aug 2021 14:40:29 +0300
Subject: [PATCH] Wrapped input (#71)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/ui/src/components/EditBox.svelte     | 47 ++++++++++++++-----
 packages/ui/src/components/Popup.svelte       |  2 +
 .../src/components/DialogHeader.svelte        |  2 +-
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index 3334c6cff3..9e35e8771a 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -32,7 +32,7 @@
     const target = t as HTMLInputElement
     const value = target.value
     text.innerHTML = (value === '' ? placeholder : value).replaceAll(' ', '&nbsp;')
-    target.style.width = text.clientWidth + 8 + 'px'
+    target.style.width = text.clientWidth + 'px'
   }
 
   onMount(() => {
@@ -49,17 +49,42 @@
 >
   <div class="hidden-text" bind:this={text}></div>
   {#if label}<div class="label"><Label label={label}/></div>{/if}
-  {#if password}
-    <input bind:this={input} type="password" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
-  {:else}
-    <input bind:this={input} type="text" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
-  {/if}
+  <div class="wrap">
+    {#if password}
+      <input bind:this={input} type="password" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
+    {:else}
+      <input bind:this={input} type="text" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">
   .container {
     display: inline-flex;
     flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .wrap {
+    position: relative;
+
+    &::after, &::before {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      background-color: var(--primary-button-enabled);
+    }
+    &::before {
+      top: -2px;
+      left: -4px;
+      clip-path: path('M0,6v-6h6v1h-5v5z');
+    }
+    &::after {
+      bottom: -2px;
+      right: -4px;
+      clip-path: path('M0,6h6v-6h-1v5h-5z');
+    }
+    &:focus-within::before, &:focus-within::after { content: ''; }
   }
 
   .label {
@@ -73,15 +98,11 @@
   }
 
   input {
-    height: 1.5rem;
-    margin: -4px;
-    padding: 2px;
-    border: 2px solid transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
     border-radius: 2px;
 
-    &:focus {
-      border-color: var(--primary-button-enabled);
-    }
     &::placeholder {
       color: var(--theme-content-dark-color);
     }
diff --git a/packages/ui/src/components/Popup.svelte b/packages/ui/src/components/Popup.svelte
index 1f753fd1e0..27621910f8 100644
--- a/packages/ui/src/components/Popup.svelte
+++ b/packages/ui/src/components/Popup.svelte
@@ -80,6 +80,8 @@
   .popup {
     position: fixed;
     background-color: transparent;
+    border-radius: 1.25rem;
+    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
     z-index: 1001;
   }
   .modal-overlay {
diff --git a/plugins/recruit-resources/src/components/DialogHeader.svelte b/plugins/recruit-resources/src/components/DialogHeader.svelte
index d8ff144afe..eba3d64a77 100644
--- a/plugins/recruit-resources/src/components/DialogHeader.svelte
+++ b/plugins/recruit-resources/src/components/DialogHeader.svelte
@@ -75,7 +75,6 @@
     background-clip: border-box;
     background-size: cover;
     border-radius: 1.25rem;
-    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
 
     &.dragover {
       border: 1px solid red;
@@ -95,6 +94,7 @@
       color: #fff;
     }
     .title {
+      margin-top: .25rem;
       font-size: .75rem;
       font-weight: 500;
       color: rgba(255, 255, 255, .8);