UBER-87, TSK-1324: update icons and popups. (#3209)

models/contact/src/index.ts

@@ -615,6 +615,7 @@ export function createModel (builder: Builder): void {
     {
       action: contact.actionImpl.KickEmployee,
       label: contact.string.KickEmployee,
+      icon: contact.icon.KickUser,
       query: {
         active: true
       },
@@ -634,6 +635,7 @@ export function createModel (builder: Builder): void {
     {
       action: contact.actionImpl.KickEmployee,
       label: contact.string.DeleteEmployee,
+      icon: contact.icon.KickUser,
       query: {
         active: false
       },

models/recruit/src/index.ts

@@ -296,7 +296,7 @@ export function createModel (builder: Builder): void {
           {
             id: talentsId,
             component: workbench.component.SpecialView,
-            icon: contact.icon.Person,
+            icon: recruit.icon.Talents,
             label: recruit.string.Talents,
             componentProps: {
               _class: recruit.mixin.Candidate,
@@ -873,7 +873,7 @@ export function createModel (builder: Builder): void {
 
   createAction(builder, {
     label: recruit.string.EditVacancy,
-    icon: recruit.icon.Vacancy,
+    icon: view.icon.Edit,
     action: view.actionImpl.ShowPanel,
     actionProps: {
       component: recruit.component.EditVacancy,
@@ -1013,7 +1013,6 @@ export function createModel (builder: Builder): void {
       group: 'edit'
     }
   })
-  // TODO: fix icons
   createAction(
     builder,
     {
@@ -1022,7 +1021,7 @@ export function createModel (builder: Builder): void {
         textProvider: recruit.function.IdProvider
       },
       label: recruit.string.CopyId,
-      icon: recruit.icon.Application,
+      icon: view.icon.CopyId,
       keyBinding: [],
       input: 'none',
       category: recruit.category.Recruit,
@@ -1043,7 +1042,7 @@ export function createModel (builder: Builder): void {
         textProvider: recruit.function.GetObjectLink
       },
       label: recruit.string.CopyLink,
-      icon: recruit.icon.Application,
+      icon: view.icon.CopyLink,
       keyBinding: [],
       input: 'none',
       category: recruit.category.Recruit,
@@ -1064,7 +1063,7 @@ export function createModel (builder: Builder): void {
         textProvider: recruit.function.GetObjectLink
       },
       label: recruit.string.CopyLink,
-      icon: recruit.icon.Application,
+      icon: view.icon.CopyLink,
       keyBinding: [],
       input: 'none',
       category: recruit.category.Recruit,

models/recruit/src/review.ts

@@ -86,7 +86,7 @@ export function createReviewModel (builder: Builder): void {
       }
     },
     label: recruit.string.CreateReview,
-    icon: recruit.icon.Create,
+    icon: recruit.icon.Schedule,
     input: 'focus',
     category: recruit.category.Recruit,
     target: recruit.mixin.Candidate,

models/tracker/src/index.ts

@@ -1184,7 +1184,7 @@ export function createModel (builder: Builder): void {
         element: 'top'
       },
       label: tracker.string.NewIssue,
-      icon: tracker.icon.Issue,
+      icon: tracker.icon.NewIssue,
       keyBinding: ['keyC'],
       input: 'none',
       category: tracker.category.Tracker,
@@ -1211,7 +1211,7 @@ export function createModel (builder: Builder): void {
         }
       },
       label: tracker.string.NewSubIssue,
-      icon: tracker.icon.Issue,
+      icon: tracker.icon.Subissue,
       keyBinding: [],
       input: 'focus',
       category: tracker.category.Tracker,
@@ -1225,32 +1225,6 @@ export function createModel (builder: Builder): void {
     tracker.action.NewSubIssue
   )
 
-  createAction(
-    builder,
-    {
-      action: view.actionImpl.ShowPopup,
-      actionProps: {
-        component: tracker.component.CreateIssue,
-        element: 'top',
-        fillProps: {
-          _object: 'relatedTo',
-          space: 'space'
-        }
-      },
-      label: tracker.string.NewRelatedIssue,
-      icon: tracker.icon.Issue,
-      keyBinding: [],
-      input: 'focus',
-      category: tracker.category.Tracker,
-      target: core.class.Doc,
-      context: {
-        mode: ['context', 'browser', 'editor'],
-        group: 'associate'
-      }
-    },
-    tracker.action.NewRelatedIssue
-  )
-
   createAction(
     builder,
     {
@@ -1277,6 +1251,32 @@ export function createModel (builder: Builder): void {
     tracker.action.SetParent
   )
 
+  createAction(
+    builder,
+    {
+      action: view.actionImpl.ShowPopup,
+      actionProps: {
+        component: tracker.component.CreateIssue,
+        element: 'top',
+        fillProps: {
+          _object: 'relatedTo',
+          space: 'space'
+        }
+      },
+      label: tracker.string.NewRelatedIssue,
+      icon: tracker.icon.NewIssue,
+      keyBinding: [],
+      input: 'focus',
+      category: tracker.category.Tracker,
+      target: core.class.Doc,
+      context: {
+        mode: ['context', 'browser', 'editor'],
+        group: 'associate'
+      }
+    },
+    tracker.action.NewRelatedIssue
+  )
+
   createAction(builder, {
     action: view.actionImpl.ShowPopup,
     actionPopup: tracker.component.SetParentIssueActionPopup,
@@ -1617,7 +1617,7 @@ export function createModel (builder: Builder): void {
         textProvider: tracker.function.GetIssueId
       },
       label: tracker.string.CopyIssueId,
-      icon: tracker.icon.CopyID,
+      icon: view.icon.CopyId,
       keyBinding: [],
       input: 'focus',
       category: tracker.category.Tracker,
@@ -1659,7 +1659,7 @@ export function createModel (builder: Builder): void {
         textProvider: tracker.function.GetIssueLink
       },
       label: tracker.string.CopyIssueUrl,
-      icon: tracker.icon.CopyURL,
+      icon: view.icon.CopyLink,
       keyBinding: [],
       input: 'focus',
       category: tracker.category.Tracker,
@@ -1690,7 +1690,6 @@ export function createModel (builder: Builder): void {
     },
     tracker.action.MoveToProject
   )
-  // TODO: fix icon
   createAction(
     builder,
     {
@@ -1700,7 +1699,7 @@ export function createModel (builder: Builder): void {
         attribute: ''
       },
       label: tracker.string.Relations,
-      icon: tracker.icon.Document,
+      icon: tracker.icon.Relations,
       keyBinding: [],
       input: 'focus',
       category: tracker.category.Tracker,

packages/presentation/src/components/DocPopup.svelte

@@ -17,11 +17,12 @@
   import type { IntlString } from '@hcengineering/platform'
   import {
     Button,
-    EditBox,
+    EditWithIcon,
     FocusHandler,
     Icon,
     IconAdd,
     IconCheck,
+    IconSearch,
     ListView,
     createFocusManager,
     deviceOptionsStore,
@@ -48,7 +49,7 @@
   export let ignoreObjects: Ref<Doc>[] = []
   export let shadows: boolean = true
   export let width: 'medium' | 'large' | 'full' = 'medium'
-  export let size: 'small' | 'medium' | 'large' = 'small'
+  export let size: 'small' | 'medium' | 'large' = 'large'
 
   export let searchField: string = 'name'
   export let noSearchField: boolean = false
@@ -190,9 +191,10 @@
   }}
 >
   <div class="header flex-between">
-    <EditBox
+    <EditWithIcon
-      kind={'search-style'}
+      icon={IconSearch}
-      focusIndex={1}
+      size={'large'}
+      width={'100%'}
       focus={!$deviceOptionsStore.isMobile}
       bind:value={search}
       on:change={() => dispatch('search', search)}
@@ -200,7 +202,7 @@
       {placeholder}
     />
     {#if create !== undefined}
-      <div class="mx-2">
+      <div class="ml-2">
         <Button
           focusIndex={2}
           kind={'transparent'}
@@ -224,6 +226,7 @@
             {@const obj = toAny(objects[item])}
             {#if item === 0 || (item > 0 && toAny(objects[item - 1])[groupBy] !== obj[groupBy])}
               <!--Category for first item-->
+              {#if item > 0}<div class="menu-separator" />{/if}
               <div class="category-box">
                 <slot name="category" item={obj} />
               </div>
@@ -240,19 +243,18 @@
               handleSelection(undefined, objects, item)
             }}
           >
+            <span class="label" class:disabled={readonly || isDeselectDisabled}>
+              <slot name="item" item={obj} />
+            </span>
             {#if (allowDeselect && selected) || multiSelect || selected}
               <div class="check" class:disabled={readonly}>
                 {#if obj._id === selected || selectedElements.has(obj._id)}
                   <div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                    <Icon icon={IconCheck} {size} />
+                    <Icon icon={IconCheck} size={'small'} />
                   </div>
                 {/if}
               </div>
             {/if}
-
-            <span class="label" class:disabled={readonly || isDeselectDisabled}>
-              <slot name="item" item={obj} />
-            </span>
           </button>
         </svelte:fragment>
       </ListView>
@@ -261,6 +263,7 @@
   {#if cHeight === -1}
     <div class="whereSelected" />
   {/if}
+  <div class="menu-space" />
 </div>
 
 <style lang="scss">

packages/presentation/src/components/NavLink.svelte

@@ -22,6 +22,7 @@
   export let inline = false
   export let colorInherit: boolean = false
   export let shrink: number = 0
+  export let accent: boolean = false
 
   function clickHandler (e: MouseEvent) {
     if (disabled) return
@@ -55,13 +56,22 @@
     class:noUnderline
     class:inline
     class:colorInherit
+    class:fs-bold={accent}
     style:flex-shrink={shrink}
     on:click={clickHandler}
   >
     <slot />
   </span>
 {:else}
-  <a {href} class:noUnderline class:inline class:colorInherit style:flex-shrink={shrink} on:click={clickHandler}>
+  <a
+    {href}
+    class:noUnderline
+    class:inline
+    class:colorInherit
+    class:fs-bold={accent}
+    style:flex-shrink={shrink}
+    on:click={clickHandler}
+  >
     <slot />
   </a>
 {/if}
@@ -89,7 +99,6 @@
     }
 
     &.noUnderline {
-      font-weight: 500;
       &:not(.colorInherit) {
         color: var(--theme-caption-color);
       }

packages/presentation/src/components/ObjectPopup.svelte

@@ -35,7 +35,7 @@
   export let ignoreObjects: Ref<Doc>[] = []
   export let shadows: boolean = true
   export let width: 'medium' | 'large' | 'full' = 'medium'
-  export let size: 'small' | 'medium' | 'large' = 'small'
+  export let size: 'small' | 'medium' | 'large' = 'large'
 
   export let searchField: string = 'name'
   export let noSearchField: boolean = false

packages/presentation/src/components/SpacesMultiPopup.svelte

@@ -15,9 +15,8 @@
 <script lang="ts">
   import core, { Class, Ref, Space } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
-  import { translate } from '@hcengineering/platform'
+  import { CheckBox, deviceOptionsStore, resizeObserver, tooltip, EditWithIcon, IconSearch } from '@hcengineering/ui'
-  import { CheckBox, deviceOptionsStore, resizeObserver, tooltip } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
-  import { createEventDispatcher, onMount } from 'svelte'
   import presentation from '..'
   import { createQuery } from '../utils'
   import SpaceInfo from './SpaceInfo.svelte'
@@ -26,13 +25,13 @@
   export let allowDeselect: boolean = false
   export let titleDeselect: IntlString | undefined = undefined
   export let placeholder: IntlString = presentation.string.Search
+  export let placeholderParam: any | undefined = undefined
   export let selected: Ref<Space> | undefined
   export let selectedSpaces: Ref<Space>[] = []
 
   let searchQuery: string = ''
   let spaces: Space[] = []
   let shownSpaces: Space[] = []
-  let input: HTMLInputElement
 
   const dispatch = createEventDispatcher()
   const query = createQuery()
@@ -57,13 +56,6 @@
     })
   }
 
-  let phTraslate: string = ''
-  $: if (placeholder) {
-    translate(placeholder, {}).then((res) => {
-      phTraslate = res
-    })
-  }
-
   const isSelected = (space: Space): boolean => {
     if (selectedSpaces.filter((s) => s === space._id).length > 0) return true
     return false
@@ -78,15 +70,20 @@
     spaces = spaces
     dispatch('update', selectedSpaces)
   }
-
-  onMount(() => {
-    if (input && !$deviceOptionsStore.isMobile) input.focus()
-  })
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header">
-    <input bind:this={input} type="text" bind:value={searchQuery} placeholder={phTraslate} on:change />
+    <EditWithIcon
+      icon={IconSearch}
+      size={'large'}
+      width={'100%'}
+      focus={!$deviceOptionsStore.isMobile}
+      bind:value={searchQuery}
+      {placeholder}
+      {placeholderParam}
+      on:change
+    />
   </div>
   <div class="scroll">
     <div class="box">
@@ -102,7 +99,7 @@
           </div>
           <SpaceInfo size={'medium'} value={space} />
           {#if allowDeselect && space._id === selected}
-            <div class="check-right pointer-events-none">
+            <div class="check pointer-events-none">
               {#if titleDeselect}
                 <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
                   <CheckBox checked circle primary />
@@ -116,4 +113,5 @@
       {/each}
     </div>
   </div>
+  <div class="menu-space" />
 </div>

packages/theme/styles/_colors.scss

@@ -117,6 +117,8 @@
   --theme-kanban-card-border: transparent;
   --theme-kanban-card-footer: rgba(217, 217, 217, .07);
 
+  --theme-editbox-focus-color: rgba(255, 255, 255, .04);
+  --theme-editbox-focus-border: #5190EC;
   --theme-tablist-color: rgba(0, 0, 0, .02);
   --theme-tablist-plain-color: #2A64C4; // Light
   --theme-tablist-plain-divider: rgba(255, 255, 255, .07); // Light invert
@@ -125,11 +127,11 @@
   --theme-checkbox-border: rgba(0, 0, 0, .12);
   --theme-checkbox-disabled: #999;
   --theme-progress-color: #FFFFFF;
-  --theme-popup-color: #292938;
+  --theme-popup-color: #2A2939;
-  --theme-popup-hover: #32323F;
+  --theme-popup-hover: #333240;
-  --theme-popup-divider: rgba(255, 255, 255, .1);
+  --theme-popup-divider: rgba(255, 255, 255, .09);
   --theme-popup-header: #3A3A47;
-  --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
+  --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-panel-color: #1A1A28;
   --theme-calendar-today-color: #fff;
   --theme-calendar-holiday-color: #eb5757;
@@ -139,10 +141,11 @@
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
 
   --theme-error-color: #eb5757;
+  --theme-urgent-color: #F5694A;
   --theme-warning-color: #f2994a;
   --theme-lost-color: #eb5757;
   --theme-won-color: #34DB80;
-  --theme-caret-color: #6e5ed2;
+  --theme-caret-color: #fff;
 
   --body-color: #1f2023;
   --body-accent: #222326;
@@ -284,6 +287,8 @@
   --theme-kanban-card-border: rgba(0, 0, 0, .04);
   --theme-kanban-card-footer: rgba(0, 0, 0, .04);
 
+  --theme-editbox-focus-color: rgba(0, 0, 0, .08);
+  --theme-editbox-focus-border: #5190EC;
   --theme-tablist-color: rgba(0, 0, 0, .02);
   --theme-tablist-plain-color: #2A64C4;
   --theme-tablist-plain-divider: rgba(0, 0, 0, .07);
@@ -293,10 +298,10 @@
   --theme-checkbox-disabled: #999;
   --theme-progress-color: rgba(0, 0, 0, .5);
   --theme-popup-color: #FFFFFF;
-  --theme-popup-hover: #F5F5F5;
+  --theme-popup-hover: #EBEBEB;
-  --theme-popup-divider: rgba(0, 0, 0, .1);
+  --theme-popup-divider: rgba(0, 0, 0, .09);
   --theme-popup-header: #EBEBEB;
-  --theme-popup-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
+  --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-panel-color: #FFFFFF;
   --theme-calendar-today-color: #000;
   --theme-calendar-holiday-color: #eb5757;
@@ -306,10 +311,11 @@
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
 
   --theme-error-color: #eb5757;  // Dark
+  --theme-urgent-color: #F5694A;
   --theme-warning-color: #f2994a;  // Dark
   --theme-lost-color: #eb5757;  // Dark
   --theme-won-color: #34DB80;  // Dark
-  --theme-caret-color: #6e5ed2;
+  --theme-caret-color: #669AFF;
 
   --body-color: #fff;
   --body-accent: #fafafa; // HZ

packages/theme/styles/_layouts.scss

@@ -679,6 +679,10 @@ input.search {
   width: .75rem;
   height: .75rem;
 }
+.svg-smaller {
+  width: .875rem;
+  height: .875rem;
+}
 .svg-small {
   width: 1rem;
   height: 1rem;

packages/theme/styles/components.scss

@@ -740,8 +740,8 @@
 // Labels on the ListView
 .list-container .listitems-container,
 .list-container .listitems-container:hover,
-.list-container .button,
+.list-container .button.list,
-.list-container .button:hover {
+.list-container .button.list:hover {
   background-color: var(--theme-list-button-color) !important;
   .icon { color: var(--theme-halfcontent-color) !important; }
   .label { color: var(--theme-halfcontent-color) !important; }

packages/theme/styles/popups.scss

@@ -20,10 +20,9 @@
   flex-direction: column;
   width: fit-content;
   min-width: 10rem;
-  max-width: 15rem;
+  max-width: 17rem;
   max-height: 22rem;
   background: var(--theme-popup-color);
-  // border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
   box-shadow: var(--theme-popup-shadow);
 
@@ -49,16 +48,11 @@
     max-width: 40rem !important;
   }
   .header {
+    margin-bottom: .5rem;
+    padding: .5rem;
     border-bottom: 1px solid var(--theme-popup-divider);
 
     &.no-border { border-bottom-color: transparent; }
-    input {
-      margin: 0;
-      padding: .625rem .75rem;
-      color: #d6d6d6;
-      border: none;
-      caret-color: var(--theme-caret-color);
-    }
     .clear-btn {
       display: flex;
       justify-content: center;
@@ -103,22 +97,32 @@
     flex-shrink: 0;
     justify-content: flex-start;
     padding: .25rem .5rem;
+    // width: 100%;
+    min-width: 0;
     min-height: 2.25rem;
     text-align: left;
-    color: var(--theme-content-color);
+    color: var(--theme-caption-color);
+    border-radius: .25rem;
     cursor: pointer;
-
+    
     &.high { height: 3rem; }
-
+    
     .icon, .color, .tag {
       flex-shrink: 0;
-      margin-right: .375rem;
+      margin-right: .5rem;
     }
-    .icon {
+    .icon,
+    .check {
       width: 1rem;
       height: 1rem;
       color: var(--theme-dark-color);
     }
+    .check {
+      flex-shrink: 0;
+      margin-left: .5rem;
+
+      &.ml-3 { margin-left: .75rem; }
+    }
     .color {
       width: .875rem;
       height: .875rem;
@@ -136,33 +140,22 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      color: var(--theme-caption-color);
     }
-    .check {
+
-      flex-shrink: 0;
+    &:not(.withList) {
-      width: 1rem;
+      margin: 0 .5rem;
-      height: 1rem;
-      margin-right: .375rem;
-      color: var(--theme-caret-color);
     }
-    .check-right { margin: 0 0 0 2rem; }
     &:not(.withList, .no-focus):focus,
     &:not(.withList):hover {
       background-color: var(--theme-popup-hover);
     }
-    &:not(.withList, .no-focus):focus,
-    &:not(.withList):hover,
-    &.selected,
-    &:hover {
-      color: var(--theme-caption-color);
-
-      .icon { color: var(--theme-content-color); }
-    }
   }
   .sticky-wrapper {
     display: flex;
     flex-direction: column;
 
-    &:not(:first-child) { margin-top: 1px; }
+    // &:not(:first-child) { margin-top: 1px; }
   }
   .menu-group {
     overflow: hidden;
@@ -178,13 +171,14 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: .375rem .25rem;
+      padding: .25rem 1rem;
-      min-height: 1.5rem;
+      min-height: 2rem;
       font-weight: 500;
-      font-size: .75rem;
+      font-size: .625rem;
+      text-transform: uppercase;
       text-align: left;
-      color: var(--theme-content-color);
+      color: var(--theme-caption-color);
-      background-color: var(--theme-popup-header);
+      background-color: var(--theme-popup-color);
       cursor: pointer;
 
       .icon {
@@ -202,6 +196,16 @@
     height: 2px;
     background-color: var(--theme-caret-color);
   }
+  .menu-space {
+    flex-shrink: 0;
+    height: .5rem;
+  }
+  .menu-separator {
+    flex-shrink: 0;
+    margin: .5rem 0;
+    height: 1px;
+    background-color: var(--theme-popup-divider);
+  }
 }
 
 .antiPopup {
@@ -212,7 +216,7 @@
   min-width: 0;
   max-width: 30rem;
   background: var(--theme-popup-color);
-  border-radius: .25rem;
+  border-radius: .5rem;
   box-shadow: var(--theme-popup-shadow);
   user-select: none;
 
@@ -243,14 +247,18 @@
   .ap-menuItem {
     flex-shrink: 0;
     justify-content: flex-start;
-    padding: 0 .5rem;
-    height: 2rem;
-    color: var(--theme-content-color);
     text-align: left;
+    color: var(--theme-caption-color);
     cursor: pointer;
-
+    
-    &.ap-woScroll { margin: 0 .5rem; }
+    &:not(.separator) {
-    &.selected { background: var(--theme-popup-hover); }
+      margin: 0 .5rem;
+      padding: .25rem .5rem;
+      min-height: 2.25rem;
+      border-radius: .25rem;
+    }
+    &.selected,
+    &.hoverable:hover { background: var(--theme-popup-hover); }
     &.empty {
       display: flex;
       justify-content: center;
@@ -265,10 +273,8 @@
     }
     &.withCheck { justify-content: space-between; }
     &.withIcon {
-      margin: 0;
-  
       .icon { color: var(--theme-dark-color); }
-      &.hover .icon { color: var(--theme-content-color); }
+      &.hover .icon { color: var(--theme-dark-color); }
     }  
 
     // &:hover { background-color: var(--popup-bg-hover); }
@@ -286,7 +292,8 @@
     }
 
     &.separator {
-      margin: 0.25rem 0;
+      flex-shrink: 0;
+      margin: .5rem 0;
       height: 1px;
       background-color: var(--theme-popup-divider);
     }
@@ -330,63 +337,6 @@
       }
     }
   }
-
-  &-withTitle {
-    .ap-title {
-      flex-shrink: 0;
-      margin: 1rem 1rem .25rem;
-      font-weight: 500;
-      color: var(--theme-caption-color);
-    }
-    .ap-header {
-      margin: .25rem 1rem 0;
-      .ap-caption {
-        margin: .5rem 0 0 0;
-      }
-    }
-  }  
-
-  &-withCategory {
-    .ap-category {
-      flex-shrink: 0;
-      overflow-x: auto;
-      display: flex;
-      margin: 1rem 1rem .25rem;
-
-      .ap-categoryItem {
-        margin: .25rem;
-        color: var(--theme-dark-color);
-        cursor: pointer;
-
-        &.selected { 
-          color: var(--theme-content-color) !important; 
-        }
-        &:hover { 
-          color: var(--theme-content-color); 
-        }
-      }
-
-      &::-webkit-scrollbar:horizontal { height: .125rem; }
-      &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bar-color); }
-    }
-    .ap-header {
-      margin: .25rem 1rem 0;
-      .ap-caption {
-        margin: .5rem 0 0 0;
-      }
-    }
-  }  
-
-  .ap-footer {
-    flex-shrink: 0;
-    display: grid;
-    grid-auto-flow: column;
-    direction: rtl;
-    grid-gap: 0.5rem;
-    justify-content: flex-start;
-    padding: 1rem 1.75rem 1.75rem 0.5rem;
-    overflow: hidden;
-  }
 }
 
 // Submenu
@@ -397,19 +347,16 @@
   justify-content: flex-start;
   padding: .25rem .5rem;
   min-width: 0;
-  min-height: 2rem;
+  min-height: 2.25rem;
   text-align: left;
-  color: var(--theme-content-color);
+  color: var(--theme-caption-color);
   outline: none;
   cursor: pointer;
 
   .icon {
-    margin-right: .375rem;
+    margin-right: .5rem;
     color: var(--theme-dark-color);
   }
-  &:focus .icon,
-  &.withHover:hover .icon,
-  &.withIconHover:hover .icon { color: var(--theme-caption-color); }
   &.withHover:hover { background-color: var(--theme-popup-hover); }
 }
 

packages/ui/src/components/ColorPopup.svelte

@@ -14,13 +14,14 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import { translate } from '@hcengineering/platform'
+  import { createEventDispatcher } from 'svelte'
-  import { createEventDispatcher, onMount } from 'svelte'
   import { deviceOptionsStore, resizeObserver } from '..'
   import { getPlatformColor } from '../colors'
   import ListView from './ListView.svelte'
   import Icon from './Icon.svelte'
+  import EditWithIcon from './EditWithIcon.svelte'
   import IconCheck from './icons/Check.svelte'
+  import IconSearch from './icons/Search.svelte'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
@@ -30,13 +31,6 @@
 
   let search: string = ''
 
-  let phTraslate: string = ''
-  $: if (placeholder) {
-    translate(placeholder, placeholderParam ?? {}).then((res) => {
-      phTraslate = res
-    })
-  }
-
   const dispatch = createEventDispatcher()
 
   $: objects = value.filter((el) => el.label.toLowerCase().includes(search.toLowerCase()))
@@ -66,10 +60,6 @@
       handleSelection(key, selection)
     }
   }
-  let input: HTMLElement
-  onMount(() => {
-    if (input && !$deviceOptionsStore.isMobile) input.focus()
-  })
 </script>
 
 <div
@@ -81,7 +71,16 @@
 >
   {#if searchable}
     <div class="header">
-      <input bind:this={input} type="text" bind:value={search} placeholder={phTraslate} on:input={() => {}} on:change />
+      <EditWithIcon
+        icon={IconSearch}
+        size={'large'}
+        width={'100%'}
+        focus={!$deviceOptionsStore.isMobile}
+        bind:value={search}
+        {placeholder}
+        {placeholderParam}
+        on:change
+      />
     </div>
   {/if}
   <div class="scroll">
@@ -100,16 +99,17 @@
               dispatch('close', itemValue)
             }}
           >
+            <div class="color" style="background-color: {getPlatformColor(itemValue.color)}" />
+            <span class="label">{itemValue.label}</span>
             <div class="check">
               {#if itemValue.id === selected}
                 <Icon icon={IconCheck} size={'small'} />
               {/if}
             </div>
-            <div class="color" style="background-color: {getPlatformColor(itemValue.color)}" />
-            <span class="label">{itemValue.label}</span>
           </button>
         </svelte:fragment>
       </ListView>
     </div>
   </div>
+  <div class="menu-space" />
 </div>

packages/ui/src/components/DropdownLabelsPopup.svelte

@@ -14,31 +14,24 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import { translate } from '@hcengineering/platform'
+  import { createEventDispatcher } from 'svelte'
-  import { createEventDispatcher, onMount } from 'svelte'
   import { deviceOptionsStore, resizeObserver } from '..'
   import plugin from '../plugin'
   import type { DropdownTextItem } from '../types'
   import IconCheck from './icons/Check.svelte'
+  import IconSearch from './icons/Search.svelte'
   import ListView from './ListView.svelte'
   import Icon from './Icon.svelte'
+  import EditWithIcon from './EditWithIcon.svelte'
 
   export let placeholder: IntlString = plugin.string.SearchDots
+  export let placeholderParam: any | undefined = undefined
   export let items: DropdownTextItem[]
   export let selected: DropdownTextItem['id'] | DropdownTextItem['id'][] | undefined = undefined
   export let multiselect: boolean = false
 
   let search: string = ''
-  let phTraslate: string = ''
-  $: translate(placeholder, {}).then((res) => {
-    phTraslate = res
-  })
   const dispatch = createEventDispatcher()
-  let searchInput: HTMLInputElement
-
-  onMount(() => {
-    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
-  })
 
   let selection = 0
   let list: ListView
@@ -99,12 +92,14 @@
   }}
 >
   <div class="header">
-    <input
+    <EditWithIcon
-      bind:this={searchInput}
+      icon={IconSearch}
-      type="text"
+      size={'large'}
+      width={'100%'}
+      focus={!$deviceOptionsStore.isMobile}
       bind:value={search}
-      placeholder={phTraslate}
+      {placeholder}
-      on:input={(ev) => {}}
+      {placeholderParam}
       on:change
     />
   </div>
@@ -115,7 +110,7 @@
           {@const item = objects[idx]}
 
           <button
-            class="menu-item flex-between w-full"
+            class="menu-item withList w-full"
             on:click={() => {
               if (multiselect && Array.isArray(selected)) {
                 const index = selected.indexOf(item.id)
@@ -131,15 +126,16 @@
               }
             }}
           >
+            <div class="label overflow-label flex-grow">{item.label}</div>
             <div class="check">
               {#if isSelected(selected, item)}
                 <Icon icon={IconCheck} size={'small'} />
               {/if}
             </div>
-            <div class="labels overflow-label">{item.label}</div>
           </button>
         </svelte:fragment>
       </ListView>
     </div>
   </div>
+  <div class="menu-space" />
 </div>

packages/ui/src/components/DropdownLabelsPopupIntl.svelte

@@ -37,6 +37,7 @@
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
+  <div class="menu-space" />
   <div class="scroll">
     <div class="box">
       {#each items as item, i}
@@ -51,10 +52,11 @@
         >
           <div class="flex-grow caption-color lines-limit-2"><Label label={item.label} /></div>
           {#if item.id === selected}
-            <div class="check-right"><CheckBox checked primary /></div>
+            <div class="check"><CheckBox checked primary /></div>
           {/if}
         </button>
       {/each}
     </div>
   </div>
+  <div class="menu-space" />
 </div>

packages/ui/src/components/DropdownRecordPopup.svelte

@@ -55,6 +55,7 @@
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
+  <div class="menu-space" />
   <div class="scroll">
     <div class="box">
       <ListView bind:this={list} count={objects.length} bind:selection>
@@ -69,11 +70,12 @@
           >
             <div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
             {#if item[0] === selected}
-              <div class="check-right"><CheckBox checked primary /></div>
+              <div class="check"><CheckBox checked primary /></div>
             {/if}
           </button>
         </svelte:fragment>
       </ListView>
     </div>
   </div>
+  <div class="menu-space" />
 </div>

packages/ui/src/components/EditWithIcon.svelte

@@ -25,14 +25,15 @@
   export let width: string | undefined = undefined
   export let value: string | undefined = undefined
   export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
+  export let placeholderParam: any | undefined = undefined
   export let focus: boolean = false
-  export let size: 'small' | 'medium' = 'medium'
+  export let size: 'small' | 'medium' | 'large' = 'medium'
 
   const dispatch = createEventDispatcher()
   let textHTML: HTMLInputElement
   let phTraslate: string = ''
 
-  $: translate(placeholder, {}).then((res) => {
+  $: translate(placeholder, placeholderParam ?? {}).then((res) => {
     phTraslate = res
   })
   $: if (textHTML !== undefined) {
@@ -66,8 +67,6 @@
     padding: 0 0.5rem 0 0.5rem;
     min-width: 10rem;
     color: var(--theme-caption-color);
-    // background-color: var(--body-color);
-    border: 1px solid transparent;
     border-radius: 0.25rem;
 
     &.small {
@@ -76,22 +75,22 @@
     &.medium {
       height: 2rem;
     }
+    &.large {
+      height: 2.25rem;
+    }
     &:focus-within {
-      border-color: var(--theme-button-border);
+      background-color: var(--theme-editbox-focus-color);
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      box-shadow: 0 0 0 1px var(--theme-editbox-focus-border);
-
-      .icon {
-        color: var(--theme-dark-color);
-      }
     }
 
     input {
       width: 100%;
+      caret-color: var(--theme-caret-color);
       border: none;
       border-radius: 0.25rem;
 
       &::placeholder {
-        color: var(--theme-halfcontent-color);
+        color: var(--theme-dark-color);
       }
     }
 

packages/ui/src/components/ListView.svelte

@@ -91,7 +91,10 @@
     user-select: none;
 
     .list-item {
+      flex-grow: 1;
+      margin: 0 0.5rem;
       min-width: 0;
+      border-radius: 0.25rem;
     }
     .selection {
       background-color: var(--theme-popup-hover);

packages/ui/src/components/Menu.svelte

@@ -121,7 +121,7 @@
   on:keydown={keyDown}
 >
   <MouseSpeedTracker bind:focusSpeed />
-  <div class="ap-space" />
+  <div class="ap-space x2" />
   <slot name="header" />
   <div class="ap-scroll">
     <div class="ap-box" bind:this={popup}>
@@ -149,8 +149,8 @@
                 action.action(ctx, evt)
               }}
             >
-              {#if action.icon}<div class="icon mr-3"><Icon icon={action.icon} size={'small'} /></div>{/if}
+              {#if action.icon}<div class="icon mr-2"><Icon icon={action.icon} size={'small'} /></div>{/if}
-              <span class="overflow-label pr-1 flex-grow"><Label label={action.label} /></span>
+              <span class="overflow-label pr-4 flex-grow"><Label label={action.label} /></span>
             </button>
           </a>
         {:else if action.component !== undefined && !action.isSubmenuRightClicking}
@@ -165,9 +165,9 @@
             on:click={() => focusTarget(action, btns[i])}
           >
             {#if action.icon}
-              <div class="icon mr-3"><Icon icon={action.icon} size={'small'} /></div>
+              <div class="icon mr-2"><Icon icon={action.icon} size={'small'} /></div>
             {/if}
-            <span class="overflow-label pr-1 flex-grow"><Label label={action.label} /></span>
+            <span class="overflow-label pr-4 flex-grow"><Label label={action.label} /></span>
           </button>
         {:else}
           <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -190,13 +190,13 @@
             }}
           >
             {#if action.icon}
-              <div class="icon mr-3"><Icon icon={action.icon} size={'small'} /></div>
+              <div class="icon mr-2"><Icon icon={action.icon} size={'small'} /></div>
             {/if}
-            <span class="overflow-label pr-1 flex-grow"><Label label={action.label} /></span>
+            <span class="overflow-label pr-4 flex-grow"><Label label={action.label} /></span>
           </button>
         {/if}
       {/each}
     </div>
   </div>
-  <div class="ap-space" />
+  <div class="ap-space x2" />
 </div>

packages/ui/src/components/SearchEdit.svelte

@@ -5,6 +5,7 @@
   import plugin from '../plugin'
 
   export let value: string = ''
+  export let width: string = '12rem'
 
   $: _search = value
   const dispatch = createEventDispatcher()
@@ -21,7 +22,7 @@
 
 <EditWithIcon
   icon={IconSearch}
-  width={'12rem'}
+  {width}
   placeholder={plugin.string.Search}
   bind:value={_search}
   on:change={() => {

packages/ui/src/components/SelectPopup.svelte

@@ -18,10 +18,11 @@
   import { deviceOptionsStore, resizeObserver } from '..'
   import { createFocusManager } from '../focus'
   import type { AnySvelteComponent } from '../types'
-  import EditBox from './EditBox.svelte'
+  import EditWithIcon from './EditWithIcon.svelte'
   import FocusHandler from './FocusHandler.svelte'
   import Icon from './Icon.svelte'
   import IconCheck from './icons/Check.svelte'
+  import IconSearch from './icons/Search.svelte'
   import Label from './Label.svelte'
   import ListView from './ListView.svelte'
 
@@ -125,9 +126,10 @@
 >
   {#if searchable}
     <div class="header">
-      <EditBox
+      <EditWithIcon
-        kind={'search-style'}
+        icon={IconSearch}
-        focusIndex={1}
+        size={'large'}
+        width={'100%'}
         focus={!$deviceOptionsStore.isMobile}
         bind:value={search}
         {placeholder}
@@ -135,6 +137,8 @@
         on:change
       />
     </div>
+  {:else}
+    <div class="menu-space" />
   {/if}
   {#if cHeight === 1}
     <div class="whereSelected" />
@@ -154,49 +158,48 @@
             class:selected={item.isSelected}
             on:click={() => dispatch('close', item.id)}
           >
-            <div class="flex-row-center pointer-events-none" class:mt-2={huge} class:mb-2={huge}>
+            <div class="flex-row-center flex-grow pointer-events-none">
-              {#if hasSelected}
-                <div class="check">
-                  {#if item.isSelected}
-                    <div bind:this={selectedDiv}>
-                      <Icon icon={IconCheck} {size} />
-                    </div>
-                  {/if}
-                </div>
-              {/if}
               {#if item.component}
-                <svelte:component this={item.component} {...item.props} />
+                <div class="flex-grow clear-mins"><svelte:component this={item.component} {...item.props} /></div>
               {:else}
                 {#if item.icon}
                   <div class="icon mr-2">
                     <Icon icon={item.icon} iconProps={item.iconProps} fill={item.iconColor ?? 'currentColor'} {size} />
                   </div>
                 {/if}
-                <span class="label" class:text-base={huge}>
+                <span class="label overflow-label flex-grow" class:text-base={huge}>
                   {#if item.label}
                     <Label label={item.label} />
                   {:else if item.text}
-                    <span>{item.text}</span>
+                    {item.text}
                   {/if}
                 </span>
               {/if}
+              {#if hasSelected}
+                <div class="check">
+                  {#if item.isSelected}
+                    <div bind:this={selectedDiv}>
+                      <Icon icon={IconCheck} size={'small'} />
+                    </div>
+                  {/if}
+                </div>
+              {/if}
             </div>
           </button>
         </svelte:fragment>
         <svelte:fragment slot="category" let:item={row}>
           {@const obj = filteredObjects[row]}
           {#if obj.category && ((row === 0 && obj.category.label !== undefined) || obj.category.label !== filteredObjects[row - 1]?.category?.label)}
-            <div class="menu-group__header">
+            {#if row > 0}<div class="menu-separator" />{/if}
-              <div class="flex-row-center pl-1">
+            <div class="menu-group__header flex-row-center">
-                {#if obj.category.icon}
+              <!-- {#if obj.category.icon}
-                  <div class="clear-mins flex-no-shrink mr-2">
+                <div class="flex-no-shrink mr-2">
-                    <Icon icon={obj.category.icon} size={'small'} />
+                  <Icon icon={obj.category.icon} size={'small'} />
-                  </div>
+                </div>
-                {/if}
+              {/if} -->
-                <span class="overflow-label">
+              <span class="overflow-label">
-                  <Label label={obj.category.label} />
+                <Label label={obj.category.label} />
-                </span>
+              </span>
-              </div>
             </div>
           {/if}
         </svelte:fragment>
@@ -206,4 +209,5 @@
   {#if cHeight === -1}
     <div class="whereSelected" />
   {/if}
+  <div class="menu-space" />
 </div>

packages/ui/src/components/icons/Check.svelte

@@ -3,11 +3,10 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" viewBox="0 0 16 16" {fill} xmlns="http://www.w3.org/2000/svg">
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
-    {fill}
+    d="M14.8536 3.14645C15.0488 3.34171 15.0488 3.65829 14.8536 3.85355L6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645C2.34171 6.95118 2.65829 6.95118 2.85355 7.14645L6.5 10.7929L14.1464 3.14645C14.3417 2.95118 14.6583 2.95118 14.8536 3.14645Z"
-    d="M29.7071 6.29314C30.0976 6.68366 30.0976 7.31683 29.7071 7.70735L13.7071 23.7074C13.3166 24.0979 12.6834 24.0979 12.2929 23.7074L4.29289 15.7074C3.90237 15.3168 3.90237 14.6837 4.29289 14.2931C4.68342 13.9026 5.31658 13.9026 5.70711 14.2931L13 21.586L28.2929 6.29314C28.6834 5.90261 29.3166 5.90261 29.7071 6.29314Z"
   />
 </svg>

packages/ui/src/components/icons/Delete.svelte

@@ -3,8 +3,16 @@
   export let fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M13.1,3.8h-2c-0.2,0-0.4-0.2-0.5-0.4l-0.2-0.8c-0.1-0.6-0.6-1-1.2-1H6.8c-0.6,0-1.1,0.4-1.2,1L5.4,3.3 c0,0.3-0.2,0.4-0.5,0.4h-2C2.7,3.8,2.4,4,2.4,4.3s0.2,0.5,0.5,0.5h0.3c0.1,1.1,0.3,6.2,0.5,7.9c0.1,1.1,0.8,1.8,1.9,1.9 c0.8,0,1.6,0,2.4,0c0.8,0,1.5,0,2.3,0c1.1,0,1.8-0.7,1.9-1.9c0.2-1.7,0.4-6.7,0.5-7.9h0.3c0.3,0,0.5-0.2,0.5-0.5S13.4,3.8,13.1,3.8z M6.4,3.5l0.1-0.8c0-0.1,0.1-0.2,0.3-0.2h2.5c0.1,0,0.2,0.1,0.2,0.2l0.1,0.8c0,0.1,0.1,0.2,0.1,0.3H6.3C6.3,3.7,6.3,3.6,6.4,3.5z M11.3,12.5c-0.1,0.9-0.7,1-0.9,1c-1.6,0-3.2,0-4.7,0c-0.5,0-0.8-0.3-0.9-1C4.6,10.9,4.4,6,4.3,4.8h7.5C11.7,6,11.4,10.9,11.3,12.5z"
+    d="M12 23C12 23.5523 12.4477 24 13 24C13.5523 24 14 23.5523 14 23V13C14 12.4477 13.5523 12 13 12C12.4477 12 12 12.4477 12 13V23Z"
+  />
+  <path
+    d="M20 23C20 23.5523 19.5523 24 19 24C18.4477 24 18 23.5523 18 23V13C18 12.4477 18.4477 12 19 12C19.5523 12 20 12.4477 20 13V23Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M15 2C13.3431 2 12 3.34315 12 5V6H5C4.44772 6 4 6.44772 4 7C4 7.55228 4.44772 8 5 8H6V26C6 28.2091 7.79086 30 10 30H22C24.2091 30 26 28.2091 26 26V8H27C27.5523 8 28 7.55228 28 7C28 6.44772 27.5523 6 27 6H20V5C20 3.34315 18.6569 2 17 2H15ZM18 6V5C18 4.44772 17.5523 4 17 4H15C14.4477 4 14 4.44772 14 5V6H18ZM8 26V8H24V26C24 27.1046 23.1046 28 22 28H10C8.89543 28 8 27.1046 8 26Z"
   />
 </svg>

packages/ui/src/components/icons/Search.svelte

@@ -5,6 +5,8 @@
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M14.4,13.6L11.7,11c0.8-1,1.3-2.2,1.3-3.5c0-3-2.5-5.5-5.5-5.5C4.5,2,2,4.5,2,7.5c0,3,2.5,5.5,5.5,5.5 c1.3,0,2.6-0.5,3.5-1.3l2.6,2.6c0.2,0.2,0.5,0.2,0.7,0C14.5,14.2,14.5,13.8,14.4,13.6z M3,7.5C3,5,5,3,7.5,3S12,5,12,7.5 S10,12,7.5,12S3,10,3,7.5z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.7241 10.0168L14.3535 13.6465C14.5488 13.8417 14.5488 14.1583 14.3535 14.3536C14.1602 14.5469 13.8478 14.5488 13.6522 14.3592L10.017 10.7238C8.9277 11.6312 7.5305 12.0836 6.11608 11.9871C4.70165 11.8905 3.37891 11.2524 2.423 10.2054C1.4671 9.15843 0.951637 7.78323 0.983845 6.36588C1.01605 4.94853 1.59345 3.59816 2.59593 2.59568C3.5984 1.59321 4.94877 1.01581 6.36612 0.983601C7.78347 0.951393 9.15867 1.46686 10.2057 2.42276C11.2526 3.37866 11.8908 4.70141 11.9873 6.11583C12.0839 7.53026 11.6314 8.92745 10.7241 10.0168ZM2.75851 3.99981C2.26404 4.73983 2.00012 5.60986 2.00012 6.49987C2.00144 7.69294 2.47597 8.83677 3.3196 9.68039C4.16323 10.524 5.30705 10.9986 6.50012 10.9999C7.39013 10.9999 8.26016 10.736 9.00018 10.2415C9.7402 9.74702 10.317 9.04422 10.6576 8.22195C10.9982 7.39968 11.0873 6.49488 10.9137 5.62197C10.74 4.74905 10.3114 3.94723 9.6821 3.31789C9.05276 2.68856 8.25094 2.25997 7.37802 2.08634C6.50511 1.91271 5.60031 2.00182 4.77804 2.34242C3.95578 2.68301 3.25297 3.25979 2.75851 3.99981Z"
   />
 </svg>

packages/ui/src/components/internal/LangPopup.svelte

@@ -22,10 +22,11 @@
 </script>
 
 <div class="antiPopup">
-  <div class="ap-space" />
+  <div class="ap-space x2" />
   {#each langs as lang}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
-      class="ap-menuItem ap-woScroll flex-row-center"
+      class="ap-menuItem hoverable flex-row-center"
       on:click={() => {
         dispatch('close', lang.id)
       }}
@@ -33,8 +34,8 @@
       <svg class="svg-small">
         <use href="#{lang.id}-flag" />
       </svg>
-      <div class="ml-3"><Label label={lang.label} /></div>
+      <div class="ml-2"><Label label={lang.label} /></div>
     </div>
   {/each}
-  <div class="ap-space" />
+  <div class="ap-space x2" />
 </div>

plugins/contact-assets/assets/icons.svg

@@ -51,12 +51,20 @@
   <symbol id="edit" viewBox="0 0 12 12" style="fill-rule:evenodd;clip-rule:evenodd;">
     <path d="M8.6,5.4l0.9-0.9c0.6-0.6,0.6-1.4,0-2c-0.6-0.6-1.4-0.6-2,0L6.6,3.4C7.1,4.2,7.8,4.9,8.6,5.4z M5.9,4.1l-3,3 C2.4,7.6,2.2,7.8,2.1,8C1.9,8.3,1.9,8.6,1.8,9.2L1.6,9.8c-0.1,0.3-0.1,0.5,0,0.6s0.3,0.1,0.6,0l0.6-0.1h0c0.6-0.1,0.9-0.2,1.1-0.3 c0.3-0.1,0.5-0.4,0.9-0.8l0,0l0,0l3-3C7.1,5.6,6.4,4.9,5.9,4.1z"/>
   </symbol>
-  <symbol id="company" viewBox="0 0 16 16">
+  <symbol id="company" viewBox="0 0 32 32">
-    <path d="M13.5,13H13V5c0-0.2-0.2-0.4-0.4-0.5L7.1,3C7,3,6.8,3,6.7,3.1C6.6,3.2,6.5,3.3,6.5,3.5V6h-3C3.2,6,3,6.2,3,6.5V13H2.5 C2.2,13,2,13.2,2,13.5S2.2,14,2.5,14h11c0.3,0,0.5-0.2,0.5-0.5S13.8,13,13.5,13z M4,13V7h4.5v6H4z M9,6H7.5V4.2L12,5.4V13H9.5V6.5 C9.5,6.2,9.3,6,9,6z"/>
+    <path d="M16 8H18V10H16V8Z" />
+    <path d="M22 8H20V10H22V8Z" />
+    <path d="M16 16H18V18H16V16Z" />
+    <path d="M22 16H20V18H22V16Z" />
+    <path d="M16 20H18V22H16V20Z" />
+    <path d="M22 20H20V22H22V20Z" />
+    <path d="M16 12H18V14H16V12Z" />
+    <path d="M22 12H20V14H22V12Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 4C12.8954 4 12 4.89543 12 6V13H8C6.89543 13 6 13.8954 6 15V27H5C4.44772 27 4 27.4477 4 28C4 28.5523 4.44772 29 5 29H27C27.5523 29 28 28.5523 28 28C28 27.4477 27.5523 27 27 27H26V6C26 4.89543 25.1046 4 24 4H14ZM8 15H12V18H10V20H12V22H10V24H12V27H8V15ZM14 27H18V24H20V27H24V6H14V27Z" />
   </symbol>
-  <symbol id="person" viewBox="0 0 24 24">
+  <symbol id="person" viewBox="0 0 16 16">
-    <path d="M11.9,13.5c0,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c2.2-0.1,3.9-1.8,3.9-4c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4 C8,11.7,9.7,13.5,11.9,13.5z M12,7c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.4,2.5c-0.1,0-0.2,0-0.3,0c-1.3-0.1-2.4-1.2-2.4-2.5 C9.5,8.1,10.6,7,12,7z" />
+    <path d="M8 3.99988C7.50555 3.99988 7.0222 4.1465 6.61108 4.4212C6.19995 4.69591 5.87952 5.08635 5.6903 5.54317C5.50108 5.99998 5.45158 6.50265 5.54804 6.9876C5.6445 7.47256 5.88261 7.91801 6.23224 8.26764C6.58187 8.61728 7.02733 8.85538 7.51228 8.95184C7.99723 9.0483 8.4999 8.9988 8.95671 8.80958C9.41353 8.62036 9.80397 8.29993 10.0787 7.8888C10.3534 7.47768 10.5 6.99433 10.5 6.49988C10.5 5.83684 10.2366 5.20095 9.76777 4.73211C9.29893 4.26327 8.66304 3.99988 8 3.99988ZM8 7.99988C7.70333 7.99988 7.41332 7.9119 7.16665 7.74708C6.91997 7.58226 6.72771 7.34799 6.61418 7.0739C6.50065 6.79981 6.47095 6.49821 6.52882 6.20724C6.5867 5.91627 6.72956 5.649 6.93934 5.43922C7.14912 5.22944 7.4164 5.08658 7.70737 5.0287C7.99834 4.97082 8.29994 5.00053 8.57403 5.11406C8.84812 5.22759 9.08239 5.41985 9.24721 5.66652C9.41203 5.9132 9.5 6.20321 9.5 6.49988C9.49955 6.89756 9.34137 7.27883 9.06017 7.56004C8.77896 7.84125 8.39769 7.99943 8 7.99988Z" />
-    <path d="M22.8,12c0-5.9-4.8-10.8-10.8-10.8S1.2,6.1,1.2,12c0,3.1,1.3,5.9,3.5,7.9c0,0,0,0,0,0C4.8,20,4.9,20,5,20.1 c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.4,0.3C5.9,20.8,6,20.9,6.2,21c0.2,0.1,0.3,0.2,0.5,0.3c0.1,0.1,0.3,0.2,0.4,0.2 c0.2,0.1,0.3,0.2,0.5,0.2C7.7,21.8,7.8,21.9,8,22c0.2,0.1,0.4,0.1,0.5,0.2c0.1,0,0.3,0.1,0.4,0.1c0.2,0.1,0.4,0.1,0.6,0.1 c0.1,0,0.3,0.1,0.4,0.1c0.2,0,0.4,0.1,0.6,0.1c0.1,0,0.3,0,0.4,0.1c0.3,0,0.7,0.1,1,0.1c0.4,0,0.7,0,1-0.1c0.1,0,0.3,0,0.4-0.1 c0.2,0,0.4-0.1,0.6-0.1c0.1,0,0.3-0.1,0.4-0.1c0.2,0,0.4-0.1,0.6-0.1c0.1,0,0.3-0.1,0.4-0.1c0.2-0.1,0.4-0.1,0.5-0.2 c0.1-0.1,0.3-0.1,0.4-0.2c0.2-0.1,0.3-0.2,0.5-0.2c0.1-0.1,0.3-0.1,0.4-0.2c0.2-0.1,0.3-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.4-0.3 c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.1-0.1,0.2-0.2c0,0,0,0,0,0C21.4,17.9,22.8,15.1,22.8,12z M2.8,12 c0-5.1,4.1-9.2,9.2-9.2s9.2,4.1,9.2,9.2c0,2.3-0.8,4.3-2.2,6c-0.4-0.7-0.9-1.3-1.7-1.8c-3-2-7.8-2-10.8,0c-0.7,0.5-1.3,1.1-1.7,1.8 C3.6,16.3,2.8,14.3,2.8,12z M17.9,19.1c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.2-0.4,0.3c-0.1,0.1-0.2,0.1-0.3,0.2 c-0.1,0.1-0.3,0.2-0.4,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.2,0.1-0.3,0.2-0.5,0.2c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0.1-0.3,0.1-0.5,0.2 c-0.1,0-0.2,0.1-0.4,0.1c-0.2,0-0.3,0.1-0.5,0.1c-0.1,0-0.2,0.1-0.4,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.1,0-0.2,0-0.3,0 c-0.3,0-0.6,0-0.9,0c-0.3,0-0.6,0-0.9,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.4,0-0.6-0.1c-0.1,0-0.2-0.1-0.4-0.1c-0.2,0-0.3-0.1-0.5-0.1 c-0.1,0-0.2-0.1-0.4-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1,0-0.2-0.1-0.3-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.2-0.1-0.3-0.2 c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c0,0,0,0,0,0 c0.2-0.6,0.7-1.2,1.4-1.7c2.5-1.6,6.6-1.6,9.1,0C17.3,17.9,17.7,18.5,17.9,19.1C17.9,19.1,17.9,19.1,17.9,19.1z" />
+    <path d="M8 0.999878C6.61553 0.999878 5.26216 1.41042 4.11101 2.17959C2.95987 2.94876 2.06266 4.04201 1.53285 5.32109C1.00303 6.60018 0.86441 8.00764 1.13451 9.36551C1.4046 10.7234 2.07129 11.9707 3.05026 12.9496C4.02922 13.9286 5.2765 14.5953 6.63437 14.8654C7.99224 15.1355 9.3997 14.9968 10.6788 14.467C11.9579 13.9372 13.0511 13.04 13.8203 11.8889C14.5895 10.7377 15 9.38435 15 7.99988C14.9979 6.144 14.2597 4.36474 12.9474 3.05244C11.6351 1.74014 9.85588 1.00197 8 0.999878ZM5 13.1881V12.4999C5.00044 12.1022 5.15862 11.7209 5.43983 11.4397C5.72104 11.1585 6.10231 11.0003 6.5 10.9999H9.5C9.89769 11.0003 10.279 11.1585 10.5602 11.4397C10.8414 11.7209 10.9996 12.1022 11 12.4999V13.1881C10.0896 13.7197 9.05426 13.9999 8 13.9999C6.94574 13.9999 5.91042 13.7197 5 13.1881ZM11.9963 12.4628C11.9863 11.8069 11.7191 11.1812 11.2521 10.7205C10.7852 10.2598 10.156 10.001 9.5 9.99988H6.5C5.84405 10.001 5.2148 10.2598 4.74786 10.7205C4.28093 11.1812 4.01369 11.8069 4.00375 12.4628C3.09703 11.6532 2.45762 10.5872 2.17017 9.40611C1.88272 8.22501 1.9608 6.98445 2.39407 5.84871C2.82734 4.71297 3.59536 3.73561 4.59644 3.04606C5.59751 2.35651 6.78442 1.98729 8 1.98729C9.21558 1.98729 10.4025 2.35651 11.4036 3.04606C12.4046 3.73561 13.1727 4.71297 13.6059 5.84871C14.0392 6.98445 14.1173 8.22501 13.8298 9.40611C13.5424 10.5872 12.903 11.6532 11.9963 12.4628Z" />
   </symbol>
   <symbol id="social-edit" viewBox="0 0 24 24">
     <path d="M22,12.2c-0.4,0-0.8,0.3-0.8,0.8v2c0,4.6-1.6,6.2-6.2,6.2H9c-4.6,0-6.2-1.6-6.2-6.2V9c0-4.6,1.6-6.2,6.2-6.2h2 c0.4,0,0.8-0.3,0.8-0.8S11.4,1.2,11,1.2H9C3.6,1.2,1.2,3.6,1.2,9v6c0,5.4,2.3,7.8,7.8,7.8h6c5.4,0,7.8-2.3,7.8-7.8v-2 C22.8,12.6,22.4,12.2,22,12.2z" />
@@ -65,10 +73,15 @@
   <symbol id="homepage" viewBox="0 0 24 24">
     <path d="M12,1.2C6.1,1.2,1.2,6.1,1.2,12S6.1,22.8,12,22.8S22.8,17.9,22.8,12S17.9,1.2,12,1.2z M20.8,14.3 c-1.2,0.4-2.5,0.7-3.8,0.9c0.2-2.1,0.2-4.3,0-6.5c1.3,0.2,2.5,0.5,3.8,0.9c0.1,0,0.1,0,0.2,0c0.2,0.7,0.3,1.5,0.3,2.3 c0,0.8-0.1,1.5-0.3,2.3C20.9,14.3,20.8,14.3,20.8,14.3z M3,14.3c-0.2-0.7-0.3-1.5-0.3-2.3c0-0.8,0.1-1.5,0.3-2.3c0.1,0,0.1,0,0.2,0 C4.5,9.3,5.7,9,7,8.8c-0.2,2.1-0.2,4.3,0,6.5c-1.3-0.2-2.5-0.5-3.8-0.9C3.2,14.3,3.1,14.3,3,14.3z M8.5,8.5c2.3-0.3,4.6-0.3,6.9,0 c0.3,2.3,0.3,4.6,0,6.9c-2.3,0.3-4.6,0.3-6.9,0C8.3,13.2,8.3,10.8,8.5,8.5z M20.3,8c-1.2-0.3-2.3-0.6-3.5-0.8 C16.6,6,16.3,4.8,16,3.7C17.9,4.6,19.4,6.1,20.3,8z M14.3,3c0,0.1,0,0.1,0,0.2C14.7,4.5,15,5.7,15.2,7c-2.1-0.2-4.3-0.2-6.5,0 C9,5.7,9.3,4.5,9.7,3.2c0-0.1,0-0.1,0-0.2c0.7-0.2,1.5-0.3,2.3-0.3C12.8,2.8,13.5,2.9,14.3,3z M7.9,3.7C7.9,3.7,7.9,3.7,7.9,3.7 C7.6,4.9,7.4,6,7.2,7.2C6,7.4,4.8,7.7,3.7,8C4.5,6.2,6,4.7,7.9,3.7z M3.7,16.1C3.7,16.1,3.7,16.1,3.7,16.1c1.2,0.2,2.3,0.5,3.5,0.7 C7.4,18,7.6,19.1,8,20.2c0,0-0.1,0-0.1,0C6.1,19.4,4.6,17.9,3.7,16.1z M9.7,21c0-0.1,0-0.1,0-0.2C9.3,19.5,9,18.3,8.8,17 c1.1,0.1,2.2,0.2,3.2,0.2c1.1,0,2.2-0.1,3.2-0.2c-0.2,1.3-0.5,2.5-0.9,3.8c0,0.1,0,0.1,0,0.2c-0.7,0.2-1.5,0.3-2.3,0.3 C11.2,21.2,10.5,21.1,9.7,21z M16,20.3c0.3-1.2,0.6-2.4,0.8-3.6c1.2-0.2,2.3-0.4,3.5-0.8c0,0,0,0.1,0,0.1C19.4,18,17.8,19.5,16,20.3 z"/>
   </symbol>
-  <symbol id='profile' viewBox="0 0 24 24">
+  <symbol id="profile" viewBox="0 0 24 24">
     <path d="M11.9,13.5c0,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c2.2-0.1,3.9-1.8,3.9-4c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4 C8,11.7,9.7,13.5,11.9,13.5z M12,7c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.4,2.5c-0.1,0-0.2,0-0.3,0c-1.3-0.1-2.4-1.2-2.4-2.5 C9.5,8.1,10.6,7,12,7z" />
     <path d="M22.8,12c0-5.9-4.8-10.8-10.8-10.8S1.2,6.1,1.2,12c0,3.1,1.3,5.9,3.5,7.9c0,0,0,0,0,0C4.8,20,4.9,20,5,20.1 c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.4,0.3C5.9,20.8,6,20.9,6.2,21c0.2,0.1,0.3,0.2,0.5,0.3c0.1,0.1,0.3,0.2,0.4,0.2 c0.2,0.1,0.3,0.2,0.5,0.2C7.7,21.8,7.8,21.9,8,22c0.2,0.1,0.4,0.1,0.5,0.2c0.1,0,0.3,0.1,0.4,0.1c0.2,0.1,0.4,0.1,0.6,0.1 c0.1,0,0.3,0.1,0.4,0.1c0.2,0,0.4,0.1,0.6,0.1c0.1,0,0.3,0,0.4,0.1c0.3,0,0.7,0.1,1,0.1c0.4,0,0.7,0,1-0.1c0.1,0,0.3,0,0.4-0.1 c0.2,0,0.4-0.1,0.6-0.1c0.1,0,0.3-0.1,0.4-0.1c0.2,0,0.4-0.1,0.6-0.1c0.1,0,0.3-0.1,0.4-0.1c0.2-0.1,0.4-0.1,0.5-0.2 c0.1-0.1,0.3-0.1,0.4-0.2c0.2-0.1,0.3-0.2,0.5-0.2c0.1-0.1,0.3-0.1,0.4-0.2c0.2-0.1,0.3-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.4-0.3 c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.1-0.1,0.2-0.2c0,0,0,0,0,0C21.4,17.9,22.8,15.1,22.8,12z M2.8,12 c0-5.1,4.1-9.2,9.2-9.2s9.2,4.1,9.2,9.2c0,2.3-0.8,4.3-2.2,6c-0.4-0.7-0.9-1.3-1.7-1.8c-3-2-7.8-2-10.8,0c-0.7,0.5-1.3,1.1-1.7,1.8 C3.6,16.3,2.8,14.3,2.8,12z M17.9,19.1c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.2-0.4,0.3c-0.1,0.1-0.2,0.1-0.3,0.2 c-0.1,0.1-0.3,0.2-0.4,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.2,0.1-0.3,0.2-0.5,0.2c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0.1-0.3,0.1-0.5,0.2 c-0.1,0-0.2,0.1-0.4,0.1c-0.2,0-0.3,0.1-0.5,0.1c-0.1,0-0.2,0.1-0.4,0.1c-0.2,0-0.4,0.1-0.6,0.1c-0.1,0-0.2,0-0.3,0 c-0.3,0-0.6,0-0.9,0c-0.3,0-0.6,0-0.9,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.4,0-0.6-0.1c-0.1,0-0.2-0.1-0.4-0.1c-0.2,0-0.3-0.1-0.5-0.1 c-0.1,0-0.2-0.1-0.4-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1,0-0.2-0.1-0.3-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.2-0.1-0.3-0.2 c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c0,0,0,0,0,0 c0.2-0.6,0.7-1.2,1.4-1.7c2.5-1.6,6.6-1.6,9.1,0C17.3,17.9,17.7,18.5,17.9,19.1C17.9,19.1,17.9,19.1,17.9,19.1z" />
   </symbol>
+  <symbol id="kickUser" viewBox="0 0 32 32">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 10C24 14.4183 20.4183 18 16 18C11.5817 18 8 14.4183 8 10C8 5.58172 11.5817 2 16 2C20.4183 2 24 5.58172 24 10ZM16 16C19.3137 16 22 13.3137 22 10C22 6.68629 19.3137 4 16 4C12.6863 4 10 6.68629 10 10C10 13.3137 12.6863 16 16 16Z" />
+    <path d="M21.7071 20.2931C21.3166 19.9026 20.6834 19.9026 20.2929 20.2931C19.9024 20.6837 19.9024 21.3168 20.2929 21.7074L23.5858 25.0002L20.2929 28.2931C19.9024 28.6837 19.9024 29.3168 20.2929 29.7074C20.6761 30.0906 21.2929 30.0977 21.6849 29.7289L25 26.4138L28.2929 29.7074C28.6834 30.0979 29.3166 30.0979 29.7071 29.7074C30.0976 29.3168 30.0976 28.6837 29.7071 28.2931L26.4142 25.0002L29.7071 21.7074C30.0976 21.3168 30.0976 20.6837 29.7071 20.2931C29.3166 19.9026 28.6834 19.9026 28.2929 20.2931L25 23.586L21.7071 20.2931Z" />
+    <path d="M13 20.0002C9.13401 20.0002 6 23.1343 6 27.0002V29.0002C6 29.5525 6.44772 30.0002 7 30.0002C7.55228 30.0002 8 29.5525 8 29.0002V27.0002C8 24.2388 10.2386 22.0002 13 22.0002H17C17.5523 22.0002 18 21.5525 18 21.0002C18 20.448 17.5523 20.0002 17 20.0002H13Z" />
+  </symbol>
   <symbol id="componentMembers" viewBox="0 0 16 16">
     <path d="M1 3C1 1.89543 1.89543 1 3 1H9C10.1046 1 11 1.89543 11 3V3.5H6C4.61929 3.5 3.5 4.61929 3.5 6V11H3C1.89543 11 1 10.1046 1 9V3Z" />
     <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15H13C14.1046 15 15 14.1046 15 13V7C15 5.89543 14.1046 5 13 5H7ZM10 10C10.9665 10 11.5 9.2165 11.5 8.25C11.5 7.2835 10.9665 6.5 10 6.5C9.0335 6.5 8.5 7.2835 8.5 8.25C8.5 9.2165 9.0335 10 10 10ZM7 12.5616C7 11.5144 7.9841 10.746 9 11C9.47572 11.7136 10.5243 11.7136 11 11C12.0159 10.746 13 11.5144 13 12.5616V13.0101C13 13.2806 12.7806 13.5 12.5101 13.5H7.48995C7.21936 13.5 7 13.2806 7 13.0101V12.5616Z" />

plugins/contact-assets/src/index.ts

@@ -39,6 +39,7 @@ loadMetadata(contact.icon, {
   Homepage: `${icons}#homepage`,
   Whatsapp: `${icons}#whatsapp`,
   Profile: `${icons}#profile`,
+  KickUser: `${icons}#kickUser`,
   ComponentMembers: `${icons}#componentMembers`
 })
 addStringsLoader(contactId, async (lang: string) => await import(`../lang/${lang}.json`))

plugins/contact-resources/src/components/AssigneeBox.svelte

@@ -154,7 +154,7 @@
           {:else}
             <div class="flex-presenter not-selected">
               {#if icon}
-                <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
+                <div class="icon w-4 flex-no-shrink" class:small-gap={size === 'inline' || size === 'small'}>
                   <Icon {icon} size={avatarSize} />
                 </div>
               {/if}

plugins/contact-resources/src/components/AssigneePopup.svelte

@@ -18,17 +18,19 @@
   import type { Asset, IntlString } from '@hcengineering/platform'
   import {
     createFocusManager,
-    EditBox,
+    EditWithIcon,
     FocusHandler,
     Icon,
     IconCheck,
+    IconSearch,
+    deviceOptionsStore,
     ListView,
     resizeObserver,
     AnySvelteComponent,
     Label,
     tooltip
   } from '@hcengineering/ui'
-  import presentation, { createQuery, getClient } from '@hcengineering/presentation'
+  import presentation, { createQuery } from '@hcengineering/presentation'
   import { createEventDispatcher } from 'svelte'
   import { AssigneeCategory, assigneeCategoryOrder, getCategoryTitle } from '../assignee'
   import UserInfo from './UserInfo.svelte'
@@ -43,6 +45,7 @@
   export let allowDeselect = true
   export let titleDeselect: IntlString | undefined
   export let placeholder: IntlString = presentation.string.Search
+  export let placeholderParam: any | undefined = undefined
   export let ignoreUsers: Ref<Person>[] = []
   export let shadows: boolean = true
   export let width: 'medium' | 'large' | 'full' = 'medium'
@@ -51,8 +54,8 @@
   export let showCategories: boolean = true
   export let icon: Asset | AnySvelteComponent | undefined = undefined
 
-  const client = getClient()
+  // const client = getClient()
-  const hierarchy = client.getHierarchy()
+  // const hierarchy = client.getHierarchy()
   const currentEmployee = (getCurrentAccount() as EmployeeAccount).employee
 
   let search: string = ''
@@ -189,8 +192,17 @@
     dispatch('changeContent')
   }}
 >
-  <div class="header flex-between">
+  <div class="header">
-    <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
+    <EditWithIcon
+      icon={IconSearch}
+      size={'large'}
+      width={'100%'}
+      focus={!$deviceOptionsStore.isMobile}
+      bind:value={search}
+      {placeholder}
+      {placeholderParam}
+      on:change
+    />
   </div>
   {#if cHeight === 1}
     <div class="whereSelected" />
@@ -206,18 +218,17 @@
           {#if showCategories}
             {@const obj = toAny(contacts[item])}
             {@const category = categorizedPersons.get(obj._id)}
-            {@const cl = hierarchy.getClass(contacts[item]._class)}
+            <!-- {@const cl = hierarchy.getClass(contacts[item]._class)} -->
             {#if item === 0 || (item > 0 && categorizedPersons.get(toAny(contacts[item - 1])._id) !== categorizedPersons.get(obj._id))}
               <!--Category for first item-->
-              <div class="menu-group__header category-box">
+              {#if item > 0}<div class="menu-separator" />{/if}
-                <div class="flex-row-center pl-1">
+              <div class="menu-group__header flex-row-center category-box">
-                  {#if cl.icon}
+                <!-- {#if cl.icon}
-                    <div class="clear-mins mr-2"><Icon icon={cl.icon} size={'small'} /></div>
+                  <div class="clear-mins mr-2"><Icon icon={cl.icon} size={'small'} /></div>
-                  {/if}
+                {/if} -->
-                  <span class="overflow-label">
+                <span class="overflow-label">
-                    <Label label={getCategoryTitle(category)} />
+                  <Label label={getCategoryTitle(category)} />
-                  </span>
+                </span>
-                </div>
               </div>
             {/if}
           {/if}
@@ -231,16 +242,18 @@
               handleSelection(undefined, item)
             }}
           >
+            <div class="flex-grow clear-mins">
+              <UserInfo size={'smaller'} value={obj} {icon} />
+            </div>
             {#if allowDeselect && selected}
               <div class="check">
                 {#if obj._id === selected}
                   <div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                    <Icon icon={IconCheck} {size} />
+                    <Icon icon={IconCheck} size={'small'} />
                   </div>
                 {/if}
               </div>
             {/if}
-            <UserInfo size={'x-small'} value={obj} {icon} />
           </button>
         </svelte:fragment>
       </ListView>
@@ -249,6 +262,7 @@
   {#if cHeight === -1}
     <div class="whereSelected" />
   {/if}
+  <div class="menu-space" />
 </div>
 
 <style lang="scss">

plugins/contact-resources/src/components/Avatar.svelte

@@ -101,7 +101,7 @@
         src={url}
         alt={''}
         bind:this={imageElement}
-        on:load={(data) => {
+        on:load={() => {
           if (imageElement !== undefined) {
             try {
               accentColor = imageToColor(imageElement)
@@ -118,7 +118,7 @@
       src={url}
       alt={''}
       bind:this={imageElement}
-      on:load={(data) => {
+      on:load={() => {
         if (imageElement !== undefined) {
           try {
             accentColor = imageToColor(imageElement)
@@ -171,7 +171,7 @@
     height: 1.5rem;
   }
   .ava-smaller {
-    width: 1.75rem; // 32
+    width: 1.75rem; // 28
     height: 1.75rem;
   }
   .ava-small {

plugins/contact-resources/src/components/PersonContent.svelte

@@ -44,9 +44,9 @@
 </script>
 
 {#if value}
-  <DocNavLink object={value} onClick={onEdit} {disabled} noUnderline={disabled} {inline} {colorInherit}>
+  <DocNavLink object={value} onClick={onEdit} {disabled} noUnderline={disabled} {inline} {colorInherit} {accent}>
     <span
-      use:tooltip={showTooltip}
+      use:tooltip={disabled ? undefined : showTooltip}
       class="contentPresenter"
       class:text-base={enlargedText}
       class:inline-presenter={inline}
@@ -61,7 +61,7 @@
         </span>
       {/if}
       {#if shouldShowName}
-        <span class="eContentPresenterLabel" class:colorInherit>{getName(value)}</span>
+        <span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}>{getName(value)}</span>
       {/if}
     </span>
   </DocNavLink>
@@ -72,7 +72,12 @@
   {/if}
 {:else if shouldShowPlaceholder}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <span use:tooltip={showTooltip} on:click={onEditClick} class="contentPresenter" class:text-base={enlargedText}>
+  <span
+    class="contentPresenter"
+    class:text-base={enlargedText}
+    use:tooltip={disabled ? undefined : showTooltip}
+    on:click={onEditClick}
+  >
     {#if !inline && shouldShowAvatar}
       <span
         class="eContentPresenterIcon"
@@ -83,7 +88,7 @@
       </span>
     {/if}
     {#if shouldShowName && defaultName}
-      <span class="eContentPresenterLabel" class:colorInherit>
+      <span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}>
         <Label label={defaultName} />
       </span>
       {#if statusLabel}

plugins/contact-resources/src/components/UserBox.svelte

@@ -160,7 +160,7 @@
           {:else}
             <div class="flex-presenter not-selected">
               {#if icon}
-                <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
+                <div class="icon w-4" class:small-gap={size === 'inline' || size === 'small'}>
                   <Icon {icon} size={avatarSize} />
                 </div>
               {/if}

plugins/contact-resources/src/components/UsersPopup.svelte

@@ -17,7 +17,7 @@
   import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
   import type { Asset, IntlString } from '@hcengineering/platform'
   import presentation, { getClient, ObjectCreate, ObjectPopup } from '@hcengineering/presentation'
-  import { AnySvelteComponent, Icon, Label } from '@hcengineering/ui'
+  import { AnySvelteComponent, Label } from '@hcengineering/ui'
   import UserInfo from './UserInfo.svelte'
 
   export let _class: Ref<Class<Contact>>
@@ -71,17 +71,17 @@
 >
   <svelte:fragment slot="item" let:item={person}>
     <div class="flex flex-grow overflow-label">
-      <UserInfo size={'x-small'} value={person} {icon} />
+      <UserInfo size={'smaller'} value={person} {icon} />
     </div>
   </svelte:fragment>
 
   <svelte:fragment slot="category" let:item={person}>
     {@const cl = hierarchy.getClass(person._class)}
-    <div class="flex flex-grow overflow-label">
+    <div class="menu-group__header">
-      <span class="fs-medium flex-center gap-2 mt-2 mb-2 ml-2">
+      <span class="overflow-label">
-        {#if cl.icon}
+        <!-- {#if cl.icon}
           <Icon icon={cl.icon} size={'small'} />
-        {/if}
+        {/if} -->
         <Label label={cl.label} />
       </span>
     </div>

plugins/contact-resources/src/components/icons/Company.svelte

@@ -18,13 +18,18 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-  <path
+  <path d="M16 8H18V10H16V8Z" />
-    d="M3.25 3C3.11193 3 2.99836 2.88751 3.01541 2.7505C3.13822 1.76368 3.97992 1 5 1H11C12.0201 1 12.8618 1.76368 12.9846 2.7505C13.0016 2.88751 12.8881 3 12.75 3L3.25 3Z"
+  <path d="M22 8H20V10H22V8Z" />
-  />
+  <path d="M16 16H18V18H16V16Z" />
+  <path d="M22 16H20V18H22V16Z" />
+  <path d="M16 20H18V22H16V20Z" />
+  <path d="M22 20H20V22H22V20Z" />
+  <path d="M16 12H18V14H16V12Z" />
+  <path d="M22 12H20V14H22V12Z" />
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
-    d="M3.5 4C3.22386 4 3 4.22386 3 4.5V14.5C3 14.7761 3.22386 15 3.5 15H5.5C5.77614 15 6 14.7761 6 14.5V12.5C6 12.2239 6.22386 12 6.5 12H9.5C9.77614 12 10 12.2239 10 12.5V14.5C10 14.7761 10.2239 15 10.5 15H12.5C12.7761 15 13 14.7761 13 14.5V4.5C13 4.22386 12.7761 4 12.5 4H3.5ZM11 8C10.4477 8 10 8.44772 10 9V9.6C10 9.82091 10.1791 10 10.4 10H11.6C11.8209 10 12 9.82091 12 9.6V9C12 8.44772 11.5523 8 11 8ZM10 6C10 5.44772 10.4477 5 11 5C11.5523 5 12 5.44772 12 6V6.6C12 6.82091 11.8209 7 11.6 7H10.4C10.1791 7 10 6.82091 10 6.6V6ZM8 5C7.44772 5 7 5.44772 7 6V6.6C7 6.82091 7.17909 7 7.4 7H8.6C8.82091 7 9 6.82091 9 6.6V6C9 5.44772 8.55228 5 8 5ZM7 9C7 8.44772 7.44772 8 8 8C8.55228 8 9 8.44772 9 9V9.6C9 9.82091 8.82091 10 8.6 10H7.4C7.17909 10 7 9.82091 7 9.6V9ZM5 8C4.44772 8 4 8.44772 4 9V9.6C4 9.82091 4.17909 10 4.4 10H5.6C5.82091 10 6 9.82091 6 9.6V9C6 8.44772 5.55228 8 5 8ZM4 6C4 5.44772 4.44772 5 5 5C5.55228 5 6 5.44772 6 6V6.6C6 6.82091 5.82091 7 5.6 7H4.4C4.17909 7 4 6.82091 4 6.6V6Z"
+    d="M14 4C12.8954 4 12 4.89543 12 6V13H8C6.89543 13 6 13.8954 6 15V27H5C4.44772 27 4 27.4477 4 28C4 28.5523 4.44772 29 5 29H27C27.5523 29 28 28.5523 28 28C28 27.4477 27.5523 27 27 27H26V6C26 4.89543 25.1046 4 24 4H14ZM8 15H12V18H10V20H12V22H10V24H12V27H8V15ZM14 27H18V24H20V27H24V6H14V27Z"
   />
 </svg>

plugins/contact-resources/src/components/icons/Person.svelte

@@ -20,11 +20,9 @@
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M8 4C6.89545 4 6 4.89545 6 6V6.5C6 7.60455 6.89545 8.5 8 8.5C9.10455 8.5 10 7.60455 10 6.5V6C10 4.89545 9.10455 4 8 4Z"
+    d="M8 3.99988C7.50555 3.99988 7.0222 4.1465 6.61108 4.4212C6.19995 4.69591 5.87952 5.08635 5.6903 5.54317C5.50108 5.99998 5.45158 6.50265 5.54804 6.9876C5.6445 7.47256 5.88261 7.91801 6.23224 8.26764C6.58187 8.61728 7.02733 8.85538 7.51228 8.95184C7.99723 9.0483 8.4999 8.9988 8.95671 8.80958C9.41353 8.62036 9.80397 8.29993 10.0787 7.8888C10.3534 7.47768 10.5 6.99433 10.5 6.49988C10.5 5.83684 10.2366 5.20095 9.76777 4.73211C9.29893 4.26327 8.66304 3.99988 8 3.99988ZM8 7.99988C7.70333 7.99988 7.41332 7.9119 7.16665 7.74708C6.91997 7.58226 6.72771 7.34799 6.61418 7.0739C6.50065 6.79981 6.47095 6.49821 6.52882 6.20724C6.5867 5.91627 6.72956 5.649 6.93934 5.43922C7.14912 5.22944 7.4164 5.08658 7.70737 5.0287C7.99834 4.97082 8.29994 5.00053 8.57403 5.11406C8.84812 5.22759 9.08239 5.41985 9.24721 5.66652C9.41203 5.9132 9.5 6.20321 9.5 6.49988C9.49955 6.89756 9.34137 7.27883 9.06017 7.56004C8.77896 7.84125 8.39769 7.99943 8 7.99988Z"
   />
   <path
-    fill-rule="evenodd"
+    d="M8 0.999878C6.61553 0.999878 5.26216 1.41042 4.11101 2.17959C2.95987 2.94876 2.06266 4.04201 1.53285 5.32109C1.00303 6.60018 0.86441 8.00764 1.13451 9.36551C1.4046 10.7234 2.07129 11.9707 3.05026 12.9496C4.02922 13.9286 5.2765 14.5953 6.63437 14.8654C7.99224 15.1355 9.3997 14.9968 10.6788 14.467C11.9579 13.9372 13.0511 13.04 13.8203 11.8889C14.5895 10.7377 15 9.38435 15 7.99988C14.9979 6.144 14.2597 4.36474 12.9474 3.05244C11.6351 1.74014 9.85588 1.00197 8 0.999878ZM5 13.1881V12.4999C5.00044 12.1022 5.15862 11.7209 5.43983 11.4397C5.72104 11.1585 6.10231 11.0003 6.5 10.9999H9.5C9.89769 11.0003 10.279 11.1585 10.5602 11.4397C10.8414 11.7209 10.9996 12.1022 11 12.4999V13.1881C10.0896 13.7197 9.05426 13.9999 8 13.9999C6.94574 13.9999 5.91042 13.7197 5 13.1881ZM11.9963 12.4628C11.9863 11.8069 11.7191 11.1812 11.2521 10.7205C10.7852 10.2598 10.156 10.001 9.5 9.99988H6.5C5.84405 10.001 5.2148 10.2598 4.74786 10.7205C4.28093 11.1812 4.01369 11.8069 4.00375 12.4628C3.09703 11.6532 2.45762 10.5872 2.17017 9.40611C1.88272 8.22501 1.9608 6.98445 2.39407 5.84871C2.82734 4.71297 3.59536 3.73561 4.59644 3.04606C5.59751 2.35651 6.78442 1.98729 8 1.98729C9.21558 1.98729 10.4025 2.35651 11.4036 3.04606C12.4046 3.73561 13.1727 4.71297 13.6059 5.84871C14.0392 6.98445 14.1173 8.22501 13.8298 9.40611C13.5424 10.5872 12.903 11.6532 11.9963 12.4628Z"
-    clip-rule="evenodd"
-    d="M8 15C11.866 15 15 11.866 15 8C15 4.13403 11.866 1 8 1C4.13403 1 1 4.13403 1 8C1 11.866 4.13403 15 8 15ZM5.12134 10.8787L4.1109 11.8891C3.1156 10.8938 2.5 9.5188 2.5 8C2.5 4.96246 4.96246 2.5 8 2.5C11.0375 2.5 13.5 4.96246 13.5 8C13.5 9.5188 12.8844 10.8938 11.8891 11.8891L10.8787 10.8787C10.316 10.3161 9.55298 10 8.75739 10H7.24261C6.44702 10 5.68396 10.316 5.12134 10.8787Z"
   />
 </svg>

plugins/contact/src/index.ts

@@ -242,7 +242,8 @@ export const contactPlugin = plugin(contactId, {
     Homepage: '' as Asset,
     Whatsapp: '' as Asset,
     ComponentMembers: '' as Asset,
-    Profile: '' as Asset
+    Profile: '' as Asset,
+    KickUser: '' as Asset
   },
   space: {
     Employee: '' as Ref<Space>,

plugins/recruit-assets/assets/icons.svg

@@ -6,9 +6,8 @@
     <path d="M18.8,13.9c-0.3-0.1-0.6,0.1-0.7,0.4c-0.1,0.3,0.1,0.6,0.4,0.7c1.1,0.3,1.9,1.3,1.9,2.4V19c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6v-1.6C21.6,15.8,20.4,14.3,18.8,13.9z" />
     <path d="M15.6,4.5c-0.3-0.1-0.6,0.1-0.7,0.4c-0.1,0.3,0.1,0.6,0.4,0.7C16.4,6,17.2,7,17.2,8.1c0,1.1-0.8,2.1-1.9,2.4c-0.3,0.1-0.5,0.4-0.4,0.7c0.1,0.3,0.3,0.5,0.6,0.5c0,0,0.1,0,0.1,0c1.7-0.4,2.8-1.9,2.8-3.6C18.4,6.4,17.3,4.9,15.6,4.5z" />
   </symbol>
-  <symbol id="vacancy" viewBox="0 0 16 16">
+  <symbol id="vacancy" viewBox="0 0 32 32">
-    <path d="M11.7,3.6h-1.1C10.4,2.7,9.7,2,8.8,2H7.2C6.3,2,5.6,2.7,5.4,3.6H4.3C3,3.6,2,4.6,2,5.9V8c0,0.2,0.1,0.3,0.2,0.4 C3.8,9.3,5.9,9.9,8,9.9c2.1,0,4.2-0.5,5.8-1.5C13.9,8.3,14,8.2,14,8V5.9C14,4.6,13,3.6,11.7,3.6z M7.2,3h1.5c0.4,0,0.6,0.2,0.8,0.6 H6.5C6.6,3.2,6.9,3,7.2,3z M13,7.7c-1.4,0.8-3.2,1.2-5,1.2c-1.8,0-3.6-0.4-5-1.2V5.9c0-0.7,0.6-1.3,1.3-1.3h7.4 c0.7,0,1.3,0.6,1.3,1.3V7.7z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 6C13.4477 6 13 6.44772 13 7V8H19V7C19 6.44772 18.5523 6 18 6H14ZM21 8V7C21 5.34315 19.6569 4 18 4H14C12.3431 4 11 5.34315 11 7V8H6C3.79086 8 2 9.79086 2 12V24C2 26.2091 3.79086 28 6 28H26C28.2091 28 30 26.2091 30 24V12C30 9.79086 28.2091 8 26 8H21ZM6 10C4.89543 10 4 10.8954 4 12V16H28V12C28 10.8954 27.1046 10 26 10H6ZM28 18H17V19C17 19.5523 16.5523 20 16 20C15.4477 20 15 19.5523 15 19V18H4V24C4 25.1046 4.89543 26 6 26H26C27.1046 26 28 25.1046 28 24V18Z" />
-    <path d="M13.5,9.7c-0.3,0-0.5,0.2-0.5,0.5l-0.1,1.5c-0.1,0.8-0.7,1.3-1.4,1.3H4.5c-0.7,0-1.4-0.6-1.4-1.3L3,10.1 c0-0.3-0.3-0.5-0.5-0.5C2.2,9.7,2,9.9,2,10.2l0.1,1.5C2.2,13,3.3,14,4.5,14h6.9c1.3,0,2.3-1,2.4-2.3l0.1-1.5 C14,9.9,13.8,9.7,13.5,9.7z"/>
   </symbol>
   <symbol id="location" viewBox="0 0 16 16">
     <path d="M8,4.6c-1.5,0-2.6,1.2-2.6,2.6S6.5,9.9,8,9.9s2.6-1.2,2.6-2.6S9.5,4.6,8,4.6z M8,8.9c-0.9,0-1.6-0.7-1.6-1.6 c0-0.9,0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6C9.6,8.2,8.9,8.9,8,8.9z"/>
@@ -32,10 +31,9 @@
     <path d="M7.91486 10.1761C7.80538 9.1186 6.91913 8.30487 5.8592 8.29183C5.53827 8.92804 5.21105 9.90848 5.01729 10.5311C4.93355 10.8002 5.16675 11.0527 5.44262 10.9905C6.16831 10.8268 7.36057 10.5217 7.91486 10.1761Z"/>
     <path d="M4.75 2C2.67893 2 1 3.67893 1 5.75V11.25C1 13.3211 2.67893 15 4.75 15H10.2501C12.3212 15 14.0001 13.3211 14.0001 11.25V8C14.0001 7.58579 13.6643 7.25 13.2501 7.25C12.8359 7.25 12.5001 7.58579 12.5001 8V11.25C12.5001 12.4926 11.4927 13.5 10.2501 13.5H4.75C3.50736 13.5 2.5 12.4926 2.5 11.25V5.75C2.5 4.50736 3.50736 3.5 4.75 3.5H7C7.41421 3.5 7.75 3.16421 7.75 2.75C7.75 2.33579 7.41421 2 7 2H4.75Z"/>
   </symbol>
-  <symbol id="assignedToMe" viewBox="0 0 24 24">
+  <symbol id="assignedToMe" viewBox="0 0 32 32">
-    <path d="M19.2,17V4c0-1.2-1-2.2-2.2-2.2H4c-1.2,0-2.2,1-2.2,2.2v13c0,1.2,1,2.2,2.2,2.2h13C18.2,19.2,19.2,18.2,19.2,17z M3.2,17V4c0-0.4,0.3-0.8,0.8-0.8h13c0.4,0,0.8,0.3,0.8,0.8v13c0,0.4-0.3,0.8-0.8,0.8H4C3.6,17.8,3.2,17.4,3.2,17z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 6H8C6.89543 6 6 6.89543 6 8V24C6 25.1046 6.89543 26 8 26H24C25.1046 26 26 25.1046 26 24V8C26 6.89543 25.1046 6 24 6ZM8 4C5.79086 4 4 5.79086 4 8V24C4 26.2091 5.79086 28 8 28H24C26.2091 28 28 26.2091 28 24V8C28 5.79086 26.2091 4 24 4H8Z" />
-    <path d="M22,5.8c-0.4,0-0.8,0.3-0.8,0.8V21c0,0.1-0.1,0.2-0.2,0.2H6.5c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8H21 c1,0,1.8-0.8,1.8-1.8V6.5C22.7,6.1,22.4,5.8,22,5.8z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.7071 10.2929C24.0976 10.6834 24.0976 11.3166 23.7071 11.7071L14.7071 20.7071C14.3166 21.0976 13.6834 21.0976 13.2929 20.7071L9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929C9.68342 14.9024 10.3166 14.9024 10.7071 15.2929L14 18.5858L22.2929 10.2929C22.6834 9.90237 23.3166 9.90237 23.7071 10.2929Z" />
-    <path d="M14,7.3L9.5,12L7,9.7c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l3,2.8c0.3,0.3,0.8,0.3,1,0l5-5.1 c0.3-0.3,0.3-0.8,0-1.1C14.7,7,14.3,7,14,7.3z" />
   </symbol>
   <symbol id="review" viewBox="0 0 24 24">
     <path d="M22,10.2h-3.2V3c0-0.4-0.3-0.8-0.8-0.8H2C1.6,2.2,1.2,2.6,1.2,3v12c0,0.4,0.3,0.8,0.8,0.8h2.2L6,17.5 c0.3,0.3,0.8,0.3,1.1,0l1.8-1.8h1.4V19c0,0.4,0.3,0.8,0.8,0.8h5.2l1.3,1.3c0.3,0.3,0.8,0.3,1.1,0l1.3-1.3H22c0.4,0,0.8-0.3,0.8-0.8 v-8C22.8,10.6,22.4,10.2,22,10.2z M8.5,14.2c-0.2,0-0.4,0.1-0.5,0.2l-1.5,1.5L5,14.5c-0.1-0.1-0.3-0.2-0.5-0.2H2.8V3.8h14.5V11v3.2 H11H8.5z M21.2,18.2h-1.8c-0.2,0-0.4,0.1-0.5,0.2l-1,1l-1-1c-0.1-0.1-0.3-0.2-0.5-0.2h-4.8v-2.5H18c0.4,0,0.8-0.3,0.8-0.8v-3.2h2.5 V18.2z" />
@@ -51,11 +49,21 @@
     <path d="M22,3.2H2C1.6,3.2,1.2,3.6,1.2,4v15c0,0.4,0.3,0.8,0.8,0.8h7.2l2.3,2.3c0.3,0.3,0.8,0.3,1.1,0l2.3-2.3H22 c0.4,0,0.8-0.3,0.8-0.8V4C22.8,3.6,22.4,3.2,22,3.2z M21.2,18.2h-6.8c-0.2,0-0.4,0.1-0.5,0.2l-2,2l-2-2c-0.1-0.1-0.3-0.2-0.5-0.2 H2.8V4.8h18.5V18.2z" />
     <path d="M7.5,16.8c0.4,0,0.8-0.3,0.8-0.8c0-1.7,1.6-3.2,3.8-3.2c2.2,0,3.8,1.5,3.8,3.2c0,0.4,0.3,0.8,0.8,0.8 s0.8-0.3,0.8-0.8c0-1.9-1.2-3.5-2.9-4.2c0.6-0.6,0.9-1.4,0.9-2.3c0-1.8-1.5-3.2-3.2-3.2S8.8,7.7,8.8,9.5c0,0.9,0.4,1.7,0.9,2.3 C8,12.5,6.8,14.1,6.8,16C6.8,16.4,7.1,16.8,7.5,16.8z M10.2,9.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8S13,11.2,12,11.2 S10.2,10.5,10.2,9.5z" />
   </symbol>
-  <symbol id="skills" viewBox="0 0 24 24">
+  <symbol id="skills" viewBox="0 0 32 32">
-    <path d="M22.8,8.7c0-0.3-0.2-0.6-0.5-0.7L11.8,3.8c-0.2-0.1-0.4-0.1-0.6,0L0.7,8C0.4,8.1,0.2,8.4,0.2,8.7 s0.2,0.6,0.5,0.7L5,11.1v6c0,0.2,0.1,0.4,0.2,0.5l0.5-0.5c-0.5,0.5-0.5,0.5-0.5,0.5l0,0l0,0l0,0l0,0c0,0,0.1,0.1,0.1,0.1 c0.1,0.1,0.2,0.2,0.3,0.3C6,18.3,6.5,18.6,7,19c1.1,0.6,2.7,1.3,4.5,1.3c1.8,0,3.4-0.7,4.5-1.3c0.5-0.3,1-0.6,1.3-0.9 c0.2-0.1,0.3-0.2,0.3-0.3c0,0,0.1-0.1,0.1-0.1l0,0l0,0l0,0l0,0l-0.5-0.5c0.5,0.5,0.5,0.5,0.5,0.5c0.1-0.1,0.2-0.3,0.2-0.5v-6 l3.3-1.3v3.6c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8L22.8,8.7C22.8,8.7,22.8,8.7,22.8,8.7C22.8,8.7,22.8,8.7,22.8,8.7z M16.5,16.8c0,0-0.1,0.1-0.1,0.1c-0.3,0.2-0.6,0.5-1.1,0.8c-0.9,0.6-2.2,1.1-3.7,1.1c-1.5,0-2.8-0.5-3.7-1.1 c-0.5-0.3-0.8-0.5-1.1-0.8c-0.1,0-0.1-0.1-0.1-0.1v-5.1l4.7,1.9c0.2,0.1,0.4,0.1,0.6,0l4.7-1.9V16.8z M11.5,12.1L3,8.7l8.5-3.4 L20,8.7L11.5,12.1z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9518 2.30278C15.5946 1.8994 16.4054 1.8994 17.0482 2.30278L29.5241 10.1318C29.8198 10.3174 30 10.6461 30 11.0002V16.0002C30 16.5525 29.5523 17.0002 29 17.0002C28.4477 17.0002 28 16.5525 28 16.0002V12.8251L26 14.0802V22.0002C26 23.909 24.6192 25.4268 22.8496 26.4099C21.0462 27.4118 18.6225 28.0002 16 28.0002C13.3775 28.0002 10.9538 27.4118 9.1504 26.4099C7.38084 25.4268 6 23.909 6 22.0002V14.0802L2.4759 11.8687C2.18016 11.6831 2 11.3544 2 11.0002C2 10.6461 2.18016 10.3174 2.4759 10.1318L14.9518 2.30278ZM8 15.3352V22.0002C8 22.8529 8.63388 23.8351 10.1217 24.6616C11.5756 25.4694 13.6519 26.0002 16 26.0002C18.3481 26.0002 20.4244 25.4694 21.8783 24.6616C23.3661 23.8351 24 22.8529 24 22.0002V15.3352L17.0482 19.6977C16.4054 20.1011 15.5946 20.1011 14.9518 19.6977L8 15.3352ZM4.90804 11.0002L16 17.9608L27.092 11.0002L16 4.03971L4.90804 11.0002Z" />
   </symbol>
   <symbol id="issue" viewBox="0 0 16 16">
     <path d="M13.3,8.3c-0.1,2.8-2.5,5.1-5.4,5.1C5,13.4,2.6,11,2.6,8c0-2.9,2.3-5.2,5.1-5.4c0.1-0.4,0.2-0.7,0.4-1c0,0-0.1,0-0.1,0 C4.4,1.7,1.6,4.5,1.6,8c0,3.5,2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4c0,0,0-0.1,0-0.1C14,8.1,13.7,8.2,13.3,8.3z"/>
     <ellipse cx="12.1" cy="3.9" rx="2.5" ry="2.5"/>
   </symbol>
+  <symbol id="schedule" viewBox="0 0 16 16">
+    <path d="M8 4C8 3.72386 7.77614 3.5 7.5 3.5C7.22386 3.5 7 3.72386 7 4V8.5C7 8.77614 7.22386 9 7.5 9H10.5C10.7761 9 11 8.77614 11 8.5C11 8.22386 10.7761 8 10.5 8L8 8V4Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" />
+  </symbol>
+  <symbol id="talents" viewBox="0 0 32 32">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 11.0002C4 7.13425 7.13401 4.00024 11 4.00024C14.866 4.00024 18 7.13425 18 11.0002C18 14.8662 14.866 18.0002 11 18.0002C7.13401 18.0002 4 14.8662 4 11.0002ZM11 6.00024C8.23858 6.00024 6 8.23882 6 11.0002C6 13.7617 8.23858 16.0002 11 16.0002C13.7614 16.0002 16 13.7617 16 11.0002C16 8.23882 13.7614 6.00024 11 6.00024Z" />
+    <path d="M21 20.0002C20.4477 20.0002 20 20.448 20 21.0002C20 21.5525 20.4477 22.0002 21 22.0002H23C25.7614 22.0002 28 24.2388 28 27.0002C28 27.5525 28.4477 28.0002 29 28.0002C29.5523 28.0002 30 27.5525 30 27.0002C30 23.1343 26.866 20.0002 23 20.0002H21Z" />
+    <path d="M9 22.0002C6.23858 22.0002 4 24.2388 4 27.0002C4 27.5525 3.55228 28.0002 3 28.0002C2.44772 28.0002 2 27.5525 2 27.0002C2 23.1343 5.13401 20.0002 9 20.0002H13C16.866 20.0002 20 23.1343 20 27.0002C20 27.5525 19.5523 28.0002 19 28.0002C18.4477 28.0002 18 27.5525 18 27.0002C18 24.2388 15.7614 22.0002 13 22.0002H9Z" />
+    <path d="M20.9999 6C20.4476 6 19.9999 6.44772 19.9999 7C19.9999 7.55228 20.4476 8 20.9999 8C21.5693 8 22.1321 8.12156 22.6507 8.35654C23.1694 8.59153 23.6318 8.93453 24.0073 9.36262C24.3827 9.7907 24.6624 10.294 24.8277 10.8389C24.993 11.3837 25.04 11.9576 24.9657 12.5221C24.8914 13.0866 24.6974 13.6288 24.3967 14.1123C24.096 14.5958 23.6956 15.0095 23.2222 15.3259C22.7488 15.6422 22.2133 15.8538 21.6515 15.9466C21.0897 16.0393 20.5146 16.0111 19.9646 15.8637C19.4312 15.7208 18.8828 16.0373 18.7399 16.5708C18.5969 17.1043 18.9135 17.6526 19.447 17.7956C20.272 18.0166 21.1346 18.059 21.9773 17.9199C22.8199 17.7807 23.6232 17.4633 24.3333 16.9888C25.0435 16.5143 25.6441 15.8937 26.0951 15.1684C26.5461 14.4431 26.8371 13.6299 26.9486 12.7832C27.0601 11.9364 26.9895 11.0756 26.7416 10.2583C26.4936 9.441 26.0741 8.68605 25.5109 8.04392C24.9478 7.4018 24.2541 6.8873 23.4762 6.53482C22.6982 6.18234 21.854 6 20.9999 6Z" />
+  </symbol>
 </svg>

plugins/recruit-assets/src/index.ts

@@ -30,7 +30,9 @@ loadMetadata(recruit.icon, {
   AssignedToMe: `${icons}#assignedToMe`,
   Reviews: `${icons}#reviews`,
   Skills: `${icons}#skills`,
-  Issue: `${icons}#issue`
+  Issue: `${icons}#issue`,
+  Schedule: `${icons}#schedule`,
+  Talents: `${icons}#talents`
 })
 
 addStringsLoader(recruitId, async (lang: string) => await import(`../lang/${lang}.json`))

plugins/recruit-resources/src/components/VacancyCard.svelte

@@ -79,7 +79,7 @@
           {#if inline}
             <div class="flex-row-center">
               <VacancyIcon size={'small'} />
-              <span class="ml-1">
+              <span class="ml-2">
                 {vacancy.name}
               </span>
             </div>

plugins/recruit-resources/src/components/icons/Company.svelte

@@ -18,8 +18,18 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 8H18V10H16V8Z" />
+  <path d="M22 8H20V10H22V8Z" />
+  <path d="M16 16H18V18H16V16Z" />
+  <path d="M22 16H20V18H22V16Z" />
+  <path d="M16 20H18V22H16V20Z" />
+  <path d="M22 20H20V22H22V20Z" />
+  <path d="M16 12H18V14H16V12Z" />
+  <path d="M22 12H20V14H22V12Z" />
   <path
-    d="M13.5,13H13V5c0-0.2-0.2-0.4-0.4-0.5L7.1,3C7,3,6.8,3,6.7,3.1C6.6,3.2,6.5,3.3,6.5,3.5V6h-3C3.2,6,3,6.2,3,6.5V13H2.5 C2.2,13,2,13.2,2,13.5S2.2,14,2.5,14h11c0.3,0,0.5-0.2,0.5-0.5S13.8,13,13.5,13z M4,13V7h4.5v6H4z M9,6H7.5V4.2L12,5.4V13H9.5V6.5 C9.5,6.2,9.3,6,9,6z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14 4C12.8954 4 12 4.89543 12 6V13H8C6.89543 13 6 13.8954 6 15V27H5C4.44772 27 4 27.4477 4 28C4 28.5523 4.44772 29 5 29H27C27.5523 29 28 28.5523 28 28C28 27.4477 27.5523 27 27 27H26V6C26 4.89543 25.1046 4 24 4H14ZM8 15H12V18H10V20H12V22H10V24H12V27H8V15ZM14 27H18V24H20V27H24V6H14V27Z"
   />
 </svg>

plugins/recruit-resources/src/components/icons/Vacancy.svelte

@@ -18,11 +18,10 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M11.7,3.6h-1.1C10.4,2.7,9.7,2,8.8,2H7.2C6.3,2,5.6,2.7,5.4,3.6H4.3C3,3.6,2,4.6,2,5.9V8c0,0.2,0.1,0.3,0.2,0.4 C3.8,9.3,5.9,9.9,8,9.9c2.1,0,4.2-0.5,5.8-1.5C13.9,8.3,14,8.2,14,8V5.9C14,4.6,13,3.6,11.7,3.6z M7.2,3h1.5c0.4,0,0.6,0.2,0.8,0.6 H6.5C6.6,3.2,6.9,3,7.2,3z M13,7.7c-1.4,0.8-3.2,1.2-5,1.2c-1.8,0-3.6-0.4-5-1.2V5.9c0-0.7,0.6-1.3,1.3-1.3h7.4 c0.7,0,1.3,0.6,1.3,1.3V7.7z"
+    fill-rule="evenodd"
-  />
+    clip-rule="evenodd"
-  <path
+    d="M14 6C13.4477 6 13 6.44772 13 7V8H19V7C19 6.44772 18.5523 6 18 6H14ZM21 8V7C21 5.34315 19.6569 4 18 4H14C12.3431 4 11 5.34315 11 7V8H6C3.79086 8 2 9.79086 2 12V24C2 26.2091 3.79086 28 6 28H26C28.2091 28 30 26.2091 30 24V12C30 9.79086 28.2091 8 26 8H21ZM6 10C4.89543 10 4 10.8954 4 12V16H28V12C28 10.8954 27.1046 10 26 10H6ZM28 18H17V19C17 19.5523 16.5523 20 16 20C15.4477 20 15 19.5523 15 19V18H4V24C4 25.1046 4.89543 26 6 26H26C27.1046 26 28 25.1046 28 24V18Z"
-    d="M13.5,9.7c-0.3,0-0.5,0.2-0.5,0.5l-0.1,1.5c-0.1,0.8-0.7,1.3-1.4,1.3H4.5c-0.7,0-1.4-0.6-1.4-1.3L3,10.1 c0-0.3-0.3-0.5-0.5-0.5C2.2,9.7,2,9.9,2,10.2l0.1,1.5C2.2,13,3.3,14,4.5,14h6.9c1.3,0,2.3-1,2.4-2.3l0.1-1.5 C14,9.9,13.8,9.7,13.5,9.7z"
   />
 </svg>

plugins/recruit-resources/src/components/review/CreateReview.svelte

@@ -28,6 +28,7 @@
   import { ObjectSearchBox } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import recruit from '../../plugin'
+  import IconCompany from '../icons/Company.svelte'
 
   // export let space: Ref<SpaceWithStates>
   export let candidate: Ref<Person>
@@ -174,6 +175,7 @@
       _class={contact.class.Organization}
       bind:value={company}
       label={recruit.string.Company}
+      icon={IconCompany}
       kind={'secondary'}
       size={'large'}
       showNavigate={false}

plugins/recruit/src/index.ts

@@ -172,7 +172,9 @@ const recruit = plugin(recruitId, {
     AssignedToMe: '' as Asset,
     Reviews: '' as Asset,
     Skills: '' as Asset,
-    Issue: '' as Asset
+    Issue: '' as Asset,
+    Schedule: '' as Asset,
+    Talents: '' as Asset
   },
   resolver: {
     Location: '' as Resource<(loc: Location) => Promise<ResolvedLocation | undefined>>

plugins/tags-assets/assets/icons.svg

@@ -1,6 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="tags" viewBox="0 0 16 16">
-    <path d="M2.5,9.8l3.7,3.7c0,0,0,0,0,0c0.6,0.6,1.6,0.6,2.2,0l5.5-5.5C13.9,8,14,7.8,14,7.7V2.5C14,2.2,13.8,2,13.5,2H8.3 C8.1,2,8,2.1,7.9,2.1L2.5,7.6C2.2,7.9,2,8.3,2,8.7C2,9.1,2.2,9.5,2.5,9.8z M3.2,8.3L8.5,3H13v4.5l-5.3,5.3c-0.2,0.2-0.6,0.2-0.8,0 L3.2,9.1C3.1,9,3,8.9,3,8.7S3.1,8.4,3.2,8.3z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 12C5.55228 12 6 11.5523 6 11C6 10.4477 5.55228 10 5 10C4.44772 10 4 10.4477 4 11C4 11.5523 4.44772 12 5 12ZM5 13C6.10457 13 7 12.1046 7 11C7 9.89543 6.10457 9 5 9C3.89543 9 3 9.89543 3 11C3 12.1046 3.89543 13 5 13Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2071 2.29289C9.81658 1.90237 9.18342 1.90237 8.79289 2.29289L2.29289 8.79289C2.09744 8.98835 2 9.24253 2 9.5V14H6.5C6.75747 14 7.01165 13.9026 7.20711 13.7071L13.7071 7.20711C14.0976 6.81658 14.0976 6.18342 13.7071 5.79289L10.2071 2.29289ZM10.9142 1.58579C10.1332 0.804738 8.86683 0.804738 8.08579 1.58579L1.58579 8.08579C1.19526 8.47631 1 8.98815 1 9.5V14C1 14.5523 1.44772 15 2 15H6.5C7.01184 15 7.52369 14.8047 7.91421 14.4142L14.4142 7.91421C15.1953 7.13316 15.1953 5.86683 14.4142 5.08579L10.9142 1.58579Z" />
   </symbol>
   <symbol id="level-3" viewBox="0 0 16 16">
     <rect x="1" y="8" width="3" height="6" rx="1" />
@@ -10,11 +11,11 @@
   <symbol id="level-2" viewBox="0 0 16 16">
     <rect x="1" y="8" width="3" height="6" rx="1" />
     <rect x="6" y="5" width="3" height="9" rx="1" />
-    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
+    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".3" />
   </symbol>
   <symbol id="level-1" viewBox="0 0 16 16">
     <rect x="1" y="8" width="3" height="6" rx="1" />
-    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
+    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".3" />
-    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
+    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".3" />
   </symbol>
 </svg>

plugins/tags-resources/src/components/TagsPopup.svelte

@@ -15,7 +15,6 @@
 <script lang="ts">
   import { Class, Doc, Ref } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
-  import { translate } from '@hcengineering/platform'
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { TagCategory, TagElement } from '@hcengineering/tags'
   import {
@@ -24,13 +23,14 @@
     getPlatformColor,
     Icon,
     IconAdd,
-    IconClose,
+    IconSearch,
+    EditWithIcon,
     Label,
     showPopup,
     resizeObserver,
     deviceOptionsStore
   } from '@hcengineering/ui'
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import tags from '../plugin'
   import CreateTagElement from './CreateTagElement.svelte'
   import IconView from './icons/View.svelte'
@@ -39,6 +39,7 @@
   export let newElements: TagElement[] = []
   export let targetClass: Ref<Class<Doc>>
   export let placeholder: IntlString = presentation.string.Search
+  export let placeholderParam: any | undefined = undefined
   export let selected: Ref<TagElement>[] = []
   export let keyLabel: string = ''
   export let hideAdd: boolean = false
@@ -46,7 +47,6 @@
   const tagShowLimit = 50
 
   let search: string = ''
-  let searchElement: HTMLInputElement
   let show: boolean = false
   let objects: TagElement[] = []
   let categories: TagCategory[] = []
@@ -59,13 +59,6 @@
     categories = res
   })
 
-  let phTraslate: string = ''
-  $: if (placeholder) {
-    translate(placeholder, {}).then((res) => {
-      phTraslate = res
-    })
-  }
-
   // TODO: Add $not: {$in: []} query
   $: query.query(tags.class.TagElement, { title: { $like: '%' + search + '%' }, targetClass }, (result) => {
     objects = newElements.concat(result)
@@ -98,9 +91,6 @@
     if (count > 0) return count.toString()
     return ''
   }
-  onMount(() => {
-    if (searchElement && !$deviceOptionsStore.isMobile) searchElement.focus()
-  })
   const tagSort = (a: TagElement, b: TagElement) => {
     const r = (b.refCount ?? 0) - (a.refCount ?? 0)
     if (r === 0) {
@@ -111,47 +101,33 @@
 </script>
 
 <div class="selectPopup maxHeight" use:resizeObserver={() => dispatch('changeContent')}>
-  <div class="header no-border">
+  <div class="header flex-row-center gap-2">
-    <div class="flex-between flex-grow pr-2">
+    <EditWithIcon
-      <div class="flex-grow">
+      icon={IconSearch}
-        <input
+      size={'large'}
-          bind:this={searchElement}
+      width={'100%'}
-          type="text"
+      focus={!$deviceOptionsStore.isMobile}
-          bind:value={search}
+      bind:value={search}
-          placeholder={phTraslate}
+      {placeholder}
-          style="width: 100%;"
+      {placeholderParam}
-          on:change
+      on:change
-        />
+    />
-      </div>
+    <Button
-      <div class="buttons-group small-gap">
+      kind={'transparent'}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
+      size={'large'}
-        <div
+      icon={show ? IconView : IconViewHide}
-          class="clear-btn"
+      on:click={() => {
-          class:show={search !== ''}
+        show = !show
-          on:click={() => {
+      }}
-            search = ''
+    />
-            searchElement.focus()
+    {#if !hideAdd}<Button kind={'transparent'} size={'large'} icon={IconAdd} on:click={createTagElement} />{/if}
-          }}
-        >
-          {#if search !== ''}<div class="icon"><Icon icon={IconClose} size={'inline'} /></div>{/if}
-        </div>
-        <Button
-          kind={'transparent'}
-          size={'small'}
-          icon={show ? IconView : IconViewHide}
-          on:click={() => {
-            show = !show
-          }}
-        />
-        {#if !hideAdd}<Button kind={'transparent'} size={'small'} icon={IconAdd} on:click={createTagElement} />{/if}
-      </div>
-    </div>
   </div>
   <div class="scroll">
     <div class="box">
-      {#each categories as cat}
+      {#each categories as cat, i}
         {@const catObjects = objects.filter((el) => el.category === cat._id).sort(tagSort)}
         {#if catObjects.length > 0}
+          {#if i > 0}<div class="menu-separator" />{/if}
           <div class="sticky-wrapper">
             <button
               class="menu-group__header"
@@ -184,22 +160,22 @@
             <div class="menu-group">
               {#each catObjects.slice(0, 50) as element}
                 <button
-                  class="menu-item no-focus"
+                  class="menu-item no-focus flex-row-center"
                   class:selected={isSelected(selected, element)}
                   on:click={() => {
                     checkSelected(selected, element)
                   }}
                 >
-                  <div class="check">
+                  <div class="tag" style="background-color: {getPlatformColor(element.color)};" />
+                  <span class="lines-limit-2 flex-grow">{element.title}</span>
+                  <span class="ml-2 text-xs">
+                    ({element.refCount ?? 0})
+                  </span>
+                  <div class="check ml-3">
                     {#if isSelected(selected, element)}
                       <Icon icon={IconCheck} size={'small'} />
                     {/if}
                   </div>
-                  <div class="tag" style="background-color: {getPlatformColor(element.color)};" />
-                  <span class="lines-limit-2">{element.title}</span>
-                  <span class="ml-2 text-xs">
-                    ({element.refCount ?? 0})
-                  </span>
                 </button>
               {/each}
             </div>
@@ -213,6 +189,7 @@
       {/if}
     </div>
   </div>
+  <div class="menu-space" />
 </div>
 
 <style lang="scss">
@@ -231,6 +208,5 @@
     height: 100%;
     font-size: 0.75rem;
     color: var(--theme-dark-color);
-    border-top: 1px solid var(--theme-popup-divider);
   }
 </style>

plugins/task-assets/assets/icons.svg

@@ -15,13 +15,13 @@
   <symbol id='todo-uncheck' viewBox="0 0 16 16">
     <path d="M8,14.5c-3.6,0-6.5-2.9-6.5-6.5S4.4,1.5,8,1.5s6.5,2.9,6.5,6.5S11.6,14.5,8,14.5z M8,2.5C5,2.5,2.5,5,2.5,8 c0,3,2.5,5.5,5.5,5.5c3,0,5.5-2.5,5.5-5.5C13.5,5,11,2.5,8,2.5z"/>
   </symbol>
-  <symbol id="manage-templates" viewBox="0 0 16 16">
+  <symbol id="manage-templates" viewBox="0 0 32 32">
-    <path d="M13.3,8.3c-0.1,2.8-2.5,5.1-5.4,5.1C5,13.4,2.6,11,2.6,8c0-2.9,2.3-5.2,5.1-5.4c0.1-0.4,0.2-0.7,0.4-1c0,0-0.1,0-0.1,0 C4.4,1.7,1.6,4.5,1.6,8c0,3.5,2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4c0,0,0-0.1,0-0.1C14,8.1,13.7,8.2,13.3,8.3z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1058 4.4089C16.5542 3.7252 13.8484 3.90255 11.4078 4.91345C8.96729 5.92435 6.92852 7.7123 5.60772 10C4.28691 12.2877 3.75788 14.9473 4.10268 17.5663C4.44748 20.1853 5.64684 22.6174 7.51474 24.4853C9.38264 26.3532 11.8147 27.5525 14.4337 27.8973C17.0527 28.2421 19.7123 27.7131 22 26.3923C24.2877 25.0715 26.0757 23.0327 27.0866 20.5922C28.0975 18.1517 28.2748 15.4458 27.5911 12.8942C27.4482 12.3607 27.7648 11.8124 28.2982 11.6694C28.8317 11.5265 29.38 11.8431 29.523 12.3765C30.3206 15.3534 30.1137 18.5103 28.9343 21.3576C27.7549 24.2049 25.669 26.5834 23 28.1244C20.331 29.6653 17.2282 30.2825 14.1727 29.8802C11.1171 29.478 8.27974 28.0787 6.10052 25.8995C3.92131 23.7203 2.52206 20.8829 2.11979 17.8274C1.71753 14.7719 2.33473 11.669 3.87567 9C5.41661 6.33102 7.79517 4.24507 10.6425 3.06569C13.4897 1.88631 16.6466 1.67939 19.6235 2.47704C20.157 2.61999 20.4735 3.16832 20.3306 3.70179C20.1877 4.23526 19.6393 4.55184 19.1058 4.4089Z" />
-    <ellipse cx="12.1" cy="3.9" rx="2.5" ry="2.5"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 8.00001C27.1046 8.00001 28 7.10457 28 6.00001C28 4.89544 27.1046 4.00001 26 4.00001C24.8955 4.00001 24 4.89544 24 6.00001C24 7.10457 24.8955 8.00001 26 8.00001ZM26 10C28.2092 10 30 8.20914 30 6.00001C30 3.79087 28.2092 2.00001 26 2.00001C23.7909 2.00001 22 3.79087 22 6.00001C22 8.20914 23.7909 10 26 10Z" />
   </symbol>
-  <symbol id="task-state" viewBox="0 0 16 16">
+  <symbol id="task-state" viewBox="0 0 32 32">
-    <path d="M12.2,8.2c-2.4,0-4.3-1.9-4.3-4.3c0-0.6,0.1-1.2,0.3-1.7c-0.1,0-0.1,0-0.2,0C4.7,2.2,2.1,4.8,2.1,8c0,3.2,2.6,5.9,5.9,5.9c3.2,0,5.9-2.6,5.9-5.9c0-0.1,0-0.1,0-0.2C13.3,8.1,12.7,8.2,12.2,8.2z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1058 4.4089C16.5542 3.7252 13.8484 3.90255 11.4078 4.91345C8.96729 5.92435 6.92852 7.7123 5.60772 10C4.28691 12.2877 3.75788 14.9473 4.10268 17.5663C4.44748 20.1853 5.64684 22.6174 7.51474 24.4853C9.38264 26.3532 11.8147 27.5525 14.4337 27.8973C17.0527 28.2421 19.7123 27.7131 22 26.3923C24.2877 25.0715 26.0757 23.0327 27.0866 20.5922C28.0975 18.1517 28.2748 15.4458 27.5911 12.8942C27.4482 12.3607 27.7648 11.8124 28.2982 11.6694C28.8317 11.5265 29.38 11.8431 29.523 12.3765C30.3206 15.3534 30.1137 18.5103 28.9343 21.3576C27.7549 24.2049 25.669 26.5834 23 28.1244C20.331 29.6653 17.2282 30.2825 14.1727 29.8802C11.1171 29.478 8.27974 28.0787 6.10052 25.8995C3.92131 23.7203 2.52206 20.8829 2.11979 17.8274C1.71753 14.7719 2.33473 11.669 3.87567 9C5.41661 6.33102 7.79517 4.24507 10.6425 3.06569C13.4897 1.88631 16.6466 1.67939 19.6235 2.47704C20.157 2.61999 20.4735 3.16832 20.3306 3.70179C20.1877 4.23526 19.6393 4.55184 19.1058 4.4089Z" />
-    <circle class="st0" cx="12.1" cy="3.8" r="2.5" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 8.00001C27.1046 8.00001 28 7.10457 28 6.00001C28 4.89544 27.1046 4.00001 26 4.00001C24.8955 4.00001 24 4.89544 24 6.00001C24 7.10457 24.8955 8.00001 26 8.00001ZM26 10C28.2092 10 30 8.20914 30 6.00001C30 3.79087 28.2092 2.00001 26 2.00001C23.7909 2.00001 22 3.79087 22 6.00001C22 8.20914 23.7909 10 26 10Z" />
   </symbol>
   <symbol id="dashboard" viewBox="0 0 256 256">
     <g style="stroke:none;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;">

plugins/task-resources/src/components/state/StatusesPopup.svelte

@@ -23,18 +23,19 @@
 </script>
 
 <div class="antiPopup">
-  <div class="ap-space" />
+  <div class="ap-space x2" />
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
-    class="ap-menuItem ap-woScroll flex-row-center redlight"
+    class="ap-menuItem hoverable flex-row-center redlight"
     on:click={() => {
       dispatch('close')
       onDelete()
     }}
   >
-    <div class="mr-3">
+    <div class="mr-2">
       <Delete size={'small'} />
     </div>
     <Label label={task.string.Delete} />
   </div>
-  <div class="ap-space" />
+  <div class="ap-space x2" />
 </div>

plugins/tracker-assets/assets/icons.svg

@@ -15,23 +15,34 @@
   <symbol id="stop" viewBox="-4 -4 16 16">
     <rect width="8" height="8"/>
   </symbol>
-  <symbol id="component" viewBox="-3 -3 16 16">
+  <symbol id="component" viewBox="0 0 16 16">
-    <path d="M3.45455 0H0.545455C0.244208 0 0 0.244208 0 0.545455V3.45455C0 3.75579 0.244208 4 0.545455 4H3.45455C3.75579 4 4 3.75579 4 3.45455V0.545455C4 0.244208 3.75579 0 3.45455 0Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.50516 2.20452L2.20446 7.50522C1.93121 7.77847 1.93121 8.2215 2.20446 8.49476L7.50519 13.7955C7.77845 14.0687 8.22148 14.0687 8.49473 13.7955L13.7954 8.49481C14.0687 8.22156 14.0687 7.77853 13.7954 7.50528L8.4947 2.20452C8.22145 1.93127 7.77842 1.93127 7.50516 2.20452ZM1.49765 6.79841L6.79835 1.49771C7.46196 0.834095 8.5379 0.834096 9.20152 1.49772L14.5022 6.79847C15.1658 7.46209 15.1658 8.53801 14.5022 9.20162L9.20154 14.5023C8.53793 15.1659 7.462 15.1659 6.79838 14.5023L1.49765 9.20157C0.834037 8.53796 0.834034 7.46202 1.49765 6.79841Z" />
-    <path d="M9.95479 0H7.0457C6.74445 0 6.50024 0.244208 6.50024 0.545455V3.45455C6.50024 3.75579 6.74445 4 7.0457 4H9.95479C10.256 4 10.5002 3.75579 10.5002 3.45455V0.545455C10.5002 0.244208 10.256 0 9.95479 0Z"/>
-    <path d="M3.45455 6.50024H0.545455C0.244208 6.50024 0 6.74445 0 7.0457V9.95479C0 10.256 0.244208 10.5002 0.545455 10.5002H3.45455C3.75579 10.5002 4 10.256 4 9.95479V7.0457C4 6.74445 3.75579 6.50024 3.45455 6.50024Z"/>
-    <path d="M9.95479 6.50024H7.0457C6.74445 6.50024 6.50024 6.74445 6.50024 7.0457V9.95479C6.50024 10.256 6.74445 10.5002 7.0457 10.5002H9.95479C10.256 10.5002 10.5002 10.256 10.5002 9.95479V7.0457C10.5002 6.74445 10.256 6.50024 9.95479 6.50024Z"/>
   </symbol>
   <symbol id="issue" viewBox="0 0 16 16">
     <path d="M15.5 2.50001L8 10L4.5 6.50001L5.20711 5.79291L8 8.5858L14.7929 1.79291L15.5 2.50001Z" />
     <path d="M3.5 2C2.67157 2 2 2.67157 2 3.5V12.5C2 13.3284 2.67157 14 3.5 14H12.5C13.3284 14 14 13.3284 14 12.5V8H13V12.5C13 12.7761 12.7761 13 12.5 13H3.5C3.22386 13 3 12.7761 3 12.5V3.5C3 3.22386 3.22386 3 3.5 3H11V2H3.5Z" />
   </symbol>
+  <symbol id="sub-issue" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.73444 2.19183C8.27831 1.93589 7.72169 1.93589 7.26556 2.19183L1.25519 5.56425C1.09757 5.65269 1 5.81925 1 5.99988C1 6.1805 1.09757 6.34706 1.25519 6.4355L4.04323 7.99988L1.25519 9.56425C1.09757 9.65269 1 9.81925 1 9.99988C1 10.1805 1.09757 10.3471 1.25519 10.4355L7.26556 13.8079C7.72169 14.0639 8.27831 14.0639 8.73444 13.8079L14.7448 10.4355C14.9024 10.3471 15 10.1805 15 9.99988C15 9.81925 14.9024 9.65269 14.7448 9.56425L11.9568 7.99988L14.7448 6.4355C14.9024 6.34706 15 6.1805 15 5.99988C15 5.81925 14.9024 5.65269 14.7448 5.56425L8.73444 2.19183ZM7.75519 3.06308C7.90723 2.97777 8.09277 2.97777 8.24481 3.06308L13.4788 5.99988L8.24481 8.93668C8.09277 9.02199 7.90723 9.02199 7.75519 8.93668L2.52119 5.99988L7.75519 3.06308Z" />
+  </symbol>
+  <symbol id="parent-issue" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.73444 2.19183C8.27831 1.93589 7.72169 1.93589 7.26556 2.19183L1.25519 5.56425C1.09757 5.65269 1 5.81925 1 5.99988C1 6.1805 1.09757 6.34706 1.25519 6.4355L4.04323 7.99988L1.25519 9.56425C1.09757 9.65269 1 9.81925 1 9.99988C1 10.1805 1.09757 10.3471 1.25519 10.4355L7.26556 13.8079C7.72169 14.0639 8.27831 14.0639 8.73444 13.8079L14.7448 10.4355C14.9024 10.3471 15 10.1805 15 9.99988C15 9.81925 14.9024 9.65269 14.7448 9.56425L11.9568 7.99988L14.7448 6.4355C14.9024 6.34706 15 6.1805 15 5.99988C15 5.81925 14.9024 5.65269 14.7448 5.56425L8.73444 2.19183ZM5.06442 8.57287L7.26556 9.80793C7.72169 10.0639 8.27831 10.0639 8.73444 9.80793L10.9356 8.57287L13.4788 9.99988L8.24481 12.9367C8.09277 13.022 7.90723 13.022 7.75519 12.9367L2.52119 9.99988L5.06442 8.57287Z" />
+  </symbol>
+  <symbol id="new-issue" viewBox="0 0 16 16">
+    <path d="M8 14.5C8 14.2239 8.22386 14 8.5 14H14.5C14.7761 14 15 14.2239 15 14.5C15 14.7761 14.7761 15 14.5 15H8.5C8.22386 15 8 14.7761 8 14.5Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5607 1.43934C11.9749 0.853553 11.0251 0.853553 10.4394 1.43934L1.43934 10.4394C1.15804 10.7207 1 11.1022 1 11.5V14.5C1 14.7761 1.22386 15 1.5 15H4.50002C4.89784 15 5.27937 14.842 5.56068 14.5607L14.5607 5.56066C15.1465 4.97487 15.1465 4.02513 14.5607 3.43934L12.5607 1.43934ZM11.1465 2.14645C11.3417 1.95118 11.6583 1.95118 11.8536 2.14645L13.8536 4.14645C14.0488 4.34171 14.0488 4.65829 13.8536 4.85355L11.9571 6.74998L9.25004 4.04287L11.1465 2.14645ZM8.54293 4.74998L2.14645 11.1465C2.05268 11.2402 2 11.3674 2 11.5V14H4.50002C4.63263 14 4.7598 13.9473 4.85357 13.8536L11.25 7.45708L8.54293 4.74998Z" />
+  </symbol>
+  <symbol id="dueDate" viewBox="0 0 16 16">
+    <path d="M8 4C8 3.72386 7.77614 3.5 7.5 3.5C7.22386 3.5 7 3.72386 7 4V8.5C7 8.77614 7.22386 9 7.5 9H10.5C10.7761 9 11 8.77614 11 8.5C11 8.22386 10.7761 8 10.5 8L8 8V4Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" />
+  </symbol>
   <symbol id="project" viewBox="0 0 24 24">
     <path d="M15.5 2.50001L8 10L4.5 6.50001L5.20711 5.79291L8 8.5858L14.7929 1.79291L15.5 2.50001Z" />
     <path d="M3.5 2C2.67157 2 2 2.67157 2 3.5V12.5C2 13.3284 2.67157 14 3.5 14H12.5C13.3284 14 14 13.3284 14 12.5V8H13V12.5C13 12.7761 12.7761 13 12.5 13H3.5C3.22386 13 3 12.7761 3 12.5V3.5C3 3.22386 3.22386 3 3.5 3H11V2H3.5Z" />
   </symbol>
-  <symbol id="document" viewBox="0 0 16 16">
+  <symbol id="relations" viewBox="0 0 16 16">
-    <path d="M8,14.5c-3.6,0-6.5-2.9-6.5-6.5S4.4,1.5,8,1.5s6.5,2.9,6.5,6.5S11.6,14.5,8,14.5z M8,2.5C5,2.5,2.5,5,2.5,8 c0,3,2.5,5.5,5.5,5.5c3,0,5.5-2.5,5.5-5.5C13.5,5,11,2.5,8,2.5z"/>
+    <path d="M8 0.999878C6.61553 0.999878 5.26216 1.41042 4.11101 2.17959C2.95987 2.94876 2.06266 4.04201 1.53285 5.32109C1.00303 6.60018 0.86441 8.00764 1.13451 9.36551C1.4046 10.7234 2.07129 11.9707 3.05026 12.9496C4.02922 13.9286 5.2765 14.5953 6.63437 14.8654C7.99224 15.1355 9.3997 14.9968 10.6788 14.467C11.9579 13.9372 13.0511 13.04 13.8203 11.8889C14.5895 10.7377 15 9.38435 15 7.99988C15 6.14336 14.2625 4.36288 12.9497 3.05013C11.637 1.73738 9.85652 0.999878 8 0.999878ZM8 13.9999C6.81332 13.9999 5.65328 13.648 4.66658 12.9887C3.67989 12.3294 2.91085 11.3923 2.45673 10.296C2.0026 9.19962 1.88378 7.99322 2.11529 6.82934C2.3468 5.66545 2.91825 4.59635 3.75736 3.75724C4.59648 2.91812 5.66558 2.34668 6.82946 2.11517C7.99335 1.88365 9.19975 2.00247 10.2961 2.4566C11.3925 2.91073 12.3295 3.67976 12.9888 4.66646C13.6481 5.65315 14 6.81319 14 7.99988C14 9.59118 13.3679 11.1173 12.2426 12.2425C11.1174 13.3677 9.5913 13.9999 8 13.9999Z" />
-    <polygon points="7.4,10.7 5,8.4 5.7,7.6 7.3,9.3 10.3,5.7 11,6.3 "/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 5.64645C11.5488 5.84171 11.5488 6.15829 11.3536 6.35355L7.35355 10.3536C7.15829 10.5488 6.84171 10.5488 6.64645 10.3536L4.64645 8.35355C4.45118 8.15829 4.45118 7.84171 4.64645 7.64645C4.84171 7.45118 5.15829 7.45118 5.35355 7.64645L7 9.29289L10.6464 5.64645C10.8417 5.45118 11.1583 5.45118 11.3536 5.64645Z" />
   </symbol>
 
   <symbol id="inbox" viewBox="0 0 16 16">
@@ -53,12 +64,6 @@
   <symbol id="components" viewBox="0 0 16 16">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M7.50518 2.20452L2.20448 7.50522C1.93122 7.77847 1.93122 8.2215 2.20448 8.49476L7.50521 13.7955C7.77846 14.0687 8.22149 14.0687 8.49475 13.7955L13.7954 8.49481C14.0687 8.22156 14.0687 7.77853 13.7954 7.50528L8.49472 2.20452C8.22146 1.93127 7.77843 1.93127 7.50518 2.20452ZM1.49766 6.79841L6.79836 1.49771C7.46198 0.834095 8.53792 0.834096 9.20153 1.49772L14.5022 6.79847C15.1659 7.46209 15.1659 8.53801 14.5022 9.20162L9.20156 14.5023C8.53794 15.1659 7.46201 15.1659 6.7984 14.5023L1.49767 9.20157C0.834052 8.53796 0.834049 7.46202 1.49766 6.79841Z" />
   </symbol>
-  <symbol id="newissue" viewBox="0 0 16 16">
-    <path d="M14.7826 3.26359C15.1313 2.69123 15.0606 1.93115 14.5705 1.43492C14.0757 0.933932 13.3153 0.865765 12.7483 1.23041C13.2123 2.09277 13.9198 2.79999 14.7826 3.26359Z"/>
-    <path d="M11.8171 2.11829L6.78472 7.18C7.77457 7.47517 8.57699 8.21908 8.95006 9.18198L13.9064 4.20208C13.0535 3.68436 12.3369 2.9696 11.8171 2.11829Z"/>
-    <path d="M7.91486 10.1761C7.80538 9.1186 6.91913 8.30487 5.8592 8.29183C5.53827 8.92804 5.21105 9.90848 5.01729 10.5311C4.93355 10.8002 5.16675 11.0527 5.44262 10.9905C6.16831 10.8268 7.36057 10.5217 7.91486 10.1761Z"/>
-    <path d="M4.75 2C2.67893 2 1 3.67893 1 5.75V11.25C1 13.3211 2.67893 15 4.75 15H10.2501C12.3212 15 14.0001 13.3211 14.0001 11.25V8C14.0001 7.58579 13.6643 7.25 13.2501 7.25C12.8359 7.25 12.5001 7.58579 12.5001 8V11.25C12.5001 12.4926 11.4927 13.5 10.2501 13.5H4.75C3.50736 13.5 2.5 12.4926 2.5 11.25V5.75C2.5 4.50736 3.50736 3.5 4.75 3.5H7C7.41421 3.5 7.75 3.16421 7.75 2.75C7.75 2.33579 7.41421 2 7 2H4.75Z"/>
-  </symbol>
   <symbol id="magnifier" viewBox="1 1 13 13">
     <path d="M9.5 7C9.5 8.38071 8.38071 9.5 7 9.5C5.61929 9.5 4.5 8.38071 4.5 7C4.5 5.61929 5.61929 4.5 7 4.5C8.38071 4.5 9.5 5.61929 9.5 7ZM9.24822 10.3089C8.60751 10.745 7.83353 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3C9.20914 3 11 4.79086 11 7C11 7.83353 10.745 8.60751 10.3089 9.24822L12.7803 11.7197C13.0732 12.0126 13.0732 12.4874 12.7803 12.7803C12.4874 13.0732 12.0126 13.0732 11.7197 12.7803L9.24822 10.3089Z" fill-rule="evenodd" clip-rule="evenodd"/>
   </symbol>
@@ -69,8 +74,11 @@
     <path d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M7,12c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S9.8,12,7,12z" />
   </symbol>
 
-  <symbol id="status-backlog" viewBox="0 0 14 14">
+  <symbol id="status-backlog" viewBox="0 0 16 16">
-    <path d="M13.9,7.9l-2-0.3c0-0.2,0-0.4,0-0.7s0-0.4,0-0.7l2-0.3C14,6.4,14,6.7,14,7S14,7.6,13.9,7.9z M13.5,4.3c-0.2-0.6-0.5-1.1-0.9-1.6L11,4c0.3,0.3,0.5,0.7,0.7,1.1L13.5,4.3z M11.3,1.4L10,3C9.7,2.8,9.3,2.5,8.9,2.4l0.8-1.8C10.2,0.8,10.8,1.1,11.3,1.4z M7.9,0.1L7.7,2C7.4,2,7.2,2,7,2S6.6,2,6.3,2l-0.3-2C6.4,0,6.7,0,7,0S7.6,0,7.9,0.1z M4.3,0.5l0.8,1.8C4.7,2.5,4.3,2.8,4,3L2.7,1.4C3.2,1.1,3.8,0.8,4.3,0.5z M1.4,2.7L3,4C2.8,4.3,2.5,4.7,2.4,5.1L0.5,4.3C0.8,3.8,1.1,3.2,1.4,2.7z M0.1,6.1C0,6.4,0,6.7,0,7s0,0.6,0.1,0.9l2-0.3C2,7.4,2,7.2,2,7s0-0.4,0-0.7L0.1,6.1z M0.5,9.7l1.8-0.8C2.5,9.3,2.8,9.7,3,10l-1.6,1.2C1.1,10.8,0.8,10.2,0.5,9.7z M2.7,12.6L4,11c0.3,0.3,0.7,0.5,1.1,0.7l-0.8,1.8C3.8,13.2,3.2,12.9,2.7,12.6z M6.1,13.9l0.3-2c0.2,0,0.4,0,0.7,0s0.4,0,0.7,0l0.3,2C7.6,14,7.3,14,7,14S6.4,14,6.1,13.9z M9.7,13.5l-0.8-1.8c0.4-0.2,0.8-0.4,1.1-0.7l1.2,1.6C10.8,12.9,10.2,13.2,9.7,13.5z M12.6,11.3L11,10c0.3-0.3,0.5-0.7,0.7-1.1l1.8,0.8C13.2,10.2,12.9,10.8,12.6,11.3z" />
+    <path d="M2.08293 7.00003C2.50445 4.48753 4.48747 2.50451 6.99997 2.08299V1.07092C3.93428 1.50944 1.50937 3.93434 1.07086 7.00003H2.08293Z" />
+    <path d="M2.08293 9.00003H1.07086C1.50937 12.0657 3.93428 14.4906 6.99997 14.9291V13.9171C4.48747 13.4956 2.50445 11.5125 2.08293 9.00003Z" />
+    <path d="M13.917 9.00003H14.9291C14.4906 12.0657 12.0657 14.4906 8.99997 14.9291V13.9171C11.5125 13.4956 13.4955 11.5125 13.917 9.00003Z" />
+    <path d="M14.9291 7.00003C14.4906 3.93434 12.0657 1.50944 8.99997 1.07092V2.08299C11.5125 2.50451 13.4955 4.48753 13.917 7.00003H14.9291Z" />
   </symbol>
   <symbol id="status-todo" viewBox="0 0 14 14">
     <path d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M7,12c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S9.8,12,7,12z" />
@@ -89,23 +97,23 @@
   <symbol id="priority-nopriority" viewBox="0 0 16 16">
     <rect opacity="0.6" x="2" y="7.5" width="12" height="1" rx="0.5" />
   </symbol>
-  <symbol id="priority-urgent" viewBox="-1 -1 16 16">
+  <symbol id="priority-urgent" viewBox="0 0 16 16">
-    <path fill="var(--primary-color-orange-02)" d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
+    <path fill="var(--theme-urgent-color)" fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4ZM9 11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10C8.55229 10 9 10.4477 9 11ZM8.97375 4.52497C8.98803 4.23938 8.76032 4 8.47438 4H7.52562C7.23968 4 7.01197 4.23938 7.02625 4.52497L7.21255 8.25094C7.23353 8.67055 7.57986 9 8 9C8.42014 9 8.76647 8.67055 8.78745 8.25094L8.97375 4.52497Z" />
   </symbol>
   <symbol id="priority-high" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
+    <path d="M3 10.5C3 10.2239 3.22386 10 3.5 10H4.5C4.77614 10 5 10.2239 5 10.5V13.5C5 13.7761 4.77614 14 4.5 14H3.5C3.22386 14 3 13.7761 3 13.5V10.5Z" />
-    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
+    <path d="M7 6.5C7 6.22386 7.22386 6 7.5 6H8.5C8.77614 6 9 6.22386 9 6.5V13.5C9 13.7761 8.77614 14 8.5 14H7.5C7.22386 14 7 13.7761 7 13.5V6.5Z" />
-    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
+    <path d="M11 2.5C11 2.22386 11.2239 2 11.5 2H12.5C12.7761 2 13 2.22386 13 2.5V13.5C13 13.7761 12.7761 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5V2.5Z" />
   </symbol>
   <symbol id="priority-medium" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
+    <path d="M3 10.5C3 10.2239 3.22386 10 3.5 10H4.5C4.77614 10 5 10.2239 5 10.5V13.5C5 13.7761 4.77614 14 4.5 14H3.5C3.22386 14 3 13.7761 3 13.5V10.5Z" />
-    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
+    <path d="M7 6.5C7 6.22386 7.22386 6 7.5 6H8.5C8.77614 6 9 6.22386 9 6.5V13.5C9 13.7761 8.77614 14 8.5 14H7.5C7.22386 14 7 13.7761 7 13.5V6.5Z" />
-    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".15" />
+    <path d="M11 2.5C11 2.22386 11.2239 2 11.5 2H12.5C12.7761 2 13 2.22386 13 2.5V13.5C13 13.7761 12.7761 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5V2.5Z" fill-opacity="0.3"/>
   </symbol>
   <symbol id="priority-low" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
+    <path d="M3 10.5C3 10.2239 3.22386 10 3.5 10H4.5C4.77614 10 5 10.2239 5 10.5V13.5C5 13.7761 4.77614 14 4.5 14H3.5C3.22386 14 3 13.7761 3 13.5V10.5Z" />
-    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".15" />
+    <path d="M7 6.5C7 6.22386 7.22386 6 7.5 6H8.5C8.77614 6 9 6.22386 9 6.5V13.5C9 13.7761 8.77614 14 8.5 14H7.5C7.22386 14 7 13.7761 7 13.5V6.5Z" fill-opacity="0.3"/>
-    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".15" />
+    <path d="M11 2.5C11 2.22386 11.2239 2 11.5 2H12.5C12.7761 2 13 2.22386 13 2.5V13.5C13 13.7761 12.7761 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5V2.5Z" fill-opacity="0.3"/>
   </symbol>
 
   <symbol id="list" viewBox="0 0 16 16">
@@ -155,35 +163,29 @@
     <path fill-rule="evenodd" clip-rule="evenodd" d="M8.75581 1.21148C8.28876 0.929507 7.71124 0.929507 7.24419 1.21148L2.74419 3.92829C2.28337 4.20651 2 4.71711 2 5.26927V10.7307C2 11.2829 2.28337 11.7935 2.74419 12.0717L7.24419 14.7885C7.71124 15.0705 8.28876 15.0705 8.75581 14.7885L13.2558 12.0717C13.7166 11.7935 14 11.2829 14 10.7307V5.26927C14 4.71711 13.7166 4.20651 13.2558 3.92829L8.75581 1.21148ZM12.5 5.26928L8 2.55246L3.5 5.26927L3.5 10.7307L8 13.4475L12.5 10.7307L12.5 5.26928Z" />
   </symbol>
 
-  <symbol id="copyID" viewBox="0 0 14 15">
-    <path d="M7.81684 3.75744V3.75744C7.81123 3.831 7.86122 3.89725 7.9335 3.91202C8.22729 3.98537 8.42847 4.25589 8.41417 4.55835V5.37502C8.41417 5.7758 8.73906 6.10069 9.13983 6.10069C9.54061 6.10101 9.86576 5.77638 9.86608 5.3756C9.86608 5.37541 9.86608 5.37522 9.86608 5.37502V3.31877V3.31877C9.86608 2.83745 9.4759 2.44727 8.99459 2.44727C8.99342 2.44727 8.99225 2.44727 8.99108 2.44727H7.98542C7.94658 2.4471 7.90932 2.46267 7.88217 2.49044C7.85478 2.51781 7.83945 2.55497 7.83958 2.59369C7.84075 2.86961 7.84017 3.46402 7.81683 3.75744L7.81684 3.75744Z" />
-    <path d="M5.22317 13.4029C5.22317 13.0022 4.89827 12.6773 4.4975 12.6773H2.03233C1.68869 12.6545 1.42802 12.3584 1.449 12.0146V4.55845C1.43301 4.25112 1.6402 3.97676 1.94017 3.90803C2.01096 3.89368 2.06058 3.82967 2.05683 3.75753C2.03408 3.3107 2.02708 2.8242 2.02475 2.59087C2.02379 2.51101 1.95878 2.44678 1.87892 2.44678H0.875001H0.875001C0.393689 2.44485 0.00194369 2.83346 7.02912e-06 3.31478C1.55273e-06 3.31614 -7.23664e-07 3.31751 1.99927e-07 3.31887V13.2571C1.27299e-07 13.7381 0.389923 14.128 0.870916 14.128C0.871111 14.128 0.871305 14.128 0.8715 14.128H4.4975C4.89804 14.128 5.22284 13.8035 5.22316 13.4029L5.22317 13.4029Z" />
-    <path d="M6.96321 3.60887V2.44921C6.96321 2.28812 6.83263 2.15754 6.67154 2.15754H6.22938C6.15513 2.15744 6.09271 2.10179 6.08413 2.02804V2.02804C6.0124 1.39128 5.43806 0.933228 4.8013 1.00495C4.26335 1.06555 3.83881 1.4901 3.77821 2.02804C3.77014 2.10205 3.70741 2.15798 3.63296 2.15754H3.19255C3.03146 2.15754 2.90088 2.28812 2.90088 2.44921V3.60887C2.90088 3.76995 3.03146 3.90054 3.19255 3.90054H6.67329C6.83369 3.89958 6.96321 3.76927 6.96321 3.60887V3.60887Z" />
-    <path d="M11.095 11.0737H8.77393C8.5323 11.0737 8.33643 11.2696 8.33643 11.5112C8.33643 11.7529 8.5323 11.9487 8.77393 11.9487H11.095C11.3366 11.9487 11.5325 11.7529 11.5325 11.5112C11.5325 11.2696 11.3366 11.0737 11.095 11.0737Z" />
-    <path d="M8.33643 9.48203V9.48203C8.33675 9.72343 8.53253 9.91895 8.77393 9.91894H10.2241C10.4657 9.91894 10.6616 9.72307 10.6616 9.48145C10.6616 9.23982 10.4657 9.04395 10.2241 9.04395H8.77393C8.5323 9.04395 8.33643 9.23982 8.33643 9.48144C8.33643 9.48164 8.33643 9.48183 8.33643 9.48203H8.33643Z" />
-    <path d="M13.7083 8.85193V8.85176C13.7083 8.54342 13.5857 8.24775 13.3675 8.02989L12.5474 7.21323C12.3292 6.99509 12.0334 6.87255 11.7249 6.87256H7.28817H7.28817C6.64695 6.87224 6.12654 7.39114 6.125 8.03235V13.8336V13.8336C6.125 14.4779 6.64733 15.0003 7.29167 15.0003H12.5417H12.5417C13.186 15.0003 13.7083 14.4779 13.7083 13.8336L13.7083 8.85193ZM7.29167 8.6186C7.29167 8.29643 7.55283 8.03526 7.875 8.03526H11.4841C11.6387 8.03514 11.787 8.09641 11.8965 8.2056L12.3737 8.6816C12.4832 8.79111 12.5447 8.9397 12.5446 9.0946V13.2503C12.5446 13.5724 12.2834 13.8336 11.9612 13.8336H7.87792C7.55575 13.8336 7.29458 13.5724 7.29458 13.2503L7.29167 8.6186Z" />
-  </symbol>
-  <symbol id="copyURL" viewBox="0 0 16 16">
-    <path d="M9.30558 10.206C9.57224 10.4726 9.59447 10.8912 9.37225 11.1831L9.30558 11.2594L6.84751 13.7175C5.58692 14.9781 3.54311 14.9781 2.28252 13.7175C1.0654 12.5004 1.02344 10.5531 2.15661 9.28564L2.28252 9.15251L4.74059 6.69443C5.0315 6.40353 5.50315 6.40353 5.79405 6.69443C6.06071 6.9611 6.08294 7.37963 5.86072 7.67161L5.79405 7.74789L3.33598 10.206C2.6572 10.8847 2.6572 11.9853 3.33598 12.664C3.98082 13.3089 5.00628 13.3411 5.68918 12.7608L5.79405 12.664L8.25212 10.206C8.54303 9.91506 9.01468 9.91506 9.30558 10.206ZM9.82982 6.17019C10.1207 6.46109 10.1207 6.93274 9.82982 7.22365L7.34921 9.70427C7.0583 9.99518 6.58665 9.99518 6.29575 9.70427C6.00484 9.41337 6.00484 8.94172 6.29575 8.65081L8.77637 6.17019C9.06727 5.87928 9.53892 5.87928 9.82982 6.17019ZM13.7175 2.2825C14.9346 3.49962 14.9766 5.44688 13.8434 6.71436L13.7175 6.84749L11.2594 9.30557C10.9685 9.59647 10.4969 9.59647 10.206 9.30557C9.93931 9.03891 9.91709 8.62037 10.1393 8.32839L10.206 8.25211L12.664 5.79403C13.3428 5.11525 13.3428 4.01474 12.664 3.33596C12.0192 2.69112 10.9938 2.65888 10.3109 3.23923L10.206 3.33596L7.74791 5.79403C7.457 6.08494 6.98535 6.08494 6.69445 5.79403C6.42779 5.52737 6.40556 5.10883 6.62778 4.81686L6.69445 4.74057L9.15252 2.2825C10.4131 1.02191 12.4569 1.02191 13.7175 2.2825Z" />
-  </symbol>
   <symbol id="copyBranch" viewBox="0 0 16 16">
-    <path d="M12.6229 11.528V5.66666C12.5954 4.93866 12.3116 4.29467 11.7624 3.744C11.2132 3.19333 10.5907 2.89467 9.87669 2.86667H8.9613V1L6.21514 3.8L8.9613 6.6V4.73333H9.87669C10.1238 4.752 10.3161 4.836 10.5083 5.02267C10.7005 5.20933 10.7829 5.41466 10.7921 5.66666V11.528C10.4436 11.7327 10.1712 12.049 10.0172 12.4278C9.86328 12.8067 9.83642 13.2268 9.94083 13.6228C10.0452 14.0188 10.2751 14.3685 10.5945 14.6176C10.914 14.8666 11.3053 15.0011 11.7075 15C12.1096 15.0011 12.5009 14.8666 12.8204 14.6176C13.1399 14.3685 13.3697 14.0188 13.4741 13.6228C13.5785 13.2268 13.5517 12.8067 13.3977 12.4278C13.2438 12.049 12.9714 11.7327 12.6229 11.528ZM11.7075 14.2533C11.1033 14.2533 10.609 13.74 10.609 13.1333C10.609 12.5267 11.1125 12.0133 11.7075 12.0133C12.3025 12.0133 12.8059 12.5267 12.8059 13.1333C12.8059 13.74 12.3025 14.2533 11.7075 14.2533ZM6.21514 3.8C6.21514 2.764 5.40045 1.93333 4.38436 1.93333C3.98219 1.93225 3.59093 2.0667 3.27144 2.31576C2.95195 2.56483 2.72213 2.91456 2.61772 3.31057C2.51332 3.70657 2.54018 4.12665 2.69412 4.50548C2.84807 4.88432 3.12047 5.20066 3.46898 5.40533V11.528C3.12047 11.7327 2.84807 12.049 2.69412 12.4278C2.54018 12.8067 2.51332 13.2268 2.61772 13.6228C2.72213 14.0188 2.95195 14.3685 3.27144 14.6176C3.59093 14.8666 3.98219 15.0011 4.38436 15C4.78654 15.0011 5.1778 14.8666 5.49729 14.6176C5.81678 14.3685 6.0466 14.0188 6.15101 13.6228C6.25541 13.2268 6.22855 12.8067 6.07461 12.4278C5.92066 12.049 5.64826 11.7327 5.29975 11.528V5.40533C5.83983 5.088 6.21514 4.49067 6.21514 3.8ZM5.48283 13.1333C5.48283 13.7493 4.97937 14.2533 4.38436 14.2533C3.78936 14.2533 3.2859 13.74 3.2859 13.1333C3.2859 12.5267 3.78936 12.0133 4.38436 12.0133C4.97937 12.0133 5.48283 12.5267 5.48283 13.1333ZM4.38436 4.92C3.78021 4.92 3.2859 4.40667 3.2859 3.8C3.2859 3.19333 3.78936 2.68 4.38436 2.68C4.97937 2.68 5.48283 3.19333 5.48283 3.8C5.48283 4.40667 4.97937 4.92 4.38436 4.92Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.39378 5.36368C4.52069 4.85602 4.97683 4.49988 5.50012 4.49988C6.02341 4.49988 6.47954 4.85602 6.60646 5.36368L7.98519 10.8786C8.05216 11.1465 7.88928 11.418 7.62139 11.4849C7.35349 11.5519 7.08202 11.389 7.01505 11.1211L6.60973 9.49988H4.39051L3.98519 11.1211C3.91822 11.389 3.64675 11.5519 3.37885 11.4849C3.11095 11.418 2.94807 11.1465 3.01505 10.8786L4.39378 5.36368ZM6.35973 8.49988L5.63631 5.60622C5.62069 5.54372 5.56454 5.49988 5.50012 5.49988C5.4357 5.49988 5.37955 5.54372 5.36392 5.60622L4.64051 8.49988H6.35973Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 6.49988C9.44772 6.49988 9 6.94759 9 7.49988C9 7.77602 9.22386 7.99988 9.5 7.99988C9.77614 7.99988 10 7.77602 10 7.49988H11C11.2761 7.49988 11.5 7.72374 11.5 7.99988V8.49988H10C9.17157 8.49988 8.5 9.17145 8.5 9.99988C8.5 10.8283 9.17157 11.4999 10 11.4999H10.6459C10.9564 11.4999 11.2626 11.4276 11.5403 11.2887L11.9013 11.1083L12.1464 11.3534C12.3417 11.5487 12.6583 11.5487 12.8536 11.3534C13.0488 11.1582 13.0488 10.8416 12.8536 10.6463L12.5 10.2928V7.99988C12.5 7.17145 11.8284 6.49988 11 6.49988H10ZM10 9.49988H11.5V10.1909L11.0931 10.3943C10.9543 10.4637 10.8011 10.4999 10.6459 10.4999H10C9.72386 10.4999 9.5 10.276 9.5 9.99988C9.5 9.72374 9.72386 9.49988 10 9.49988Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 3.99988C1 2.89531 1.89543 1.99988 3 1.99988H13C14.1046 1.99988 15 2.89531 15 3.99988V11.9999C15 13.1044 14.1046 13.9999 13 13.9999H3C1.89543 13.9999 1 13.1044 1 11.9999V3.99988ZM3 2.99988C2.44772 2.99988 2 3.44759 2 3.99988V11.9999C2 12.5522 2.44772 12.9999 3 12.9999H13C13.5523 12.9999 14 12.5522 14 11.9999V3.99988C14 3.44759 13.5523 2.99988 13 2.99988H3Z" />
   </symbol>
-  <symbol id="duplicate" viewBox="0 0 24 24">
+  <symbol id="duplicate" viewBox="0 0 16 16">
-    <path d="M17.1,1.2h-4.2C9,1.2,7.2,3,7.2,6.9v0.4H6.9C3,7.2,1.2,9,1.2,12.9v4.2c0,3.9,1.7,5.7,5.6,5.7h4.2 c3.9,0,5.6-1.7,5.6-5.7v-0.3h0.3c3.9,0,5.7-1.7,5.7-5.6V6.9C22.8,3,21,1.2,17.1,1.2z M15.2,17.1c0,3.1-1,4.2-4.1,4.2H6.9 c-3.1,0-4.1-1-4.1-4.2v-4.2c0-3.1,1-4.1,4.1-4.1H8h3.1c3.1,0,4.1,1,4.1,4.1V16V17.1z M21.2,11.1c0,3.1-1,4.1-4.2,4.1h-0.3v-2.4 c0-3.9-1.7-5.6-5.6-5.6H8.8V6.9c0-3.1,1-4.1,4.1-4.1h4.2c3.1,0,4.2,1,4.2,4.1V11.1z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C5 1.89543 5.89543 1 7 1H12C13.1046 1 14 1.89543 14 3V10C14 11.1046 13.1046 12 12 12H7C5.89543 12 5 11.1046 5 10V3ZM7 2C6.44772 2 6 2.44772 6 3V10C6 10.5523 6.44772 11 7 11H12C12.5523 11 13 10.5523 13 10V3C13 2.44772 12.5523 2 12 2H7Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5C3.44772 5 3 5.44772 3 6V13C3 13.5523 3.44772 14 4 14H9C9.55228 14 10 13.5523 10 13V12H11V13C11 14.1046 10.1046 15 9 15H4C2.89543 15 2 14.1046 2 13V6C2 4.89543 2.89543 4 4 4H5V5H4Z" />
   </symbol>
   <symbol id="milestone" viewBox="0 0 16 16">
-    <path d="M3,6c0-0.6,0.4-1,1-1h8.1l-1.8,1.8L11,7.5l3-3l-3-3l-0.7,0.7L12.1,4H4C2.9,4,2,4.9,2,6v2h1V6z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.49988C8 1.22374 7.77614 0.999878 7.5 0.999878C7.22386 0.999878 7 1.22374 7 1.49988V2.99988H3C2.44772 2.99988 2 3.44759 2 3.99988V7.99988C2 8.55216 2.44771 8.99988 3 8.99988H7V14.4999C7 14.776 7.22386 14.9999 7.5 14.9999C7.77614 14.9999 8 14.776 8 14.4999V8.99988H11.3787C11.9091 8.99988 12.4178 8.78917 12.7929 8.41409L14.8536 6.35343C14.9473 6.25966 15 6.13249 15 5.99988C15 5.86727 14.9473 5.74009 14.8536 5.64632L12.7929 3.58566C12.4178 3.21059 11.9091 2.99988 11.3787 2.99988H8V1.49988ZM11.3787 7.99988C11.6439 7.99988 11.8982 7.89452 12.0858 7.70698L13.7929 5.99988L12.0858 4.29277C11.8983 4.10523 11.6439 3.99988 11.3787 3.99988H3V7.99988H11.3787Z" />
-    <path d="M13,8v2c0,0.6-0.4,1-1,1H3.9l1.8-1.8L5,8.5l-3,3l3,3l0.7-0.7L3.9,12H12c1.1,0,2-0.9,2-2V8H13z" />
   </symbol>
   <symbol id="issuetemplates" viewBox="0 0 16 16">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M1 5L8 9L15 5L8 1L1 5ZM3.01556 5L8 7.84825L12.9844 5L8 2.15175L3.01556 5Z"/>
     <path d="M1 11L8 15L15 11L13.9426 10.3958L8 13.8482L2.05741 10.3958L1 11Z"/>
     <path d="M8 11.9992L1 7.99922L2.05741 7.39499L8 10.8475L13.9426 7.39499L15 7.99922L8 11.9992Z"/>
   </symbol>
-  <symbol id="timeReport" viewBox="0 0 16 16" fill="none">
+  <symbol id="timeReport" viewBox="0 0 16 16">
-    <circle cx="7.99935" cy="7.99996" r="5.83333" stroke="currentColor"/>
+    <path d="M8 1.99988C11.3 1.99988 14 4.69988 14 7.99988C14 11.2999 11.3 13.9999 8 13.9999C4.7 13.9999 2 11.2999 2 7.99988C2 4.69988 4.7 1.99988 8 1.99988ZM8 0.999878C4.15 0.999878 1 4.14988 1 7.99988C1 11.8499 4.15 14.9999 8 14.9999C11.85 14.9999 15 11.8499 15 7.99988C15 4.14988 11.85 0.999878 8 0.999878Z" />
-    <path d="M10.8284 5.17157C10.0783 4.42143 9.06087 4 8 4C6.93913 4 5.92172 4.42143 5.17157 5.17157C4.42143 5.92172 4 6.93913 4 8C4 9.06087 4.42143 10.0783 5.17157 10.8284L8 8L10.8284 5.17157Z" fill="currentColor"/>
+    <path d="M12 7.99988C12 7.72374 11.7761 7.49988 11.5 7.49988H8.5V4.49988C8.5 4.22374 8.27614 3.99988 8 3.99988C7.72386 3.99988 7.5 4.22374 7.5 4.49988V7.49988H4.5C4.22386 7.49988 4 7.72374 4 7.99988C4 8.27602 4.22386 8.49988 4.5 8.49988H7.5V11.4999C7.5 11.776 7.72386 11.9999 8 11.9999C8.27614 11.9999 8.5 11.776 8.5 11.4999V8.49988H11.5C11.7761 8.49988 12 8.27602 12 7.99988Z" />
+  </symbol>
+  <symbol id="estimation" viewBox="0 0 32 32">
+    <path d="M19.0615 8.60896C20.0321 9.011 20.914 9.60028 21.6569 10.3431L10.3431 21.6569C9.60028 20.914 9.011 20.0321 8.60896 19.0615C8.20693 18.0909 8 17.0506 8 16C8 14.9494 8.20693 13.9091 8.60896 12.9385C9.011 11.9679 9.60028 11.086 10.3431 10.3431C11.086 9.60028 11.9679 9.011 12.9385 8.60896C13.9091 8.20693 14.9494 8 16 8C17.0506 8 18.0909 8.20693 19.0615 8.60896Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M30 16C30 23.732 23.732 30 16 30C8.26801 30 2 23.732 2 16C2 8.26801 8.26801 2 16 2C23.732 2 30 8.26801 30 16ZM28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z" />
   </symbol>
-
 </svg>

plugins/tracker-assets/src/index.ts

@@ -21,20 +21,21 @@ loadMetadata(tracker.icon, {
   TrackerApplication: `${icons}#tracker`,
   Component: `${icons}#component`,
   Issue: `${icons}#issue`,
+  Subissue: `${icons}#sub-issue`,
   Project: `${icons}#project`,
-  Document: `${icons}#document`,
+  Relations: `${icons}#relations`,
   Inbox: `${icons}#inbox`,
   MyIssues: `${icons}#myissues`,
   Views: `${icons}#views`,
   Issues: `${icons}#issues`,
   Components: `${icons}#components`,
-  NewIssue: `${icons}#newissue`,
+  NewIssue: `${icons}#new-issue`,
   Magnifier: `${icons}#magnifier`,
   Home: `${icons}#home`,
   RedCircle: `${icons}#red-circle`,
   Labels: `${icons}#priority-nopriority`, // TODO: add icon
-  DueDate: `${icons}#inbox`, // TODO: add icon
+  DueDate: `${icons}#dueDate`, // TODO: add icon
-  Parent: `${icons}#myissues`, // TODO: add icon
+  Parent: `${icons}#parent-issue`, // TODO: add icon
   Milestone: `${icons}#milestone`,
   IssueTemplates: `${icons}#issuetemplates`,
   Scrum: `${icons}#scrum`,
@@ -68,12 +69,10 @@ loadMetadata(tracker.icon, {
   MilestoneStatusCompleted: `${icons}#component-status-completed`,
   MilestoneStatusCanceled: `${icons}#component-status-canceled`,
 
-  CopyID: `${icons}#copyID`,
-  CopyURL: `${icons}#copyURL`,
   CopyBranch: `${icons}#copyBranch`,
   Duplicate: `${icons}#duplicate`,
   TimeReport: `${icons}#timeReport`,
-  Estimation: `${icons}#timeReport`,
+  Estimation: `${icons}#estimation`,
 
   Timeline: `${icons}#timeline`
 })

plugins/tracker-resources/src/components/components/ComponentPresenter.svelte

@@ -49,7 +49,7 @@
         <Icon icon={tracker.icon.Component} size={'small'} />
       </div>
     {/if}
-    <span title={value.label} class="label nowrap">
+    <span title={value.label} class="overflow-label label" class:no-underline={disabled}>
       {value.label}
     </span>
   </div>

plugins/tracker-resources/src/components/issues/IssueNotification.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { copyTextToClipboard, createQuery } from '@hcengineering/presentation'
   import { Issue, IssueStatus } from '@hcengineering/tracker'
+  import view from '@hcengineering/view'
   import {
     AnySvelteComponent,
     Button,
@@ -119,7 +120,7 @@
   </div>
   <div class="flex-between gap-2">
     <Button label={tracker.string.ViewIssue} on:click={handleIssueOpened} />
-    <Button icon={tracker.icon.CopyURL} label={tracker.string.CopyIssueUrl} on:click={handleCopyUrl} />
+    <Button icon={view.icon.CopyLink} label={tracker.string.CopyIssueUrl} on:click={handleCopyUrl} />
   </div>
 </div>
 

plugins/tracker-resources/src/components/issues/edit/CopyToClipboard.svelte

@@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import view from '@hcengineering/view'
   import tracker from '../../../plugin'
   import CopyToClipboardButton from './CopyToClipboardButton.svelte'
 
@@ -22,11 +23,11 @@
 </script>
 
 {#if issueUrl}
-  <CopyToClipboardButton icon={tracker.icon.CopyURL} title={tracker.string.CopyIssueUrl} text={issueUrl} />
+  <CopyToClipboardButton icon={view.icon.CopyLink} title={tracker.string.CopyIssueUrl} text={issueUrl} />
 {/if}
 
 {#if issueId}
-  <CopyToClipboardButton icon={tracker.icon.CopyID} title={tracker.string.CopyIssueId} text={issueId} />
+  <CopyToClipboardButton icon={view.icon.CopyId} title={tracker.string.CopyIssueId} text={issueId} />
 {/if}
 
 {#if issueBranch}

plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte

@@ -49,7 +49,7 @@
         <Icon icon={tracker.icon.Milestone} size={'small'} />
       </div>
     {/if}
-    <span title={value.label} class="label nowrap">
+    <span title={value.label} class="overflow-label label">
       {value.label}
     </span>
   </div>

plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte

@@ -39,7 +39,7 @@
   <span class="issuePresenterRoot" class:noPointer={disabled} class:noUnderline on:click={handleIssueEditorOpened}>
     {#if !inline && shouldShowAvatar}
       <div class="mr-2" use:tooltip={{ label: tracker.string.IssueTemplate }}>
-        <Icon icon={tracker.icon.Issues} size={'small'} />
+        <Icon icon={tracker.icon.IssueTemplates} size={'small'} />
       </div>
     {/if}
     <span title={value?.title}>

plugins/tracker/src/index.ts

@@ -424,8 +424,9 @@ export default plugin(trackerId, {
     TrackerApplication: '' as Asset,
     Component: '' as Asset,
     Issue: '' as Asset,
+    Subissue: '' as Asset,
     Project: '' as Asset,
-    Document: '' as Asset,
+    Relations: '' as Asset,
     Inbox: '' as Asset,
     MyIssues: '' as Asset,
     Views: '' as Asset,
@@ -470,8 +471,6 @@ export default plugin(trackerId, {
     MilestoneStatusCompleted: '' as Asset,
     MilestoneStatusCanceled: '' as Asset,
 
-    CopyID: '' as Asset,
-    CopyURL: '' as Asset,
     CopyBranch: '' as Asset,
     Duplicate: '' as Asset,
 

plugins/view-assets/assets/icons.svg

@@ -26,34 +26,49 @@
     <rect x="1" y="5.75" width="9" height="2.5" rx="0.5" />
     <rect x="4" y="10.5" width="9" height="2.5" rx="0.5" />
   </symbol>
-  <symbol id="delete" viewBox="0 0 16 16">
+  <symbol id="delete" viewBox="0 0 32 32">
-    <path d="M13.1,3.8h-2c-0.2,0-0.4-0.2-0.5-0.4l-0.2-0.8c-0.1-0.6-0.6-1-1.2-1H6.8c-0.6,0-1.1,0.4-1.2,1L5.4,3.3 c0,0.3-0.2,0.4-0.5,0.4h-2C2.7,3.8,2.4,4,2.4,4.3s0.2,0.5,0.5,0.5h0.3c0.1,1.1,0.3,6.2,0.5,7.9c0.1,1.1,0.8,1.8,1.9,1.9 c0.8,0,1.6,0,2.4,0c0.8,0,1.5,0,2.3,0c1.1,0,1.8-0.7,1.9-1.9c0.2-1.7,0.4-6.7,0.5-7.9h0.3c0.3,0,0.5-0.2,0.5-0.5S13.4,3.8,13.1,3.8z M6.4,3.5l0.1-0.8c0-0.1,0.1-0.2,0.3-0.2h2.5c0.1,0,0.2,0.1,0.2,0.2l0.1,0.8c0,0.1,0.1,0.2,0.1,0.3H6.3C6.3,3.7,6.3,3.6,6.4,3.5z M11.3,12.5c-0.1,0.9-0.7,1-0.9,1c-1.6,0-3.2,0-4.7,0c-0.5,0-0.8-0.3-0.9-1C4.6,10.9,4.4,6,4.3,4.8h7.5C11.7,6,11.4,10.9,11.3,12.5z"/>
+    <path d="M12 23C12 23.5523 12.4477 24 13 24C13.5523 24 14 23.5523 14 23V13C14 12.4477 13.5523 12 13 12C12.4477 12 12 12.4477 12 13V23Z" />
+    <path d="M20 23C20 23.5523 19.5523 24 19 24C18.4477 24 18 23.5523 18 23V13C18 12.4477 18.4477 12 19 12C19.5523 12 20 12.4477 20 13V23Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 2C13.3431 2 12 3.34315 12 5V6H5C4.44772 6 4 6.44772 4 7C4 7.55228 4.44772 8 5 8H6V26C6 28.2091 7.79086 30 10 30H22C24.2091 30 26 28.2091 26 26V8H27C27.5523 8 28 7.55228 28 7C28 6.44772 27.5523 6 27 6H20V5C20 3.34315 18.6569 2 17 2H15ZM18 6V5C18 4.44772 17.5523 4 17 4H15C14.4477 4 14 4.44772 14 5V6H18ZM8 26V8H24V26C24 27.1046 23.1046 28 22 28H10C8.89543 28 8 27.1046 8 26Z" />
   </symbol>
   <symbol id="move" viewBox="0 0 16 16">
-    <path d="M7.5,3.3V6c0,0.3,0.2,0.5,0.5,0.5S8.5,6.3,8.5,6V3.3l1.1,1.2l0.7-0.7l-2-2.1L8,1.3L7.6,1.7l-2,2.1l0.7,0.7L7.5,3.3z"/>
+    <path d="M8 0.499878L5.5 2.99988L6.205 3.70488L7.5 2.41488V6.49988C7.5 6.77602 7.72386 6.99988 8 6.99988C8.27614 6.99988 8.5 6.77602 8.5 6.49988V2.41488L9.795 3.70488L10.5 2.99988L8 0.499878Z" />
-    <path d="M14.3,7.6l-2.1-2l-0.7,0.7l1.2,1.1H10C9.7,7.5,9.5,7.7,9.5,8S9.7,8.5,10,8.5h2.7l-1.2,1.1l0.7,0.7l2.1-2L14.7,8L14.3,7.6z"/>
+    <path d="M9.795 12.2949L8.5 13.5849V9.49988C8.5 9.22374 8.27614 8.99988 8 8.99988C7.72386 8.99988 7.5 9.22374 7.5 9.49988V13.5849L6.205 12.2949L5.5 12.9999L8 15.4999L10.5 12.9999L9.795 12.2949Z" />
-    <path d="M8.5,12.7V10c0-0.3-0.2-0.5-0.5-0.5S7.5,9.7,7.5,10v2.7l-1.1-1.2l-0.7,0.7l2,2.1L8,14.7l0.4-0.4l2-2.1l-0.7-0.7L8.5,12.7z"/>
+    <path d="M0.5 7.99988L3 10.4999L3.705 9.79488L2.415 8.49988H6.5C6.77614 8.49988 7 8.27602 7 7.99988C7 7.72374 6.77614 7.49988 6.5 7.49988H2.415L3.705 6.20488L3 5.49988L0.5 7.99988Z" />
-    <path d="M6,8.5c0.3,0,0.5-0.2,0.5-0.5S6.3,7.5,6,7.5H3.3l1.2-1.1L3.8,5.6l-2.1,2L1.3,8l0.4,0.4l2.1,2l0.7-0.7L3.3,8.5H6z"/>
+    <path d="M12.295 6.20488L13.585 7.49988H9.5C9.22386 7.49988 9 7.72374 9 7.99988C9 8.27602 9.22386 8.49988 9.5 8.49988H13.585L12.295 9.79488L13 10.4999L15.5 7.99988L13 5.49988L12.295 6.20488Z" />
   </symbol>
-  <symbol id='more-h' viewBox="0 0 16 16">
+  <symbol id="more-h" viewBox="0 0 16 16">
     <path d="M8,6.6C7.2,6.6,6.6,7.2,6.6,8c0,0.8,0.6,1.4,1.4,1.4S9.4,8.8,9.4,8C9.4,7.2,8.8,6.6,8,6.6z" />
     <path d="M3.2,6.6C2.4,6.6,1.8,7.2,1.8,8c0,0.8,0.6,1.4,1.4,1.4S4.6,8.8,4.6,8C4.6,7.2,4,6.6,3.2,6.6z" />
     <path d="M12.8,6.6c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4s1.4-0.6,1.4-1.4C14.2,7.2,13.6,6.6,12.8,6.6z" />
   </symbol>
-  <symbol id="archive" viewBox="0 0 16 16" >
+  <symbol id="archive" viewBox="0 0 32 32">
-    <path d="M14.5,4.3c-0.2-1.1-1-1.9-2.1-2.1c-0.2,0-0.4,0-0.8,0H4.4c-0.4,0-0.6,0-0.8,0c-1.1,0.2-1.9,1-2.1,2.1 c0,0.2,0,0.4,0,0.8l0,0.2c0,0.3,0.3,0.5,0.6,0.6l0.7,0v3.5c0,2,0,3,0.7,3.8c0.7,0.7,1.8,0.7,3.8,0.7h1.3c2,0,3,0,3.8-0.7 s0.7-1.8,0.7-3.8V5.8h0.6l0.2,0c0.3,0,0.5-0.3,0.6-0.6l0-0.2C14.5,4.7,14.5,4.5,14.5,4.3z M12.2,9.3c0,1.7,0,2.6-0.4,3.1 s-1.3,0.4-3.1,0.4H7.3c-1.7,0-2.6,0-3.1-0.4C3.8,12,3.8,11.1,3.8,9.3V5.8h8.3V9.3z M3.3,4.8l-0.8,0c0-0.2,0-0.3,0-0.4 c0.1-0.6,0.6-1.1,1.2-1.2c0.1,0,0.3,0,0.7,0h7.2c0.4,0,0.5,0,0.7,0c0.6,0.1,1.1,0.6,1.2,1.2c0,0.1,0,0.2,0,0.4H3.3z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 8C2 5.79086 3.79086 4 6 4H26C28.2091 4 30 5.79086 30 8V11C30 11.5523 29.5523 12 29 12H28V26C28 28.2091 26.2091 30 24 30H8C5.79086 30 4 28.2091 4 26V12H3C2.44772 12 2 11.5523 2 11V8ZM4 10H28V8C28 6.89543 27.1046 6 26 6H6C4.89543 6 4 6.89543 4 8V10ZM6 12V26C6 27.1046 6.89543 28 8 28H24C25.1046 28 26 27.1046 26 26V12H6ZM10 16C10 15.4477 10.4477 15 11 15H21C21.5523 15 22 15.4477 22 16V17C22 19.2091 20.2091 21 18 21H14C11.7909 21 10 19.2091 10 17V16ZM12 17C12 18.1046 12.8954 19 14 19H18C19.1046 19 20 18.1046 20 17H12Z" />
-    <path d="M6.7,11.2h2.7c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5H6.7c-0.3,0-0.5,0.2-0.5,0.5S6.4,11.2,6.7,11.2z"/>
   </symbol>
-  <symbol id="statuses" viewBox="0 0 16 16" >
+  <symbol id="statuses" viewBox="0 0 32 32">
-    <path d="M13.3,8.3c-0.1,2.8-2.5,5.1-5.4,5.1C5,13.4,2.6,11,2.6,8c0-2.9,2.3-5.2,5.1-5.4c0.1-0.4,0.2-0.7,0.4-1c0,0-0.1,0-0.1,0 C4.4,1.7,1.6,4.5,1.6,8c0,3.5,2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4c0,0,0-0.1,0-0.1C14,8.1,13.7,8.2,13.3,8.3z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1058 4.4089C16.5542 3.7252 13.8484 3.90255 11.4078 4.91345C8.96729 5.92435 6.92852 7.7123 5.60772 10C4.28691 12.2877 3.75788 14.9473 4.10268 17.5663C4.44748 20.1853 5.64684 22.6174 7.51474 24.4853C9.38264 26.3532 11.8147 27.5525 14.4337 27.8973C17.0527 28.2421 19.7123 27.7131 22 26.3923C24.2877 25.0715 26.0757 23.0327 27.0866 20.5922C28.0975 18.1517 28.2748 15.4458 27.5911 12.8942C27.4482 12.3607 27.7648 11.8124 28.2982 11.6694C28.8317 11.5265 29.38 11.8431 29.523 12.3765C30.3206 15.3534 30.1137 18.5103 28.9343 21.3576C27.7549 24.2049 25.669 26.5834 23 28.1244C20.331 29.6653 17.2282 30.2825 14.1727 29.8802C11.1171 29.478 8.27974 28.0787 6.10052 25.8995C3.92131 23.7203 2.52206 20.8829 2.11979 17.8274C1.71753 14.7719 2.33473 11.669 3.87567 9C5.41661 6.33102 7.79517 4.24507 10.6425 3.06569C13.4897 1.88631 16.6466 1.67939 19.6235 2.47704C20.157 2.61999 20.4735 3.16832 20.3306 3.70179C20.1877 4.23526 19.6393 4.55184 19.1058 4.4089Z" />
-    <ellipse cx="12.1" cy="3.9" rx="2.5" ry="2.5"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 8.00001C27.1046 8.00001 28 7.10457 28 6.00001C28 4.89544 27.1046 4.00001 26 4.00001C24.8955 4.00001 24 4.89544 24 6.00001C24 7.10457 24.8955 8.00001 26 8.00001ZM26 10C28.2092 10 30 8.20914 30 6.00001C30 3.79087 28.2092 2.00001 26 2.00001C23.7909 2.00001 22 3.79087 22 6.00001C22 8.20914 23.7909 10 26 10Z" />
   </symbol>
-  <symbol id='open' viewBox="0 0 16 16">
+  <symbol id="open" viewBox="0 0 32 32">
-    <path d="M14,13.1H9.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,13.1,14,13.1z"/>
+    <path d="M20 2V4H26.586L18.293 12.2929C17.9024 12.6834 17.9024 13.3166 18.293 13.7071C18.6835 14.0976 19.3167 14.0976 19.7072 13.7071L28 5.414V12H30V2H20Z" />
-    <path d="M11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1c1.2-1.6,1.3-1.6,1.3-1.6C12.9,5,13,4.5,12.9,4c-0.1-0.5-0.4-0.9-0.8-1.2 c0,0-1.1-0.9-1.1-0.9c-0.8-0.7-2.1-0.6-2.8,0.3c0,0,0,0,0,0l-6.3,7.9c-0.3,0.4-0.4,0.9-0.3,1.4l0.5,2.3c0.1,0.2,0.3,0.4,0.5,0.4 c0,0,0,0,0,0l2.4,0c0.5,0,1-0.2,1.3-0.6C8.9,10.2,10.5,8.2,11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1z M8.9,2.8c0.3-0.4,1-0.5,1.4-0.1 c0,0,1.2,0.9,1.2,0.9c0.2,0.1,0.4,0.3,0.4,0.6c0.1,0.2,0,0.5-0.1,0.7c0,0-0.4,0.5-0.9,1.2L8.1,3.9L8.9,2.8z M5.5,12.9 C5.4,13,5.2,13.1,5,13.1l-2,0l-0.5-1.9c0-0.2,0-0.4,0.1-0.5l4.8-6l2.8,2.2C8.9,8.6,6.8,11.2,5.5,12.9z"/>
+    <path d="M13.7073 19.7071C14.0978 19.3166 14.0978 18.6834 13.7073 18.2929C13.3167 17.9024 12.6836 17.9024 12.293 18.2929L4 26.586V20H2V30H12V28H5.414L13.7073 19.7071Z" />
+  </symbol>
+  <symbol id="edit" viewBox="0 0 32 32">
+    <path d="M16 29C16 28.4477 16.4477 28 17 28H29C29.5523 28 30 28.4477 30 29C30 29.5523 29.5523 30 29 30H17C16.4477 30 16 29.5523 16 29Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.1214 2.87868C23.9498 1.70711 22.0503 1.70711 20.8787 2.87868L2.87868 20.8787C2.31607 21.4413 2 22.2044 2 23V29C2 29.5523 2.44772 30 3 30H9.00004C9.79568 30 10.5587 29.6839 11.1214 29.1213L29.1214 11.1213C30.2929 9.94975 30.2929 8.05025 29.1214 6.87868L25.1214 2.87868ZM22.2929 4.29289C22.6835 3.90237 23.3166 3.90237 23.7071 4.29289L27.7071 8.29289C28.0977 8.68342 28.0977 9.31658 27.7071 9.70711L23.9143 13.5L18.5001 8.08574L22.2929 4.29289ZM17.0859 9.49996L4.29289 22.2929C4.10536 22.4805 4 22.7348 4 23V28H9.00004C9.26525 28 9.51961 27.8946 9.70714 27.7071L22.5001 14.9142L17.0859 9.49996Z" />
+  </symbol>
+  <symbol id="copyId" viewBox="0 0 16 16">
+    <path d="M5 7C4.72386 7 4.5 7.22386 4.5 7.5C4.5 7.77614 4.72386 8 5 8H11C11.2761 8 11.5 7.77614 11.5 7.5C11.5 7.22386 11.2761 7 11 7H5Z" />
+    <path d="M4.5 9.5C4.5 9.22386 4.72386 9 5 9H9C9.27614 9 9.5 9.22386 9.5 9.5C9.5 9.77614 9.27614 10 9 10H5C4.72386 10 4.5 9.77614 4.5 9.5Z" />
+    <path d="M5 11C4.72386 11 4.5 11.2239 4.5 11.5C4.5 11.7761 4.72386 12 5 12H8C8.27614 12 8.5 11.7761 8.5 11.5C8.5 11.2239 8.27614 11 8 11H5Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 1C10.1531 1 10.7087 1.4174 10.9146 2H11.5C12.6046 2 13.5 2.89543 13.5 4V13C13.5 14.1046 12.6046 15 11.5 15H4.5C3.39543 15 2.5 14.1046 2.5 13V4C2.5 2.89543 3.39543 2 4.5 2H5.08535C5.29127 1.4174 5.84689 1 6.5 1H9.5ZM6 2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5C10 2.77614 9.77614 3 9.5 3H6.5C6.22386 3 6 2.77614 6 2.5ZM9.5 4C10.1531 4 10.7087 3.5826 10.9146 3H11.5C12.0523 3 12.5 3.44772 12.5 4V13C12.5 13.5523 12.0523 14 11.5 14H4.5C3.94772 14 3.5 13.5523 3.5 13V4C3.5 3.44772 3.94772 3 4.5 3H5.08535C5.29127 3.5826 5.84689 4 6.5 4H9.5Z" />
+  </symbol>
+  <symbol id="copyLink" viewBox="0 0 16 16">
+    <path d="M14.6,3.4c-0.3-0.3-0.6-0.5-1-0.7c-0.4-0.2-0.8-0.2-1.2-0.2c-0.4,0-0.8,0.1-1.2,0.2c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0c0.1,0,0.2-0.1,0.3-0.1c0.2-0.1,0.5-0.2,0.8-0.2c0.3,0,0.5,0.1,0.8,0.2s0.5,0.2,0.7,0.4c0.2,0.2,0.3,0.4,0.4,0.7c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3-0.1,0.5-0.2,0.8c-0.1,0.2-0.2,0.5-0.4,0.7l-4,4c-0.4,0.4-0.9,0.6-1.4,0.6c-0.5,0-1-0.2-1.4-0.6C6.7,10.6,6.5,10,6.5,9.5c0-0.5,0.2-1,0.6-1.4l0.4-0.4c0.2-0.2,0.2-0.5,0-0.7C7.2,6.8,6.9,6.8,6.7,7L6.4,7.4C6.1,7.7,5.9,8,5.7,8.4C5.6,8.7,5.5,9.1,5.5,9.5c0,0.4,0.1,0.8,0.2,1.2c0.2,0.4,0.4,0.7,0.7,1c0.6,0.6,1.3,0.9,2.1,0.9c0.4,0,0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l4-4c0.6-0.6,0.9-1.3,0.9-2.1C15.5,4.7,15.2,3.9,14.6,3.4z" />
+    <path d="M2.1,12.4c-0.2-0.2-0.3-0.4-0.4-0.6c-0.1-0.2-0.2-0.5-0.2-0.8c0-0.3,0.1-0.5,0.2-0.8C1.8,10,1.9,9.8,2.1,9.6l4-4c0.2-0.2,0.4-0.3,0.6-0.4C7,5,7.2,5,7.5,5C7.8,5,8,5,8.3,5.1c0.2,0.1,0.5,0.2,0.6,0.4C9.1,5.8,9.3,6,9.4,6.2C9.5,6.5,9.5,6.7,9.5,7c0,0.3,0,0.5-0.1,0.8C9.2,8,9.1,8.2,8.9,8.4L8.2,9.1C8,9.3,8,9.7,8.2,9.9c0.2,0.2,0.5,0.2,0.7,0l0.7-0.7c0.6-0.6,0.9-1.3,0.9-2.1c0-0.8-0.3-1.6-0.9-2.1C9.1,4.3,8.3,4,7.5,4C6.7,4,5.9,4.3,5.4,4.9l-4,4c-0.3,0.3-0.5,0.6-0.7,1c-0.2,0.4-0.2,0.8-0.2,1.2c0,0.4,0.1,0.8,0.2,1.2c0.2,0.4,0.4,0.7,0.7,1C1.9,13.7,2.7,14,3.5,14c0.6,0,1.2-0.2,1.8-0.6c0.2-0.2,0.2-0.5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0c-0.1,0-0.2,0.1-0.3,0.1C4,12.9,3.8,13,3.5,13c-0.3,0-0.5-0.1-0.8-0.2S2.3,12.6,2.1,12.4z" />
   </symbol>
 
-  <symbol id='arrow-right' viewBox="0 0 16 16">
+  <symbol id="arrow-right" viewBox="0 0 16 16">
     <path d="M13.334 8L13.6875 7.64645L14.0411 8L13.6875 8.35355L13.334 8ZM3.33398 8.5C3.05784 8.5 2.83398 8.27614 2.83398 8C2.83398 7.72386 3.05784 7.5 3.33398 7.5V8.5ZM9.68754 3.64645L13.6875 7.64645L12.9804 8.35355L8.98043 4.35355L9.68754 3.64645ZM13.6875 8.35355L9.68754 12.3536L8.98043 11.6464L12.9804 7.64645L13.6875 8.35355ZM13.334 8.5H3.33398V7.5H13.334V8.5Z"/>
   </symbol>
   <symbol id="setting" viewBox="0 0 24 24">
@@ -65,9 +80,8 @@
   <symbol id="views" viewBox="0 0 16 16">
     <path d="M12.6541 10.7952L14.7544 11.6213C14.8576 11.6618 14.9394 11.7434 14.9801 11.8466C15.0511 12.0264 14.9828 12.2268 14.827 12.3284L14.755 12.3656L8.35645 14.8924C8.15935 14.9703 7.94372 14.9831 7.74052 14.9309L7.62035 14.8918L1.25259 12.3653C1.1499 12.3246 1.06864 12.2432 1.02806 12.1404C0.957068 11.9607 1.02536 11.7603 1.1812 11.6587L1.25319 11.6215L3.34307 10.7962L7.06917 12.2751C7.65895 12.5091 8.31525 12.5097 8.9054 12.2766L12.6541 10.7952ZM12.6541 6.77688L14.7544 7.60289C14.8576 7.64346 14.9394 7.72508 14.9801 7.82824C15.0511 8.00803 14.9828 8.20839 14.827 8.31004L14.755 8.3472L10.6001 9.98825L9.619 10.375L8.35645 10.8741L8.317 10.886L8.23566 10.9132C8.20301 10.9215 8.17004 10.9282 8.13688 10.9331C8.12585 10.9346 8.11547 10.936 8.10507 10.9372C8.02541 10.9468 7.94422 10.9464 7.86397 10.9363L7.74052 10.9126L7.62035 10.8735L6.391 10.385L5.38907 9.98825L1.25259 8.34697C1.1499 8.30623 1.06864 8.22483 1.02806 8.12208C0.957068 7.94229 1.02536 7.74192 1.1812 7.64029L1.25319 7.60312L3.34307 6.77788L7.06917 8.25677C7.65895 8.49078 8.31525 8.4913 8.9054 8.25824L12.6541 6.77688ZM7.62186 1.06989C7.85734 0.976906 8.11932 0.976697 8.35494 1.06931L14.7544 3.58452C14.8576 3.62509 14.9394 3.70671 14.9801 3.80987C15.0612 4.01534 14.9605 4.24769 14.755 4.32884L10.6001 5.96988L8.35565 6.856L8.27468 6.88396C8.25405 6.8901 8.23326 6.89557 8.21236 6.90036C8.09824 6.92674 7.98013 6.93258 7.86397 6.91788L7.74052 6.89419L7.62035 6.8551L1.25259 4.3286C1.1499 4.28786 1.06864 4.20646 1.02806 4.10371C0.946925 3.89823 1.04772 3.66589 1.25319 3.58475L7.62186 1.06989Z"/>
   </symbol>
-  <symbol id="pin" viewBox="0 0 16 16" fill="none">
+  <symbol id="pin" viewBox="0 0 32 32">
-    <path d="M9.30308 2.90949C9.95614 2.47412 10.2827 2.25643 10.6384 2.29166C10.9942 2.32689 11.2717 2.60439 11.8267 3.15938L12.8413 4.17396C13.3963 4.72895 13.6738 5.00644 13.709 5.36221C13.7442 5.71798 13.5265 6.04451 13.0912 6.69757L12.2952 7.89148C12.2122 8.016 12.1707 8.07826 12.1307 8.14074C11.6211 8.93675 11.2566 9.81677 11.0541 10.74C11.0382 10.8125 11.0235 10.8858 10.9941 11.0326L10.8668 11.6692C10.7725 12.1406 10.2263 12.3613 9.83098 12.0877V12.0877C7.5186 10.4868 5.51386 8.48205 3.91299 6.16967V6.16967C3.63933 5.77439 3.86001 5.22813 4.33144 5.13384L4.96808 5.00651C5.11482 4.97717 5.1882 4.96249 5.26066 4.94659C6.18388 4.74408 7.0639 4.37956 7.85991 3.86995C7.92239 3.82995 7.98465 3.78844 8.10917 3.70543L9.30308 2.90949Z" stroke="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.7071 2.29289C21.3166 1.90237 20.6834 1.90237 20.2929 2.29289C19.9024 2.68342 19.9024 3.31658 20.2929 3.70711L20.5858 4L14.9628 9.623C14.7214 9.86439 14.394 10 14.0526 10H13.2426C10.2609 10 7.4013 11.1845 5.29289 13.2929C4.90237 13.6834 4.90237 14.3166 5.29289 14.7071L10.5859 20.0001L2 28.5859V30H3.41436L12.0001 21.4143L17.2929 26.7071C17.6834 27.0976 18.3166 27.0976 18.7071 26.7071C20.8155 24.5987 22 21.7391 22 18.7574V17.9474C22 17.606 22.1356 17.2786 22.377 17.0372L28 11.4142L28.2929 11.7071C28.6834 12.0976 29.3166 12.0976 29.7071 11.7071C30.0976 11.3166 30.0976 10.6834 29.7071 10.2929L21.7071 2.29289ZM16.377 11.0372L22 5.41421L26.5858 10L20.9628 15.623C20.3463 16.2395 20 17.0756 20 17.9474V18.7574C20 20.873 19.2746 22.9139 17.9617 24.5474L7.45256 14.0383C9.08614 12.7254 11.127 12 13.2426 12H14.0526C14.9244 12 15.7605 11.6537 16.377 11.0372Z" />
-    <path d="M3.33398 12.6667L6.33398 9.66669" stroke="white" stroke-linecap="round"/>
   </symbol>
   <symbol id="model" viewBox="0 0 24 24">
     <path d="M17.2,7.8h3.6c1.1,0,2-0.9,2-2V4.2c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0H9.8V4c0-1.5-1.2-2.8-2.8-2.8H4 C2.5,1.2,1.2,2.5,1.2,4v2c0,1.5,1.2,2.8,2.8,2.8h3c1.5,0,2.8-1.2,2.8-2.8V5.8h2V18c0,1.5,1.2,2.8,2.8,2.8h0.8v0c0,1.1,0.9,2,2,2h3.6 c1.1,0,2-0.9,2-2v-1.6c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0h-0.8c-0.7,0-1.2-0.6-1.2-1.2v-4.8h2v0c0,1.1,0.9,2,2,2h3.6 c1.1,0,2-0.9,2-2v-1.6c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0h-2v-6h2v0C15.2,6.9,16.1,7.8,17.2,7.8z M8.2,6 c0,0.7-0.6,1.2-1.2,1.2H4C3.3,7.2,2.8,6.7,2.8,6V4c0-0.7,0.6-1.2,1.2-1.2h3c0.7,0,1.2,0.6,1.2,1.2V6z M16.8,19.2 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V19.2z M16.8,11.7 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V11.7z M16.8,4.2 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V4.2z" />

plugins/view-assets/src/index.ts

@@ -28,6 +28,9 @@ loadMetadata(view.icon, {
   Archive: `${icons}#archive`,
   Statuses: `${icons}#statuses`,
   Open: `${icons}#open`,
+  Edit: `${icons}#edit`,
+  CopyId: `${icons}#copyId`,
+  CopyLink: `${icons}#copyLink`,
   Setting: `${icons}#setting`,
   ArrowRight: `${icons}#arrow-right`,
   Views: `${icons}#views`,

plugins/view-resources/src/components/DocNavLink.svelte

@@ -28,6 +28,7 @@
   export let component: AnyComponent = view.component.EditDoc
   export let props: Record<string, any> = {}
   export let shrink: number = 0
+  export let accent: boolean = false
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -49,4 +50,4 @@
   $: if (object !== undefined) getHref(object)
 </script>
 
-<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit}><slot /></NavLink>
+<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit} {accent}><slot /></NavLink>

plugins/view-resources/src/components/ValueSelector.svelte

@@ -152,13 +152,13 @@
       on:changeContent
     >
       <svelte:fragment slot="item" let:item>
-        <div class="flex flex-grow overflow-label" class:mt-2={huge} class:mb-2={huge}>
+        <div class="flex-row-center flex-grow overflow-label">
           <ObjectPresenter
             objectId={item._id}
             _class={item._class}
             value={item}
             inline={false}
-            props={{ disabled: true, inline: false, size }}
+            props={{ disabled: true, inline: false, size, avatarSize: 'smaller' }}
           />
         </div>
       </svelte:fragment>

plugins/view/src/index.ts

@@ -739,6 +739,9 @@ const view = plugin(viewId, {
     Statuses: '' as Asset,
     Setting: '' as Asset,
     Open: '' as Asset,
+    Edit: '' as Asset,
+    CopyId: '' as Asset,
+    CopyLink: '' as Asset,
     ArrowRight: '' as Asset,
     Views: '' as Asset,
     Pin: '' as Asset,

tests/sanity/tests/tags.spec.ts

@@ -30,7 +30,7 @@ test.describe('recruit tests', () => {
     // Click .ml-4 .tooltip-trigger .flex-center
     await page.click('button:has-text("Skills")')
     // Click text=Add/Create Skill Suggested Cancel >> button
-    await page.click('.buttons-group button:nth-child(3)')
+    await page.click('.header > button:nth-child(3)')
     // Fill [placeholder="Please\ type\ Skill\ title"]
     await page.fill('[placeholder="Please\\ type\\ \\ title"]', 's1')
     // Click text=Create Skill s1 Please type description here Category Other Create Cancel >> button

tests/sanity/tests/tracker.utils.ts

@@ -127,7 +127,7 @@ export async function createSubissue (page: Page, props: IssueProps): Promise<vo
 export async function createLabel (page: Page, label: string): Promise<void> {
   await page.click('button:has-text("New issue")')
   await page.click('button:has-text("Labels")')
-  await page.click('.buttons-group >> button >> nth=-1')
+  await page.click('button:nth-child(3)')
   await page.fill('[id="tags:string:AddTag"] >> input >> nth=0', label)
   await page.click('[id="tags:string:AddTag"] >> button:has-text("Create")')
   await page.waitForSelector('form.antiCard[id="tags:string:AddTag"]', { state: 'detached' })