TSK-1459: update Panel layout (#3163)

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

packages/panel/src/components/Panel.svelte

@@ -157,23 +157,28 @@
   </svelte:fragment>
 
   <svelte:fragment slot="aside">
-    <Scroller padding={'.75rem 1.5rem'}>
+    {#if $$slots['aside-tabs']}
-      {#if $$slots.actions}
+      <div class="popupPanel-body__aside-tabsheader">
-        <div class="flex-row-center pb-3 bottom-divider">
+        <slot name="aside-tabs" />
-          {#if $$slots['actions-label']}
+      </div>
-            <span class="fs-bold w-24 mr-6"><slot name="actions-label" /></span>
+    {/if}
-          {/if}
+    {#if $$slots.actions}
-          <div class="buttons-group xsmall-gap flex flex-grow">
+      <div class="popupPanel-body__aside-header">
-            <slot name="actions" />
+        {#if $$slots['actions-label']}
-          </div>
+          <span class="fs-bold w-27 mr-6"><slot name="actions-label" /></span>
+        {/if}
+        <div class="buttons-group xsmall-gap flex flex-grow">
+          <slot name="actions" />
         </div>
-      {/if}
+      </div>
+    {/if}
+    <Scroller>
       {#if $$slots['custom-attributes'] && isCustomAttr}
         <slot name="custom-attributes" direction="column" />
       {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
       {#if $$slots.aside}<slot name="aside" />{/if}
+      <div class="h-2 min-h-2 max-h-2" />
     </Scroller>
-    <div class="h-2 min-h-2 max-h-2" />
   </svelte:fragment>
 
   {#if $deviceInfo.isMobile}

packages/presentation/src/components/AttributeBarEditor.svelte

@@ -66,7 +66,7 @@
 {#if editor}
   {#if showHeader}
     <span
-      class="overflow-label"
+      class="label"
       use:tooltip={{
         component: Label,
         props: { label: attribute.label }

packages/presentation/src/components/AttributesBar.svelte

@@ -32,21 +32,8 @@
   export let justify: 'left' | 'center' = 'left'
 </script>
 
-<div class="attributes-bar-container vertical">
+<div class="popupPanel-body__aside-grid">
   {#each keys as key (typeof key === 'string' ? key : key.key)}
     <AttributeBarEditor {key} {_class} {object} {showHeader} {readonly} {draft} on:update />
   {/each}
 </div>
-
-<style lang="scss">
-  .attributes-bar-container {
-    display: grid;
-    grid-template-columns: 1fr 1.5fr;
-    grid-auto-flow: row;
-    justify-content: start;
-    align-items: center;
-    gap: 1rem;
-    width: 100%;
-    height: min-content;
-  }
-</style>

packages/presentation/src/utils.ts

@@ -153,7 +153,7 @@ export class LiveQuery {
   private oldOptions: FindOptions<Doc> | undefined
   private oldCallback: ((result: FindResult<any>) => void) | undefined
   private reqId = 0
-  unsubscribe = () => {}
+  unsubscribe: () => void = () => {}
   clientRecreated = false
 
   constructor (noDestroy: boolean = false) {

packages/theme/styles/_layouts.scss

@@ -115,8 +115,8 @@ p:last-child { margin-block-end: 0; }
   hyphens: auto;
   line-height: 150%;
 
-  &.contrast { color: var(--theme-accent-color); }
+  &.contrast { color: var(--theme-caption-color); }
-  &:not(.contrast) { color: var(--content-color); }
+  &:not(.contrast) { color: var(--theme-content-color); }
   
   a {
     word-break: break-all;
@@ -127,11 +127,11 @@ p:last-child { margin-block-end: 0; }
 
 a.noUnderline {
   &:hover {
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     text-decoration: none;
   }
   &:active {
-    color: var(--accent-color);
+    color: var(--theme-caption-color);
     text-decoration: none;
   }
 }
@@ -159,7 +159,7 @@ a.noUnderline {
 
 input.search {
   margin: 0;
-  color: var(--accent-color);
+  color: var(--theme-caption-color);
   border: none;
   caret-color: var(--theme-caret-color);
 
@@ -281,7 +281,6 @@ input.search {
   }
   .label {
     min-width: 0;
-    font-weight: 500;
     text-align: left;
     color: var(--theme-content-color);
 
@@ -337,16 +336,6 @@ input.search {
   .avatar-container:not(.no-img) { transform: translateY(.375rem); }
   .avatar-container.no-img { transform: translateY(.15rem); }
 }
-// Presenters on the card
-.card-container .flex-presenter,
-.card-container .inline-presenter {
-  .icon { display: none; }
-  .label {
-    font-size: .75rem;
-    color: var(--dark-color);
-  }
-  &:hover .label { color: var(--content-color); }
-}
 
 .buttons-group {
   display: grid;
@@ -527,6 +516,7 @@ input.search {
 .px-2 { padding: 0 .5rem; }
 .px-3 { padding: 0 .75rem; }
 .px-4 { padding: 0 1rem; }
+.px-6 { padding: 0 1.5rem; }
 .px-10 { padding: 0 2.5rem; }
 .py-1 { padding: 0.25rem 0; }
 .py-4 { padding: 1rem 0; }
@@ -622,6 +612,7 @@ input.search {
 .w-16 { width: 4rem; }
 .w-22 { width: 5.5rem; }
 .w-24 { width: 6rem; }
+.w-27 { width: 6.75rem; }
 .w-32 { width: 8rem; }
 .w-60 { width: 15rem; }
 .w-85 { width: 21.25rem; }
@@ -706,19 +697,19 @@ input.search {
 }
 
 .hover-trans {
-  color: var(--dark-color);
+  color: var(--theme-dark-color);
   cursor: pointer;
-  &:hover { color: var(--caption-color); }
+  &:hover { color: var(--theme-caption-color); }
-  &:active { color: var(--accent-color); }
+  &:active { color: var(--theme-caption-color); }
 }
 
 /* Link */
 a.no-line {
   text-decoration: none;
-  color: var(--accent-color);
+  color: var(--theme-caption-color);
-  &:hover { color: var(--caption-color); }
+  &:hover { color: var(--theme-caption-color); }
-  &:active { color: var(--accent-color); }
+  &:active { color: var(--theme-caption-color); }
-  &:visited { color: var(--accent-color); }
+  &:visited { color: var(--theme-caption-color); }
 }
 .cursor-pointer { cursor: pointer; }
 .cursor-default { cursor: default; }
@@ -733,14 +724,14 @@ a.no-line {
 .fs-title {
   font-weight: 500;
   font-size: 1rem;
-  color: var(--caption-color);
+  color: var(--theme-caption-color);
   user-select: none;
 }
 .trans-title {
   text-transform: uppercase;
   font-weight: 600;
   font-size: .75rem;
-  color: var(--dark-color);
+  color: var(--theme-dark-color);
   user-select: none;
 }
 .text-xs { font-size: .625rem; }

packages/theme/styles/components.scss

@@ -737,6 +737,15 @@
     & > * { margin-left: .375rem; }
   }
 }
+// Labels on the ListView
+.list-container .listitems-container,
+.list-container .listitems-container:hover,
+.list-container .button,
+.list-container .button:hover {
+  background-color: var(--theme-list-button-color) !important;
+  .icon { color: var(--theme-halfcontent-color) !important; }
+  .label { color: var(--theme-halfcontent-color) !important; }
+}
 
 /* Kanban - global style */
 .kanban-container .card-container .card-labels > * { margin: .25rem .25rem 0 0; }

packages/theme/styles/global.scss

@@ -66,6 +66,7 @@
   scrollbar-color: var(--body-accent) var(--board-bg-color);
   scrollbar-width: none;
   --body-font-size: .875rem;
+  --panel-aside-width: 25rem; // 20rem;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
   --timing-shadow: cubic-bezier(0,.65,.35,1);
   --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);

packages/theme/styles/panel.scss

@@ -165,12 +165,24 @@
 
     .popupPanel-body__header {
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      min-height: 0;
 
+      &-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        min-width: 0;
+        min-height: 3.5rem;
+        border-bottom: 1px solid var(--theme-divider-color);
+      }
       &.main {
-        margin: 0 auto;
         padding: .75rem 1.25rem;
         width: calc(100% - 5rem);
+        height: 100%;
+        min-width: 0;
         max-width: 900px;
 
         &.max {
@@ -203,38 +215,26 @@
     }
 
     &__aside {
-      position: relative;
       width: 25%;
-      min-width: 320px;
+      min-width: var(--panel-aside-width);
-
+      border-left: 1px solid var(--theme-divider-color);
-      &::before {
-        position: absolute;
-        content: '';
-        top: 1rem;
-        bottom: 1rem;
-        left: 0;
-        width: 0;
-        border-left: 1px solid var(--theme-divider-color);
-      }
 
       &.float {
         position: absolute;
         flex-shrink: 0;
         top: 0;
         left: 100%;
-        width: 320px;
+        width: var(--panel-aside-width);
         min-width: 0;
-        max-width: 320px;
+        max-width: var(--panel-aside-width);
         height: 100%;
         background-color: var(--theme-panel-color);
-        border-left: 1px solid var(--theme-divider-color);
         border-bottom-right-radius: .45rem;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
         transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
         transform: translateX(0);
         visibility: hidden;
 
-        &::before { content: none; }
         &.shown {
           box-shadow: var(--popup-aside-shadow);
           transform: translateX(-100%);
@@ -252,6 +252,46 @@
           }
         }
       }
+
+      &-header,
+      &-tabsheader {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        padding: .75rem 2rem;
+        height: 3.5rem;
+        min-height: 3.5rem;
+        border-bottom: 1px solid var(--theme-divider-color);
+      }
+      &-tabsheader {
+        padding: 0 2rem;
+      }
+
+      &-grid {
+        display: grid;
+        grid-template-columns: 1fr 1.5fr;
+        grid-auto-flow: row;
+        justify-content: start;
+        align-items: center;
+        row-gap: .25rem;
+        column-gap: 1rem;
+        margin: .5rem 2rem;
+        width: calc(100% - 4rem);
+        height: min-content;
+
+        .divider {
+          grid-column: 1 / 3;
+          margin: .75rem -2rem;
+          height: 1px;
+          background-color: var(--theme-divider-color);
+        }
+        .label,
+        .labelTop { color: var(--theme-dark-color); }
+        .labelTop {
+          align-self: start;
+          margin-top: 0.385rem;
+        }      
+      }    
     }
 
     // &.asideShown .popupPanel-body__main {

packages/ui/src/components/Button.svelte

@@ -50,6 +50,7 @@
   export let iconSize: IconSize = size === 'inline' ? 'inline' : 'small'
   export let iconRightSize: IconSize = 'x-small'
   export let short: boolean = false
+  export let accent: boolean = false
 
   // $: iconSize = size === 'inline' ? 'inline' : 'small'
   $: iconOnly =
@@ -97,6 +98,7 @@
   bind:this={input}
   class="button {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle}"
   class:only-icon={iconOnly}
+  class:accent
   class:highlight
   class:selected
   class:notSelected
@@ -178,7 +180,6 @@
     align-items: center;
     flex-shrink: 0;
     padding: 0 0.625rem;
-    font-weight: 500;
     min-width: 1.375rem;
     white-space: nowrap;
     color: var(--theme-caption-color);
@@ -187,6 +188,9 @@
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
+    &.accent {
+      font-weight: 500;
+    }
     .btn-icon {
       color: var(--theme-content-color);
       transition: color 0.15s;
@@ -391,8 +395,8 @@
     &.list {
       padding: 0 0.625em;
       min-height: 1.75rem;
-      color: var(--theme-halfcontent-color);
+      color: var(--theme-content-color);
-      background-color: var(--theme-list-button-color);
+      background-color: var(--theme-button-enabled);
       border: 1px solid var(--theme-button-border);
       border-radius: 1.5rem;
       // transition-property: border, color, background-color;
@@ -402,8 +406,8 @@
         color: var(--theme-dark-color);
       }
       &:hover {
-        color: var(--theme-halfcontent-color);
+        color: var(--theme-caption-color);
-        background-color: var(--theme-list-button-color);
+        background-color: var(--theme-button-hovered);
         border-color: var(--theme-button-border);
       }
       &:focus {
@@ -412,6 +416,7 @@
     }
     &.primary {
       padding: 0 0.75rem;
+      font-weight: 500;
       color: var(--primary-button-color);
       background-color: var(--primary-button-enabled);
       border-color: var(--primary-button-border);

packages/ui/src/components/Panel.svelte

@@ -182,8 +182,10 @@
         }}
       >
         {#if $$slots.header && isHeader}
-          <div class="popupPanel-body__header main bottom-divider" class:max={useMaxWidth}>
+          <div class="popupPanel-body__header-wrapper">
-            <slot name="header" />
+            <div class="popupPanel-body__header main" class:max={useMaxWidth}>
+              <slot name="header" />
+            </div>
           </div>
         {/if}
         <slot />

packages/ui/src/components/TabList.svelte

@@ -195,6 +195,7 @@
     &.plain,
     &.separated {
       margin-bottom: -1px;
+      height: 100%;
     }
     .plain {
       display: inline-flex;

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -36,6 +36,7 @@
   export let shouldShowLabel: boolean = true
   export let size: ButtonSize | 'x-small' = 'small'
   export let kind: ButtonKind = 'link'
+  export let width: string | undefined = undefined
   export let label = ui.string.DueDate
   export let detail = ui.string.NeedsToBeCompletedByThisDate
 
@@ -67,6 +68,7 @@
   class:editable
   class:dateTimeButtonNoLabel={!shouldShowLabel}
   class:text-xs={size === 'x-small'}
+  style:width
   on:click={(e) => {
     if (editable && !opened) {
       e.stopPropagation()
@@ -248,6 +250,7 @@
     &.list {
       padding: 0 0.625em 0 0.5rem;
       min-height: 1.75rem;
+      color: var(--theme-halfcontent-color);
       background-color: var(--theme-list-button-color);
       border: 1px solid var(--theme-divider-color);
       border-radius: 3rem;
@@ -255,10 +258,14 @@
       transition-duration: 0.15s;
 
       &:hover {
-        color: var(--theme-caption-color);
+        color: var(--theme-halfcontent-color);
-        background-color: var(--theme-list-button-color);
+        background-color: var(--theme-list-button-hover);
         border-color: var(--theme-divider-color);
       }
+      .btn-icon,
+      &:hover .btn-icon {
+        color: var(--theme-halfcontent-color) !important;
+      }
       &.medium {
         height: 1.75rem;
       }

packages/ui/src/components/calendar/DateRangePresenter.svelte

@@ -563,7 +563,6 @@
 
     &.secondary {
       padding: 0 0.625rem;
-      font-weight: 500;
       color: var(--theme-caption-color);
       background-color: var(--theme-button-enabled);
       border-color: var(--theme-button-border);

packages/ui/src/components/calendar/DueDatePresenter.svelte

@@ -27,6 +27,7 @@
   export let editable: boolean = true
   export let shouldIgnoreOverdue: boolean = false
   export let size: ButtonSize = 'medium'
+  export let width: string | undefined = undefined
 
   const today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
   $: isOverdue = value !== null && value < today.getTime()
@@ -77,6 +78,7 @@
 {#if shouldRender}
   <div
     class="clear-mins"
+    style:width
     use:tooltip={formattedDate
       ? {
           direction: 'top',
@@ -91,6 +93,6 @@
         }
       : undefined}
   >
-    <DatePresenter {value} {editable} icon={iconModifier} {kind} {size} on:change={handleDueDateChanged} />
+    <DatePresenter {value} {editable} icon={iconModifier} {kind} {size} {width} on:change={handleDueDateChanged} />
   </div>
 {/if}

plugins/board-resources/src/components/presenters/LabelPresenter.svelte

@@ -10,7 +10,7 @@
 {#if value}
   <ColorPresenter value={value.color} {isHovered} {size} on:click>
     {#if size !== 'tiny'}
-      <div class="flex-center h-full w-full fs-title text-sm pr-1 pl-1">{value.title}</div>
+      <div class="flex-center h-full w-full text-sm pr-1 pl-1">{value.title}</div>
     {/if}
   </ColorPresenter>
 {/if}

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

@@ -21,6 +21,7 @@
     Button,
     ButtonKind,
     ButtonSize,
+    IconSize,
     getEventPositionElement,
     getFocusManager,
     Icon,
@@ -56,6 +57,7 @@
   export let readonly = false
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
+  export let avatarSize: IconSize = kind === 'secondary' ? 'small' : 'card'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
   export let focusIndex = -1
@@ -145,7 +147,7 @@
         >
           {#if selected}
             {#if hideIcon || selected}
-              <UserInfo value={selected} size={kind === 'link' ? 'x-small' : 'tiny'} {icon} on:accent-color />
+              <UserInfo value={selected} size={avatarSize} {icon} on:accent-color />
             {:else}
               {getName(selected)}
             {/if}
@@ -153,7 +155,7 @@
             <div class="flex-presenter not-selected">
               {#if icon}
                 <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
-                  <Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
+                  <Icon {icon} size={avatarSize} />
                 </div>
               {/if}
               <div class="label no-underline">

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

@@ -45,9 +45,8 @@
 
 <style lang="scss">
   .user {
-    color: var(--accent-color);
+    color: var(--theme-caption-color);
     margin-left: 0.5rem;
-    font-weight: 500;
     text-align: left;
   }
 </style>

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

@@ -17,7 +17,7 @@
   import contact, { Employee } from '@hcengineering/contact'
   import type { Class, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
-  import { ButtonKind, ButtonSize, LabelAndProps } from '@hcengineering/ui'
+  import { ButtonKind, ButtonSize, IconSize, LabelAndProps } from '@hcengineering/ui'
   import presentation from '@hcengineering/presentation'
   import IconPerson from './icons/Person.svelte'
   import UserBox from './UserBox.svelte'
@@ -34,6 +34,7 @@
   export let titleDeselect: IntlString | undefined = undefined
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
+  export let avatarSize: IconSize = 'card'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
   export let focusIndex = -1
@@ -54,6 +55,7 @@
   {titleDeselect}
   {kind}
   {size}
+  {avatarSize}
   {justify}
   {width}
   {focusIndex}

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

@@ -106,11 +106,10 @@
       align-items: baseline;
     }
     .eContentPresenterIcon {
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
     .eContentPresenterLabel {
       min-width: 0;
-      font-weight: 500;
       text-align: left;
       color: var(--theme-caption-color);
 
@@ -139,10 +138,9 @@
   .status {
     margin-left: 0.25rem;
     padding: 0.125rem 0.25rem;
-    font-weight: 500;
     font-size: 0.75rem;
-    color: var(--content-color);
+    color: var(--theme-content-color);
-    background-color: var(--noborder-bg-color);
+    background-color: var(--theme-button-enabled);
     border-radius: 0.25rem;
   }
 </style>

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

@@ -24,6 +24,7 @@
     Button,
     ButtonKind,
     ButtonSize,
+    IconSize,
     getEventPositionElement,
     getFocusManager,
     Icon,
@@ -54,6 +55,7 @@
   export let readonly = false
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
+  export let avatarSize: IconSize = kind === 'link' ? 'x-small' : 'tiny'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
   export let focusIndex = -1
@@ -151,7 +153,7 @@
         >
           {#if selected}
             {#if hideIcon || selected}
-              <UserInfo value={selected} size={kind === 'link' ? 'x-small' : 'tiny'} {icon} />
+              <UserInfo value={selected} size={avatarSize} {icon} />
             {:else}
               {getName(selected)}
             {/if}
@@ -159,7 +161,7 @@
             <div class="flex-presenter not-selected">
               {#if icon}
                 <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
-                  <Icon {icon} size={'small'} />
+                  <Icon {icon} size={avatarSize} />
                 </div>
               {/if}
               <div class="label no-underline">

plugins/document-resources/src/components/EditDoc.svelte

@@ -525,8 +525,8 @@
         {readonly}
       />
 
-      <div class="tab-content">
+      <div class="doc-divider" />
-        <div class="divider" />
+      <div class="popupPanel-body__aside-grid">
         <span class="label labelTop">
           <Label label={document.string.Labels} />
         </span>
@@ -552,28 +552,12 @@
     line-height: 150%;
     // overflow: auto;
   }
-
+  .doc-divider {
-  .tab-content {
+    flex-shrink: 0;
-    display: grid;
+    margin: 0 0 0.5rem;
-    grid-template-columns: 1fr 1.5fr;
+    height: 1px;
-    grid-auto-flow: row;
+    background-color: var(--theme-divider-color);
-    justify-content: start;
-    align-items: center;
-    gap: 1rem;
-    margin-top: 1rem;
-    width: 100%;
-    height: min-content;
-
-    .divider {
-      grid-column: 1 / 3;
-      height: 1px;
-      background-color: var(--divider-color);
-    }
-    .labelTop {
-      align-self: start;
-    }
   }
-
   .emphasized {
     padding: 1rem;
     background-color: var(--body-color);

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

@@ -16,7 +16,7 @@
   import { Doc, Ref } from '@hcengineering/core'
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import presentation from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, Label, showPopup } from '@hcengineering/ui'
+  import { Button, Icon, IconAdd, Label, showPopup, Scroller } from '@hcengineering/ui'
   import view, { BuildModelKey } from '@hcengineering/view'
   import { Table } from '@hcengineering/view-resources'
   import recruit from '../plugin'
@@ -57,12 +57,14 @@
     <Button id="appls.add" icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
   </div>
   {#if (vacancies ?? 0) > 0}
-    <Table
+    <Scroller horizontal>
-      _class={recruit.class.Vacancy}
+      <Table
-      {config}
+        _class={recruit.class.Vacancy}
-      query={{ company: objectId }}
+        {config}
-      loadingProps={{ length: vacancies ?? 0 }}
+        query={{ company: objectId }}
-    />
+        loadingProps={{ length: vacancies ?? 0 }}
+      />
+    </Scroller>
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
       <div class="caption-color">

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

@@ -90,7 +90,6 @@
     min-width: 0;
     min-height: 1.5rem;
     text-transform: uppercase;
-    font-weight: 500;
     font-size: 0.75rem;
     color: var(--theme-content-color);
     border-radius: 0.25rem;
@@ -102,7 +101,6 @@
   .tag-item-inline {
     position: relative;
     padding-left: 0.75rem;
-    font-weight: 500;
     color: var(--theme-content-color);
 
     &::before {

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

@@ -42,18 +42,18 @@
       }}
     >
       <div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
-      <span class="overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
+      <span class="label overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
     </button>
   {:else if kind === 'list'}
     <div
-      class="list-container"
+      class="listitems-container"
       style:padding-right={isEditable ? '0' : '0.5rem'}
       use:resizeObserver={(element) => {
         realWidth = element.clientWidth
       }}
     >
       <div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
-      <span class="overflow-label ml-1-5 caption-color max-w-40">
+      <span class="label overflow-label ml-1-5 max-w-40">
         {value.title}
       </span>
       {#if isEditable}
@@ -66,7 +66,7 @@
 {/if}
 
 <style lang="scss">
-  .list-container {
+  .listitems-container {
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -75,21 +75,28 @@
     height: 1.75rem;
     min-width: 0;
     min-height: 0;
-    background-color: var(--theme-list-button-color);
+    background-color: var(--theme-button-enabled);
     border: 1px solid var(--theme-button-border);
     border-radius: 1.5rem;
+    user-select: none;
 
+    &:hover {
+      background-color: var(--theme-button-hovered);
+    }
+    .label {
+      color: var(--theme-caption-color);
+    }
     .btn-close {
       flex-shrink: 0;
       margin-left: 0.125rem;
       padding: 0 0.25rem 0 0.125rem;
       height: 1.75rem;
-      color: var(--content-color);
+      color: var(--theme-content-color);
       border-left: 1px solid transparent;
 
       &:hover {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
-        border-left-color: var(--divider-color);
+        border-left-color: var(--theme-divider-color);
       }
     }
   }
@@ -102,7 +109,6 @@
     padding: 0 0.375rem;
     height: 1.5rem;
     min-width: 1.5rem;
-    font-weight: 500;
     font-size: 0.75rem;
     line-height: 0.75rem;
     white-space: nowrap;

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

@@ -60,32 +60,32 @@
 
 <style lang="scss">
   .step-container {
-    margin: 0.125rem 0.125rem 0 0;
+    margin: 0.375rem 0.375rem 0 0;
   }
   .tag-button {
     overflow: hidden;
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    padding: 0 0.5rem;
+    padding: 0 0.625rem 0 0.5rem;
-    height: 1.5rem;
+    height: 2rem;
     min-width: 0;
     min-height: 0;
-    color: var(--content-color);
+    color: var(--theme-content-color);
     border: 1px solid transparent;
-    border-radius: 0.75rem;
+    border-radius: 1rem;
 
     .icon {
       flex-shrink: 0;
-      width: 0.625rem;
+      width: 1rem;
-      height: 0.625rem;
+      height: 1rem;
     }
     .label {
-      margin-left: 0.125rem;
+      margin-left: 0.25rem;
     }
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
-      border-color: var(--divider-color);
+      border-color: var(--theme-divider-color);
     }
   }
 </style>

plugins/telegram-resources/src/components/Date.svelte

@@ -42,8 +42,8 @@
     padding: 0.25rem 0.75rem;
     width: fit-content;
     font-weight: 500;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
-    background-color: var(--divider-color);
+    background-color: var(--theme-button-enabled);
     border-radius: 1.25rem;
     user-select: text;
   }

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

@@ -127,7 +127,7 @@
     on:click={handleComponentEditorOpened}
   >
     <svelte:fragment slot="content">
-      <span class="label {enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label pointer-events-none">
+      <span class="label {enlargedText ? 'ml-1 text-base' : 'text-md'} overflow-label pointer-events-none">
         <Label label={getEmbeddedLabel(componentText)} />
       </span>
     </svelte:fragment>

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

@@ -18,14 +18,15 @@
   import { AttachedData, Ref } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
   import { Issue, IssueDraft, IssueTemplateData } from '@hcengineering/tracker'
-  import { ButtonKind, ButtonSize, TooltipAlignment } from '@hcengineering/ui'
+  import { ButtonKind, ButtonSize, IconSize, TooltipAlignment } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
   import { getPreviousAssignees } from '../../utils'
 
   export let value: Issue | AttachedData<Issue> | IssueTemplateData | IssueDraft
-  export let size: ButtonSize = 'large'
   export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
+  export let avatarSize: IconSize = 'card'
   export let tooltipAlignment: TooltipAlignment | undefined = undefined
   export let width: string = '100%'
   export let focusIndex: number | undefined = undefined
@@ -97,6 +98,7 @@
     titleDeselect={tracker.string.Unassigned}
     {size}
     {kind}
+    {avatarSize}
     {width}
     showNavigate={false}
     justify={'left'}

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

@@ -18,6 +18,7 @@
   import { DueDatePresenter } from '@hcengineering/ui'
 
   export let value: Issue
+  export let width: string | undefined = undefined
 
   const client = getClient()
 
@@ -39,5 +40,5 @@
 </script>
 
 {#if value}
-  <DueDatePresenter kind={'link'} value={value.dueDate} editable onChange={(e) => handleDueDateChanged(e)} />
+  <DueDatePresenter kind={'link'} value={value.dueDate} {width} editable onChange={(e) => handleDueDateChanged(e)} />
 {/if}

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

@@ -87,7 +87,7 @@
 </script>
 
 <div class="flex-row mt-4 mb-4">
-  <Label label={tracker.string.StatusHistory} />:
+  <span class="content-dark-color"><Label label={tracker.string.StatusHistory} />:</span>
   <table class="ml-2">
     {#each displaySt as st}
       <tr>
@@ -95,7 +95,7 @@
           <StatusPresenter value={st.status} />
         </td>
         <td>
-          <div class="ml-2 mr-2">
+          <div class="ml-8 mr-2">
             <Duration value={st.duration} />
           </div>
         </td>

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

@@ -89,9 +89,7 @@
         {#if issuePriorities[value.priority]?.icon}<Icon icon={issuePriorities[value.priority]?.icon} {size} />{/if}
       </div>
       {#if shouldShowLabel}
-        <span
+        <span class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled content-color">
-          class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled fs-bold content-color"
-        >
           <Label label={issuePriorities[value.priority]?.label} />
         </span>
       {/if}

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

@@ -120,9 +120,7 @@
         {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'small' : 'medium'} />{/if}
       </div>
       {#if selectedStatusLabel}
-        <span
+        <span class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled content-color">
-          class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled fs-bold content-color"
-        >
           {selectedStatusLabel}
         </span>
       {/if}

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

@@ -93,7 +93,7 @@
   $: account = $employeeAccountByIdStore.get(issue.createdBy as Ref<EmployeeAccount>)
 </script>
 
-<div class="content">
+<div class="popupPanel-body__aside-grid">
   {#if issue.template?.template}
     <span class="label">
       <Label label={tracker.string.IssueTemplate} />
@@ -118,7 +118,7 @@
     <Label label={tracker.string.Status} />
   </span>
 
-  <StatusEditor value={issue} shouldShowLabel />
+  <StatusEditor value={issue} size={'medium'} shouldShowLabel />
 
   {#if issue.blockedBy?.length}
     <span class="labelTop">
@@ -142,7 +142,7 @@
   <span class="label">
     <Label label={tracker.string.Priority} />
   </span>
-  <PriorityEditor value={issue} shouldShowLabel />
+  <PriorityEditor value={issue} size={'medium'} shouldShowLabel />
 
   <span class="label">
     <Label label={core.string.CreatedBy} />
@@ -151,7 +151,8 @@
     value={employee?._id}
     label={core.string.CreatedBy}
     kind={'link'}
-    size={'large'}
+    size={'medium'}
+    avatarSize={'card'}
     width={'100%'}
     showNavigate={false}
     readonly
@@ -160,7 +161,7 @@
   <span class="label">
     <Label label={tracker.string.Assignee} />
   </span>
-  <AssigneeEditor value={issue} />
+  <AssigneeEditor value={issue} size={'medium'} avatarSize={'card'} />
 
   <span class="labelTop">
     <Label label={tracker.string.Labels} />
@@ -172,12 +173,12 @@
   <span class="label">
     <Label label={tracker.string.Component} />
   </span>
-  <ComponentEditor value={issue} />
+  <ComponentEditor value={issue} size={'medium'} />
 
   <span class="label">
     <Label label={tracker.string.Sprint} />
   </span>
-  <SprintEditor value={issue} />
+  <SprintEditor value={issue} size={'medium'} />
 
   {#if issue.dueDate !== null}
     <div class="divider" />
@@ -185,13 +186,13 @@
     <span class="label">
       <Label label={tracker.string.DueDate} />
     </span>
-    <DueDateEditor value={issue} />
+    <DueDateEditor value={issue} width={'100%'} />
   {/if}
 
   {#if keys.length > 0}
     <div class="divider" />
     {#each keys as key (typeof key === 'string' ? key : key.key)}
-      <AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} size={'large'} />
+      <AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} size={'medium'} />
     {/each}
   {/if}
 
@@ -203,32 +204,8 @@
         _class={mixin._id}
         object={hierarchy.as(issue, mixin._id)}
         showHeader={true}
-        size={'large'}
+        size={'medium'}
       />
     {/each}
   {/each}
 </div>
-
-<style lang="scss">
-  .content {
-    display: grid;
-    grid-template-columns: 1fr 1.5fr;
-    grid-auto-flow: row;
-    justify-content: start;
-    align-items: center;
-    gap: 1rem;
-    margin-top: 1rem;
-    width: 100%;
-    height: min-content;
-  }
-
-  .divider {
-    grid-column: 1 / 3;
-    height: 1px;
-    background-color: var(--divider-color);
-  }
-  .labelTop {
-    align-self: start;
-    margin-top: 0.385rem;
-  }
-</style>

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

@@ -267,13 +267,12 @@
       />
       <Button
         kind={'transparent'}
-        shape={'round'}
         selected={showAllMixins}
         on:click={() => {
           showAllMixins = !showAllMixins
         }}
       >
-        <svelte:fragment slot="content">
+        <svelte:fragment slot="icon">
           <IconMixin size={'small'} />
         </svelte:fragment>
       </Button>
@@ -285,7 +284,9 @@
       {/if}
 
       <div class="divider" />
-      <IssueStatusActivity {issue} />
+      <div class="issue-stats">
+        <IssueStatusActivity {issue} />
+      </div>
     </svelte:fragment>
   </Panel>
 {/if}
@@ -293,10 +294,14 @@
 <style lang="scss">
   .divider {
     flex-shrink: 0;
-    margin-top: 1rem;
+    margin: 0.5rem 0;
-    margin-bottom: 1rem;
-    grid-column: 1 / 3;
     height: 1px;
-    background-color: var(--divider-color);
+    background-color: var(--theme-divider-color);
+  }
+  .issue-stats {
+    flex-shrink: 0;
+    margin: 0 2rem;
+    min-width: 0;
+    min-height: 0;
   }
 </style>

plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte

@@ -27,6 +27,7 @@
   export let object: Issue
   export let value: number
   export let kind: 'no-border' | 'link' = 'no-border'
+  export let size: 'small' | 'medium' | 'large' = 'large'
   export let currentProject: Project | undefined
 
   const spaceQuery = createQuery()
@@ -66,7 +67,7 @@
 
 {#if kind === 'link'}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div id="ReportedTimeEditor" class="link-container flex-between" on:click={showReports}>
+  <div id="ReportedTimeEditor" class="link-container {size} flex-between" on:click={showReports}>
     {#if value !== undefined}
       <span class="overflow-label">
         <TimePresenter {value} />
@@ -98,12 +99,20 @@
     align-items: center;
     padding: 0 0.875rem;
     width: 100%;
-    height: 2.25rem;
     color: var(--theme-caption-color);
     border: 1px solid transparent;
     border-radius: 0.25rem;
     cursor: pointer;
 
+    &.small {
+      height: 1.5rem;
+    }
+    &.medium {
+      height: 2rem;
+    }
+    &.large {
+      height: 2.25rem;
+    }
     .add-action {
       visibility: hidden;
     }

plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte

@@ -34,9 +34,8 @@
   .scrumLabel {
     display: block;
     min-width: 0;
-    font-weight: 500;
     text-align: left;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

plugins/tracker-resources/src/components/scrums/ScrumRecordPresenter.svelte

@@ -33,9 +33,8 @@
   .scrumRecordLabel {
     display: block;
     min-width: 0;
-    font-weight: 500;
     text-align: left;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

plugins/tracker-resources/src/components/sprints/SprintSelector.svelte

@@ -149,7 +149,7 @@
     on:click={handleSprintEditorOpened}
   >
     <svelte:fragment slot="content">
-      <span class="label {enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label pointer-events-none">
+      <span class="label {enlargedText ? 'text-base' : 'text-md'} overflow-label pointer-events-none">
         <Label label={getEmbeddedLabel(sprintText)} />
       </span>
     </svelte:fragment>

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

@@ -176,27 +176,26 @@
 <style lang="scss">
   .row {
     position: relative;
-    border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
     .text {
       font-weight: 500;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
 
     .issuePresenter {
       flex-shrink: 0;
       min-width: 0;
       min-height: 0;
-      font-weight: 500;
+      color: var(--theme-content-color);
-      color: var(--content-color);
       cursor: pointer;
 
       &:hover {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         text-decoration: underline;
       }
       &:active {
-        color: var(--accent-color);
+        color: var(--theme-caption-color);
       }
     }
 
@@ -232,7 +231,7 @@
     &.is-dragging::before {
       position: absolute;
       content: '';
-      background-color: var(--divider-color);
+      background-color: var(--theme-divider-color);
       inset: 0;
       z-index: -1;
     }

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

@@ -292,9 +292,6 @@
       {#if template && currentProject}
         <TemplateControlPanel issue={template} />
       {/if}
-
-      <div class="divider" />
-      <!-- <IssueStatusActivity issue={template} /> -->
     </svelte:fragment>
   </Panel>
 {/if}
@@ -318,13 +315,6 @@
       color: var(--dark-color);
     }
   }
-  .divider {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    grid-column: 1 / 3;
-    height: 1px;
-    background-color: var(--divider-color);
-  }
 
   .tool {
     align-self: start;

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

@@ -171,27 +171,26 @@
 <style lang="scss">
   .row {
     position: relative;
-    border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
     .text {
       font-weight: 500;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
 
     .issuePresenter {
       flex-shrink: 0;
       min-width: 0;
       min-height: 0;
-      font-weight: 500;
+      color: var(--theme-content-color);
-      color: var(--content-color);
       cursor: pointer;
 
       &:hover {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         text-decoration: underline;
       }
       &:active {
-        color: var(--accent-color);
+        color: var(--theme-caption-color);
       }
     }
 
@@ -227,7 +226,7 @@
     &.is-dragging::before {
       position: absolute;
       content: '';
-      background-color: var(--divider-color);
+      background-color: var(--theme-divider-color);
       inset: 0;
       z-index: -1;
     }

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

@@ -59,26 +59,25 @@
     flex-shrink: 0;
     max-width: 15rem;
     font-size: 0.8125rem;
-    color: var(--content-color);
+    color: var(--theme-content-color);
 
     &:not(.noPointer) {
       cursor: pointer;
     }
 
     &.noUnderline {
-      font-weight: 500;
+      color: var(--theme-caption-color);
-      color: var(--caption-color);
     }
 
     &:not(.noUnderline) {
       &:hover {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         text-decoration: underline;
       }
     }
 
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
     }
   }
 </style>

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

@@ -64,16 +64,16 @@
   }
 </script>
 
-<div class="content">
+<div class="popupPanel-body__aside-grid">
   <span class="label">
     <Label label={tracker.string.Priority} />
   </span>
-  <PriorityEditor value={issue} shouldShowLabel />
+  <PriorityEditor value={issue} size={'medium'} shouldShowLabel />
 
   <span class="label">
     <Label label={tracker.string.Assignee} />
   </span>
-  <AssigneeEditor value={issue} />
+  <AssigneeEditor value={issue} size={'medium'} />
 
   <span class="labelTop">
     <Label label={tracker.string.Labels} />
@@ -82,7 +82,10 @@
   <Component
     is={tags.component.TagsDropdownEditor}
     props={{
-      kind: 'no-border',
+      kind: 'link',
+      size: 'medium',
+      width: '100%',
+      justify: 'left',
       items: labelRefs,
       key,
       targetClass: tracker.class.Issue,
@@ -99,43 +102,19 @@
   <span class="label">
     <Label label={tracker.string.Component} />
   </span>
-  <ComponentEditor value={issue} />
+  <ComponentEditor value={issue} size={'medium'} />
 
   {#if issue.sprint}
     <span class="label">
       <Label label={tracker.string.Sprint} />
     </span>
-    <SprintEditor value={issue} />
+    <SprintEditor value={issue} size={'medium'} />
   {/if}
 
   {#if keys.length > 0}
     <div class="divider" />
     {#each keys as key (typeof key === 'string' ? key : key.key)}
-      <AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} />
+      <AttributeBarEditor {key} _class={issue._class} object={issue} size={'medium'} showHeader={true} />
     {/each}
   {/if}
 </div>
-
-<style lang="scss">
-  .content {
-    display: grid;
-    grid-template-columns: 1fr 1.5fr;
-    grid-auto-flow: row;
-    justify-content: start;
-    align-items: center;
-    gap: 1rem;
-    margin-top: 1rem;
-    width: 100%;
-    height: min-content;
-  }
-
-  .divider {
-    grid-column: 1 / 3;
-    height: 1px;
-    background-color: var(--divider-color);
-  }
-  .labelTop {
-    align-self: start;
-    margin-top: 0.385rem;
-  }
-</style>

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

@@ -35,8 +35,7 @@
       width: 1.6rem;
       white-space: nowrap;
       text-transform: capitalize;
-      font-weight: 500;
+      color: var(--theme-caption-color);
-      color: var(--caption-color);
     }
   }
 </style>

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

@@ -76,7 +76,7 @@
       <Button
         icon={setting.icon.Setting}
         kind={'link'}
-        size={'large'}
+        size={'medium'}
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()
@@ -104,17 +104,19 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0.25rem -0.5rem 0.75rem;
+    padding: 0 0.75rem;
-    padding: 0 0 0 0.5rem;
     font-weight: 600;
     color: var(--theme-dark-color);
-    border: 1px solid var(--theme-divider-color);
+    border-top: 1px solid var(--theme-divider-color);
-    border-radius: 0.25rem;
+    border-bottom: 1px solid var(--theme-divider-color);
     cursor: pointer;
     transition-property: color, background-color, border-color;
     transition-duration: 0.15s;
     transition-timing-function: var(--timing-main);
 
+    &:first-child {
+      border-top-color: transparent;
+    }
     .icon-arrow {
       margin-left: 0.5rem;
       width: 0.325rem;

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

@@ -300,8 +300,8 @@
       </div>
     </svelte:fragment>
 
-    <svelte:fragment slot="attributes" let:direction={dir}>
+    <svelte:fragment slot="aside-tabs">
-      <div class="flex flex-reverse flex-no-shrink clear-mins">
+      <div class="flex-row-center flex-reverse flex-grow">
         <Button
           kind={'transparent'}
           shape={'round'}
@@ -310,11 +310,13 @@
             showAllMixins = !showAllMixins
           }}
         >
-          <svelte:fragment slot="content">
+          <svelte:fragment slot="icon">
             <IconMixin size={'small'} />
           </svelte:fragment>
         </Button>
       </div>
+    </svelte:fragment>
+    <svelte:fragment slot="attributes" let:direction={dir}>
       {#if !headerLoading}
         {#if headerEditor !== undefined}
           <Component
@@ -338,7 +340,7 @@
 
     <svelte:fragment slot="subheader">
       {#if mainEditor && mainEditor.pinned}
-        <div class="flex-col flex-grow step-tb-6">
+        <div class="flex-col flex-grow my-4 step-tb-6">
           <Component is={mainEditor.editor} props={{ object }} on:open={handleOpen} />
         </div>
       {/if}

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

@@ -82,11 +82,10 @@
 
       border-radius: 8px;
 
-      font-weight: 500;
       font-size: 10px;
 
       text-transform: uppercase;
-      color: #ffffff;
+      color: var(--theme-caption-color);
 
       display: flex;
       align-items: center;