Updated navigator layout (#5619)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

plugins/setting-resources/src/components/ClassHierarchy.svelte

@@ -23,7 +23,7 @@
   export let classes: Ref<Class<Doc>>[] = ['contact:class:Contact' as Ref<Class<Doc>>]
   export let _class: Ref<Class<Doc>> | undefined
   export let ofClass: Ref<Class<Doc>> | undefined
-  export let level: number = 1
+  export let level: number = 0
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -56,6 +56,7 @@
   {@const clazz = client.getHierarchy().getClass(cl)}
   {@const desc = getDescendants(cl)}
   <NavItem
+    _id={clazz._id}
     label={clazz.label}
     isFold
     empty

plugins/setting-resources/src/components/ClassSetting.svelte

@@ -119,7 +119,13 @@
         </div>
       </div>
       <Scroller>
-        <NavGroup label={setting.string.Classes} selected={_class !== undefined} categoryName={'classes'} second>
+        <NavGroup
+          label={setting.string.Classes}
+          highlighted={_class !== undefined}
+          categoryName={'classes'}
+          noDivider
+          isFold
+        >
           <ClassHierarchy
             {classes}
             {_class}

plugins/setting-resources/src/components/Settings.svelte

@@ -135,9 +135,10 @@
           {#each categories as _category}
             {#if _category.extraComponents?.navigation && (_category.expandable ?? _category._id === setting.ids.Setting)}
               <NavGroup
+                _id={_category._id}
                 label={_category.label}
                 categoryName={_category.name}
-                selected={_category.name === categoryId}
+                highlighted={_category.name === categoryId}
                 tools={_category.extraComponents?.tools}
               >
                 <Component

plugins/setting-resources/src/components/spaceTypes/ManageSpaceTypesTools.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, IconAdd, showPopup } from '@hcengineering/ui'
+  import { ButtonIcon, IconAdd, showPopup } from '@hcengineering/ui'
   import CreateSpaceType from './CreateSpaceType.svelte'
   import { isOwnerOrMaintainer } from '@hcengineering/core'
 
@@ -24,5 +24,5 @@
 </script>
 
 {#if isOwnerOrMaintainer()}
-  <Button id="new-space-type" icon={IconAdd} kind="link" size="small" on:click={handleAdd} />
+  <ButtonIcon id={'new-space-type'} icon={IconAdd} kind={'tertiary'} size={'extra-small'} on:click={handleAdd} />
 {/if}