From 6b46af038405842852e0de70b474a19d08258444 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 7 Dec 2022 08:02:03 +0300
Subject: [PATCH] Update popups (#2421)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../presentation/src/components/Card.svelte   |   4 +-
 .../src/components/StyledTextArea.svelte      |  19 +-
 .../src/components/StyledTextBox.svelte       |  14 +-
 .../src/components/StyledTextEditor.svelte    |  34 +++-
 packages/theme/styles/_colors.scss            |   2 +-
 packages/theme/styles/_layouts.scss           |   1 +
 packages/theme/styles/common.scss             |  18 ++
 packages/theme/styles/global.scss             |   3 +-
 .../ui/src/components/ToggleButton.svelte     |   1 +
 .../src/components/AttachmentStyledBox.svelte |   2 +
 .../src/components/CreateDocument.svelte      |  60 +++----
 .../src/components/Schedule.svelte            |  26 +--
 .../src/components/Categories.svelte          |   6 +-
 .../src/components/CreateCategory.svelte      |  17 +-
 .../src/components/CreateProduct.svelte       |  19 +-
 .../src/components/CreateCustomer.svelte      |   4 +-
 .../src/components/CreateLead.svelte          |  18 +-
 .../src/components/CreateCandidate.svelte     | 141 +++++++--------
 .../src/components/CreateVacancy.svelte       |  28 +--
 .../components/review/CreateOpinion.svelte    |  34 +---
 .../src/components/review/CreateReview.svelte |  11 +-
 .../src/components/review/Opinions.svelte     |   4 +-
 .../src/components/review/Reviews.svelte      |   4 +-
 plugins/tracker-assets/lang/en.json           |   2 +
 plugins/tracker-assets/lang/ru.json           |   2 +
 .../src/components/CreateIssue.svelte         | 103 ++++++-----
 .../src/components/projects/NewProject.svelte |  21 +--
 .../components/projects/ProjectBrowser.svelte | 167 +++++++++---------
 .../src/components/sprints/NewSprint.svelte   |  21 +--
 .../components/sprints/SprintBrowser.svelte   |   7 +-
 .../templates/CreateIssueTemplate.svelte      | 104 +++++------
 .../templates/IssueTemplateChildEditor.svelte |  56 +++---
 .../templates/IssueTemplateChilds.svelte      |   2 +-
 .../templates/IssueTemplatesView.svelte       |   4 +-
 plugins/tracker-resources/src/plugin.ts       |   2 +
 .../src/components/ViewletSetting.svelte      |   4 +-
 36 files changed, 465 insertions(+), 500 deletions(-)

diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index 471344f3db..0e991ab787 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -71,12 +71,12 @@
       />
     </div>
   </div>
-  <Scroller autoscroll>
+  <Scroller>
     <div class="antiCard-content">
       <slot />
     </div>
   </Scroller>
-  {#if $$slots.header || $$slots.pool}
+  {#if $$slots.pool}
     <div class="antiCard-pool">
       <slot name="pool" />
     </div>
diff --git a/packages/text-editor/src/components/StyledTextArea.svelte b/packages/text-editor/src/components/StyledTextArea.svelte
index e36f0a4322..832841542a 100644
--- a/packages/text-editor/src/components/StyledTextArea.svelte
+++ b/packages/text-editor/src/components/StyledTextArea.svelte
@@ -6,19 +6,20 @@
   import StyledTextEditor from './StyledTextEditor.svelte'
 
   export let label: IntlString | undefined = undefined
-  export let content: string
+  export let content: string | undefined
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
 
   export let showButtons = true
   export let buttonSize: IconSize = 'small'
   export let focus = false
+  export let emphasized: boolean = false
   export let isScrollable: boolean = false
   export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
 
   let rawValue: string
   let oldContent = ''
 
-  $: if (oldContent !== content) {
+  $: if (content && oldContent !== content) {
     oldContent = content
     rawValue = content
   }
@@ -42,10 +43,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="antiComponent styled-box clear-mins"
+  class:antiEmphasized={emphasized}
   on:click={() => {
-    if (focused) {
-      textEditor?.focus()
-    }
+    textEditor?.focus()
   }}
 >
   {#if label}
@@ -71,7 +71,12 @@
       rawValue = evt.detail
       dispatch('changeContent')
     }}
-  />
+  >
+    <slot />
+    <svelte:fragment slot="right">
+      <slot name="right" />
+    </svelte:fragment>
+  </StyledTextEditor>
 </div>
 
 <style lang="scss">
@@ -81,7 +86,7 @@
     .label {
       padding-bottom: 0.25rem;
       font-size: 0.75rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       opacity: 0.3;
       transition: top 200ms;
       pointer-events: none;
diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte
index e606beeec1..238bc6f0ea 100644
--- a/packages/text-editor/src/components/StyledTextBox.svelte
+++ b/packages/text-editor/src/components/StyledTextBox.svelte
@@ -83,8 +83,8 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="antiComponent styled-box clear-mins"
-  class:emphasized
-  class:emphasized-focus={(mode === Mode.Edit || alwaysEdit) && focused}
+  class:antiEmphasized={emphasized}
+  class:antiEmphasized-focus={(mode === Mode.Edit || alwaysEdit) && focused}
   on:click={() => {
     if (alwaysEdit && focused) {
       textEditor?.focus()
@@ -182,14 +182,4 @@
       user-select: none;
     }
   }
-  .emphasized {
-    padding: 1rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-hover);
-    border-radius: 0.5rem;
-    &.emphasized-focus {
-      background-color: var(--theme-bg-focused-color);
-      border-color: var(--theme-bg-focused-border);
-    }
-  }
 </style>
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index 89062c3efb..b1070b94c7 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -480,14 +480,26 @@
     </div>
   </div>
   {#if showButtons}
-    <div class="buttons-group xsmall-gap my-4">
-      {#each defActions.filter((it) => it.hidden === undefined || it.hidden === true) as a}
-        <StyleButton icon={a.icon} size={buttonSize} on:click={(evt) => handleAction(a, evt)} />
-      {/each}
-      <div class="flex-grow">
+    {#if $$slots.right}
+      <div class="flex-between">
+        <div class="buttons-group xsmall-gap mt-4">
+          {#each defActions.filter((it) => it.hidden === undefined || it.hidden === true) as a}
+            <StyleButton icon={a.icon} size={buttonSize} on:click={(evt) => handleAction(a, evt)} />
+          {/each}
+          <slot />
+        </div>
+        <div class="buttons-group xsmall-gap mt-4">
+          <slot name="right" />
+        </div>
+      </div>
+    {:else}
+      <div class="buttons-group xsmall-gap mt-4">
+        {#each defActions.filter((it) => it.hidden === undefined || it.hidden === true) as a}
+          <StyleButton icon={a.icon} size={buttonSize} on:click={(evt) => handleAction(a, evt)} />
+        {/each}
         <slot />
       </div>
-    </div>
+    {/if}
   {/if}
 </div>
 
@@ -536,5 +548,15 @@
         }
       }
     }
+    .formatPanel {
+      position: sticky;
+      top: 1.25rem;
+      margin: -0.5rem -0.5rem 0.25rem;
+      padding: 0.5rem;
+      background-color: var(--body-accent);
+      border-radius: 0.5rem;
+      box-shadow: var(--button-shadow);
+      z-index: 1;
+    }
   }
 </style>
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 635bf5deff..8c5f96d631 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -238,7 +238,7 @@
   --menu-bg-select: #f0f3f9;
   --menu-icon-hover: #282a30;
   --header-bg-color: linear-gradient(0deg, #eee, #f6f6f6);
-  --popup-bg-color: linear-gradient(136.61deg, #fff 13.72%, #fefefe 74.3%);
+  --popup-bg-color: linear-gradient(136.61deg, #fff 13.72%, #f8f8f8 74.3%);
   --popup-bg-hover: #f0f3f9;
   --popup-divider: #eff1f4;
   --popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;  // Dark
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 6d45308d49..a5b8cbbaa1 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -419,6 +419,7 @@ input.search {
 .my-4 { margin: 1rem 0; }
 
 .m-0-5 { margin: .125rem; }
+.m-1 { margin: .25rem; }
 
 .pl-1 { padding-left: .25rem; }
 .pl-2 { padding-left: .5rem; }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 1427b28552..1d9c22c2c7 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -342,3 +342,21 @@
 
 // Replacing the background of a text editor in Activity
 .activity-content .ref-container .textInput { background-color: var(--body-color) !important; }
+
+// Emphasized
+.antiEmphasized {
+  padding: .75rem;
+  background-color: var(--body-accent);
+  border: 1px solid var(--button-border-color);
+  border-radius: .5rem;
+  transition-property: border, background-color;
+  transition-duration: .15s;
+  transition-timing-function: var(--timing-main);
+
+  &:hover,
+  &:focus-within {
+    background-color: var(--body-color);
+    border-color: var(--button-border-hover);
+  }
+}
+
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 1b1e6b3a98..89f97607d7 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -65,6 +65,7 @@
   touch-action: manipulation;
   scrollbar-color: var(--theme-menu-color) var(--theme-bg-color);
   scrollbar-width: none;
+  --body-font-size: .875rem;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
   --timing-shadow: cubic-bezier(0,.65,.35,1);
   --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -110,7 +111,7 @@ body {
 
   font-family: var(--font-family);
   font-weight: 400;
-  font-size: .875rem;
+  font-size: var(--body-font-size);
   color: var(--content-color);
   background-color: var(--body-color);
   user-select: none;
diff --git a/packages/ui/src/components/ToggleButton.svelte b/packages/ui/src/components/ToggleButton.svelte
index 81917b4c0f..756654a64b 100644
--- a/packages/ui/src/components/ToggleButton.svelte
+++ b/packages/ui/src/components/ToggleButton.svelte
@@ -143,6 +143,7 @@
     color: var(--accent-color);
     background-color: transparent;
     border: 1px solid transparent;
+    border-radius: 0.125rem;
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index e852356f1f..88e14768bd 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -31,6 +31,7 @@
   export let placeholder: IntlString | undefined = undefined
   export let alwaysEdit = false
   export let showButtons = false
+  export let emphasized: boolean = false
   export let buttonSize: IconSize = 'small'
   export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
   export let focusable: boolean = false
@@ -204,6 +205,7 @@
     {buttonSize}
     {maxHeight}
     {focusable}
+    {emphasized}
     on:changeSize
     on:attach={() => attach()}
   />
diff --git a/plugins/document-resources/src/components/CreateDocument.svelte b/plugins/document-resources/src/components/CreateDocument.svelte
index 4d8c114fd3..646cd6f23d 100644
--- a/plugins/document-resources/src/components/CreateDocument.svelte
+++ b/plugins/document-resources/src/components/CreateDocument.svelte
@@ -117,38 +117,32 @@
     />
   </div>
   <svelte:fragment slot="pool">
-    <div class="flex flex-wrap" style:gap={'0.2vw'}>
-      <UserBoxList
-        items={object.authors}
-        size="small"
-        label={document.string.Authors}
-        emptyLabel={document.string.Authors}
-        kind="no-border"
-        width={'min-content'}
-        on:update={({ detail }) => (object.authors = detail)}
-      />
-    </div>
-    <div class="flex flex-wrap" style:gap={'0.2vw'}>
-      <UserBoxList
-        items={object.approvers}
-        size="small"
-        label={document.string.Approvers}
-        emptyLabel={document.string.Approvers}
-        kind="no-border"
-        width={'min-content'}
-        on:update={({ detail }) => (object.approvers = detail)}
-      />
-    </div>
-    <div class="flex flex-wrap" style:gap={'0.2vw'}>
-      <UserBoxList
-        items={object.reviewers}
-        size="small"
-        label={document.string.Reviewers}
-        emptyLabel={document.string.Reviewers}
-        kind="no-border"
-        width={'min-content'}
-        on:update={({ detail }) => (object.reviewers = detail)}
-      />
-    </div>
+    <UserBoxList
+      items={object.authors}
+      size="small"
+      label={document.string.Authors}
+      emptyLabel={document.string.Authors}
+      kind="no-border"
+      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"
+      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"
+      width={'min-content'}
+      on:update={({ detail }) => (object.reviewers = detail)}
+    />
   </svelte:fragment>
 </Card>
diff --git a/plugins/hr-resources/src/components/Schedule.svelte b/plugins/hr-resources/src/components/Schedule.svelte
index 7f74429d22..f7641afa84 100644
--- a/plugins/hr-resources/src/components/Schedule.svelte
+++ b/plugins/hr-resources/src/components/Schedule.svelte
@@ -27,6 +27,7 @@
     deviceOptionsStore as deviceInfo,
     TabList
   } from '@hcengineering/ui'
+  import type { TabItem } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import hr from '../plugin'
   import ScheduleMonthView from './ScheduleView.svelte'
@@ -83,6 +84,11 @@
       else if (res.id === 'ModeYear') mode = CalendarMode.Year
     }
   }
+
+  const viewslist: TabItem[] = [
+    { id: 'chart', icon: view.icon.Views },
+    { id: 'stats', icon: view.icon.Table }
+  ]
 </script>
 
 <div class="ac-header divide {twoRows ? 'flex-col-reverse' : 'full'} withSettings">
@@ -151,20 +157,14 @@
     {/if}
     <div class="flex-row-center gap-2">
       {#if mode === CalendarMode.Month}
-        <Button
-          icon={view.icon.Views}
-          selected={display === 'chart'}
+        <TabList
+          items={viewslist}
+          multiselect={false}
+          selected={display}
+          kind={'secondary'}
           size={'small'}
-          on:click={() => {
-            display = 'chart'
-          }}
-        />
-        <Button
-          size={'small'}
-          icon={view.icon.Table}
-          selected={display === 'stats'}
-          on:click={() => {
-            display = 'stats'
+          on:select={(result) => {
+            if (result.detail !== undefined) display = result.detail.id
           }}
         />
       {/if}
diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte
index 23bc51ab65..22710c28bd 100644
--- a/plugins/inventory-resources/src/components/Categories.svelte
+++ b/plugins/inventory-resources/src/components/Categories.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { DocumentQuery } from '@hcengineering/core'
-  import { Button, Icon, Label, Scroller, SearchEdit, showPopup, IconAdd, eventToHTMLElement } from '@hcengineering/ui'
+  import { Button, Icon, Label, Scroller, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
   import type { Category } from '@hcengineering/inventory'
   import inventory from '../plugin'
   import CreateCategory from './CreateCategory.svelte'
@@ -29,8 +29,8 @@
     resultQuery = search === '' ? {} : { $search: search }
   }
 
-  function showCreateDialog (ev: MouseEvent) {
-    showPopup(CreateCategory, { space: inventory.space.Category }, eventToHTMLElement(ev))
+  function showCreateDialog () {
+    showPopup(CreateCategory, { space: inventory.space.Category }, 'top')
   }
 
   $: twoRows = $deviceInfo.twoRows
diff --git a/plugins/inventory-resources/src/components/CreateCategory.svelte b/plugins/inventory-resources/src/components/CreateCategory.svelte
index ddda1e355d..6cf08426f9 100644
--- a/plugins/inventory-resources/src/components/CreateCategory.svelte
+++ b/plugins/inventory-resources/src/components/CreateCategory.svelte
@@ -19,7 +19,7 @@
   import { OK, Status } from '@hcengineering/platform'
   import { Card, getClient } from '@hcengineering/presentation'
   import type { Category } from '@hcengineering/inventory'
-  import { EditBox, Grid, Status as StatusControl } from '@hcengineering/ui'
+  import { EditBox, Button, Status as StatusControl } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import inventory from '../plugin'
 
@@ -64,13 +64,10 @@
   }}
 >
   <StatusControl slot="error" {status} />
-  <Grid column={1} rowGap={1.5}>
-    <EditBox
-      label={inventory.string.Category}
-      icon={inventory.icon.Categories}
-      bind:value={name}
-      placeholder={inventory.string.Category}
-      focus
-    />
-  </Grid>
+  <div class="flex-row-center clear-mins">
+    <div class="mr-3">
+      <Button focusIndex={1} icon={inventory.icon.Categories} size={'medium'} kind={'link-bordered'} disabled />
+    </div>
+    <EditBox bind:value={name} placeholder={inventory.string.Category} kind={'large-style'} focus />
+  </div>
 </Card>
diff --git a/plugins/inventory-resources/src/components/CreateProduct.svelte b/plugins/inventory-resources/src/components/CreateProduct.svelte
index b63a01b504..da0f0d60ba 100644
--- a/plugins/inventory-resources/src/components/CreateProduct.svelte
+++ b/plugins/inventory-resources/src/components/CreateProduct.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { Account, generateId, Ref, Doc } from '@hcengineering/core'
   import { Card, createQuery, getClient } from '@hcengineering/presentation'
-  import { DropdownLabels, EditBox, Grid } from '@hcengineering/ui'
+  import { DropdownLabels, EditBox, Button } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import inventory from '../plugin'
   import { Category, Product } from '@hcengineering/inventory'
@@ -76,19 +76,18 @@
     dispatch('close')
   }}
 >
-  <Grid column={1} rowGap={1.75}>
-    <EditBox
-      label={inventory.string.Product}
-      icon={inventory.icon.Products}
-      bind:value={doc.name}
-      placeholder={inventory.string.Product}
-      focus
-    />
+  <div class="flex-row-center clear-mins">
+    <div class="mr-3">
+      <Button focusIndex={1} icon={inventory.icon.Products} size={'medium'} kind={'link-bordered'} disabled />
+    </div>
+    <EditBox bind:value={doc.name} placeholder={inventory.string.Product} kind={'large-style'} focus />
+  </div>
+  <svelte:fragment slot="pool">
     <DropdownLabels
       items={categories}
       bind:selected={doc.attachedTo}
       placeholder={inventory.string.Categories}
       label={inventory.string.Category}
     />
-  </Grid>
+  </svelte:fragment>
 </Card>
diff --git a/plugins/lead-resources/src/components/CreateCustomer.svelte b/plugins/lead-resources/src/components/CreateCustomer.svelte
index 3af5275f2b..ab51879894 100644
--- a/plugins/lead-resources/src/components/CreateCustomer.svelte
+++ b/plugins/lead-resources/src/components/CreateCustomer.svelte
@@ -180,7 +180,7 @@
     />
   </svelte:fragment>
   {#if targetClass._id === contact.class.Person}
-    <div class="flex-between flex-row-top mt-2 mb-2">
+    <div class="flex-between flex-row-top">
       <div class="flex-col flex-grow">
         <EditBox
           placeholder={contact.string.PersonFirstNamePlaceholder}
@@ -221,7 +221,7 @@
       </div>
     </div>
   {:else}
-    <div class="flex-row-center clear-mins mt-2 mb-2">
+    <div class="flex-row-center clear-mins">
       <div class="mr-3">
         <Button icon={contact.icon.Company} size={'medium'} kind={'link-bordered'} disabled />
       </div>
diff --git a/plugins/lead-resources/src/components/CreateLead.svelte b/plugins/lead-resources/src/components/CreateLead.svelte
index 0b6dd714c9..b736e5405e 100644
--- a/plugins/lead-resources/src/components/CreateLead.svelte
+++ b/plugins/lead-resources/src/components/CreateLead.svelte
@@ -20,7 +20,7 @@
   import { OK, Status } from '@hcengineering/platform'
   import { Card, getClient, SpaceSelector, UserBox } from '@hcengineering/presentation'
   import task, { calcRank } from '@hcengineering/task'
-  import { createFocusManager, EditBox, FocusHandler, Label, Status as StatusControl } from '@hcengineering/ui'
+  import { createFocusManager, EditBox, FocusHandler, Label, Status as StatusControl, Button } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import lead from '../plugin'
 
@@ -135,15 +135,15 @@
       <Label label={lead.string.CreateLead} />
     </div>
   </svelte:fragment>
+
   <StatusControl slot="error" {status} />
-  <EditBox
-    focusIndex={1}
-    label={lead.string.LeadName}
-    bind:value={title}
-    icon={lead.icon.Lead}
-    placeholder={lead.string.LeadPlaceholder}
-    focus
-  />
+  <div class="flex-row-center clear-mins">
+    <div class="mr-3">
+      <Button focusIndex={1} icon={lead.icon.Lead} size={'medium'} kind={'link-bordered'} disabled />
+    </div>
+    <EditBox focusIndex={1} bind:value={title} placeholder={lead.string.LeadPlaceholder} kind={'large-style'} focus />
+  </div>
+
   <svelte:fragment slot="pool">
     {#if !preserveCustomer}
       <UserBox
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 21affd35c3..fe672500af 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -471,78 +471,72 @@
     </div>
   </div>
   <svelte:fragment slot="pool">
-    <div class="flex-col flex-grow">
-      <div class="flex flex-wrap">
-        <ChannelsDropdown
-          editable={!loading}
-          focusIndex={10}
-          bind:value={channels}
-          highlighted={matchedChannels.map((it) => it.provider)}
-        />
-        <YesNo
-          disabled={loading}
-          focusIndex={100}
-          label={recruit.string.Onsite}
-          tooltip={recruit.string.WorkLocationPreferences}
-          bind:value={object.onsite}
-        />
-        <YesNo
-          disabled={loading}
-          focusIndex={101}
-          label={recruit.string.Remote}
-          tooltip={recruit.string.WorkLocationPreferences}
-          bind:value={object.remote}
-        />
-        <Component
-          is={tags.component.TagsDropdownEditor}
-          props={{
-            disabled: loading,
-            focusIndex: 102,
-            items: skills,
-            key,
-            targetClass: recruit.mixin.Candidate,
-            showTitle: false,
-            elements,
-            newElements,
-            countLabel: recruit.string.NumberSkills
-          }}
-          on:open={(evt) => {
-            addTagRef(evt.detail)
-          }}
-          on:delete={(evt) => {
-            skills = skills.filter((it) => it._id !== evt.detail)
-          }}
-        />
-      </div>
-      {#if skills.length > 0}
-        <div class="skills-box p-1 mt-2">
-          <Component
-            is={tags.component.TagsEditor}
-            props={{
-              disabled: loading,
-              focusIndex: 102,
-              items: skills,
-              key,
-              targetClass: recruit.mixin.Candidate,
-              showTitle: false,
-              elements,
-              newElements,
-              countLabel: recruit.string.NumberSkills
-            }}
-            on:open={(evt) => {
-              addTagRef(evt.detail)
-            }}
-            on:delete={(evt) => {
-              skills = skills.filter((it) => it._id !== evt.detail)
-            }}
-            on:change={(evt) => {
-              evt.detail.tag.weight = evt.detail.weight
-              skills = skills
-            }}
-          />
-        </div>
-      {/if}
-    </div>
+    <ChannelsDropdown
+      editable={!loading}
+      focusIndex={10}
+      bind:value={channels}
+      highlighted={matchedChannels.map((it) => it.provider)}
+    />
+    <YesNo
+      disabled={loading}
+      focusIndex={100}
+      label={recruit.string.Onsite}
+      tooltip={recruit.string.WorkLocationPreferences}
+      bind:value={object.onsite}
+    />
+    <YesNo
+      disabled={loading}
+      focusIndex={101}
+      label={recruit.string.Remote}
+      tooltip={recruit.string.WorkLocationPreferences}
+      bind:value={object.remote}
+    />
+    <Component
+      is={tags.component.TagsDropdownEditor}
+      props={{
+        disabled: loading,
+        focusIndex: 102,
+        items: skills,
+        key,
+        targetClass: recruit.mixin.Candidate,
+        showTitle: false,
+        elements,
+        newElements,
+        countLabel: recruit.string.NumberSkills
+      }}
+      on:open={(evt) => {
+        addTagRef(evt.detail)
+      }}
+      on:delete={(evt) => {
+        skills = skills.filter((it) => it._id !== evt.detail)
+      }}
+    />
+    {#if skills.length > 0}
+      <Component
+        is={tags.component.TagsEditor}
+        props={{
+          disabled: loading,
+          focusIndex: 102,
+          items: skills,
+          key,
+          targetClass: recruit.mixin.Candidate,
+          showTitle: false,
+          elements,
+          newElements,
+          countLabel: recruit.string.NumberSkills
+        }}
+        on:open={(evt) => {
+          addTagRef(evt.detail)
+        }}
+        on:delete={(evt) => {
+          skills = skills.filter((it) => it._id !== evt.detail)
+        }}
+        on:change={(evt) => {
+          evt.detail.tag.weight = evt.detail.weight
+          skills = skills
+        }}
+      />
+    {/if}
   </svelte:fragment>
 
   <svelte:fragment slot="footer">
@@ -606,7 +600,8 @@
 
 <style lang="scss">
   .resume {
-    padding: 0.5rem 0.75rem;
+    margin: -0.375rem 0rem -0.375rem -0.375rem;
+    padding: 0.375rem;
     background: var(--accent-bg-color);
     border: 1px dashed var(--divider-color);
     border-radius: 0.5rem;
diff --git a/plugins/recruit-resources/src/components/CreateVacancy.svelte b/plugins/recruit-resources/src/components/CreateVacancy.svelte
index 175ee39e68..4eaad0c30f 100644
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@@ -150,6 +150,21 @@
       />
     </div>
   </div>
+  {#key template?.description}
+    <AttachmentStyledBox
+      bind:this={descriptionBox}
+      {objectId}
+      _class={recruit.class.Vacancy}
+      space={objectId}
+      alwaysEdit
+      showButtons={false}
+      maxHeight={'card'}
+      content={template?.description ?? ''}
+      placeholder={recruit.string.FullDescription}
+      emphasized
+    />
+  {/key}
+
   <svelte:fragment slot="header">
     <UserBox
       focusIndex={3}
@@ -179,19 +194,6 @@
       }}
     />
   </svelte:fragment>
-  {#key template?.description}
-    <AttachmentStyledBox
-      bind:this={descriptionBox}
-      {objectId}
-      _class={recruit.class.Vacancy}
-      space={objectId}
-      alwaysEdit
-      showButtons={false}
-      maxHeight={'card'}
-      content={template?.description ?? ''}
-      placeholder={recruit.string.FullDescription}
-    />
-  {/key}
   <svelte:fragment slot="footer">
     <Button
       icon={IconAttachment}
diff --git a/plugins/recruit-resources/src/components/review/CreateOpinion.svelte b/plugins/recruit-resources/src/components/review/CreateOpinion.svelte
index e5d16297c4..fc871e3349 100644
--- a/plugins/recruit-resources/src/components/review/CreateOpinion.svelte
+++ b/plugins/recruit-resources/src/components/review/CreateOpinion.svelte
@@ -19,8 +19,8 @@
   import { Card, getClient } from '@hcengineering/presentation'
   import type { Opinion, Review } from '@hcengineering/recruit'
   import task, { SpaceWithStates } from '@hcengineering/task'
-  import { StyledTextEditor } from '@hcengineering/text-editor'
-  import { EditBox, Grid, Label, Status as StatusControl } from '@hcengineering/ui'
+  import { StyledTextArea } from '@hcengineering/text-editor'
+  import { EditBox, Status as StatusControl } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import recruit from '../../plugin'
 
@@ -88,27 +88,11 @@
   }}
 >
   <StatusControl slot="error" {status} />
-  <Grid column={1} rowGap={1.75}>
-    <EditBox
-      bind:value={doc.value}
-      label={recruit.string.OpinionValue}
-      placeholder={recruit.string.OpinionValuePlaceholder}
-      focus
-    />
-    <div class="mt-1 mb-1">
-      <Label label={recruit.string.Description} />:
-    </div>
-    <div class="description flex">
-      <StyledTextEditor bind:content={doc.description} />
-    </div>
-  </Grid>
+  <EditBox
+    bind:value={doc.value}
+    label={recruit.string.OpinionValue}
+    placeholder={recruit.string.OpinionValuePlaceholder}
+    focus
+  />
+  <StyledTextArea placeholder={recruit.string.Description} bind:content={doc.description} emphasized />
 </Card>
-
-<style lang="scss">
-  .description {
-    height: 10rem;
-    padding: 0.5rem;
-    border: 1px solid var(--theme-menu-divider);
-    border-radius: 8px;
-  }
-</style>
diff --git a/plugins/recruit-resources/src/components/review/CreateReview.svelte b/plugins/recruit-resources/src/components/review/CreateReview.svelte
index 201796f607..d4345ed3e1 100644
--- a/plugins/recruit-resources/src/components/review/CreateReview.svelte
+++ b/plugins/recruit-resources/src/components/review/CreateReview.svelte
@@ -21,7 +21,7 @@
   import { Card, getClient, UserBox, UserBoxList } from '@hcengineering/presentation'
   import type { Candidate, Review } from '@hcengineering/recruit'
   import task from '@hcengineering/task'
-  import { StyledTextBox } from '@hcengineering/text-editor'
+  import { StyledTextArea } from '@hcengineering/text-editor'
   import { DateRangePresenter, EditBox, Status as StatusControl } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
@@ -150,14 +150,7 @@
   <StatusControl slot="error" {status} />
   <EditBox placeholder={recruit.string.Title} bind:value={title} kind={'large-style'} focus />
   <EditBox placeholder={recruit.string.Location} bind:value={location} kind={'small-style'} />
-  <StyledTextBox
-    emphasized
-    showButtons={false}
-    bind:content={description}
-    label={recruit.string.Description}
-    alwaysEdit
-    placeholder={recruit.string.AddDescription}
-  />
+  <StyledTextArea bind:content={description} placeholder={recruit.string.AddDescription} emphasized />
   <svelte:fragment slot="pool">
     {#if !preserveCandidate}
       <UserBox
diff --git a/plugins/recruit-resources/src/components/review/Opinions.svelte b/plugins/recruit-resources/src/components/review/Opinions.svelte
index 344479e9f2..28ef40e07b 100644
--- a/plugins/recruit-resources/src/components/review/Opinions.svelte
+++ b/plugins/recruit-resources/src/components/review/Opinions.svelte
@@ -24,8 +24,8 @@
 
   export let opinions: number
 
-  const createApp = (ev: MouseEvent): void => {
-    showPopup(CreateOpinion, { review: objectId }, ev.target as HTMLElement)
+  const createApp = (): void => {
+    showPopup(CreateOpinion, { review: objectId }, 'top')
   }
 </script>
 
diff --git a/plugins/recruit-resources/src/components/review/Reviews.svelte b/plugins/recruit-resources/src/components/review/Reviews.svelte
index 82f9bee17e..17f8e16757 100644
--- a/plugins/recruit-resources/src/components/review/Reviews.svelte
+++ b/plugins/recruit-resources/src/components/review/Reviews.svelte
@@ -27,8 +27,8 @@
   export let reviews: number
   export let label: IntlString = recruit.string.Reviews
 
-  const createApp = (ev: MouseEvent): void => {
-    showPopup(CreateReview, { candidate: objectId, preserveCandidate: true }, ev.target as HTMLElement)
+  const createApp = (): void => {
+    showPopup(CreateReview, { candidate: objectId, preserveCandidate: true }, 'top')
   }
   let wSection: number
 </script>
diff --git a/plugins/tracker-assets/lang/en.json b/plugins/tracker-assets/lang/en.json
index 67bc774f7d..a37f04f0a7 100644
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@@ -103,7 +103,9 @@
     "DocumentColor": "",
     "Rank": "",
     "IssueTitlePlaceholder": "Issue title",
+    "SubIssueTitlePlaceholder": "Sub-issue title",
     "IssueDescriptionPlaceholder": "Add description",
+    "SubIssueDescriptionPlaceholder": "Add sub-issue description",
     "AddIssueTooltip": "Add issue...",
     "NewIssueDialogClose": "Do you want to close this dialog?",
     "NewIssueDialogCloseNote": "All changes will be lost",
diff --git a/plugins/tracker-assets/lang/ru.json b/plugins/tracker-assets/lang/ru.json
index 069f622145..60e765c75a 100644
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@@ -103,7 +103,9 @@
     "DocumentColor": "",
     "Rank": "",
     "IssueTitlePlaceholder": "Имя задачи",
+    "SubIssueTitlePlaceholder": "Имя подзадачи",
     "IssueDescriptionPlaceholder": "Описание задачи",
+    "SubIssueDescriptionPlaceholder": "Описание подзадачи",
     "AddIssueTooltip": "Добавить задачу\u2026",
     "NewIssueDialogClose": "Вы действительно хотите закрыть окно?",
     "NewIssueDialogCloseNote": "Все внесенные изменения будут потеряны",
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index ccb981f828..fe4a295663 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -699,69 +699,68 @@
     space={_space}
     alwaysEdit
     showButtons={false}
+    emphasized
     bind:content={object.description}
     placeholder={tracker.string.IssueDescriptionPlaceholder}
     on:changeSize={() => dispatch('changeContent')}
   />
   <IssueTemplateChilds bind:children={subIssues} sprint={object.sprint} project={object.project} isScrollable />
   <svelte:fragment slot="pool">
-    <div class="flex flex-wrap" style:gap={'0.2vw'}>
-      {#if issueStatuses}
-        <div id="status-editor">
-          <StatusEditor
-            value={object}
-            statuses={issueStatuses}
-            kind="no-border"
-            size="small"
-            shouldShowLabel={true}
-            on:change={({ detail }) => (object.status = detail)}
-          />
-        </div>
-        <PriorityEditor
+    {#if issueStatuses}
+      <div id="status-editor">
+        <StatusEditor
           value={object}
-          shouldShowLabel
-          isEditable
+          statuses={issueStatuses}
           kind="no-border"
           size="small"
-          justify="center"
-          on:change={({ detail }) => (object.priority = detail)}
+          shouldShowLabel={true}
+          on:change={({ detail }) => (object.status = detail)}
         />
-        <AssigneeEditor
-          value={object}
-          size="small"
-          kind="no-border"
-          width={'min-content'}
-          on:change={({ detail }) => (object.assignee = detail)}
-        />
-        <Component
-          is={tags.component.TagsDropdownEditor}
-          props={{
-            items: labels,
-            key,
-            targetClass: tracker.class.Issue,
-            countLabel: tracker.string.NumberLabels
-          }}
-          on:open={(evt) => {
-            addTagRef(evt.detail)
-          }}
-          on:delete={(evt) => {
-            labels = labels.filter((it) => it._id !== evt.detail)
-          }}
-        />
-        <EstimationEditor kind={'no-border'} size={'small'} value={object} />
-        <ProjectSelector value={object.project} onChange={handleProjectIdChanged} />
-        <SprintSelector
-          value={object.sprint}
-          onChange={handleSprintIdChanged}
-          useProject={(!originalIssue && object.project) || undefined}
-        />
-        {#if object.dueDate !== null}
-          <DatePresenter bind:value={object.dueDate} editable />
-        {/if}
-      {:else}
-        <Spinner size="small" />
+      </div>
+      <PriorityEditor
+        value={object}
+        shouldShowLabel
+        isEditable
+        kind="no-border"
+        size="small"
+        justify="center"
+        on:change={({ detail }) => (object.priority = detail)}
+      />
+      <AssigneeEditor
+        value={object}
+        size="small"
+        kind="no-border"
+        width={'min-content'}
+        on:change={({ detail }) => (object.assignee = detail)}
+      />
+      <Component
+        is={tags.component.TagsDropdownEditor}
+        props={{
+          items: labels,
+          key,
+          targetClass: tracker.class.Issue,
+          countLabel: tracker.string.NumberLabels
+        }}
+        on:open={(evt) => {
+          addTagRef(evt.detail)
+        }}
+        on:delete={(evt) => {
+          labels = labels.filter((it) => it._id !== evt.detail)
+        }}
+      />
+      <EstimationEditor kind={'no-border'} size={'small'} value={object} />
+      <ProjectSelector value={object.project} onChange={handleProjectIdChanged} />
+      <SprintSelector
+        value={object.sprint}
+        onChange={handleSprintIdChanged}
+        useProject={(!originalIssue && object.project) || undefined}
+      />
+      {#if object.dueDate !== null}
+        <DatePresenter bind:value={object.dueDate} editable />
       {/if}
-    </div>
+    {:else}
+      <Spinner size="small" />
+    {/if}
     <ActionIcon icon={IconMoreH} size={'medium'} action={showMoreActions} />
   </svelte:fragment>
   <svelte:fragment slot="footer">
diff --git a/plugins/tracker-resources/src/components/projects/NewProject.svelte b/plugins/tracker-resources/src/components/projects/NewProject.svelte
index 33f9c2e67f..0b2a4b4492 100644
--- a/plugins/tracker-resources/src/components/projects/NewProject.svelte
+++ b/plugins/tracker-resources/src/components/projects/NewProject.svelte
@@ -21,6 +21,7 @@
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
   import ProjectStatusSelector from './ProjectStatusSelector.svelte'
+  import { StyledTextArea } from '@hcengineering/text-editor'
 
   export let space: Ref<Team>
   const dispatch = createEventDispatcher()
@@ -63,17 +64,13 @@
   <svelte:fragment slot="header">
     <SpaceSelector _class={tracker.class.Team} label={tracker.string.Team} bind:space />
   </svelte:fragment>
-  <div class="label">
-    <EditBox bind:value={object.label} placeholder={tracker.string.ProjectNamePlaceholder} kind="large-style" focus />
-  </div>
-  <div class="description">
-    <EditBox
-      bind:value={object.description}
-      placeholder={tracker.string.ProjectDescriptionPlaceholder}
-      kind="editbox"
-    />
-  </div>
-  <div slot="pool" class="flex-row-center text-sm gap-1-5">
+  <EditBox bind:value={object.label} placeholder={tracker.string.ProjectNamePlaceholder} kind={'large-style'} focus />
+  <StyledTextArea
+    bind:content={object.description}
+    placeholder={tracker.string.ProjectDescriptionPlaceholder}
+    emphasized
+  />
+  <svelte:fragment slot="pool">
     <ProjectStatusSelector selectedProjectStatus={object.status} onProjectStatusChange={handleProjectStatusChanged} />
     <EmployeeBox
       label={tracker.string.ProjectLead}
@@ -87,7 +84,7 @@
     <!-- 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 />
-  </div>
+  </svelte:fragment>
 </Card>
 
 <style>
diff --git a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
index 0ec7ea2224..bd26bd6f14 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
@@ -74,105 +74,100 @@
   }
 </script>
 
-<div>
-  <div class="fs-title flex-between header">
-    <div class="flex-center">
-      <Label {label} />
-      <div class="projectTitle">
-        › <Label label={title} />
-      </div>
+<div class="fs-title flex-between header">
+  <div class="flex-center">
+    <Label {label} />
+    <div class="projectTitle">
+      › <Label label={title} />
     </div>
-    <Button size="small" icon={IconAdd} label={tracker.string.Project} kind="secondary" on:click={showCreateDialog} />
   </div>
-  <div class="itemsContainer">
+  <Button size="small" icon={IconAdd} label={tracker.string.Project} kind={'primary'} on:click={showCreateDialog} />
+</div>
+<div class="itemsContainer">
+  <div class="flex-center">
     <div class="flex-center">
-      <div class="flex-center">
-        <div class="buttonWrapper">
-          <Button
-            size="small"
-            shape="rectangle-right"
-            selected={mode === 'all'}
-            label={tracker.string.AllProjects}
-            on:click={() => handleViewModeChanged('all')}
-          />
-        </div>
-        <div class="buttonWrapper">
-          <Button
-            size="small"
-            shape="rectangle"
-            selected={mode === 'backlog'}
-            label={tracker.string.BacklogProjects}
-            on:click={() => handleViewModeChanged('backlog')}
-          />
-        </div>
-        <div class="buttonWrapper">
-          <Button
-            size="small"
-            shape="rectangle"
-            selected={mode === 'active'}
-            label={tracker.string.ActiveProjects}
-            on:click={() => handleViewModeChanged('active')}
-          />
-        </div>
-        <div class="buttonWrapper">
-          <Button
-            size="small"
-            shape="rectangle-left"
-            selected={mode === 'closed'}
-            label={tracker.string.ClosedProjects}
-            on:click={() => handleViewModeChanged('closed')}
-          />
-        </div>
-      </div>
-      <!-- <div class="ml-3 filterButton">
+      <div class="buttonWrapper">
         <Button
           size="small"
-          icon={IconAdd}
-          kind={'link-bordered'}
-          borderStyle={'dashed'}
-          label={tracker.string.Filter}
-          on:click={() => {}}
+          shape="rectangle-right"
+          selected={mode === 'all'}
+          label={tracker.string.AllProjects}
+          on:click={() => handleViewModeChanged('all')}
         />
-      </div> -->
+      </div>
+      <div class="buttonWrapper">
+        <Button
+          size="small"
+          shape="rectangle"
+          selected={mode === 'backlog'}
+          label={tracker.string.BacklogProjects}
+          on:click={() => handleViewModeChanged('backlog')}
+        />
+      </div>
+      <div class="buttonWrapper">
+        <Button
+          size="small"
+          shape="rectangle"
+          selected={mode === 'active'}
+          label={tracker.string.ActiveProjects}
+          on:click={() => handleViewModeChanged('active')}
+        />
+      </div>
+      <div class="buttonWrapper">
+        <Button
+          size="small"
+          shape="rectangle-left"
+          selected={mode === 'closed'}
+          label={tracker.string.ClosedProjects}
+          on:click={() => handleViewModeChanged('closed')}
+        />
+      </div>
     </div>
-    <!-- <div class="flex-center">
-      <div class="flex-center">
-        <div class="buttonWrapper">
-          <Button selected size="small" shape="rectangle-right" icon={tracker.icon.ProjectsList} />
-        </div>
-        <div class="buttonWrapper">
-          <Button size="small" shape="rectangle-left" icon={tracker.icon.ProjectsTimeline} />
-        </div>
-      </div>
-      <div class="ml-3">
-        <Button size="small" icon={IconOptions} />
-      </div>
+    <!-- <div class="ml-3 filterButton">
+      <Button
+        size="small"
+        icon={IconAdd}
+        kind={'link-bordered'}
+        borderStyle={'dashed'}
+        label={tracker.string.Filter}
+        on:click={() => {}}
+      />
     </div> -->
   </div>
-  <ProjectsListBrowser
-    _class={tracker.class.Project}
-    itemsConfig={[
-      { key: '', presenter: tracker.component.IconPresenter },
-      { key: '', presenter: tracker.component.ProjectPresenter, props: { kind: 'list' } },
-      {
-        key: '$lookup.lead',
-        presenter: tracker.component.LeadPresenter,
-        props: { _class: tracker.class.Project, defaultClass: contact.class.Employee, shouldShowLabel: false }
-      },
-      { key: '', presenter: tracker.component.ProjectMembersPresenter, props: { kind: 'link' } },
-      { key: '', presenter: tracker.component.TargetDatePresenter },
-      { key: '', presenter: tracker.component.ProjectStatusPresenter }
-    ]}
-    projects={resultProjects}
-  />
+  <!-- <div class="flex-center">
+    <div class="flex-center">
+      <div class="buttonWrapper">
+        <Button selected size="small" shape="rectangle-right" icon={tracker.icon.ProjectsList} />
+      </div>
+      <div class="buttonWrapper">
+        <Button size="small" shape="rectangle-left" icon={tracker.icon.ProjectsTimeline} />
+      </div>
+    </div>
+    <div class="ml-3">
+      <Button size="small" icon={IconOptions} />
+    </div>
+  </div> -->
 </div>
+<ProjectsListBrowser
+  _class={tracker.class.Project}
+  itemsConfig={[
+    { key: '', presenter: tracker.component.IconPresenter },
+    { key: '', presenter: tracker.component.ProjectPresenter, props: { kind: 'list' } },
+    {
+      key: '$lookup.lead',
+      presenter: tracker.component.LeadPresenter,
+      props: { _class: tracker.class.Project, defaultClass: contact.class.Employee, shouldShowLabel: false }
+    },
+    { key: '', presenter: tracker.component.ProjectMembersPresenter, props: { kind: 'link' } },
+    { key: '', presenter: tracker.component.TargetDatePresenter },
+    { key: '', presenter: tracker.component.ProjectStatusPresenter }
+  ]}
+  projects={resultProjects}
+/>
 
 <style lang="scss">
   .header {
-    min-height: 3.5rem;
-    padding-left: 2.25rem;
-    padding-right: 1.35rem;
-    border-bottom: 1px solid var(--theme-button-border-hovered);
+    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
   }
 
   .projectTitle {
diff --git a/plugins/tracker-resources/src/components/sprints/NewSprint.svelte b/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
index a54d5fda01..6ebbda4395 100644
--- a/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
+++ b/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
@@ -22,6 +22,7 @@
   import tracker from '../../plugin'
   import ProjectSelector from '../ProjectSelector.svelte'
   import SprintStatusSelector from './SprintStatusSelector.svelte'
+  import { StyledTextArea } from '@hcengineering/text-editor'
 
   export let space: Ref<Team>
   const dispatch = createEventDispatcher()
@@ -71,17 +72,13 @@
   <svelte:fragment slot="header">
     <SpaceSelector _class={tracker.class.Team} label={tracker.string.Team} bind:space />
   </svelte:fragment>
-  <div class="label">
-    <EditBox bind:value={object.label} placeholder={tracker.string.SprintNamePlaceholder} kind="large-style" focus />
-  </div>
-  <div class="description">
-    <EditBox
-      bind:value={object.description}
-      placeholder={tracker.string.ProjectDescriptionPlaceholder}
-      kind="editbox"
-    />
-  </div>
-  <div slot="pool" class="flex-row-center text-sm gap-1-5">
+  <EditBox bind:value={object.label} placeholder={tracker.string.SprintNamePlaceholder} kind={'large-style'} focus />
+  <StyledTextArea
+    bind:content={object.description}
+    placeholder={tracker.string.ProjectDescriptionPlaceholder}
+    emphasized
+  />
+  <svelte:fragment slot="pool">
     <SprintStatusSelector selectedSprintStatus={object.status} onSprintStatusChange={handleProjectStatusChanged} />
     <ProjectSelector value={object.project} onChange={handleProjectIdChanged} />
     <EmployeeBox
@@ -105,7 +102,7 @@
       label={tracker.string.TargetDate}
       detail={ui.string.SelectDate}
     />
-  </div>
+  </svelte:fragment>
 </Card>
 
 <style>
diff --git a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
index 2360404d50..53424ae081 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
@@ -86,7 +86,7 @@
       › <Label label={title} />
     </div>
   </div>
-  <Button size="small" icon={IconAdd} label={tracker.string.Sprint} kind="secondary" on:click={showCreateDialog} />
+  <Button size="small" icon={IconAdd} label={tracker.string.Sprint} kind={'primary'} on:click={showCreateDialog} />
 </div>
 <div class="itemsContainer">
   <div class="flex-center">
@@ -183,10 +183,7 @@
 
 <style lang="scss">
   .header {
-    min-height: 3.5rem;
-    padding-left: 2.25rem;
-    padding-right: 1.35rem;
-    border-bottom: 1px solid var(--theme-button-border-hovered);
+    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
   }
 
   .projectTitle {
diff --git a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
index 496654d9d0..c767a5249f 100644
--- a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
@@ -136,32 +136,20 @@
   createMore={false}
 >
   <svelte:fragment slot="header">
-    <div class="flex-row-center">
-      <SpaceSelector
-        _class={tracker.class.Team}
-        label={tracker.string.Team}
-        bind:space={_space}
-        on:space={(evt) => {
-          spaceRef = evt.detail
-        }}
-      />
-    </div>
+    <SpaceSelector
+      _class={tracker.class.Team}
+      label={tracker.string.Team}
+      bind:space={_space}
+      on:space={(evt) => {
+        spaceRef = evt.detail
+      }}
+    />
   </svelte:fragment>
   <svelte:fragment slot="title" let:label>
-    <div class="flex-row-center gap-1">
-      <div class="mr-2">
-        <Label {label} />
-      </div>
-    </div>
+    <Label {label} />
   </svelte:fragment>
 
-  <EditBox
-    bind:value={object.title}
-    placeholder={tracker.string.IssueTitlePlaceholder}
-    maxWidth={'37.5rem'}
-    kind={'large-style'}
-    focus
-  />
+  <EditBox bind:value={object.title} placeholder={tracker.string.IssueTitlePlaceholder} kind={'large-style'} focus />
   <AttachmentStyledBox
     bind:this={descriptionBox}
     {objectId}
@@ -169,7 +157,7 @@
     space={_space}
     alwaysEdit
     showButtons={false}
-    maxHeight={'card'}
+    emphasized
     bind:content={object.description}
     placeholder={tracker.string.IssueDescriptionPlaceholder}
   />
@@ -180,42 +168,40 @@
     teamId={spaceRef?.identifier ?? 'TSK'}
   />
   <svelte:fragment slot="pool">
-    <div class="flex flex-wrap" style:gap={'0.2vw'}>
-      <PriorityEditor
-        value={object}
-        shouldShowLabel
-        isEditable
-        kind="no-border"
-        size="small"
-        justify="center"
-        on:change={({ detail }) => (object.priority = detail)}
-      />
-      <AssigneeEditor
-        value={object}
-        size="small"
-        kind="no-border"
-        width={'min-content'}
-        on:change={({ detail }) => (object.assignee = detail)}
-      />
-      <Component
-        is={tags.component.TagsDropdownEditor}
-        props={{
-          items: labels,
-          key,
-          targetClass: tracker.class.Issue,
-          countLabel: tracker.string.NumberLabels
-        }}
-        on:open={(evt) => {
-          addTagRef(evt.detail)
-        }}
-        on:delete={(evt) => {
-          labels = labels.filter((it) => it._id !== evt.detail)
-        }}
-      />
-      <EstimationEditor kind={'no-border'} size={'small'} value={object} />
-      <ProjectSelector value={object.project} onChange={handleProjectIdChanged} />
-      <SprintSelector value={object.sprint} onChange={handleSprintIdChanged} useProject={object.project ?? undefined} />
-    </div>
+    <PriorityEditor
+      value={object}
+      shouldShowLabel
+      isEditable
+      kind="no-border"
+      size="small"
+      justify="center"
+      on:change={({ detail }) => (object.priority = detail)}
+    />
+    <AssigneeEditor
+      value={object}
+      size="small"
+      kind="no-border"
+      width={'min-content'}
+      on:change={({ detail }) => (object.assignee = detail)}
+    />
+    <Component
+      is={tags.component.TagsDropdownEditor}
+      props={{
+        items: labels,
+        key,
+        targetClass: tracker.class.Issue,
+        countLabel: tracker.string.NumberLabels
+      }}
+      on:open={(evt) => {
+        addTagRef(evt.detail)
+      }}
+      on:delete={(evt) => {
+        labels = labels.filter((it) => it._id !== evt.detail)
+      }}
+    />
+    <EstimationEditor kind={'no-border'} size={'small'} value={object} />
+    <ProjectSelector value={object.project} onChange={handleProjectIdChanged} />
+    <SprintSelector value={object.sprint} onChange={handleSprintIdChanged} useProject={object.project ?? undefined} />
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
index f15f91fb16..b5d414fcb2 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildEditor.svelte
@@ -107,28 +107,26 @@
   $: labelRefs = labels.map((it) => ({ ...(it as unknown as TagReference), _id: generateId(), tag: it._id }))
 </script>
 
-<div bind:this={thisRef} class="flex-col root clear-mins" class:antiPopup={showBorder}>
-  <div class="flex-row-top clear-mins">
-    <div class="w-full flex-col content">
-      <EditBox
-        bind:value={newIssue.title}
-        bind:focusInput={focusIssueTitle}
-        maxWidth="33rem"
-        placeholder={tracker.string.IssueTitlePlaceholder}
-        focus
-      />
-      <div class="mt-4 clear-mins">
-        {#key newIssue.description}
-          <StyledTextArea
-            bind:content={newIssue.description}
-            placeholder={tracker.string.IssueDescriptionPlaceholder}
-            showButtons={false}
-            {isScrollable}
-            {maxHeight}
-            on:changeContent
-          />
-        {/key}
-      </div>
+<div bind:this={thisRef} class="flex-col antiEmphasized clear-mins" class:antiPopup={showBorder}>
+  <div class="flex-col w-full clear-mins">
+    <EditBox
+      bind:value={newIssue.title}
+      bind:focusInput={focusIssueTitle}
+      kind={'large-style'}
+      placeholder={tracker.string.SubIssueTitlePlaceholder}
+      focus
+    />
+    <div class="mt-4 clear-mins">
+      {#key newIssue.description}
+        <StyledTextArea
+          bind:content={newIssue.description}
+          placeholder={tracker.string.SubIssueDescriptionPlaceholder}
+          showButtons={false}
+          {isScrollable}
+          {maxHeight}
+          on:changeContent
+        />
+      {/key}
     </div>
   </div>
   <div class="mt-4 flex-between">
@@ -186,17 +184,3 @@
     </div>
   </div>
 </div>
-
-<style lang="scss">
-  .root {
-    padding: 0.5rem 1.5rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-button-border-enabled);
-    border-radius: 0.5rem;
-    overflow: hidden;
-
-    .content {
-      padding-top: 0.3rem;
-    }
-  }
-</style>
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
index 826d53dc4e..a1c631a270 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
@@ -76,7 +76,7 @@
     labelParams={{ subIssues: 0 }}
     kind={'transparent'}
     size={'small'}
-    showTooltip={{ label: tracker.string.AddSubIssues, props: { subIssues: 1 }, direction: 'bottom' }}
+    showTooltip={{ label: tracker.string.AddSubIssues, props: { subIssues: 1 } }}
     on:click={() => {
       closeTooltip()
       isCreating = true
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
index ca0112f09d..524039d137 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
@@ -77,10 +77,10 @@
   </svelte:fragment>
   <svelte:fragment slot="extra">
     <Button
-      size="small"
+      size={'small'}
       icon={IconAdd}
       label={tracker.string.IssueTemplate}
-      kind="secondary"
+      kind={'primary'}
       on:click={showCreateDialog}
     />
 
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 3b7eb790f0..518ea0dc35 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -165,7 +165,9 @@ export default mergeIds(trackerId, tracker, {
     Duplicate: '' as IntlString,
 
     IssueTitlePlaceholder: '' as IntlString,
+    SubIssueTitlePlaceholder: '' as IntlString,
     IssueDescriptionPlaceholder: '' as IntlString,
+    SubIssueDescriptionPlaceholder: '' as IntlString,
     Unassigned: '' as IntlString,
     AddIssueTooltip: '' as IntlString,
     NewIssueDialogClose: '' as IntlString,
diff --git a/plugins/view-resources/src/components/ViewletSetting.svelte b/plugins/view-resources/src/components/ViewletSetting.svelte
index ca20659bcc..671a946fe1 100644
--- a/plugins/view-resources/src/components/ViewletSetting.svelte
+++ b/plugins/view-resources/src/components/ViewletSetting.svelte
@@ -258,10 +258,10 @@
     dispatch('close')
   }}
 >
-  <div class="flex flex-wrap flex-row">
+  <div class="flex-row-stretch flex-wrap">
     {#each attributes as attribute, i}
       <div
-        class="mr-2 mb-2"
+        class="m-0-5 border-radius-1 overflow-label"
         style={getStyle(attribute)}
         bind:this={elements[i]}
         draggable={true}