From 7479ec6ca794bb4f1ff49bd8bbedf78f28eac3ac Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 31 May 2022 07:22:47 +0300
Subject: [PATCH] Fix scrollbar and icons. Contact: Add Open integration.
 (#1956)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_colors.scss            | 12 +++----
 packages/theme/styles/components.scss         |  4 ++-
 plugins/contact-assets/assets/icons.svg       |  4 +--
 .../src/components/ChannelEditor.svelte       | 12 +++++++
 .../src/components/ChannelsDropdown.svelte    |  6 ++--
 .../src/components/Contacts.svelte            | 21 +++++++------
 .../src/components/Products.svelte            | 21 +++++++------
 .../src/components/Customers.svelte           | 21 +++++++------
 .../src/components/ApplicationsView.svelte    | 21 +++++++------
 .../src/components/Candidates.svelte          | 21 +++++++------
 plugins/view-assets/assets/icons.svg          |  8 +++--
 .../src/components/SpaceHeader.svelte         | 31 +++++++------------
 12 files changed, 98 insertions(+), 84 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 06f2ecae8a..862050f9a9 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -66,9 +66,9 @@
   --highlight-select-border: #2f3544;
   --highlight-select-hover: #323a4e;
 
-  --scrollbar-bar-color: #ffffff10;
-  --scrollbar-bar-hover: #ffffff15;
-  --scrollbar-track-color: #ffffff0a;
+  --scrollbar-bar-color: #28292b;  // #ffffff10;
+  --scrollbar-bar-hover: #2d2f36;  // #ffffff15;
+  --scrollbar-track-color: #27282b;  // #ffffff0a;
 
   --dark-color: #62666d;
   --content-color: #8a8f98;
@@ -216,9 +216,9 @@
   --highlight-select-border: #e6eaff;
   --highlight-select-hover: #e4ebff;
 
-  --scrollbar-bar-color: #00000010;
-  --scrollbar-bar-hover: #00000015;
-  --scrollbar-track-color: #0000000a;
+  --scrollbar-bar-color: #eee;  // #00000010;
+  --scrollbar-bar-hover: #f0f3f9;  // #00000015;
+  --scrollbar-track-color: #f8f9fb;  // #0000000a;
 
   --dark-color: #90959d;
   --content-color: #3c4149;
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 146ff71d05..ef0c2dcba2 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -34,8 +34,10 @@
       grid-template-columns: auto;
       grid-auto-flow: column;
       grid-auto-columns: min-content;
-      gap: 0.75rem;
+      gap: .75rem;
       align-items: center;
+
+      &.withSettings { padding-right: .75rem; }
     }
     &.mirror {
       justify-content: space-between;
diff --git a/plugins/contact-assets/assets/icons.svg b/plugins/contact-assets/assets/icons.svg
index 65808702a2..b86ce97576 100644
--- a/plugins/contact-assets/assets/icons.svg
+++ b/plugins/contact-assets/assets/icons.svg
@@ -55,8 +55,8 @@
     <path d="M12.8,16.5c0-0.4-0.3-0.8-0.8-0.8c-1.2,0-2.3-0.1-3.5-0.2c-0.3-2.3-0.3-4.6,0-6.9c2.3-0.3,4.6-0.3,6.9,0 c0.1,1.1,0.2,2.3,0.2,3.5c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8c0-1.1-0.1-2.2-0.2-3.2c1.3,0.2,2.5,0.5,3.8,0.9 c0.1,0,0.1,0,0.2,0c0.2,0.7,0.3,1.5,0.3,2.3c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8c0-5.9-4.8-10.8-10.8-10.8S1.2,6.1,1.2,12 S6.1,22.8,12,22.8c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8c-0.8,0-1.5-0.1-2.3-0.3c0-0.1,0-0.1,0-0.2C9.3,19.5,9,18.3,8.8,17 c1.1,0.1,2.1,0.2,3.2,0.2C12.4,17.2,12.8,16.9,12.8,16.5z M7,15.2c-1.3-0.2-2.5-0.5-3.8-0.9c-0.1,0-0.1,0-0.2,0 c-0.2-0.7-0.3-1.5-0.3-2.3c0-0.8,0.1-1.5,0.3-2.3c0.1,0,0.1,0,0.2,0C4.5,9.3,5.7,9,7,8.8C6.8,10.9,6.8,13.1,7,15.2z M20.3,8 c-1.2-0.3-2.3-0.6-3.5-0.8C16.6,6,16.3,4.8,16,3.7C17.9,4.6,19.4,6.1,20.3,8z M14.3,3c0,0.1,0,0.1,0,0.2C14.7,4.5,15,5.7,15.2,7 c-2.1-0.2-4.3-0.2-6.5,0C9,5.7,9.3,4.5,9.7,3.2c0-0.1,0-0.1,0-0.2c0.7-0.2,1.5-0.3,2.3-0.3C12.8,2.8,13.5,2.9,14.3,3z M7.9,3.7 C7.9,3.7,7.9,3.7,7.9,3.7C7.6,4.9,7.4,6,7.2,7.2C6,7.4,4.8,7.7,3.7,8C4.5,6.2,6,4.6,7.9,3.7z M8,20.2C7.9,20.3,7.9,20.3,8,20.2 c-1.9-0.9-3.4-2.3-4.3-4.1c0,0,0-0.1,0-0.1c1.1,0.3,2.3,0.6,3.5,0.8C7.4,18,7.6,19.1,8,20.2z" />
     <path d="M20.1,14.4c-0.5,0-1,0.3-1.5,0.8l-3.5,3.5c-0.2,0.2-0.5,0.7-0.5,1l-0.2,1.3c-0.1,0.5,0.1,0.9,0.4,1.2 c0.3,0.3,0.6,0.4,1,0.4c0.1,0,0.2,0,0.2,0l1.3-0.2c0.3,0,0.8-0.3,1-0.5l3.5-3.5c0.5-0.5,0.7-1,0.8-1.5c0.1-0.6-0.2-1.2-0.8-1.8 S20.8,14.4,20.1,14.4z M20.3,15.9C20.3,15.9,20.3,15.9,20.3,15.9c0.2,0,0.5,0.2,0.6,0.4c0.2,0.2,0.4,0.4,0.3,0.6 c0,0.1-0.1,0.3-0.3,0.5l-0.2,0.2c-0.5-0.2-0.9-0.7-1.1-1.2l0.2-0.2C19.9,16,20.1,15.9,20.3,15.9z M17.4,21c0,0-0.1,0.1-0.2,0.1 l-1.2,0.2l0.2-1.2c0,0,0-0.1,0.1-0.2l2.3-2.3c0.3,0.5,0.7,0.9,1.2,1.2L17.4,21z" />
   </symbol>
-  <symbol id='homepage' fill='none' viewBox="0 0 28 28">
-    <path d="M4.66602 22.9167V12.7127C4.66602 12.4192 4.79497 12.1405 5.01869 11.9505L13.6149 4.65008C13.9969 4.32565 14.5601 4.33411 14.9321 4.66986L23.0026 11.9522C23.2127 12.1418 23.3327 12.4116 23.3327 12.6946V22.9167C23.3327 23.469 22.885 23.9167 22.3327 23.9167H5.66602C5.11373 23.9167 4.66602 23.469 4.66602 22.9167Z" stroke="white" stroke-width="1.2"/>
+  <symbol id="homepage" viewBox="0 0 24 24">
+    <path d="M12,1.2C6.1,1.2,1.2,6.1,1.2,12S6.1,22.8,12,22.8S22.8,17.9,22.8,12S17.9,1.2,12,1.2z M20.8,14.3 c-1.2,0.4-2.5,0.7-3.8,0.9c0.2-2.1,0.2-4.3,0-6.5c1.3,0.2,2.5,0.5,3.8,0.9c0.1,0,0.1,0,0.2,0c0.2,0.7,0.3,1.5,0.3,2.3 c0,0.8-0.1,1.5-0.3,2.3C20.9,14.3,20.8,14.3,20.8,14.3z M3,14.3c-0.2-0.7-0.3-1.5-0.3-2.3c0-0.8,0.1-1.5,0.3-2.3c0.1,0,0.1,0,0.2,0 C4.5,9.3,5.7,9,7,8.8c-0.2,2.1-0.2,4.3,0,6.5c-1.3-0.2-2.5-0.5-3.8-0.9C3.2,14.3,3.1,14.3,3,14.3z M8.5,8.5c2.3-0.3,4.6-0.3,6.9,0 c0.3,2.3,0.3,4.6,0,6.9c-2.3,0.3-4.6,0.3-6.9,0C8.3,13.2,8.3,10.8,8.5,8.5z M20.3,8c-1.2-0.3-2.3-0.6-3.5-0.8 C16.6,6,16.3,4.8,16,3.7C17.9,4.6,19.4,6.1,20.3,8z M14.3,3c0,0.1,0,0.1,0,0.2C14.7,4.5,15,5.7,15.2,7c-2.1-0.2-4.3-0.2-6.5,0 C9,5.7,9.3,4.5,9.7,3.2c0-0.1,0-0.1,0-0.2c0.7-0.2,1.5-0.3,2.3-0.3C12.8,2.8,13.5,2.9,14.3,3z M7.9,3.7C7.9,3.7,7.9,3.7,7.9,3.7 C7.6,4.9,7.4,6,7.2,7.2C6,7.4,4.8,7.7,3.7,8C4.5,6.2,6,4.7,7.9,3.7z M3.7,16.1C3.7,16.1,3.7,16.1,3.7,16.1c1.2,0.2,2.3,0.5,3.5,0.7 C7.4,18,7.6,19.1,8,20.2c0,0-0.1,0-0.1,0C6.1,19.4,4.6,17.9,3.7,16.1z M9.7,21c0-0.1,0-0.1,0-0.2C9.3,19.5,9,18.3,8.8,17 c1.1,0.1,2.2,0.2,3.2,0.2c1.1,0,2.2-0.1,3.2-0.2c-0.2,1.3-0.5,2.5-0.9,3.8c0,0.1,0,0.1,0,0.2c-0.7,0.2-1.5,0.3-2.3,0.3 C11.2,21.2,10.5,21.1,9.7,21z M16,20.3c0.3-1.2,0.6-2.4,0.8-3.6c1.2-0.2,2.3-0.4,3.5-0.8c0,0,0,0.1,0,0.1C19.4,18,17.8,19.5,16,20.3 z"/>
   </symbol>
 
 </svg>
diff --git a/plugins/contact-resources/src/components/ChannelEditor.svelte b/plugins/contact-resources/src/components/ChannelEditor.svelte
index 8daf97db9f..4e56c3f15e 100644
--- a/plugins/contact-resources/src/components/ChannelEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelEditor.svelte
@@ -130,6 +130,18 @@
         dispatch('close', value)
       }}
     />
+    {#if openable}
+      <Button
+        focusIndex={4}
+        kind={'transparent'}
+        size={'small'}
+        icon={IconArrowRight}
+        on:click={() => {
+          dispatch('update', value)
+          dispatch('close', 'open')
+        }}
+      />
+    {/if}
   </div>
 {:else}
   <div class="buttons-group xsmall-gap">
diff --git a/plugins/contact-resources/src/components/ChannelsDropdown.svelte b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
index 225563eb43..e2ad7309b1 100644
--- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte
+++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
@@ -183,7 +183,8 @@
         {
           value: item.value,
           placeholder: item.placeholder,
-          editable
+          editable,
+          openable: item.presenter ?? false
         },
         el,
         (result) => {
@@ -191,13 +192,14 @@
             if (result === '') {
               displayItems = dropItem(n)
             } else {
-              displayItems[n].value = result
+              if (result !== 'open') displayItems[n].value = result
             }
             saveItems()
             focusManager?.setFocusPos(focusIndex + 1 + n)
           }
           if (result === undefined && item.value === '') displayItems = dropItem(n)
           opened = undefined
+          if (result === 'open') dispatch('open', item)
         },
         (result) => {
           if (result != null) {
diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte
index e8fa57eea4..a46467ea3a 100644
--- a/plugins/contact-resources/src/components/Contacts.svelte
+++ b/plugins/contact-resources/src/components/Contacts.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { Doc, DocumentQuery } from '@anticrm/core'
   import { createQuery, getClient } from '@anticrm/presentation'
-  import { ActionIcon, Button, Icon, IconAdd, Label, Loading, SearchEdit, showPopup } from '@anticrm/ui'
+  import { Tooltip, Button, Icon, IconAdd, Label, Loading, SearchEdit, showPopup } from '@anticrm/ui'
   import view, { Viewlet, ViewletPreference } from '@anticrm/view'
   import type { Filter } from '@anticrm/view'
   import { ActionContext, TableBrowser, ViewletSetting, FilterButton } from '@anticrm/view-resources'
@@ -71,7 +71,7 @@
   }}
 />
 <div class="antiPanel-component">
-  <div class="ac-header full">
+  <div class="ac-header full withSettings">
     <div class="ac-header__wrap-title">
       <div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'} /></div>
       <span class="ac-header__title"><Label label={contact.string.Contacts} /></span>
@@ -91,14 +91,15 @@
       on:click={(ev) => showCreateDialog(ev)}
     />
     {#if viewlet}
-      <ActionIcon
-        icon={view.icon.Setting}
-        size={'small'}
-        label={view.string.CustomizeView}
-        action={() => {
-          showPopup(ViewletSetting, { viewlet })
-        }}
-      />
+      <Tooltip label={view.string.CustomizeView}>
+        <Button
+          icon={view.icon.Setting}
+          kind={'transparent'}
+          on:click={() => {
+            showPopup(ViewletSetting, { viewlet })
+          }}
+        />
+      </Tooltip>
     {/if}
   </div>
 
diff --git a/plugins/inventory-resources/src/components/Products.svelte b/plugins/inventory-resources/src/components/Products.svelte
index 308304461f..de68edf2be 100644
--- a/plugins/inventory-resources/src/components/Products.svelte
+++ b/plugins/inventory-resources/src/components/Products.svelte
@@ -24,7 +24,7 @@
     IconAdd,
     eventToHTMLElement,
     Loading,
-    ActionIcon
+    Tooltip
   } from '@anticrm/ui'
   import CreateProduct from './CreateProduct.svelte'
   import inventory from '../plugin'
@@ -69,7 +69,7 @@
   }
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full withSettings">
   <div class="ac-header__wrap-title">
     <span class="ac-header__icon"><Icon icon={inventory.icon.Products} size={'small'} /></span>
     <span class="ac-header__title"><Label label={inventory.string.Products} /></span>
@@ -90,14 +90,15 @@
     on:click={(ev) => showCreateDialog(ev)}
   />
   {#if descr}
-    <ActionIcon
-      icon={view.icon.Setting}
-      size={'small'}
-      label={view.string.CustomizeView}
-      action={() => {
-        showPopup(ViewletSetting, { viewlet: descr })
-      }}
-    />
+    <Tooltip label={view.string.CustomizeView}>
+      <Button
+        icon={view.icon.Setting}
+        kind={'transparent'}
+        on:click={() => {
+          showPopup(ViewletSetting, { viewlet: descr })
+        }}
+      />
+    </Tooltip>
   {/if}
 </div>
 
diff --git a/plugins/lead-resources/src/components/Customers.svelte b/plugins/lead-resources/src/components/Customers.svelte
index 62b39af4f8..39881a0a2a 100644
--- a/plugins/lead-resources/src/components/Customers.svelte
+++ b/plugins/lead-resources/src/components/Customers.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { Doc, DocumentQuery } from '@anticrm/core'
   import { createQuery, getClient } from '@anticrm/presentation'
-  import { ActionIcon, Icon, Label, Loading, showPopup, SearchEdit } from '@anticrm/ui'
+  import { Tooltip, Button, Icon, Label, Loading, showPopup, SearchEdit } from '@anticrm/ui'
   import view, { Viewlet, ViewletPreference } from '@anticrm/view'
   import { ViewletSetting, TableBrowser } from '@anticrm/view-resources'
   import lead from '../plugin'
@@ -58,7 +58,7 @@
   }
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full withSettings">
   <div class="ac-header__wrap-title">
     <div class="ac-header__icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
     <span class="ac-header__title"><Label label={lead.string.Customers} /></span>
@@ -71,14 +71,15 @@
     }}
   />
   {#if descr}
-    <ActionIcon
-      icon={view.icon.Setting}
-      size={'small'}
-      label={view.string.CustomizeView}
-      action={() => {
-        showPopup(ViewletSetting, { viewlet: descr })
-      }}
-    />
+    <Tooltip label={view.string.CustomizeView}>
+      <Button
+        icon={view.icon.Setting}
+        kind={'transparent'}
+        on:click={() => {
+          showPopup(ViewletSetting, { viewlet: descr })
+        }}
+      />
+    </Tooltip>
   {/if}
 </div>
 
diff --git a/plugins/recruit-resources/src/components/ApplicationsView.svelte b/plugins/recruit-resources/src/components/ApplicationsView.svelte
index 29a57c514f..6ceb446714 100644
--- a/plugins/recruit-resources/src/components/ApplicationsView.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationsView.svelte
@@ -17,7 +17,7 @@
   import { createQuery, getClient } from '@anticrm/presentation'
   import { Applicant } from '@anticrm/recruit'
   import task from '@anticrm/task'
-  import { ActionIcon, Button, Icon, IconAdd, Label, Loading, SearchEdit, showPopup } from '@anticrm/ui'
+  import { Tooltip, Button, Icon, IconAdd, Label, Loading, SearchEdit, showPopup } from '@anticrm/ui'
   import view, { Viewlet, ViewletPreference } from '@anticrm/view'
   import type { Filter } from '@anticrm/view'
   import { TableBrowser, ViewletSetting, FilterButton } from '@anticrm/view-resources'
@@ -69,7 +69,7 @@
   }
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full withSettings">
   <div class="ac-header__wrap-title">
     <div class="ac-header__icon"><Icon icon={recruit.icon.Application} size={'small'} /></div>
     <span class="ac-header__title"><Label label={recruit.string.Applications} /></span>
@@ -84,14 +84,15 @@
   />
   <Button icon={IconAdd} label={recruit.string.ApplicationCreateLabel} kind={'primary'} on:click={showCreateDialog} />
   {#if descr}
-    <ActionIcon
-      icon={view.icon.Setting}
-      size={'small'}
-      label={view.string.CustomizeView}
-      action={() => {
-        showPopup(ViewletSetting, { viewlet: descr })
-      }}
-    />
+    <Tooltip label={view.string.CustomizeView}>
+      <Button
+        icon={view.icon.Setting}
+        kind={'transparent'}
+        on:click={() => {
+          showPopup(ViewletSetting, { viewlet: descr })
+        }}
+      />
+    </Tooltip>
   {/if}
 </div>
 
diff --git a/plugins/recruit-resources/src/components/Candidates.svelte b/plugins/recruit-resources/src/components/Candidates.svelte
index 7d27ae3446..90f63dd903 100644
--- a/plugins/recruit-resources/src/components/Candidates.svelte
+++ b/plugins/recruit-resources/src/components/Candidates.svelte
@@ -17,7 +17,7 @@
   import contact from '@anticrm/contact'
   import { Doc, DocumentQuery } from '@anticrm/core'
   import { createQuery, getClient } from '@anticrm/presentation'
-  import { ActionIcon, showPopup, Icon, Label, Loading, SearchEdit, Button, IconAdd } from '@anticrm/ui'
+  import { Tooltip, showPopup, Icon, Label, Loading, SearchEdit, Button, IconAdd } from '@anticrm/ui'
   import view, { Viewlet, ViewletPreference } from '@anticrm/view'
   import type { Filter } from '@anticrm/view'
   import { ActionContext, TableBrowser, ViewletSetting, FilterButton } from '@anticrm/view-resources'
@@ -69,7 +69,7 @@
   }
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full withSettings">
   <div class="ac-header__wrap-title">
     <div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'} /></div>
     <span class="ac-header__title"><Label label={recruit.string.Candidates} /></span>
@@ -84,14 +84,15 @@
   />
   <Button icon={IconAdd} label={recruit.string.CandidateCreateLabel} kind={'primary'} on:click={showCreateDialog} />
   {#if descr}
-    <ActionIcon
-      icon={view.icon.Setting}
-      size={'small'}
-      label={view.string.CustomizeView}
-      action={() => {
-        showPopup(ViewletSetting, { viewlet: descr })
-      }}
-    />
+    <Tooltip label={view.string.CustomizeView}>
+      <Button
+        icon={view.icon.Setting}
+        kind={'transparent'}
+        on:click={() => {
+          showPopup(ViewletSetting, { viewlet: descr })
+        }}
+      />
+    </Tooltip>
   {/if}
 </div>
 
diff --git a/plugins/view-assets/assets/icons.svg b/plugins/view-assets/assets/icons.svg
index d650b7b669..db6d9689d6 100644
--- a/plugins/view-assets/assets/icons.svg
+++ b/plugins/view-assets/assets/icons.svg
@@ -49,9 +49,11 @@
   <symbol id='arrow-right' viewBox="0 0 16 16">
     <path d="M13.334 8L13.6875 7.64645L14.0411 8L13.6875 8.35355L13.334 8ZM3.33398 8.5C3.05784 8.5 2.83398 8.27614 2.83398 8C2.83398 7.72386 3.05784 7.5 3.33398 7.5V8.5ZM9.68754 3.64645L13.6875 7.64645L12.9804 8.35355L8.98043 4.35355L9.68754 3.64645ZM13.6875 8.35355L9.68754 12.3536L8.98043 11.6464L12.9804 7.64645L13.6875 8.35355ZM13.334 8.5H3.33398V7.5H13.334V8.5Z"/>
   </symbol>
-  <symbol id="setting" viewBox="0 0 16 16">
-    <path d="M14,5.8l-1.1-1.9c-0.6-1-0.9-1.5-1.5-1.8c-0.6-0.3-1.2-0.3-2.3-0.4L8,1.7l-1.1,0c-1.1,0-1.8,0-2.3,0.4 C4,2.4,3.7,2.9,3.1,3.9L2,5.8C1.4,6.8,1.1,7.4,1.1,8S1.4,9.2,2,10.2l1.1,1.9c0.6,1,0.9,1.5,1.5,1.8c0.6,0.3,1.2,0.3,2.3,0.4l1.1,0 l1.1,0c1.1,0,1.8,0,2.3-0.4c0.6-0.3,0.9-0.9,1.5-1.8l1.1-1.9c0.6-1,0.9-1.5,0.9-2.2C14.9,7.4,14.6,6.8,14,5.8z M13.1,9.7L12,11.6 c-0.5,0.9-0.8,1.3-1.1,1.5c-0.3,0.2-0.8,0.2-1.8,0.2l-1.1,0l-1.1,0c-1.1,0-1.5,0-1.8-0.2c-0.3-0.2-0.6-0.6-1.1-1.5L2.9,9.7 C2.3,8.8,2.1,8.4,2.1,8c0-0.4,0.2-0.8,0.7-1.7L4,4.4c0.5-0.9,0.8-1.3,1.1-1.5c0.3-0.2,0.8-0.2,1.8-0.2l1.1,0l1.1,0 c1,0,1.5,0,1.8,0.2c0.3,0.2,0.6,0.6,1.1,1.5l1.1,1.9c0.5,0.9,0.7,1.3,0.7,1.7S13.6,8.8,13.1,9.7z"/>
-    <path d="M8,5.5C6.6,5.5,5.5,6.6,5.5,8c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5C10.5,6.6,9.4,5.5,8,5.5z M8,9.5 C7.2,9.5,6.5,8.8,6.5,8S7.2,6.5,8,6.5S9.5,7.2,9.5,8S8.8,9.5,8,9.5z"/>
+  <symbol id="setting" viewBox="0 0 24 24">
+    <g>
+      <path d="M12,16.9c2.7,0,4.9-2.2,4.9-4.9S14.7,7.1,12,7.1S7.1,9.3,7.1,12S9.3,16.9,12,16.9z M12,8.7c1.8,0,3.3,1.5,3.3,3.3 s-1.5,3.3-3.3,3.3S8.7,13.8,8.7,12S10.2,8.7,12,8.7z"/>
+      <path d="M23,10.8L23,10.8c0-0.2,0-0.4-0.1-0.6c-0.2-0.4-0.5-0.7-0.8-0.9c-0.2-0.1-0.3-0.1-0.5-0.2c-0.2,0-0.3,0-0.6-0.1C20.5,9,20.2,9,20,8.9c-0.1,0-0.2,0-0.2,0c-0.1-0.1-0.1-0.1-0.1-0.2c0,0,0-0.1,0.1-0.2c0.1-0.2,0.3-0.4,0.6-0.7c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.1-0.2,0.2-0.3l0,0L21,6.8c0,0,0,0,0,0l0.1-0.2l0,0c0.1-0.3,0-0.7-0.1-1c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.1-0.2-0.2-0.4-0.4l-0.9-0.9c-0.1-0.1-0.3-0.3-0.4-0.4c-0.1-0.1-0.3-0.2-0.5-0.3C18,2.9,17.6,2.9,17.2,3C17,3,16.9,3.1,16.7,3.3c-0.1,0.1-0.3,0.2-0.4,0.3l-0.1,0c-0.3,0.3-0.5,0.4-0.7,0.6c-0.1,0.1-0.2,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1c0,0,0,0-0.1-0.2C15,3.8,15,3.5,15,3.1l0-0.1c0-0.2,0-0.4-0.1-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.2-0.4-0.5-0.7-0.9-0.8C13.6,1,13.4,1,13.2,1c-0.2,0-0.4,0-0.6,0h-1.3c-0.2,0-0.4,0-0.6,0c-0.1,0-0.3,0-0.6,0.1C9.8,1.3,9.5,1.6,9.3,2C9.2,2.1,9.2,2.3,9.1,2.5c0,0.2,0,0.3-0.1,0.6C9,3.5,9,3.8,8.9,4c0,0.1,0,0.2,0,0.2c0,0,0,0,0,0C8.8,4.3,8.8,4.3,8.7,4.3c0,0-0.1,0-0.2-0.1C8.3,4.1,8.1,3.9,7.8,3.6C7.6,3.5,7.5,3.3,7.3,3.3C7.2,3.2,7,3.1,6.8,3C6.4,2.9,6,2.9,5.6,3.1C5.4,3.1,5.2,3.3,5.1,3.4C5,3.5,4.8,3.6,4.7,3.8L3.8,4.7C3.6,4.8,3.5,5,3.4,5.1C3.3,5.2,3.1,5.4,3.1,5.6C2.9,6,2.9,6.4,3,6.8C3.1,7,3.2,7.2,3.3,7.3c0.1,0.1,0.2,0.3,0.4,0.5c0.3,0.3,0.4,0.5,0.6,0.7c0.1,0.1,0.1,0.2,0.1,0.2c0,0.1,0,0.2-0.1,0.2c0,0,0,0-0.2,0.1C3.8,9,3.5,9,3.1,9.1c-0.2,0-0.4,0-0.6,0.1c-0.1,0-0.2,0-0.3,0.1l0,0L2,9.3c0,0,0,0,0,0L1.7,9.4l0,0c-0.3,0.2-0.5,0.5-0.6,0.8C1,10.4,1,10.6,1,10.8c0,0.2,0,0.4,0,0.6v1.3c0,0.2,0,0.4,0,0.6c0,0.1,0,0.3,0.1,0.6c0.2,0.4,0.5,0.7,0.8,0.9c0.2,0.1,0.3,0.1,0.5,0.2c0.1,0,0.3,0,0.5,0.1l0.1,0C3.5,15,3.8,15,4,15.1c0.1,0,0.2,0,0.2,0c0.1,0.1,0.1,0.1,0.1,0.2c0,0,0,0.1-0.1,0.2c-0.1,0.2-0.3,0.4-0.6,0.7l0,0.1c-0.1,0.2-0.2,0.3-0.3,0.4C3.1,16.9,3,17,3,17.2c-0.1,0.4-0.1,0.9,0.1,1.3c0.1,0.2,0.2,0.4,0.3,0.5c0.1,0.1,0.2,0.2,0.4,0.4l0.9,0.9c0.2,0.2,0.3,0.3,0.4,0.4c0.1,0.1,0.3,0.2,0.5,0.3C6,21.1,6.4,21.1,6.8,21c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.5-0.4c0.3-0.3,0.5-0.4,0.7-0.6c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.2,0.1c0,0,0,0,0.1,0.2c0,0.2,0.1,0.5,0.1,0.9c0,0.2,0,0.4,0.1,0.6c0,0.2,0.1,0.4,0.2,0.5c0.2,0.4,0.5,0.7,0.9,0.8c0.2,0.1,0.4,0.1,0.6,0.1c0.2,0,0.4,0,0.6,0h1.3c0.2,0,0.4,0,0.6,0c0.1,0,0.3,0,0.6-0.1c0.4-0.2,0.7-0.5,0.9-0.8c0.1-0.2,0.1-0.4,0.2-0.5c0-0.1,0-0.3,0.1-0.5l0-0.1c0-0.4,0.1-0.7,0.1-0.9c0-0.1,0-0.2,0-0.2c0.1-0.1,0.1-0.1,0.2-0.1c0,0,0.1,0,0.2,0.1c0.2,0.1,0.4,0.3,0.7,0.5l0.1,0.1c0.2,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.5,0.3c0.4,0.1,0.9,0.1,1.3-0.1c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.4-0.4l0.9-0.9c0.1-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.2-0.3,0.3-0.5c0.2-0.4,0.2-0.8,0.1-1.3c-0.1-0.2-0.1-0.3-0.3-0.5c-0.1-0.1-0.2-0.3-0.4-0.5c-0.3-0.3-0.4-0.5-0.6-0.7c-0.1-0.1-0.1-0.2-0.1-0.2c0-0.1,0-0.2,0.1-0.2c0,0,0,0,0.2-0.1c0.2,0,0.5-0.1,0.9-0.1c0.2,0,0.4,0,0.6-0.1c0.1,0,0.3-0.1,0.5-0.2c0.4-0.2,0.7-0.5,0.8-0.9c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4,0-0.6v-1.3C23,11.1,23,10.9,23,10.8z M2.5,13.1c0-0.1,0-0.3,0-0.5v-1.3c0-0.2,0-0.4,0-0.5c0-0.1,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.1c0,0,0,0,0.1,0c0.1,0,0.2,0,0.5-0.1c0.4,0,0.8-0.1,1-0.1c0.3,0,0.6-0.1,0.8-0.3c0.5-0.4,0.8-1,0.7-1.7c0-0.3-0.2-0.6-0.4-0.8C5.3,7.4,5.1,7.1,4.8,6.8C4.7,6.6,4.6,6.5,4.5,6.4c0-0.1-0.1-0.1-0.1-0.1c0-0.1,0-0.1,0-0.2c0,0,0,0,0.1-0.1C4.6,6,4.7,5.9,4.9,5.8l0.9-0.9C5.9,4.7,6,4.6,6.1,4.5c0.1,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0.1c0.1,0.1,0.2,0.2,0.4,0.3c0.3,0.3,0.6,0.5,0.8,0.6c0.2,0.1,0.5,0.3,0.8,0.4c0.6,0.1,1.3-0.2,1.7-0.7c0.2-0.3,0.3-0.6,0.3-0.8c0-0.3,0.1-0.6,0.1-1c0-0.2,0-0.4,0.1-0.5c0-0.1,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.1c0,0,0,0,0.1,0c0.1,0,0.2,0,0.5,0h1.3c0.2,0,0.4,0,0.5,0c0.1,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0.1,0,0.2,0.1,0.5c0,0.4,0.1,0.8,0.1,1c0,0.3,0.1,0.6,0.3,0.8c0.4,0.5,1,0.8,1.7,0.7c0.3,0,0.6-0.2,0.8-0.4c0.2-0.2,0.5-0.4,0.8-0.6c0.2-0.1,0.3-0.2,0.4-0.3c0.1,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0.1c0.1,0.1,0.2,0.2,0.3,0.3l0.9,0.9c0.2,0.2,0.3,0.3,0.3,0.3c0,0.1,0.1,0.1,0.1,0.1c0,0.1,0,0.1,0,0.2c0,0,0,0-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c-0.3,0.3-0.5,0.6-0.6,0.8c-0.1,0.2-0.3,0.5-0.4,0.8c-0.1,0.6,0.2,1.3,0.7,1.7c0.3,0.2,0.6,0.3,0.8,0.3c0.3,0,0.6,0.1,1,0.1c0.2,0,0.4,0,0.5,0.1c0.1,0,0.1,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0.1,0,0.3,0,0.5v1.3c0,0.2,0,0.4,0,0.5c0,0.1,0,0.1,0,0.1c0,0.1-0.1,0.1-0.1,0.1c0,0,0,0-0.1,0c-0.1,0-0.2,0-0.5,0.1c-0.4,0-0.7,0.1-1,0.1c-0.3,0-0.6,0.1-0.8,0.3c-0.5,0.4-0.8,1-0.7,1.7c0,0.3,0.2,0.6,0.4,0.8c0.2,0.2,0.4,0.5,0.6,0.8c0.1,0.2,0.2,0.3,0.3,0.4c0,0.1,0.1,0.1,0.1,0.1c0,0.1,0,0.1,0,0.2c0,0,0,0-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.3l-0.9,0.9c-0.2,0.2-0.3,0.3-0.3,0.3c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1-0.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.3-0.3-0.6-0.5-0.8-0.6c-0.2-0.1-0.5-0.3-0.8-0.4c-0.6-0.1-1.3,0.2-1.7,0.7c-0.2,0.3-0.3,0.6-0.3,0.8c0,0.3-0.1,0.6-0.1,1c0,0.2,0,0.4-0.1,0.5c0,0.1,0,0.1,0,0.1c0,0.1-0.1,0.1-0.1,0.1c0,0,0,0-0.1,0c-0.1,0-0.2,0-0.5,0h-1.3c-0.2,0-0.4,0-0.5,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.1-0.1c0,0,0,0,0-0.1c0-0.1,0-0.2-0.1-0.5c0-0.4-0.1-0.8-0.1-1c0-0.3-0.1-0.6-0.3-0.8c-0.4-0.5-1-0.8-1.7-0.7c-0.3,0-0.6,0.2-0.8,0.4c-0.2,0.1-0.5,0.4-0.8,0.6c-0.2,0.1-0.3,0.2-0.4,0.3c-0.1,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3l-0.9-0.9c-0.2-0.2-0.3-0.3-0.3-0.3c0-0.1-0.1-0.1-0.1-0.1c0-0.1,0-0.1,0-0.2c0,0,0,0,0.1-0.1c0.1-0.1,0.2-0.2,0.3-0.4c0.3-0.3,0.5-0.6,0.6-0.8c0.1-0.2,0.3-0.5,0.4-0.8c0.1-0.6-0.2-1.3-0.7-1.7c-0.3-0.2-0.6-0.3-0.8-0.3c-0.3,0-0.6-0.1-1-0.1c-0.2,0-0.4,0-0.5-0.1c-0.1,0-0.1,0-0.1,0C2.6,13.3,2.6,13.3,2.5,13.1C2.6,13.2,2.5,13.2,2.5,13.1z M14.7,3.1C14.7,3.1,14.7,3.1,14.7,3.1L14.7,3.1L14.7,3.1z M3.1,14.7C3.1,14.7,3.1,14.7,3.1,14.7L3.1,14.7L3.1,14.7z M3.8,16.4C3.8,16.4,3.8,16.4,3.8,16.4L3.8,16.4L3.8,16.4zM14.7,20.9L14.7,20.9L14.7,20.9L14.7,20.9z"/>
+    </g>
   </symbol>
   <symbol id="views" viewBox="0 0 16 16">
     <path d="M12.6541 10.7952L14.7544 11.6213C14.8576 11.6618 14.9394 11.7434 14.9801 11.8466C15.0511 12.0264 14.9828 12.2268 14.827 12.3284L14.755 12.3656L8.35645 14.8924C8.15935 14.9703 7.94372 14.9831 7.74052 14.9309L7.62035 14.8918L1.25259 12.3653C1.1499 12.3246 1.06864 12.2432 1.02806 12.1404C0.957068 11.9607 1.02536 11.7603 1.1812 11.6587L1.25319 11.6215L3.34307 10.7962L7.06917 12.2751C7.65895 12.5091 8.31525 12.5097 8.9054 12.2766L12.6541 10.7952ZM12.6541 6.77688L14.7544 7.60289C14.8576 7.64346 14.9394 7.72508 14.9801 7.82824C15.0511 8.00803 14.9828 8.20839 14.827 8.31004L14.755 8.3472L10.6001 9.98825L9.619 10.375L8.35645 10.8741L8.317 10.886L8.23566 10.9132C8.20301 10.9215 8.17004 10.9282 8.13688 10.9331C8.12585 10.9346 8.11547 10.936 8.10507 10.9372C8.02541 10.9468 7.94422 10.9464 7.86397 10.9363L7.74052 10.9126L7.62035 10.8735L6.391 10.385L5.38907 9.98825L1.25259 8.34697C1.1499 8.30623 1.06864 8.22483 1.02806 8.12208C0.957068 7.94229 1.02536 7.74192 1.1812 7.64029L1.25319 7.60312L3.34307 6.77788L7.06917 8.25677C7.65895 8.49078 8.31525 8.4913 8.9054 8.25824L12.6541 6.77688ZM7.62186 1.06989C7.85734 0.976906 8.11932 0.976697 8.35494 1.06931L14.7544 3.58452C14.8576 3.62509 14.9394 3.70671 14.9801 3.80987C15.0612 4.01534 14.9605 4.24769 14.755 4.32884L10.6001 5.96988L8.35565 6.856L8.27468 6.88396C8.25405 6.8901 8.23326 6.89557 8.21236 6.90036C8.09824 6.92674 7.98013 6.93258 7.86397 6.91788L7.74052 6.89419L7.62035 6.8551L1.25259 4.3286C1.1499 4.28786 1.06864 4.20646 1.02806 4.10371C0.946925 3.89823 1.04772 3.66589 1.25319 3.58475L7.62186 1.06989Z"/>
diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte
index f9d0051937..29b672637f 100644
--- a/plugins/workbench-resources/src/components/SpaceHeader.svelte
+++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte
@@ -17,17 +17,7 @@
   import core, { WithLookup } from '@anticrm/core'
   import { IntlString } from '@anticrm/platform'
   import presentation, { createQuery, getClient } from '@anticrm/presentation'
-  import {
-    ActionIcon,
-    AnyComponent,
-    showPanel,
-    Button,
-    Icon,
-    SearchEdit,
-    showPopup,
-    Tooltip,
-    IconAdd
-  } from '@anticrm/ui'
+  import { AnyComponent, showPanel, Button, Icon, SearchEdit, showPopup, Tooltip, IconAdd } from '@anticrm/ui'
   import view, { Viewlet } from '@anticrm/view'
   import { ViewletSetting } from '@anticrm/view-resources'
   import { createEventDispatcher } from 'svelte'
@@ -87,7 +77,7 @@
   }
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full withSettings">
   {#if space}
     <Header
       icon={classIcon(client, space._class)}
@@ -126,14 +116,15 @@
       <Button icon={IconAdd} label={createItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
     {/if}
     {#if viewlet}
-      <ActionIcon
-        icon={view.icon.Setting}
-        size={'small'}
-        label={view.string.CustomizeView}
-        action={() => {
-          showPopup(ViewletSetting, { viewlet })
-        }}
-      />
+      <Tooltip label={view.string.CustomizeView}>
+        <Button
+          icon={view.icon.Setting}
+          kind={'transparent'}
+          on:click={() => {
+            showPopup(ViewletSetting, { viewlet })
+          }}
+        />
+      </Tooltip>
     {/if}
   {/if}
 </div>