From 5c30b889760f7067ead0ad7caa1904a321f40425 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 25 Apr 2023 05:59:07 +0300
Subject: [PATCH] TSK-1324. Update popups layout (#3064)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../presentation/src/components/Card.svelte   |  5 +-
 .../InlineAttributeBarEditor.svelte           |  2 +-
 .../src/components/icons/Forward.svelte       | 24 +++++
 packages/theme/styles/_colors.scss            |  8 +-
 packages/theme/styles/_layouts.scss           |  4 +-
 packages/theme/styles/common.scss             |  4 +-
 packages/theme/styles/dialogs.scss            | 93 +++++++++----------
 packages/theme/styles/popups.scss             |  3 +-
 packages/ui/src/components/Button.svelte      |  8 +-
 .../components/calendar/DatePresenter.svelte  | 45 +++++++--
 .../calendar/DateRangePresenter.svelte        | 42 +++++++--
 .../ui/src/components/icons/Attachment.svelte |  2 +-
 .../src/components/AttachmentStyledBox.svelte | 10 +-
 .../src/components/CreateEvent.svelte         |  6 +-
 .../src/components/CreateReminder.svelte      | 11 ++-
 .../src/components/AssigneeBox.svelte         |  2 +-
 .../src/components/CreateEmployee.svelte      |  3 +-
 .../src/components/CreateOrganization.svelte  |  2 +
 .../src/components/CreatePerson.svelte        |  2 +-
 .../src/components/CreateDocument.svelte      | 12 +--
 .../src/components/CreateDepartment.svelte    | 10 +-
 .../src/components/CreateRequest.svelte       | 14 ++-
 .../src/components/CreateProduct.svelte       |  2 +
 .../src/components/CreateCustomer.svelte      | 11 +--
 .../src/components/CreateLead.svelte          | 12 ++-
 .../src/components/CandidateCard.svelte       | 13 ++-
 .../src/components/CreateApplication.svelte   |  5 +-
 .../src/components/CreateCandidate.svelte     | 61 +++++-------
 .../src/components/CreateVacancy.svelte       | 10 +-
 .../src/components/VacancyCard.svelte         |  7 +-
 .../src/components/review/CreateReview.svelte | 18 ++--
 .../src/components/CreateTagElement.svelte    |  2 +
 .../kanban/KanbanTemplateSelector.svelte      |  6 +-
 .../src/components/CreateIssue.svelte         | 43 ++++++---
 .../components/components/NewComponent.svelte | 35 ++++++-
 .../src/components/sprints/NewSprint.svelte   | 28 +++++-
 .../templates/CreateIssueTemplate.svelte      | 32 +++++--
 .../src/components/DateEditor.svelte          |  4 +-
 .../src/components/ObjectBox.svelte           |  2 +-
 .../src/components/StringEditor.svelte        |  6 +-
 40 files changed, 404 insertions(+), 205 deletions(-)
 create mode 100644 packages/presentation/src/components/icons/Forward.svelte

diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index c965985910..bc406f2c0a 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -19,6 +19,7 @@
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
   import { deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
+  import IconForward from './icons/Forward.svelte'
 
   export let label: IntlString
   export let labelProps: any | undefined = undefined
@@ -47,7 +48,7 @@
     <div class="antiCard-header__title-wrap">
       {#if $$slots.header}
         <slot name="header" />
-        <span class="antiCard-header__divider">›</span>
+        <span class="antiCard-header__divider"><IconForward size={'small'} /></span>
       {/if}
       <span class="antiCard-header__title">
         {#if $$slots.title}
@@ -83,6 +84,7 @@
       <slot name="pool" />
     </div>
   {/if}
+  <div class="antiCard-pool__separator" />
   <div class="antiCard-footer reverse">
     <div class="buttons-group text-sm flex-no-shrink">
       {#if $$slots.buttons}
@@ -97,6 +99,7 @@
         disabled={!canSave}
         label={okLabel}
         kind={'primary'}
+        size={'large'}
         on:click={() => {
           if (okProcessing) {
             return
diff --git a/packages/presentation/src/components/InlineAttributeBarEditor.svelte b/packages/presentation/src/components/InlineAttributeBarEditor.svelte
index b5d5b88611..3bb3216301 100644
--- a/packages/presentation/src/components/InlineAttributeBarEditor.svelte
+++ b/packages/presentation/src/components/InlineAttributeBarEditor.svelte
@@ -61,7 +61,7 @@
           readonly={isReadonly}
           label={attribute?.label}
           placeholder={attribute?.label}
-          kind={'link'}
+          kind={'secondary'}
           size={'large'}
           width={'100%'}
           justify={'left'}
diff --git a/packages/presentation/src/components/icons/Forward.svelte b/packages/presentation/src/components/icons/Forward.svelte
new file mode 100644
index 0000000000..c027007dd1
--- /dev/null
+++ b/packages/presentation/src/components/icons/Forward.svelte
@@ -0,0 +1,24 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.4,7.7L5.7,2.1C5.5,1.9,5.2,1.9,5,2.1S4.8,2.6,5,2.8L10.3,8L5,13.3c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l5.6-5.6c0.1-0.1,0.1-0.2,0.1-0.4S11.4,7.8,11.4,7.7z"
+  />
+</svg>
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index a7ace02cf4..ae5674d9ff 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -74,6 +74,7 @@
 
   --theme-bg-color: #1A1A28;
   --theme-back-color: #0f0f18;
+  --theme-overlay-color: #0000007f;
   --theme-statusbar-color: #2C2C35;
   --theme-navpanel-color: #14141F;
   --theme-navpanel-hovered: rgba(255, 255, 255, .04);
@@ -113,6 +114,8 @@
   --theme-checkbox-border: rgba(0, 0, 0, .12);
   --theme-checkbox-disabled: #999;
   --theme-progress-color: #FFFFFF;
+  --theme-popup-color: #292938;
+  --theme-popup-divider: rgba(255, 255, 255, .1);
 
   --body-color: #1f2023;
   --body-accent: #222326;
@@ -218,6 +221,7 @@
 
   --theme-bg-color: #F1F1F4;
   --theme-back-color: #D9D9DD;
+  --theme-overlay-color: #0000007f;
   --theme-statusbar-color: #bfbfc6;
   --theme-navpanel-color: #E8E8ED;
   --theme-navpanel-hovered: rgba(218, 218, 231, .5);
@@ -257,6 +261,8 @@
   --theme-checkbox-border: rgba(0, 0, 0, .12);
   --theme-checkbox-disabled: #999;
   --theme-progress-color: rgba(0, 0, 0, .5);
+  --theme-popup-color: #F1F1F4;
+  --theme-popup-divider: rgba(0, 0, 0, .1);
 
   --body-color: #fff;
   --body-accent: #fafafa; // HZ
@@ -267,7 +273,7 @@
   --accent-bg-color: #eff0f2;  // HZ
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark
 
-  --highlight-hover: #F0F0F1;
+  --highlight-hover: #E8E8E9;
   --highlight-select: #f0f4ff;
   --highlight-select-border: #e6eaff;
   --highlight-select-hover: #e4ebff;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index f67a18f513..5872cf1de3 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -401,8 +401,8 @@ input.search {
   &.reverse > :last-child { margin-right: .375rem; }
 }
 .gap-2 {
-  & > *:not(:first-child) { margin-left: .5rem; }
-  &.reverse > :last-child { margin-right: .5rem; }
+  &:not(.reverse) > *:not(:first-child) { margin-left: .5rem; }
+  &.reverse > *:not(:last-child) { margin-right: .5rem; }
 }
 
 /* --------- */
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 022cf9cacf..408b7727af 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -422,8 +422,8 @@
 .antiEmphasized {
   padding: .75rem;
   background-color: var(--theme-comp-header-color);
-  border: 1px solid var(--theme-divider-color);
-  border-radius: .5rem;
+  border: 1px solid var(--theme-popup-divider);
+  border-radius: .25rem;
   transition-property: border, background-color;
   transition-duration: .15s;
   transition-timing-function: var(--timing-main);
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index 17f3c1a415..0e3ce109ba 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -20,7 +20,7 @@
   left: 0;
   width: 100%;
   height: 100vh;
-  background-color: var(--card-overlay-color);
+  background-color: var(--theme-overlay-color);
   pointer-events: all;
 }
 
@@ -29,8 +29,7 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
-  background: var(--theme-list-row-color);
-  border: 1px solid var(--theme-divider-color);
+  background: var(--theme-popup-color);
   border-radius: .5rem;
   box-shadow: var(--card-shadow);
 
@@ -40,18 +39,26 @@
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
-    padding: 1rem 1rem 1.5rem;
+    padding: 1.5rem 1.5rem .5rem 1.75rem;
+    font-size: .8125rem;
 
+    &__title-wrap {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+
+      & > *:not(:last-child) { margin-right: .5rem; }
+    }
     &__title {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       user-select: none;
       min-width: 0;
-      font-weight: 500;
-      font-size: 1rem;
+      line-height: 150%;
       color: var(--theme-caption-color);
     }
+    &__divider { color: var(--theme-content-color); }
     &__error {
       min-width: 0;
       flex-grow: 1;
@@ -72,8 +79,9 @@
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
-    margin: 0 1rem;
+    padding: 1rem 1.75rem;
     height: fit-content;
+    min-width: 0;
     min-height: 0;
 
     & > *:not(:last-child) { margin-bottom: 1rem; }
@@ -82,30 +90,44 @@
   .antiCard-pool {
     flex-shrink: 0;
     display: flex;
-    flex-direction: column;
-    margin: 0 1rem .75rem;
-    color: var(--theme-caption-color);
+    align-items: center;
     flex-wrap: wrap;
+    margin: .5rem 1.25rem 0 1.75rem;
+    min-width: 0;
+    font-size: .8125rem;
+    color: var(--theme-caption-color);
 
     &__separator {
-      margin: 1rem 0;
+      flex-shrink: 0;
+      margin-top: 1.25rem;
       height: 1px;
-      background-color: var(--theme-divider-color);
+      background-color: var(--theme-popup-divider);
     }
+    & > * { margin: .5rem .5rem 0 0; }
   }
 
   .antiCard-footer {
     overflow: hidden;
     flex-shrink: 0;
-    display: grid;
-    grid-auto-flow: column;
-    direction: rtl;
-    justify-content: flex-start;
+    direction: ltr;
+    display: flex;
+    justify-content: space-between;
     align-items: center;
-    column-gap: .75rem;
-    padding: 1.5rem 1rem 1rem;
-    height: 4.5rem;
+    padding: 1rem 1.75rem;
+    height: 4.25rem;
     border-radius: 0 0 .5rem .5rem;
+
+    &.reverse { flex-direction: row-reverse; }
+    &__error {
+      flex-grow: 1;
+      display: flex;
+      margin-left: .375rem;
+      min-width: 0;
+      font-weight: 500;
+      font-size: .75rem;
+      color: var(--system-error-color);
+      &:empty { visibility: hidden; }
+    }
   }
 
   .antiCard-group {
@@ -149,26 +171,14 @@
     width: 90vw;
     max-width: 90vw;
     max-height: 90vh;
-  }
-  &.dialog,
-  &.mobile {
+
     .antiCard-header {
       padding: .75rem .75rem .375rem;
 
-      &__title-wrap {
-        display: flex;
-        align-items: center;
-        min-width: 0;
-
-        & > *:not(:first-child) { margin-left: .375rem; }
-      }
-
       &__divider, &__title {
         font-weight: 400;
         font-size: .8125rem;
       }
-      &__divider { color: var(--theme-content-color); }
-      &__title { color: var(--theme-caption-color); }
     }
     .antiCard-content { margin: .5rem 1.125rem 1rem; }
     .antiCard-pool {
@@ -176,29 +186,10 @@
       align-items: center;
       margin: 0 .5rem .25rem;
       font-size: .75rem;
-
-      & > * { margin: 0 .25rem .5rem; }
     }
     .antiCard-footer {
-      direction: ltr;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
       padding: .75rem;
       height: auto;
-      border-top: 1px solid var(--theme-divider-color);
-
-      &.reverse { flex-direction: row-reverse; }
-      &__error {
-        flex-grow: 1;
-        display: flex;
-        margin-left: .375rem;
-        min-width: 0;
-        font-weight: 500;
-        font-size: .75rem;
-        color: var(--system-error-color);
-        &:empty { visibility: hidden; }
-      }
     }
   }
 }
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index b221df628b..b2a1c8987d 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -422,8 +422,7 @@
   flex-direction: column;
   padding: .5rem;
   min-height: 22rem;
-  background: var(--theme-list-row-color);
-  border: 1px solid var(--theme-divider-color);
+  background: var(--theme-popup-color);
   border-radius: .5rem;
   box-shadow: var(--popup-shadow);
   
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index bd9c7fc6cd..925f422f54 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -177,7 +177,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    padding: 0 0.5rem;
+    padding: 0 0.625rem;
     font-weight: 500;
     min-width: 1.375rem;
     white-space: nowrap;
@@ -279,9 +279,9 @@
       background-color: var(--theme-button-enabled);
       border-color: var(--theme-button-border);
 
-      &.medium:not(.only-icon) {
-        padding: 0 0.75rem;
-      }
+      // &.medium:not(.only-icon) {
+      //   padding: 0 0.75rem;
+      // }
       &:hover {
         background-color: var(--theme-button-hovered);
       }
diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index c26a5d59b5..bfd2f602c6 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -19,7 +19,7 @@
   import { DateRangeMode } from '@hcengineering/core'
   import ui from '../../plugin'
   import { showPopup } from '../../popups'
-  import { ButtonKind } from '../../types'
+  import { ButtonKind, ButtonSize } from '../../types'
   import Icon from '../Icon.svelte'
   import Label from '../Label.svelte'
   import DatePopup from './DatePopup.svelte'
@@ -36,7 +36,7 @@
   export let labelNull: IntlString = ui.string.NoDate
   export let showIcon = true
   export let shouldShowLabel: boolean = true
-  export let size: 'x-small' | 'small' = 'small'
+  export let size: ButtonSize | 'x-small' = 'small'
   export let kind: ButtonKind = 'link'
   export let label = ui.string.DueDate
   export let detail = ui.string.NeedsToBeCompletedByThisDate
@@ -65,11 +65,9 @@
 </script>
 
 <button
-  class="datetime-button {kind}"
+  class="datetime-button {kind} {size}"
   class:editable
   class:dateTimeButtonNoLabel={!shouldShowLabel}
-  class:h-6={size === 'small'}
-  class:h-3={size === 'x-small'}
   class:text-xs={size === 'x-small'}
   on:click={(e) => {
     if (editable && !opened) {
@@ -125,10 +123,22 @@
     font-weight: 400;
     width: auto;
     white-space: nowrap;
-    color: var(--accent-color);
-
+    color: var(--theme-content-color);
     cursor: default;
 
+    &.x-small {
+      height: 0.75rem;
+    }
+    &.small {
+      height: 1.5rem;
+    }
+    &.medium {
+      height: 2rem;
+    }
+    &.large {
+      height: 2.25rem;
+    }
+
     &.primary {
       padding: 0 0.5rem;
       min-width: 1.5rem;
@@ -267,6 +277,27 @@
         }
       }
     }
+    &.secondary {
+      padding: 0 0.625rem;
+      color: var(--theme-caption-color);
+      background-color: var(--theme-button-enabled);
+      border-color: var(--theme-button-border);
+      border-radius: 0.25rem;
+
+      .btn-icon {
+        color: var(--theme-content-color);
+      }
+      &:hover {
+        background-color: var(--theme-button-hovered);
+        border-color: var(--theme-divider-color);
+        .btn-icon {
+          color: var(--theme-content-color);
+        }
+      }
+      // &.edit {
+      //   padding: 0 0.5rem;
+      // }
+    }
 
     .time-divider {
       flex-shrink: 0;
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index 9b62fc6b6e..2cae949e96 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -32,7 +32,8 @@
   export let icon: 'normal' | 'warning' | 'overdue' = 'normal'
   export let labelOver: IntlString | undefined = undefined // label instead of date
   export let labelNull: IntlString = ui.string.NoDate
-  export let kind: 'no-border' | 'link' = 'no-border'
+  export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
+  export let size: 'small' | 'medium' | 'large' = 'small'
   export let noShift: boolean = false
 
   const dispatch = createEventDispatcher()
@@ -315,7 +316,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <button
   bind:this={datePresenter}
-  class="datetime-button {kind}"
+  class="datetime-button {kind} {size}"
   class:editable
   class:edit
   on:click={() => {
@@ -455,17 +456,26 @@
     padding: 0 0.5rem;
     font-weight: 400;
     min-width: 1.5rem;
-    width: auto;
-    height: 1.5rem;
+    width: min-content;
     white-space: nowrap;
     line-height: 1.5rem;
-    color: var(--accent-color);
+    color: var(--theme-content-color);
     border: 1px solid transparent;
     border-radius: 0.25rem;
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
     cursor: pointer;
 
+    &.small {
+      height: 1.5rem;
+    }
+    &.medium {
+      height: 2rem;
+    }
+    &.large {
+      height: 2.25rem;
+    }
+
     .btn-icon {
       margin-right: 0.375rem;
       width: 0.875rem;
@@ -557,7 +567,6 @@
     &.link {
       padding: 0 0.875rem;
       width: 100%;
-      height: 2.25rem;
       color: var(--theme-caption-color);
       &:hover {
         background-color: var(--theme-bg-color);
@@ -571,6 +580,27 @@
       }
     }
 
+    &.secondary {
+      padding: 0 0.625rem;
+      color: var(--theme-caption-color);
+      background-color: var(--theme-button-enabled);
+      border-color: var(--theme-button-border);
+
+      .btn-icon {
+        color: var(--theme-content-color);
+      }
+      &:hover {
+        background-color: var(--theme-button-hovered);
+        border-color: var(--theme-divider-color);
+        .btn-icon {
+          color: var(--theme-content-color);
+        }
+      }
+      // &.edit {
+      //   padding: 0 0.5rem;
+      // }
+    }
+
     .close-btn {
       display: flex;
       justify-content: center;
diff --git a/packages/ui/src/components/icons/Attachment.svelte b/packages/ui/src/components/icons/Attachment.svelte
index 422e220f98..674db6f10c 100644
--- a/packages/ui/src/components/icons/Attachment.svelte
+++ b/packages/ui/src/components/icons/Attachment.svelte
@@ -20,6 +20,6 @@
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M12.6429 7.69048L8.92925 11.4041C7.48164 12.8517 5.34347 13.0101 4.16667 11.8333C2.98733 10.654 3.14447 8.52219 4.59216 7.07451L8.00206 3.66461C8.93557 2.73109 10.2976 2.63095 11.0333 3.36667C11.7681 4.10139 11.6658 5.4675 10.7361 6.39727L7.32363 9.8097C6.90202 10.2313 6.32171 10.2741 6.02381 9.97619C5.72651 9.6789 5.76949 9.09718 6.1989 8.66776L9.29048 5.57619C9.56662 5.30005 9.56662 4.85233 9.29048 4.57619C9.01433 4.30005 8.56662 4.30005 8.29048 4.57619L5.1989 7.66776C4.24737 8.6193 4.13865 10.091 5.02381 10.9762C5.9095 11.8619 7.37984 11.7535 8.32363 10.8097L11.7361 7.39727C13.1876 5.94573 13.3564 3.68975 12.0333 2.36667C10.7099 1.04326 8.45782 1.20884 7.00206 2.66461L3.59216 6.07451C1.62229 8.04437 1.39955 11.0662 3.16667 12.8333C4.93146 14.5981 7.9596 14.3737 9.92925 12.4041L13.6429 8.69048C13.919 8.41433 13.919 7.96662 13.6429 7.69048C13.3667 7.41433 12.919 7.41433 12.6429 7.69048Z"
+    d="M3,8.5L8.1,3c1.1-1.2,2.9-1.2,4,0c1.1,1.2,1.1,3,0,4.2l-5.9,6.3c-0.4,0.5-1.1,0.5-1.6,0c-0.4-0.5-0.4-1.2,0-1.7l5.9-6.3c0.2-0.2,0.2-0.6,0-0.8c-0.2-0.2-0.6-0.2-0.8,0L3.7,11c-0.9,0.9-0.9,2.4,0,3.3c0.9,0.9,2.3,0.9,3.2,0l5.9-6.3c1.5-1.6,1.5-4.2,0-5.8c-1.5-1.6-4-1.6-5.5,0L2.2,7.6c-0.2,0.2-0.2,0.6,0,0.8C2.4,8.7,2.7,8.7,3,8.5z"
   />
 </svg>
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index dccd4bc0d4..c1b9aac4ff 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -366,16 +366,16 @@
     margin-top: 0.5rem;
     padding: 0.5rem;
     min-width: 0;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     overflow-x: auto;
     overflow-y: hidden;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 0.5rem;
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 0.25rem;
 
     .item + .item {
       padding-left: 1rem;
-      border-left: 1px solid var(--divider-color);
+      border-left: 1px solid var(--theme-divider-color);
     }
   }
 </style>
diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte
index 05ad047d07..53e2ab8801 100644
--- a/plugins/calendar-resources/src/components/CreateEvent.svelte
+++ b/plugins/calendar-resources/src/components/CreateEvent.svelte
@@ -104,6 +104,8 @@
       labelNull={ui.string.SelectDate}
       on:change={async (event) => await handleNewStartDate(event.detail)}
       mode={DateRangeMode.DATETIME}
+      kind={'secondary'}
+      size={'large'}
       editable
     />
     <DateRangePresenter
@@ -112,8 +114,10 @@
       labelNull={calendar.string.DueTo}
       on:change={async (event) => await handleNewDueDate(event.detail)}
       mode={DateRangeMode.DATETIME}
+      kind={'secondary'}
+      size={'large'}
       editable
     />
-    <UserBoxList bind:items={participants} label={calendar.string.Participants} />
+    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/calendar-resources/src/components/CreateReminder.svelte b/plugins/calendar-resources/src/components/CreateReminder.svelte
index d8229d38fa..6f17d56e12 100644
--- a/plugins/calendar-resources/src/components/CreateReminder.svelte
+++ b/plugins/calendar-resources/src/components/CreateReminder.svelte
@@ -72,7 +72,14 @@
   <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus />
   <svelte:fragment slot="pool">
     <!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
-    <DateRangePresenter bind:value mode={DateRangeMode.DATETIME} editable={true} labelNull={ui.string.SelectDate} />
-    <UserBoxList bind:items={participants} label={calendar.string.Participants} />
+    <DateRangePresenter
+      bind:value
+      mode={DateRangeMode.DATETIME}
+      editable={true}
+      labelNull={ui.string.SelectDate}
+      kind={'secondary'}
+      size={'large'}
+    />
+    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/contact-resources/src/components/AssigneeBox.svelte b/plugins/contact-resources/src/components/AssigneeBox.svelte
index 608ae92f94..740e6e34e7 100644
--- a/plugins/contact-resources/src/components/AssigneeBox.svelte
+++ b/plugins/contact-resources/src/components/AssigneeBox.svelte
@@ -153,7 +153,7 @@
             <div class="flex-presenter">
               {#if icon}
                 <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
-                  <Icon {icon} size={kind === 'link' ? 'small' : size} />
+                  <Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
                 </div>
               {/if}
               <div class="label no-underline">
diff --git a/plugins/contact-resources/src/components/CreateEmployee.svelte b/plugins/contact-resources/src/components/CreateEmployee.svelte
index ef807821cf..9e804e4023 100644
--- a/plugins/contact-resources/src/components/CreateEmployee.svelte
+++ b/plugins/contact-resources/src/components/CreateEmployee.svelte
@@ -169,7 +169,8 @@
     <ChannelsDropdown
       bind:value={channels}
       focusIndex={10}
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       editable
       restricted={[contact.channelProvider.Email]}
     />
diff --git a/plugins/contact-resources/src/components/CreateOrganization.svelte b/plugins/contact-resources/src/components/CreateOrganization.svelte
index 641252386a..3de312f32d 100644
--- a/plugins/contact-resources/src/components/CreateOrganization.svelte
+++ b/plugins/contact-resources/src/components/CreateOrganization.svelte
@@ -103,6 +103,8 @@
       <ChannelsDropdown
         bind:value={channels}
         focusIndex={10}
+        kind={'secondary'}
+        size={'large'}
         editable
         highlighted={matchedChannels.map((it) => it.provider)}
       />
diff --git a/plugins/contact-resources/src/components/CreatePerson.svelte b/plugins/contact-resources/src/components/CreatePerson.svelte
index 993322f64a..dacb114c74 100644
--- a/plugins/contact-resources/src/components/CreatePerson.svelte
+++ b/plugins/contact-resources/src/components/CreatePerson.svelte
@@ -120,6 +120,6 @@
     </div>
   </div>
   <svelte:fragment slot="pool">
-    <ChannelsDropdown bind:value={channels} focusIndex={10} kind={'no-border'} editable />
+    <ChannelsDropdown bind:value={channels} focusIndex={10} kind={'secondary'} size={'large'} editable />
   </svelte:fragment>
 </Card>
diff --git a/plugins/document-resources/src/components/CreateDocument.svelte b/plugins/document-resources/src/components/CreateDocument.svelte
index 574504efc8..46f31506e4 100644
--- a/plugins/document-resources/src/components/CreateDocument.svelte
+++ b/plugins/document-resources/src/components/CreateDocument.svelte
@@ -121,28 +121,28 @@
   <svelte:fragment slot="pool">
     <UserBoxList
       items={object.authors}
-      size="small"
       label={document.string.Authors}
       emptyLabel={document.string.Authors}
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.authors = detail)}
     />
     <UserBoxList
       items={object.approvers}
-      size="small"
       label={document.string.Approvers}
       emptyLabel={document.string.Approvers}
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.approvers = detail)}
     />
     <UserBoxList
       items={object.reviewers}
-      size="small"
       label={document.string.Reviewers}
       emptyLabel={document.string.Reviewers}
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.reviewers = detail)}
     />
diff --git a/plugins/hr-resources/src/components/CreateDepartment.svelte b/plugins/hr-resources/src/components/CreateDepartment.svelte
index 57cd86a53e..9832260750 100644
--- a/plugins/hr-resources/src/components/CreateDepartment.svelte
+++ b/plugins/hr-resources/src/components/CreateDepartment.svelte
@@ -75,13 +75,21 @@
     </div>
   </div>
   <svelte:fragment slot="header">
-    <SpaceSelector _class={hr.class.Department} label={hr.string.ParentDepartmentLabel} bind:space />
+    <SpaceSelector
+      _class={hr.class.Department}
+      label={hr.string.ParentDepartmentLabel}
+      bind:space
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <svelte:fragment slot="pool">
     <EmployeeBox
       focusIndex={3}
       label={hr.string.TeamLead}
       placeholder={hr.string.TeamLead}
+      kind={'secondary'}
+      size={'large'}
       bind:value={lead}
       allowDeselect
       showNavigate={false}
diff --git a/plugins/hr-resources/src/components/CreateRequest.svelte b/plugins/hr-resources/src/components/CreateRequest.svelte
index 73e180f89d..40c10f0347 100644
--- a/plugins/hr-resources/src/components/CreateRequest.svelte
+++ b/plugins/hr-resources/src/components/CreateRequest.svelte
@@ -93,6 +93,8 @@
     <EmployeeBox
       label={hr.string.SelectEmployee}
       placeholder={hr.string.SelectEmployee}
+      kind={'secondary'}
+      size={'large'}
       bind:value={employee}
       {readonly}
       showNavigate={false}
@@ -118,13 +120,19 @@
     placeholder={core.string.Description}
   />
   <svelte:fragment slot="pool">
-    <DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} />
-    <DateRangePresenter bind:value={dueDate} labelNull={calendar.string.DueTo} editable />
+    <DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} kind={'secondary'} size={'large'} />
+    <DateRangePresenter
+      bind:value={dueDate}
+      labelNull={calendar.string.DueTo}
+      editable
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button
       icon={IconAttachment}
-      kind={'transparent'}
+      size={'large'}
       on:click={() => {
         descriptionBox.attach()
       }}
diff --git a/plugins/inventory-resources/src/components/CreateProduct.svelte b/plugins/inventory-resources/src/components/CreateProduct.svelte
index e9a9381218..6632242aa4 100644
--- a/plugins/inventory-resources/src/components/CreateProduct.svelte
+++ b/plugins/inventory-resources/src/components/CreateProduct.svelte
@@ -85,6 +85,8 @@
   <svelte:fragment slot="pool">
     <DropdownLabels
       items={categories}
+      kind={'secondary'}
+      size={'large'}
       bind:selected={doc.attachedTo}
       placeholder={inventory.string.Categories}
       label={inventory.string.Category}
diff --git a/plugins/lead-resources/src/components/CreateCustomer.svelte b/plugins/lead-resources/src/components/CreateCustomer.svelte
index 0ce1fe1c4a..f0f1bbe9ac 100644
--- a/plugins/lead-resources/src/components/CreateCustomer.svelte
+++ b/plugins/lead-resources/src/components/CreateCustomer.svelte
@@ -168,14 +168,7 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <Button
-      icon={targetClass.icon}
-      label={targetClass.label}
-      size={'small'}
-      kind={'no-border'}
-      on:click={selectTarget}
-      focusIndex={100}
-    />
+    <Button icon={targetClass.icon} label={targetClass.label} size={'large'} on:click={selectTarget} focusIndex={100} />
   </svelte:fragment>
   {#if targetClass._id === contact.class.Person}
     <div class="flex-between flex-row-top">
@@ -236,6 +229,8 @@
     <ChannelsDropdown
       bind:value={channels}
       focusIndex={10}
+      kind={'secondary'}
+      size={'large'}
       editable
       highlighted={matchedChannels.map((it) => it.provider)}
     />
diff --git a/plugins/lead-resources/src/components/CreateLead.svelte b/plugins/lead-resources/src/components/CreateLead.svelte
index 1696b278ef..a5ae42069c 100644
--- a/plugins/lead-resources/src/components/CreateLead.svelte
+++ b/plugins/lead-resources/src/components/CreateLead.svelte
@@ -114,6 +114,8 @@
     <SpaceSelector
       _class={lead.class.Funnel}
       label={lead.string.FunnelName}
+      kind={'secondary'}
+      size={'large'}
       bind:space={_space}
       create={{
         component: lead.component.CreateFunnel,
@@ -132,8 +134,8 @@
           label={lead.string.Leads}
           placeholder={lead.string.Leads}
           bind:value={customer}
-          kind={'no-border'}
-          size={'small'}
+          kind={'secondary'}
+          size={'large'}
         />
       {/if}
       <Label label={lead.string.CreateLead} />
@@ -152,6 +154,8 @@
     <EmployeeBox
       focusIndex={2}
       label={lead.string.Assignee}
+      kind={'secondary'}
+      size={'large'}
       bind:value={assignee}
       allowDeselect
       showNavigate={false}
@@ -164,8 +168,8 @@
         label={lead.string.Customer}
         placeholder={lead.string.SelectCustomer}
         bind:value={customer}
-        kind={'no-border'}
-        size={'small'}
+        kind={'secondary'}
+        size={'large'}
         create={{ component: lead.component.CreateCustomer, label: lead.string.CreateCustomer }}
       />
     {/if}
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte
index c418819520..e3fc6dff7e 100644
--- a/plugins/recruit-resources/src/components/CandidateCard.svelte
+++ b/plugins/recruit-resources/src/components/CandidateCard.svelte
@@ -86,8 +86,8 @@
 <style lang="scss">
   .card-container {
     padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     transition-property: box-shadow, background-color, border-color;
     transition-timing-function: var(--timing-shadow);
@@ -97,8 +97,7 @@
     min-height: 15rem;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
-      border-color: var(--button-border-color);
+      background-color: var(--theme-button-hovered);
       box-shadow: var(--accent-shadow);
     }
 
@@ -106,17 +105,17 @@
       margin-bottom: 1.75rem;
       font-weight: 500;
       font-size: 0.625rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
     .name {
       margin: 1rem 0 0.25rem;
       font-weight: 500;
       font-size: 1rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     .description {
       font-size: 0.75rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
     .footer {
       margin-top: 1.5rem;
diff --git a/plugins/recruit-resources/src/components/CreateApplication.svelte b/plugins/recruit-resources/src/components/CreateApplication.svelte
index 9e4100f241..265eab9145 100644
--- a/plugins/recruit-resources/src/components/CreateApplication.svelte
+++ b/plugins/recruit-resources/src/components/CreateApplication.svelte
@@ -390,14 +390,15 @@
         bind:value={doc.assignee}
         allowDeselect
         showNavigate={false}
+        kind={'secondary'}
+        size={'large'}
         titleDeselect={recruit.string.UnAssignRecruiter}
       />
       {#if states.length > 0}
         <Button
           focusIndex={3}
           width="min-content"
-          size="small"
-          kind="no-border"
+          size="large"
           bind:input={btn}
           on:click={() => {
             showPopup(
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 848a96b4f9..ca9db2cc46 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -56,11 +56,11 @@
     IconInfo,
     Label,
     showPopup,
-    Spinner
+    Spinner,
+    IconAttachment
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import recruit from '../plugin'
-  import FileUpload from './icons/FileUpload.svelte'
   import YesNo from './YesNo.svelte'
 
   export let shouldSaveDraft: boolean = false
@@ -521,14 +521,7 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <Button
-      icon={contact.icon.Person}
-      label={contact.string.Person}
-      size={'small'}
-      kind={'no-border'}
-      disabled
-      on:click={() => {}}
-    />
+    <Button icon={contact.icon.Person} label={contact.string.Person} size={'large'} disabled on:click={() => {}} />
   </svelte:fragment>
   <div class="flex-between">
     <div class="flex-col">
@@ -585,7 +578,7 @@
       focusIndex={10}
       bind:value={object.channels}
       highlighted={matchedChannels.map((it) => it.provider)}
-      kind={'link-bordered'}
+      kind={'secondary'}
       size={'large'}
     />
     <YesNo
@@ -594,7 +587,7 @@
       label={recruit.string.Onsite}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.onsite}
-      kind={'link-bordered'}
+      kind={'secondary'}
       size={'large'}
     />
     <YesNo
@@ -603,7 +596,7 @@
       label={recruit.string.Remote}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.remote}
-      kind={'link-bordered'}
+      kind={'secondary'}
       size={'large'}
     />
     <Component
@@ -618,7 +611,7 @@
         elements,
         newElements,
         countLabel: recruit.string.NumberSkills,
-        kind: 'link-bordered',
+        kind: 'secondary',
         size: 'large'
       }}
       on:open={(evt) => {
@@ -655,19 +648,19 @@
           }}
         />
       </div>
+    {:else}
+      <div class="flex-grow w-full" style="margin: 0" />
     {/if}
-    <div class="flex flex-grow flex-wrap">
-      <InlineAttributeBar
-        _class={recruit.mixin.Candidate}
-        {object}
-        toClass={contact.class.Contact}
-        {ignoreKeys}
-        extraProps={{ showNavigate: false }}
-        on:update={() => {
-          object = object
-        }}
-      />
-    </div>
+    <InlineAttributeBar
+      _class={recruit.mixin.Candidate}
+      {object}
+      toClass={contact.class.Contact}
+      {ignoreKeys}
+      extraProps={{ showNavigate: false }}
+      on:update={() => {
+        object = object
+      }}
+    />
   </svelte:fragment>
 
   <svelte:fragment slot="footer">
@@ -683,14 +676,13 @@
       on:drop|preventDefault|stopPropagation={drop}
     >
       {#if loading && object.resumeUuid}
-        <Button label={recruit.string.Parsing} kind="link" icon={Spinner} disabled />
+        <Button label={recruit.string.Parsing} icon={Spinner} disabled />
       {:else}
         {#if loading}
-          <Button label={recruit.string.Uploading} kind="link" icon={Spinner} disabled />
+          <Button label={recruit.string.Uploading} icon={Spinner} disabled />
         {:else if object.resumeUuid}
           <Button
             disabled={loading}
-            kind={'transparent'}
             focusIndex={103}
             icon={FileIcon}
             on:click={() => {
@@ -707,10 +699,9 @@
           </Button>
         {:else}
           <Button
-            kind={'transparent'}
             focusIndex={103}
             label={recruit.string.AddDropHere}
-            icon={FileUpload}
+            icon={IconAttachment}
             on:click={() => {
               inputFile.click()
             }}
@@ -735,14 +726,12 @@
 
 <style lang="scss">
   .resume {
-    margin: -0.375rem 0rem -0.375rem -0.375rem;
-    padding: 0.375rem;
-    background: var(--theme-comp-header-color);
-    border: 1px dashed var(--theme-divider-color);
+    box-shadow: 0 0 0 0 var(--primary-button-focused-border);
     border-radius: 0.5rem;
+    transition: box-shadow 0.15s ease-in-out;
 
     &.solid {
-      border-style: solid;
+      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
     }
   }
   .skills-box {
diff --git a/plugins/recruit-resources/src/components/CreateVacancy.svelte b/plugins/recruit-resources/src/components/CreateVacancy.svelte
index 0d8c1cc515..b831b3b6b4 100644
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@@ -281,8 +281,8 @@
       bind:value={company}
       allowDeselect
       titleDeselect={recruit.string.UnAssignCompany}
-      kind={'no-border'}
-      size={'small'}
+      kind={'secondary'}
+      size={'large'}
       icon={Company}
       readonly={preserveCompany}
       showNavigate={false}
@@ -293,7 +293,9 @@
       props={{
         folders: [recruit.space.VacancyTemplates],
         template: templateId,
-        focusIndex: 4
+        focusIndex: 4,
+        kind: 'secondary',
+        size: 'large'
       }}
       on:change={handleTemplateChange}
     />
@@ -311,7 +313,7 @@
   <svelte:fragment slot="footer">
     <Button
       icon={IconAttachment}
-      kind={'transparent'}
+      size={'large'}
       on:click={() => {
         descriptionBox.attach()
       }}
diff --git a/plugins/recruit-resources/src/components/VacancyCard.svelte b/plugins/recruit-resources/src/components/VacancyCard.svelte
index 93f353a7e0..ccbe712856 100644
--- a/plugins/recruit-resources/src/components/VacancyCard.svelte
+++ b/plugins/recruit-resources/src/components/VacancyCard.svelte
@@ -124,8 +124,8 @@
 <style lang="scss">
   .card-container {
     padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     transition-property: box-shadow, background-color, border-color;
     transition-timing-function: var(--timing-shadow);
@@ -135,8 +135,7 @@
     min-height: 15rem;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
-      border-color: var(--button-border-color);
+      background-color: var(--theme-button-hovered);
       box-shadow: var(--accent-shadow);
     }
 
diff --git a/plugins/recruit-resources/src/components/review/CreateReview.svelte b/plugins/recruit-resources/src/components/review/CreateReview.svelte
index 82ac3604da..fa9d130082 100644
--- a/plugins/recruit-resources/src/components/review/CreateReview.svelte
+++ b/plugins/recruit-resources/src/components/review/CreateReview.svelte
@@ -165,8 +165,8 @@
         bind:value={doc.attachedTo}
         label={recruit.string.Talent}
         placeholder={recruit.string.Talents}
-        kind={'no-border'}
-        size={'small'}
+        kind={'secondary'}
+        size={'large'}
         create={{ component: recruit.component.CreateCandidate, label: recruit.string.CreateTalent }}
       />
     {/if}
@@ -174,8 +174,8 @@
       _class={contact.class.Organization}
       bind:value={company}
       label={recruit.string.Company}
-      kind={'no-border'}
-      size={'small'}
+      kind={'secondary'}
+      size={'large'}
       showNavigate={false}
       create={{ component: contact.component.CreateOrganization, label: contact.string.CreateOrganization }}
     />
@@ -184,9 +184,9 @@
       bind:value={application}
       label={recruit.string.Application}
       placeholder={recruit.string.ApplicationCreateLabel}
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       searchField={'number'}
-      size={'small'}
       showNavigate={false}
       allowCategory={[recruit.completion.ApplicationCategory]}
     />
@@ -195,6 +195,8 @@
       labelNull={recruit.string.StartDate}
       mode={DateRangeMode.DATETIME}
       editable
+      kind={'secondary'}
+      size={'large'}
       on:change={updateStart}
     />
     <DateRangePresenter
@@ -202,7 +204,9 @@
       labelNull={recruit.string.DueDate}
       mode={DateRangeMode.DATETIME}
       editable
+      kind={'secondary'}
+      size={'large'}
     />
-    <UserBoxList bind:items={doc.participants} label={calendar.string.Participants} />
+    <UserBoxList bind:items={doc.participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/tags-resources/src/components/CreateTagElement.svelte b/plugins/tags-resources/src/components/CreateTagElement.svelte
index 79aca66d02..43af3d7e4f 100644
--- a/plugins/tags-resources/src/components/CreateTagElement.svelte
+++ b/plugins/tags-resources/src/components/CreateTagElement.svelte
@@ -136,6 +136,8 @@
       <DropdownLabels
         icon={IconFolder}
         label={tags.string.CategoryLabel}
+        kind={'secondary'}
+        size={'large'}
         bind:selected={category}
         items={categoryItems}
         on:selected={() => {
diff --git a/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte b/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte
index 88762b88d1..cc43d4db62 100644
--- a/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte
@@ -18,12 +18,14 @@
   import type { KanbanTemplate, KanbanTemplateSpace } from '@hcengineering/task'
   import task from '@hcengineering/task'
   import type { DropdownTextItem } from '@hcengineering/ui'
-  import { DropdownLabels } from '@hcengineering/ui'
+  import { DropdownLabels, ButtonKind, ButtonSize } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
 
   export let folders: Ref<KanbanTemplateSpace>[]
   export let template: Ref<KanbanTemplate> | undefined = undefined
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
   export let focusIndex = -1
 
   let templates: KanbanTemplate[] = []
@@ -51,6 +53,8 @@
 <DropdownLabels
   {focusIndex}
   {items}
+  {kind}
+  {size}
   icon={task.icon.ManageTemplates}
   bind:selected={selectedItem}
   label={plugin.string.States}
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index 4132c0c672..142f283337 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -540,7 +540,13 @@
 >
   <svelte:fragment slot="header">
     <div class="flex-row-center">
-      <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space={_space} />
+      <SpaceSelector
+        _class={tracker.class.Project}
+        label={tracker.string.Project}
+        bind:space={_space}
+        kind={'secondary'}
+        size={'large'}
+      />
     </div>
     <ObjectBox
       _class={tracker.class.IssueTemplate}
@@ -549,7 +555,8 @@
         space: _space
       }}
       on:change={handleTemplateChange}
-      size={'small'}
+      kind={'secondary'}
+      size={'large'}
       label={tracker.string.NoIssueTemplate}
       icon={tracker.icon.Issues}
       searchField={'title'}
@@ -615,8 +622,8 @@
     <div id="status-editor">
       <StatusEditor
         value={object}
-        kind="no-border"
-        size="small"
+        kind={'secondary'}
+        size={'large'}
         shouldShowLabel={true}
         on:change={({ detail }) => (object.status = detail)}
       />
@@ -626,8 +633,8 @@
         value={object}
         shouldShowLabel
         isEditable
-        kind="no-border"
-        size="small"
+        kind={'secondary'}
+        size={'large'}
         justify="center"
         on:change={({ detail }) => (object.priority = detail)}
       />
@@ -635,8 +642,8 @@
     <div id="assignee-editor">
       <AssigneeEditor
         value={object}
-        size="small"
-        kind="no-border"
+        kind={'secondary'}
+        size={'large'}
         width={'min-content'}
         on:change={({ detail }) => (object.assignee = detail)}
       />
@@ -647,7 +654,9 @@
         items: object.labels,
         key,
         targetClass: tracker.class.Issue,
-        countLabel: tracker.string.NumberLabels
+        countLabel: tracker.string.NumberLabels,
+        kind: 'secondary',
+        size: 'large'
       }}
       on:open={(evt) => {
         addTagRef(evt.detail)
@@ -657,23 +666,31 @@
       }}
     />
     <div id="estimation-editor">
-      <EstimationEditor kind={'no-border'} size={'small'} value={object} />
+      <EstimationEditor kind={'secondary'} size={'large'} value={object} />
     </div>
-    <ComponentSelector value={object.component} onChange={handleComponentIdChanged} isEditable={true} />
+    <ComponentSelector
+      value={object.component}
+      onChange={handleComponentIdChanged}
+      isEditable={true}
+      kind={'secondary'}
+      size={'large'}
+    />
     <SprintSelector
       value={object.sprint}
       onChange={handleSprintIdChanged}
       useComponent={(!originalIssue && object.component) || undefined}
+      kind={'secondary'}
+      size={'large'}
     />
     {#if object.dueDate !== null}
-      <DatePresenter bind:value={object.dueDate} editable />
+      <DatePresenter bind:value={object.dueDate} kind={'secondary'} size={'large'} editable />
     {/if}
     <div id="more-actions"><ActionIcon icon={IconMoreH} size={'medium'} action={showMoreActions} /></div>
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button
       icon={IconAttachment}
-      kind={'transparent'}
+      size={'large'}
       on:click={() => {
         descriptionBox.attach()
       }}
diff --git a/plugins/tracker-resources/src/components/components/NewComponent.svelte b/plugins/tracker-resources/src/components/components/NewComponent.svelte
index 43a5faf910..f7bca5ac6f 100644
--- a/plugins/tracker-resources/src/components/components/NewComponent.svelte
+++ b/plugins/tracker-resources/src/components/components/NewComponent.svelte
@@ -62,7 +62,13 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      bind:space
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <EditBox bind:value={object.label} placeholder={tracker.string.ComponentNamePlaceholder} kind={'large-style'} focus />
   <StyledTextArea
@@ -74,6 +80,8 @@
     <ComponentStatusSelector
       selectedComponentStatus={object.status}
       onComponentStatusChange={handleComponentStatusChanged}
+      kind={'secondary'}
+      size={'large'}
     />
     <EmployeeBox
       label={tracker.string.ComponentLead}
@@ -82,10 +90,29 @@
       allowDeselect
       titleDeselect={tracker.string.Unassigned}
       showNavigate={false}
+      kind={'secondary'}
+      size={'large'}
+    />
+    <UserBoxList
+      bind:items={object.members}
+      label={tracker.string.ComponentMembersSearchPlaceholder}
+      kind={'secondary'}
+      size={'large'}
     />
-    <UserBoxList bind:items={object.members} label={tracker.string.ComponentMembersSearchPlaceholder} />
     <!-- TODO: add labels after customize IssueNeedsToBeCompletedByThisDate -->
-    <DatePresenter bind:value={object.startDate} labelNull={tracker.string.StartDate} editable />
-    <DatePresenter bind:value={object.targetDate} labelNull={tracker.string.TargetDate} editable />
+    <DatePresenter
+      bind:value={object.startDate}
+      labelNull={tracker.string.StartDate}
+      kind={'secondary'}
+      size={'large'}
+      editable
+    />
+    <DatePresenter
+      bind:value={object.targetDate}
+      labelNull={tracker.string.TargetDate}
+      kind={'secondary'}
+      size={'large'}
+      editable
+    />
   </svelte:fragment>
 </Card>
diff --git a/plugins/tracker-resources/src/components/sprints/NewSprint.svelte b/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
index 5cd42fa4f1..bbc326a36c 100644
--- a/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
+++ b/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
@@ -63,7 +63,13 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      kind={'secondary'}
+      size={'large'}
+      bind:space
+    />
   </svelte:fragment>
   <EditBox bind:value={object.label} placeholder={tracker.string.SprintNamePlaceholder} kind={'large-style'} focus />
   <StyledTextArea
@@ -72,27 +78,43 @@
     emphasized
   />
   <svelte:fragment slot="pool">
-    <SprintStatusSelector selectedSprintStatus={object.status} onSprintStatusChange={handleComponentStatusChanged} />
+    <SprintStatusSelector
+      selectedSprintStatus={object.status}
+      onSprintStatusChange={handleComponentStatusChanged}
+      kind={'secondary'}
+      size={'large'}
+    />
     <EmployeeBox
       label={tracker.string.SprintLead}
       placeholder={tracker.string.AssignTo}
+      kind={'secondary'}
+      size={'large'}
       bind:value={object.lead}
       allowDeselect
       titleDeselect={tracker.string.Unassigned}
       showNavigate={false}
     />
-    <UserBoxList bind:items={object.members} label={tracker.string.SprintMembersSearchPlaceholder} />
+    <UserBoxList
+      bind:items={object.members}
+      label={tracker.string.SprintMembersSearchPlaceholder}
+      kind={'secondary'}
+      size={'large'}
+    />
     <DatePresenter
       bind:value={object.startDate}
       editable
       label={tracker.string.StartDate}
       detail={ui.string.SelectDate}
+      kind={'secondary'}
+      size={'large'}
     />
     <DatePresenter
       bind:value={object.targetDate}
       editable
       label={tracker.string.TargetDate}
       detail={ui.string.SelectDate}
+      kind={'secondary'}
+      size={'large'}
     />
   </svelte:fragment>
 </Card>
diff --git a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
index eb8ef6a94c..80ab915781 100644
--- a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
@@ -132,7 +132,13 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space={_space} />
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      bind:space={_space}
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <svelte:fragment slot="title" let:label>
     <Label {label} />
@@ -158,15 +164,15 @@
       value={object}
       shouldShowLabel
       isEditable
-      kind="no-border"
-      size="small"
+      kind={'secondary'}
+      size={'large'}
       justify="center"
       on:change={({ detail }) => (object.priority = detail)}
     />
     <AssigneeEditor
       value={object}
-      size="small"
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:change={({ detail }) => (object.assignee = detail)}
     />
@@ -176,7 +182,9 @@
         items: labels,
         key,
         targetClass: tracker.class.Issue,
-        countLabel: tracker.string.NumberLabels
+        countLabel: tracker.string.NumberLabels,
+        kind: 'secondary',
+        size: 'large'
       }}
       on:open={(evt) => {
         addTagRef(evt.detail)
@@ -185,12 +193,20 @@
         labels = labels.filter((it) => it._id !== evt.detail)
       }}
     />
-    <EstimationEditor kind={'no-border'} size={'small'} value={object} />
-    <ComponentSelector value={object.component} onChange={handleComponentIdChanged} isEditable={true} />
+    <EstimationEditor kind={'secondary'} size={'large'} value={object} />
+    <ComponentSelector
+      value={object.component}
+      onChange={handleComponentIdChanged}
+      isEditable={true}
+      kind={'secondary'}
+      size={'large'}
+    />
     <SprintSelector
       value={object.sprint}
       onChange={handleSprintIdChanged}
       useComponent={object.component ?? undefined}
+      kind={'secondary'}
+      size={'large'}
     />
   </svelte:fragment>
 </Card>
diff --git a/plugins/view-resources/src/components/DateEditor.svelte b/plugins/view-resources/src/components/DateEditor.svelte
index 536439e739..97634dc7f7 100644
--- a/plugins/view-resources/src/components/DateEditor.svelte
+++ b/plugins/view-resources/src/components/DateEditor.svelte
@@ -21,7 +21,8 @@
   export let type: TypeDate | undefined
   export let label: IntlString | undefined = undefined
   export let onChange: (value: any) => void
-  export let kind: 'no-border' | 'link' = 'no-border'
+  export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
+  export let size: 'small' | 'medium' | 'large' = 'small'
 </script>
 
 <DateRangePresenter
@@ -31,6 +32,7 @@
   noShift={!type?.withShift}
   editable
   {kind}
+  {size}
   on:change={(res) => {
     if (res.detail !== undefined) onChange(res.detail)
   }}
diff --git a/plugins/view-resources/src/components/ObjectBox.svelte b/plugins/view-resources/src/components/ObjectBox.svelte
index 01426475f7..3549529632 100644
--- a/plugins/view-resources/src/components/ObjectBox.svelte
+++ b/plugins/view-resources/src/components/ObjectBox.svelte
@@ -137,7 +137,7 @@
           {:else}
             <div class="flex-row-center">
               {#if icon}
-                <Icon {icon} size={kind === 'link' ? 'small' : size} />
+                <Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
               {/if}
               <div class="ml-2">
                 <Label {label} />
diff --git a/plugins/view-resources/src/components/StringEditor.svelte b/plugins/view-resources/src/components/StringEditor.svelte
index f886bea5fb..cc5a19e162 100644
--- a/plugins/view-resources/src/components/StringEditor.svelte
+++ b/plugins/view-resources/src/components/StringEditor.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import type { ButtonSize } from '@hcengineering/ui'
+  import type { ButtonSize, ButtonKind } from '@hcengineering/ui'
   import { EditBox, Label, showPopup, eventToHTMLElement, Button } from '@hcengineering/ui'
   import EditBoxPopup from './EditBoxPopup.svelte'
 
@@ -24,7 +24,7 @@
   export let value: string
   export let focus: boolean = false
   export let onChange: (value: string) => void = () => {}
-  export let kind: 'no-border' | 'link' = 'no-border'
+  export let kind: ButtonKind | undefined = undefined
   export let readonly = false
   export let size: ButtonSize = 'small'
   export let justify: 'left' | 'center' = 'center'
@@ -37,7 +37,7 @@
   }
 </script>
 
-{#if kind === 'link'}
+{#if kind}
   <Button
     {kind}
     {size}