TSK-1324: update popups and colors (#3152)

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

packages/presentation/src/components/DocPopup.svelte

@@ -241,29 +241,17 @@
             }}
           >
             {#if (allowDeselect && selected) || multiSelect || selected}
-              <div class="icon" class:disabled={readonly}>
+              <div class="check" class:disabled={readonly}>
                 {#if obj._id === selected || selectedElements.has(obj._id)}
-                  <div bind:this={selectedDiv}>
+                  <div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                    {#if titleDeselect}
+                    <Icon icon={IconCheck} {size} />
-                      <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                        <Icon icon={IconCheck} {size} />
-                      </div>
-                    {:else}
-                      <Icon icon={IconCheck} {size} />
-                    {/if}
                   </div>
                 {/if}
               </div>
             {/if}
 
             <span class="label" class:disabled={readonly || isDeselectDisabled}>
-              {#if obj._id === selected}
+              <slot name="item" item={obj} />
-                <div bind:this={selectedDiv}>
-                  <slot name="item" item={obj} />
-                </div>
-              {:else}
-                <slot name="item" item={obj} />
-              {/if}
             </span>
           </button>
         </svelte:fragment>
@@ -283,8 +271,4 @@
     border-radius: 0.25rem;
     box-shadow: none;
   }
-  .whereSelected {
-    height: 2px;
-    background-color: var(--theme-caret-color);
-  }
 </style>

packages/presentation/src/components/SpaceInfo.svelte

@@ -23,11 +23,11 @@
   export let size: IconSize
 </script>
 
-<div class="flex-row-center">
+<div class="flex-presenter">
-  <div class="flex-center caption-color flex-no-shrink"><IconFolder {size} /></div>
+  <div class="icon medium-gap"><IconFolder {size} /></div>
-  <div class="flex-col ml-2 min-w-0">
+  <div class="flex-col">
     {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
-    <div class="caption-color overflow-label">
+    <div class="label no-underline nowrap">
       {value.name}
       {#if value.archived}
         <Label label={presentation.string.Archived} />
@@ -35,14 +35,3 @@
     </div>
   </div>
 </div>
-
-<style lang="scss">
-  .medium {
-    width: 1.75rem;
-    height: 1.75rem;
-  }
-  .large {
-    width: 2.25rem;
-    height: 2.25rem;
-  }
-</style>

packages/theme/styles/_colors.scss

@@ -123,6 +123,7 @@
   --theme-popup-color: #292938;
   --theme-popup-hover: #32323F;
   --theme-popup-divider: rgba(255, 255, 255, .1);
+  --theme-popup-header: #3A3A47;
   --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
   --theme-panel-color: #1A1A28;
   --theme-calendar-today-color: #fff;
@@ -133,6 +134,7 @@
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
 
   --theme-error-color: #eb5757;
+  --theme-warning-color: #f2994a;
   --theme-lost-color: #eb5757;
   --theme-won-color: #34DB80;
   --theme-caret-color: #6e5ed2;
@@ -161,7 +163,6 @@
   --accent-color: #d7d8db;
   --caption-color: #f7f8f8;
   --white-color: #fff;
-  --warning-color: #f2994a;
 
   --divider-color: #303236;
   --divider-trans-color: rgba(255, 255, 255, .12);
@@ -284,6 +285,7 @@
   --theme-popup-color: #FFFFFF;
   --theme-popup-hover: #F5F5F5;
   --theme-popup-divider: rgba(0, 0, 0, .1);
+  --theme-popup-header: #EBEBEB;
   --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
   --theme-panel-color: #FFFFFF;
   --theme-calendar-today-color: #000;
@@ -294,6 +296,7 @@
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
 
   --theme-error-color: #eb5757;  // Dark
+  --theme-warning-color: #f2994a;  // Dark
   --theme-lost-color: #eb5757;  // Dark
   --theme-won-color: #34DB80;  // Dark
   --theme-caret-color: #6e5ed2;
@@ -322,7 +325,6 @@
   --theme-accent-color: rgba(0, 0, 0, .8);
   --caption-color: #131416;
   --white-color: #fff;
-  --warning-color: #f2994a;  // Dark
 
   --divider-color: #e0e0e0;
   --divider-trans-color: rgba(0, 0, 0, .12);

packages/theme/styles/_layouts.scss

@@ -268,21 +268,22 @@ input.search {
   cursor: pointer;
 
   .icon {
-    color: var(--dark-color);
+    color: var(--theme-dark-color);
 
     &.circle {
       padding: .25rem;
       background-color: var(--avatar-bg-color);
       border-radius: 50%;
     }
-    &:not(.small-gap) { margin-right: .5rem; }
+    &:not(.small-gap, .medium-gap) { margin-right: .5rem; }
     &.small-gap { margin-right: .25rem; }
+    &.medium-gap { margin-right: .375rem; }
   }
   .label {
     min-width: 0;
     font-weight: 500;
     text-align: left;
-    color: var(--accent-color);
+    color: var(--theme-content-color);
 
     overflow: hidden;
     visibility: visible;
@@ -306,19 +307,19 @@ input.search {
     margin-left: .75rem;
   }
   &:hover {
-    .icon { color: var(--caption-color); }
+    .icon { color: var(--theme-caption-color); }
     .label {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
 
       &:not(.no-underline) { text-decoration: underline; }
     }
     .action { visibility: visible; }
   }
   &.not-selected {
-    .label { color: var(--content-color); }
+    .label { color: var(--theme-dark-color); }
     &:hover .label,
     &:hover .icon {
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
   }
 }
@@ -721,6 +722,7 @@ a.no-line {
 }
 .cursor-pointer { cursor: pointer; }
 .cursor-default { cursor: default; }
+.cursor-inherit { cursor: inherit; }
 
 .pointer-events-none { pointer-events: none; }
 .select-text { user-select: text; }
@@ -844,6 +846,15 @@ a.no-line {
 }
 
 /* Backgrounds & Colors */
+.dark-hover-content-color {
+  color: var(--theme-dark-color);
+  &:hover { color: var(--theme-content-color); }
+}
+.content-hover-caption-color {
+  color: var(--theme-content-color);
+  &:hover { color: var(--theme-caption-color); }
+}
+
 .background-body-color { background-color: var(--body-color); }
 .background-accent-bg-color { background-color: var(--accent-bg-color); }
 .background-highlight-select { background-color: var(--highlight-select); }

packages/theme/styles/popups.scss

@@ -117,7 +117,7 @@
     .icon {
       width: 1rem;
       height: 1rem;
-      color: var(--theme-caret-color);
+      color: var(--theme-dark-color);
     }
     .color {
       width: .875rem;
@@ -138,20 +138,25 @@
       overflow: hidden;
     }
     .check {
-      display: flex;
+      flex-shrink: 0;
-      align-items: center;
+      width: 1rem;
-      margin-right: .75rem;
+      height: 1rem;
+      margin-right: .375rem;
+      color: var(--theme-caret-color);
     }
     .check-right { margin: 0 0 0 2rem; }
-    &:not(.withList):focus,
+    &:not(.withList, .no-focus):focus,
     &:not(.withList):hover {
-      color: var(--theme-caption-color);
       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); }
     }
-    &.no-focus:not(.withList):focus { background-color: var(--theme-popup-hover); }
-    &.no-focus:not(.withList):hover { background-color: var(--theme-popup-hover); }
   }
   .sticky-wrapper {
     display: flex;
@@ -173,13 +178,13 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: .125rem .25rem;
+      padding: .375rem .25rem;
       min-height: 1.5rem;
       font-weight: 500;
       font-size: .75rem;
       text-align: left;
       color: var(--theme-content-color);
-      background-color: var(--theme-comp-header-color);
+      background-color: var(--theme-popup-header);
       cursor: pointer;
 
       .icon {
@@ -193,6 +198,10 @@
       &.show + .menu-group { height: auto; }
     }
   }
+  .whereSelected {
+    height: 2px;
+    background-color: var(--theme-caret-color);
+  }
 }
 
 .antiPopup {
@@ -386,14 +395,18 @@
   align-items: center;
   flex-shrink: 0;
   justify-content: flex-start;
-  padding: .25rem .75rem;
+  padding: .25rem .5rem;
   min-width: 0;
   min-height: 2rem;
   text-align: left;
   color: var(--theme-content-color);
+  outline: none;
   cursor: pointer;
 
-  .icon { color: var(--theme-dark-color); }
+  .icon {
+    margin-right: .375rem;
+    color: var(--theme-dark-color);
+  }
   &:focus .icon,
   &.withHover:hover .icon,
   &.withIconHover:hover .icon { color: var(--theme-caption-color); }
@@ -450,6 +463,7 @@
 .notifyPopup .content .mention { margin-top: 0 !important; }
 
 .helpAndSupportPopup {
+  height: 100%;
   min-height: 100%;
   min-width: 20rem;
 }

packages/ui/src/components/ActionIcon.svelte

@@ -48,34 +48,33 @@
     cursor: pointer;
 
     .icon {
-      color: var(--dark-color);
+      color: var(--theme-halfcontent-color);
       &.invisible {
         opacity: 0;
       }
     }
     &:hover .icon {
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
       opacity: 1;
     }
     &:focus-visible {
-      border: 1px solid var(--primary-button-focused-border);
+      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
-      box-shadow: 0 0 0 3px var(--primary-button-outline);
       .icon {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         opacity: 1;
       }
     }
   }
   .small {
-    width: 1.143em;
+    width: 1rem;
-    height: 1.143em;
+    height: 1rem;
   }
   .medium {
-    width: 1.429em;
+    width: 1.25rem;
-    height: 1.429em;
+    height: 1.25rem;
   }
   .large {
-    width: 1.715em;
+    width: 1.5rem;
-    height: 1.715em;
+    height: 1.5rem;
   }
 </style>

packages/ui/src/components/Button.svelte

@@ -234,6 +234,9 @@
       border-top-right-radius: 0.25rem;
       border-bottom-right-radius: 0.25rem;
     }
+    &.sh-filter {
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
     &.bs-solid {
       border-style: solid;
     }
@@ -254,7 +257,12 @@
       }
     }
     &:focus {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      &:not(.sh-filter) {
+        box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+      }
+      &.sh-filter {
+        border-color: var(--primary-button-focused-border);
+      }
     }
     &:disabled {
       color: var(--theme-dark-color);

packages/ui/src/components/ColorPopup.svelte

@@ -19,10 +19,13 @@
   import { deviceOptionsStore, resizeObserver } from '..'
   import { getPlatformColor } from '../colors'
   import ListView from './ListView.svelte'
+  import Icon from './Icon.svelte'
+  import IconCheck from './icons/Check.svelte'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
   export let searchable: boolean = false
+  export let selected: number | string | undefined = undefined
   export let value: Array<{ id: number | string; color: number; label: string }>
 
   let search: string = ''
@@ -92,11 +95,16 @@
         <svelte:fragment slot="item" let:item>
           {@const itemValue = objects[item]}
           <button
-            class="menu-item w-full"
+            class="menu-item withList w-full"
             on:click={() => {
               dispatch('close', itemValue)
             }}
           >
+            <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>

packages/ui/src/components/DropdownLabelsPopup.svelte

@@ -19,8 +19,9 @@
   import { deviceOptionsStore, resizeObserver } from '..'
   import plugin from '../plugin'
   import type { DropdownTextItem } from '../types'
-  import CheckBox from './CheckBox.svelte'
+  import IconCheck from './icons/Check.svelte'
   import ListView from './ListView.svelte'
+  import Icon from './Icon.svelte'
 
   export let placeholder: IntlString = plugin.string.SearchDots
   export let items: DropdownTextItem[]
@@ -130,10 +131,12 @@
               }
             }}
           >
-            <div class="flex-grow caption-color lines-limit-2">{item.label}</div>
+            <div class="check">
-            {#if isSelected(selected, item)}
+              {#if isSelected(selected, item)}
-              <div class="check-right"><CheckBox checked primary /></div>
+                <Icon icon={IconCheck} size={'small'} />
-            {/if}
+              {/if}
+            </div>
+            <div class="labels overflow-label">{item.label}</div>
           </button>
         </svelte:fragment>
       </ListView>

packages/ui/src/components/EmojiPopup.svelte

@@ -131,7 +131,7 @@
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         use:tooltip={{ label: category.label }}
-        class="element m-0-5"
+        class="element"
         class:selected={currentCategory === category}
         on:click={() => handleScrollToCategory(category.id)}
       >
@@ -140,7 +140,7 @@
     {/each}
   </div>
   <div class="scrolling">
-    <Scroller bind:divScroll={div} on:scrolledCategories={handleScrolled} fade={emojiSP} noStretch>
+    <Scroller bind:divScroll={div} on:scrolledCategories={handleScrolled} fade={emojiSP} noStretch checkForHeaders>
       {#each categories as category}
         <div id={category.id} class="scroll-header categoryHeader">
           <Label label={category.label} />
@@ -149,7 +149,7 @@
           {#each category.emojis as emoji}
             {#if emoji !== undefined}
               <!-- svelte-ignore a11y-click-events-have-key-events -->
-              <div class="element m-0-5" on:click={() => dispatch('close', emoji)}>{emoji}</div>
+              <div class="element" on:click={() => dispatch('close', emoji)}>{emoji}</div>
             {/if}
           {/each}
         </div>
@@ -181,8 +181,8 @@
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
-    color: var(--dark-color);
+    color: var(--theme-caption-color);
-    background-color: var(--board-bg-color);
+    background-color: var(--theme-popup-header);
     border-radius: 0.25rem;
     &:first-child {
       margin-top: 0;
@@ -198,18 +198,22 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 1.5rem;
+    flex-shrink: 0;
-    height: 1.5rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    margin: 0.125rem;
+    padding: 0.25rem;
     border-radius: 0.25rem;
-    color: var(--caption-color);
+    color: var(--theme-content-color);
     cursor: pointer;
 
     &:hover {
-      background-color: var(--popup-bg-hover);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-popup-hover);
     }
 
     &.selected {
-      background-color: var(--popup-bg-hover);
+      background-color: var(--theme-popup-header);
     }
   }
 </style>

packages/ui/src/components/SelectPopup.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
   import { createEventDispatcher } from 'svelte'
-  import { deviceOptionsStore, mouseAttractor, resizeObserver } from '..'
+  import { deviceOptionsStore, resizeObserver } from '..'
   import { createFocusManager } from '../focus'
   import type { AnySvelteComponent } from '../types'
   import EditBox from './EditBox.svelte'
@@ -136,7 +136,9 @@
       />
     </div>
   {/if}
-  <div class:background-accent-bg-color={cHeight === 1} style:height={'2px'} />
+  {#if cHeight === 1}
+    <div class="whereSelected" />
+  {/if}
   <div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, filteredObjects)} bind:this={scrollDiv}>
     <div class="box">
       <ListView
@@ -148,15 +150,13 @@
         <svelte:fragment slot="item" let:item={itemId}>
           {@const item = filteredObjects[itemId]}
           <button
-            class="menu-item w-full"
+            class="menu-item withList w-full"
+            class:selected={item.isSelected}
             on:click={() => dispatch('close', item.id)}
-            on:focus={() => dispatch('update', item)}
-            on:mouseover={mouseAttractor(() => dispatch('update', item))}
-            on:mouseenter={mouseAttractor(() => dispatch('update', item))}
           >
-            <div class="flex-row-center" class:mt-2={huge} class:mb-2={huge}>
+            <div class="flex-row-center pointer-events-none" class:mt-2={huge} class:mb-2={huge}>
               {#if hasSelected}
-                <div class="icon">
+                <div class="check">
                   {#if item.isSelected}
                     <div bind:this={selectedDiv}>
                       <Icon icon={IconCheck} {size} />
@@ -186,18 +186,24 @@
         <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="flex p-1">
+            <div class="menu-group__header">
-              <div class="icon mr-2">
+              <div class="flex-row-center pl-1">
                 {#if obj.category.icon}
-                  <Icon icon={obj.category.icon} size={'small'} />
+                  <div class="clear-mins flex-no-shrink mr-2">
+                    <Icon icon={obj.category.icon} size={'small'} />
+                  </div>
                 {/if}
+                <span class="overflow-label">
+                  <Label label={obj.category.label} />
+                </span>
               </div>
-              <Label label={obj.category.label} />
             </div>
           {/if}
         </svelte:fragment>
       </ListView>
     </div>
   </div>
-  <div class:background-accent-bg-color={cHeight === -1} style:height={'2px'} />
+  {#if cHeight === -1}
+    <div class="whereSelected" />
+  {/if}
 </div>

packages/ui/src/components/Submenu.svelte

@@ -37,9 +37,12 @@
   $: optionsMod = { component: options.component ?? Menu, props, element, kind: 'submenu' }
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   bind:this={element}
   on:keydown
+  on:mouseover
   on:click
   use:tooltip={optionsMod}
   class="antiPopup-submenu"
@@ -54,7 +57,7 @@
     {/if}
   {:else}
     {#if icon}
-      <div class="icon mr-3"><Icon {icon} size={'small'} /></div>
+      <div class="icon"><Icon {icon} size={'small'} /></div>
     {/if}
     <span class="overflow-label pr-1">
       {#if label}<Label {label} params={labelProps} />

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

@@ -165,7 +165,7 @@
         color: var(--theme-content-color);
       }
       &.warning {
-        color: var(--warning-color);
+        color: var(--theme-warning-color);
       }
       &.critical {
         color: var(--theme-error-color);
@@ -196,7 +196,7 @@
             color: var(--caption-color);
           }
           &.warning {
-            color: var(--warning-color);
+            color: var(--theme-warning-color);
           }
           &.critical {
             color: var(--theme-error-color);

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

@@ -293,6 +293,7 @@
 <button
   bind:this={datePresenter}
   class="datetime-button {kind} {size}"
+  class:notSelected={!value}
   class:editable
   class:edit
   on:click={() => {
@@ -411,7 +412,7 @@
         {new Date(value).getMinutes().toString().padStart(2, '0')}
       {/if}
     {:else}
-      <div class="content-color">
+      <div class="overflow-label">
         <Label label={labelNull} />
       </div>
     {/if}
@@ -459,7 +460,7 @@
         color: var(--theme-content-color);
       }
       &.warning {
-        color: var(--warning-color);
+        color: var(--theme-warning-color);
       }
       &.overdue {
         color: var(--theme-error-color);
@@ -515,7 +516,7 @@
               color: var(--caption-color);
             }
             &.warning {
-              color: var(--warning-color);
+              color: var(--theme-warning-color);
             }
             &.overdue {
               color: var(--theme-error-color);
@@ -562,6 +563,7 @@
 
     &.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);
@@ -633,5 +635,16 @@
     .separator {
       margin: 0 0.1rem;
     }
+    &.notSelected {
+      color: var(--theme-dark-color);
+
+      .btn-icon {
+        color: var(--theme-darker-color);
+      }
+      &:hover,
+      &:hover .btn-icon {
+        color: var(--theme-content-color);
+      }
+    }
   }
 </style>

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

@@ -65,7 +65,7 @@
     margin-right: 1rem;
 
     &.mIconContainerWarning {
-      color: var(--warning-color);
+      color: var(--theme-warning-color);
     }
 
     &.mIconContainerCritical {

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

@@ -138,7 +138,11 @@
           >
             <WiFi
               size={'small'}
-              fill={$networkStatus === -1 ? 'red' : $networkStatus % 2 === 1 ? 'blue' : 'currentColor'}
+              fill={$networkStatus === -1
+                ? 'var(--theme-error-color)'
+                : $networkStatus % 2 === 1
+                ? 'var(--theme-warning-color)'
+                : 'currentColor'}
             />
           </div>
         </div>

packages/ui/src/types.ts

@@ -126,7 +126,7 @@ export type ButtonKind =
   | 'list'
   | 'list-header'
 export type ButtonSize = 'inline' | 'small' | 'medium' | 'large' | 'x-large'
-export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | undefined
+export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | 'filter' | undefined
 export type EditStyle = 'editbox' | 'large-style' | 'small-style' | 'search-style' | 'underline'
 export interface PopupPositionElement {
   getBoundingClientRect: () => DOMRect

plugins/chunter-resources/src/components/Message.svelte

@@ -299,7 +299,7 @@
 <style lang="scss">
   @keyframes highlight {
     50% {
-      background-color: var(--warning-color);
+      background-color: var(--theme-warning-color);
     }
   }
   .container {

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

@@ -150,7 +150,7 @@
               {getName(selected)}
             {/if}
           {:else}
-            <div class="flex-presenter">
+            <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} />

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

@@ -193,7 +193,7 @@
     <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
   </div>
   {#if cHeight === 1}
-    <div class="background-content-accent-color" style:height={'1px'} />
+    <div class="whereSelected" />
   {/if}
   <div
     class="scroll"
@@ -209,15 +209,13 @@
             {@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="category-box">
+              <div class="menu-group__header category-box">
-                <div class="flex flex-grow overflow-label">
+                <div class="flex-row-center pl-1">
-                  <span class="fs-medium flex-center mt-2 mb-2 ml-2">
+                  {#if cl.icon}
-                    {#if cl.icon}
+                    <div class="clear-mins mr-2"><Icon icon={cl.icon} size={'small'} /></div>
-                      <Icon icon={cl.icon} size={'small'} />
+                  {/if}
-                    {/if}
+                  <span class="overflow-label">
-                    <div class="ml-1">
+                    <Label label={getCategoryTitle(category)} />
-                      <Label label={getCategoryTitle(category)} />
-                    </div>
                   </span>
                 </div>
               </div>
@@ -227,49 +225,29 @@
         <svelte:fragment slot="item" let:item>
           {@const obj = contacts[item]}
           <button
-            class="menu-item w-full"
+            class="menu-item withList no-focus w-full"
-            class:background-button-bg-color={obj._id === selected}
+            class:selected={obj._id === selected}
-            class:border-radius-1={obj._id === selected}
             on:click={() => {
               handleSelection(undefined, item)
             }}
           >
             {#if allowDeselect && selected}
-              <div class="icon">
+              <div class="check">
                 {#if obj._id === selected}
-                  <div bind:this={selectedDiv}>
+                  <div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                    {#if titleDeselect}
+                    <Icon icon={IconCheck} {size} />
-                      <div class="clear-mins" use:tooltip={{ label: titleDeselect }}>
-                        <Icon icon={IconCheck} {size} />
-                      </div>
-                    {:else}
-                      <Icon icon={IconCheck} {size} />
-                    {/if}
                   </div>
                 {/if}
               </div>
             {/if}
-
+            <UserInfo size={'x-small'} value={obj} {icon} />
-            <span class="label">
-              {#if obj._id === selected}
-                <div bind:this={selectedDiv}>
-                  <div class="flex flex-grow overflow-label">
-                    <UserInfo size={'x-small'} value={obj} {icon} />
-                  </div>
-                </div>
-              {:else}
-                <div class="flex flex-grow overflow-label">
-                  <UserInfo size={'x-small'} value={obj} {icon} />
-                </div>
-              {/if}
-            </span>
           </button>
         </svelte:fragment>
       </ListView>
     </div>
   </div>
   {#if cHeight === -1}
-    <div class="background-content-accent-color" style:height={'3px'} />
+    <div class="whereSelected" />
   {/if}
 </div>
 

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

@@ -143,7 +143,7 @@
 
     img {
       object-fit: cover;
-      border: 2px solid var(--avatar-border-color);
+      border: 1px solid var(--avatar-border-color);
     }
     &.no-img {
       border-color: transparent;
@@ -195,7 +195,7 @@
   }
   .ava-mask {
     position: absolute;
-    border: 2px solid var(--avatar-border-color);
+    border: 1px solid var(--avatar-border-color);
     border-radius: 50%;
   }
 

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

@@ -293,6 +293,7 @@
       bind:input={addBtn}
       icon={contact.icon.SocialEdit}
       label={displayItems.length === 0 ? presentation.string.AddSocialLinks : undefined}
+      notSelected={displayItems.length === 0}
       {kind}
       {size}
       {shape}

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

@@ -30,6 +30,6 @@
   <Avatar avatar={value.avatar} {size} {icon} on:accent-color />
   <div class="flex-col min-w-0 {size === 'tiny' || size === 'inline' ? 'ml-1' : 'ml-2'}">
     {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
-    <div class="content-color overflow-label text-left">{getName(value)}</div>
+    <div class="label overflow-label text-left">{getName(value)}</div>
   </div>
 </div>

plugins/notification-assets/assets/icons.svg

@@ -5,7 +5,7 @@
   </symbol>
   <symbol id="track" viewBox="0 0 24 24">
     <path d="M21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.1-0.9c-0.5,0.2-1.1,0.4-1.6,0.4l0.1,0.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2 c0.4,0.6,0.7,1.2,0.7,1.3c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4 l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1c1,0,1.9,0.3,2.7,0.7c0.4-0.5,0.9-0.9,1.4-1.1C15,1.5,13.5,1,12,1 C8.2,1,5,3.9,4.5,7.7l-0.4,2.7c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3 c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5C10.1,22.6,11,23,12,23s2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3 c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3C22.9,16.8,22.6,16.2,21.7,15z M13.6,20.6c-1,0.8-2.3,0.8-3.2,0 c-0.4-0.2-0.6-0.7-0.8-1.2h4.9C14.2,19.9,14,20.3,13.6,20.6z" />
-    <circle fill="var(--warning-color)" cx="18" cy="5.9" r="3"/>
+    <circle fill="var(--theme-warning-color)" cx="18" cy="5.9" r="3"/>
   </symbol>
   <symbol id="donttrack" viewBox="0 0 24 24">
     <path d="M21.7,15l-0.2,0.1L21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.4-2.7C19,3.9,15.8,1,12,1S5,3.9,4.5,7.7l-0.4,2.7 c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5 C10.1,22.6,11,23,12,23c1,0,2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3 C22.9,16.8,22.6,16.2,21.7,15z M14.5,19.4c-0.2,0.5-0.5,0.8-0.8,1.2l0,0c-1,0.8-2.3,0.8-3.2,0c-0.4-0.2-0.6-0.7-0.8-1.2H14.5z  M20.9,17.5c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2 l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1s5.4,2.1,5.7,5.1l0.4,2.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2c0.4,0.6,0.7,1.2,0.7,1.3 C21,17.4,20.9,17.4,20.9,17.5z" />

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

@@ -403,7 +403,7 @@
           on:click={() => {
             showPopup(
               ColorPopup,
-              { value: states, searchable: true, placeholder: ui.string.SearchDots },
+              { value: states, searchable: true, placeholder: ui.string.SearchDots, selected: selectedState?._id },
               btn,
               (result) => {
                 if (result && result.id) {

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

@@ -702,6 +702,7 @@
             focusIndex={103}
             label={recruit.string.AddDropHere}
             icon={IconAttachment}
+            notSelected
             on:click={() => {
               inputFile.click()
             }}
@@ -727,7 +728,7 @@
 <style lang="scss">
   .resume {
     box-shadow: 0 0 0 0 var(--primary-button-focused-border);
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     transition: box-shadow 0.15s ease-in-out;
 
     &.solid {

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

@@ -38,6 +38,7 @@
   {justify}
   {width}
   {disabled}
+  notSelected={value === undefined}
   showTooltip={{ label: tooltip, direction: labelDirection }}
   on:click={() => {
     if (value === true) value = false
@@ -47,7 +48,7 @@
 >
   <svelte:fragment slot="content">
     <div class="flex-row-center flex-no-wrap pointer-events-none">
-      <span class="overflow-label">
+      <span class="label overflow-label">
         <Label {label} />
       </span>
       <div class="btn-icon ml-1">
@@ -74,14 +75,14 @@
 
 <style lang="scss">
   .btn-icon {
-    color: var(--content-color);
+    color: var(--theme-content-color);
     transition: color 0.15s;
     pointer-events: none;
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     &:disabled:hover {
-      color: var(--content-color);
+      color: var(--theme-content-color);
     }
   }
 

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

@@ -50,7 +50,7 @@
   </span>
 {:else}
   <div
-    class="text-sm flex flex-between tag-item"
+    class="tag-item"
     style={`${getTagStyle(getPlatformColor(tag?.color ?? element?.color ?? 0), selected)}`}
     on:click
     on:keydown
@@ -61,16 +61,16 @@
     }}
   >
     <span class="overflow-label max-w-40">{name}</span>
-    <span class="ml-1">
+    {#if tag && tagIcon && schema !== '0'}
-      {#if tag && tagIcon && schema !== '0'}
+      <span class="ml-1">
         <Icon icon={tagIcon} size={'small'} />
-      {/if}
+      </span>
-    </span>
+    {/if}
     {#if action}
-      <div class="ml-1">
+      <div class="flex-center ml-1">
         <ActionIcon
           icon={action}
-          size={'medium'}
+          size={'small'}
           action={() => {
             dispatch('action')
           }}
@@ -82,29 +82,28 @@
 
 <style lang="scss">
   .tag-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin: 0.125rem;
-    padding: 0.125rem 0.25rem;
+    padding: 0 0.25rem;
-
+    min-width: 0;
-    border-radius: 0.25rem;
+    min-height: 1.5rem;
-
+    text-transform: uppercase;
     font-weight: 500;
     font-size: 0.75rem;
+    color: var(--theme-content-color);
+    border-radius: 0.25rem;
 
-    text-transform: uppercase;
-    color: var(--accent-color);
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
   .tag-item-inline {
     position: relative;
     padding-left: 0.75rem;
     font-weight: 500;
-    color: var(--accent-color);
+    color: var(--theme-content-color);
 
     &::before {
       position: absolute;

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

@@ -20,7 +20,7 @@
   import { TagCategory, TagElement } from '@hcengineering/tags'
   import {
     Button,
-    CheckBox,
+    IconCheck,
     getPlatformColor,
     Icon,
     IconAdd,
@@ -174,19 +174,26 @@
                     ({catObjects.length})
                   {/if}
                 </span>
-                <span class="counter">{getCount(cat)}</span>
+                <span class="counter">
+                  {#key selected}
+                    {getCount(cat)}
+                  {/key}
+                </span>
               </div>
             </button>
             <div class="menu-group">
               {#each catObjects.slice(0, 50) as element}
                 <button
-                  class="menu-item"
+                  class="menu-item no-focus"
+                  class:selected={isSelected(selected, element)}
                   on:click={() => {
                     checkSelected(selected, element)
                   }}
                 >
-                  <div class="check pointer-events-none">
+                  <div class="check">
-                    <CheckBox checked={isSelected(selected, element)} primary />
+                    {#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>
@@ -210,11 +217,12 @@
 
 <style lang="scss">
   .counter {
+    margin-top: -0.125rem;
     padding-right: 0.125rem;
     min-width: 1.5rem;
     text-align: right;
     font-size: 0.8125rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
   }
   .empty {
     display: flex;
@@ -222,7 +230,7 @@
     align-items: center;
     height: 100%;
     font-size: 0.75rem;
-    color: var(--dark-color);
+    color: var(--theme-dark-color);
-    border-top: 1px solid var(--popup-divider);
+    border-top: 1px solid var(--theme-popup-divider);
   }
 </style>

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

@@ -122,16 +122,14 @@
     icon={tracker.icon.Components}
     disabled={!isEditable}
     {loading}
+    notSelected={!value}
     {short}
     on:click={handleComponentEditorOpened}
-    ><svelte:fragment slot="content">
+  >
-      <span
+    <svelte:fragment slot="content">
-        class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label {!value
+      <span class="label {enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label pointer-events-none">
-          ? 'content-color'
-          : 'caption-color'} pointer-events-none"
-      >
         <Label label={getEmbeddedLabel(componentText)} />
       </span>
-    </svelte:fragment></Button
+    </svelte:fragment>
-  >
+  </Button>
 {/if}

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

@@ -561,7 +561,7 @@
       kind={'secondary'}
       size={'large'}
       label={tracker.string.NoIssueTemplate}
-      icon={tracker.icon.Issues}
+      icon={tracker.icon.IssueTemplates}
       searchField={'title'}
       allowDeselect={true}
       showNavigate={false}

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

@@ -41,7 +41,11 @@
       : tracker.string.Backlog
     : undefined
 
-  $: statusesInfo = defaultComponentStatuses.map((s) => ({ id: s, ...componentStatusAssets[s] }))
+  $: statusesInfo = defaultComponentStatuses.map((s) => ({
+    id: s,
+    isSelected: componentStatusAssets[s].label === selectedStatusLabel,
+    ...componentStatusAssets[s]
+  }))
 
   const handleComponentStatusEditorOpened = (event: MouseEvent) => {
     if (!isEditable) {

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

@@ -117,7 +117,7 @@
       {params?.subTitlePostfix}
     </span>
   </div>
-  <div class="flex-between">
+  <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} />
   </div>

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

@@ -42,7 +42,7 @@
 
   const client = getClient()
   const dispatch = createEventDispatcher()
-  const prioritiesInfo = defaultPriorities.map((p) => ({ id: p, ...issuePriorities[p] }))
+  let selectedPriority: IssuePriority | undefined = value.priority
 
   const handlePriorityEditorOpened = (event: MouseEvent) => {
     event.stopPropagation()
@@ -64,12 +64,21 @@
       return
     }
 
+    selectedPriority = newPriority
     dispatch('change', newPriority)
 
     if ('_class' in value) {
       await client.update(value, { priority: newPriority })
     }
   }
+
+  $: prioritiesInfo = defaultPriorities.map((p) => {
+    return {
+      id: p,
+      isSelected: selectedPriority === p,
+      ...issuePriorities[p]
+    }
+  })
 </script>
 
 {#if value}

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

@@ -132,7 +132,7 @@
       color: var(--theme-error-color) !important;
     }
     .showWarning {
-      color: var(--warning-color) !important;
+      color: var(--theme-warning-color) !important;
     }
     .romColor {
       color: var(--theme-content-color) !important;

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

@@ -73,19 +73,25 @@
     selectedSprint = sprints.find((it) => it._id === newSprintId)
   }
 
-  const getSprintInfo = (rawSprints: Sprint[]) => {
+  const getSprintInfo = (rawSprints: Sprint[], sp: Sprint | undefined) => {
     return [
-      { id: null, icon: tracker.icon.Sprint, label: tracker.string.NoSprint },
+      {
+        id: null,
+        icon: tracker.icon.Sprint,
+        label: tracker.string.NoSprint,
+        isSelected: sp === undefined
+      },
       ...rawSprints.map((p) => ({
         id: p._id,
         icon: tracker.icon.Sprint,
         text: p.label,
+        isSelected: sp ? p._id === sp._id : false,
         category: sprintStatusAssets[p.status]
       }))
     ]
   }
 
-  $: sprints = getSprintInfo(rawSprints)
+  $: sprints = getSprintInfo(rawSprints, selectedSprint)
 
   const handleSprintEditorOpened = async (event: MouseEvent): Promise<void> => {
     event.stopPropagation()
@@ -138,15 +144,12 @@
     {showTooltip}
     icon={sprintIcon}
     disabled={!isEditable}
+    notSelected={!value}
     {short}
     on:click={handleSprintEditorOpened}
   >
     <svelte:fragment slot="content">
-      <span
+      <span class="label {enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label pointer-events-none">
-        class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label {!value
-          ? 'content-color'
-          : 'caption-color'} pointer-events-none"
-      >
         <Label label={getEmbeddedLabel(sprintText)} />
       </span>
     </svelte:fragment>

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

@@ -40,7 +40,11 @@
       : tracker.string.Planned
     : undefined
 
-  $: statusesInfo = defaultSprintStatuses.map((s) => ({ id: s, ...sprintStatusAssets[s] }))
+  $: statusesInfo = defaultSprintStatuses.map((s) => ({
+    id: s,
+    isSelected: sprintStatusAssets[s].label === selectedStatusLabel,
+    ...sprintStatusAssets[s]
+  }))
 
   const handleSprintStatusEditorOpened = (event: MouseEvent) => {
     if (!isEditable) {

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

@@ -65,6 +65,7 @@
     label={tracker.string.TimeSpendValue}
     labelParams={{ value: value.estimation }}
     icon={tracker.icon.Estimation}
+    notSelected={value.estimation === 0}
     {justify}
     {width}
     {size}

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

@@ -43,6 +43,7 @@
     {size}
     {justify}
     {width}
+    notSelected={!value}
     on:click={(ev) => {
       if (!shown && !readonly) {
         showPopup(EditBoxPopup, { value }, eventToHTMLElement(ev), (res) => {
@@ -57,9 +58,9 @@
   >
     <svelte:fragment slot="content">
       {#if value}
-        <span class="overflow-label pointer-events-none">{value}</span>
+        <span class="label overflow-label pointer-events-none">{value}</span>
       {:else}
-        <span class="content-dark-color pointer-events-none"><Label label={placeholder} /></span>
+        <span class="label pointer-events-none"><Label label={placeholder} /></span>
       {/if}
     </svelte:fragment>
   </Button>

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

@@ -18,6 +18,7 @@
   import { LabelAndProps, LinkWrapper, tooltip } from '@hcengineering/ui'
 
   export let value: string | string[] | undefined
+  export let oneLine: boolean = false
 
   $: tooltipParams = getTooltip(value)
 
@@ -35,7 +36,7 @@
   }
 </script>
 
-<span class="lines-limit-2 select-text" use:tooltip={tooltipParams}>
+<span class="{oneLine ? 'overflow-label' : 'lines-limit-2'} select-text" use:tooltip={tooltipParams}>
   {#if Array.isArray(value)}
     {#each value as str, i}
       <span class:ml-1={i !== 0}><LinkWrapper text={str} /></span>

plugins/view-resources/src/components/filter/FilterTypePopup.svelte

@@ -211,6 +211,8 @@
       }
     }
   }
+
+  const elements: HTMLElement[] = []
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
@@ -218,8 +220,12 @@
     {#each getTypes(_class) as type, i}
       {#if filter === undefined && type.component === view.component.ObjectFilter && hasNested(type)}
         <Submenu
+          bind:element={elements[i]}
           on:keydown={(event) => keyDown(event, i)}
-          on:click={(event) => {
+          on:mouseover={() => {
+            elements[i]?.focus()
+          }}
+          on:click={() => {
             click(type)
           }}
           icon={type.icon}
@@ -236,7 +242,7 @@
           on:mouseover={(event) => {
             event.currentTarget.focus()
           }}
-          on:click={(event) => {
+          on:click={() => {
             click(type)
           }}
         >
@@ -245,7 +251,7 @@
               <Icon icon={type.icon} size={'small'} />
             {/if}
           </div>
-          <div class="pr-1"><Label label={type.label} /></div>
+          <div class="overflow-label pr-1"><Label label={type.label} /></div>
         </button>
       {/if}
     {/each}

plugins/view-resources/src/components/filter/ObjectFilter.svelte

@@ -19,7 +19,8 @@
   import ui, {
     addNotification,
     Button,
-    CheckBox,
+    Icon,
+    IconCheck,
     deviceOptionsStore,
     Label,
     Loading,
@@ -189,12 +190,14 @@
               }}
             >
               <div class="flex-between w-full">
-                <div class="flex clear-mins overflow-label">
+                <div class="flex-row-center">
                   <div class="check pointer-events-none">
-                    <CheckBox checked={isSelected(value, filter.value)} primary />
+                    {#if isSelected(value, filter.value)}
+                      <Icon icon={IconCheck} size={'small'} />
+                    {/if}
                   </div>
                   {#if value}
-                    <svelte:component this={attribute.presenter} {value} {...attribute.props} disabled />
+                    <svelte:component this={attribute.presenter} {value} {...attribute.props} disabled oneLine />
                   {:else}
                     <Label label={ui.string.NotSelected} />
                   {/if}
@@ -214,7 +217,7 @@
     </div>
   </div>
   <Button
-    shape={'round'}
+    shape={'filter'}
     label={view.string.Apply}
     on:click={() => {
       onChange(filter)

plugins/view-resources/src/components/filter/ValueFilter.svelte

@@ -16,7 +16,7 @@
   import { Class, Doc, FindResult, getObjectValue, Ref, SortingOrder, Space } from '@hcengineering/core'
   import { translate } from '@hcengineering/platform'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import ui, { Button, CheckBox, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
+  import ui, { Button, Icon, IconCheck, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { onMount } from 'svelte'
   import { getPresenter } from '../../utils'
@@ -144,21 +144,24 @@
           {#each Array.from(values.keys()) as value}
             {@const realValue = [...(realValues.get(value) ?? [])][0]}
             <button
-              class="menu-item"
+              class="menu-item no-focus"
               on:click={() => {
                 toggle(value)
               }}
             >
               <div class="flex-between w-full">
-                <div class="flex clear-mins">
+                <div class="flex-row-center">
                   <div class="check pointer-events-none">
-                    <CheckBox checked={isSelected(value, selectedValues)} primary />
+                    {#if isSelected(value, selectedValues)}
+                      <Icon icon={IconCheck} size={'small'} />
+                    {/if}
                   </div>
                   {#if value !== undefined}
                     <svelte:component
                       this={attribute.presenter}
                       value={typeof value === 'string' ? realValue : value}
                       {...attribute.props}
+                      oneLine
                     />
                   {:else}
                     <Label label={ui.string.NotSelected} />
@@ -175,7 +178,7 @@
     </div>
   </div>
   <Button
-    shape={'round'}
+    shape={'filter'}
     label={view.string.Apply}
     on:click={() => {
       filter.value = Array.from(selectedValues.values()).map((p) => {

plugins/workbench-resources/src/components/App.svelte

@@ -149,7 +149,7 @@
       opacity: 1;
     }
     &.hidden {
-      color: var(--warning-color);
+      color: var(--theme-warning-color);
       transform: scale(0.7);
       opacity: 0.5;
 

plugins/workbench-resources/src/components/HelpAndSupport.svelte

@@ -134,9 +134,10 @@
         </div>
       </div>
     {/each}
+    <div class="flex-grow" />
   {:else}
     <!-- Keyboard shortcuts -->
-    <Scroller padding={'0 .5rem'} fade={topSP}>
+    <Scroller padding={'0 .5rem'} fade={topSP} noStretch checkForHeaders>
       <ListView count={actions.length} noScroll addClass={'rounded'} bind:selection>
         <svelte:fragment slot="category" let:item>
           {@const action = actions[item]}
@@ -220,7 +221,7 @@
     display: flex;
     justify-content: flex-end;
     align-items: flex-end;
-    margin: 0 1rem;
+    margin: 0 0.5rem 0.5rem;
     padding-top: 0.625rem;
   }
   .key-box {