Wrapped input (#71)

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

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(' ', ' ')
-    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);
     }

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 {

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);