Updated navigation layout of Settings (#4246)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-11-22 03:14:40 +03:00 · 2023-12-22 10:04:56 +03:00 · 2023-12-22 10:04:56 +03:00 · c1c9f30f3b
commit c1c9f30f3b
parent 829474e7fb
21 changed files with 651 additions and 227 deletions
--- a/models/setting/src/index.ts
+++ b/models/setting/src/index.ts
@ -120,8 +120,8 @@ export function createModel (builder: Builder): void {
    core.space.Model,
    {
      name: 'profile',
-      label: setting.string.EditProfile,
-      icon: setting.icon.EditProfile,
+      label: setting.string.AccountSettings,
+      icon: setting.icon.AccountSettings,
      component: setting.component.Profile,
      group: 'settings-account',
      secured: false,
@ -149,7 +149,7 @@ export function createModel (builder: Builder): void {
    core.space.Model,
    {
      name: 'setting',
-      label: setting.string.WorkspaceSetting,
+      label: setting.string.WorkspaceSettings,
      icon: setting.icon.Setting,
      component: setting.component.WorkspaceSettings,
      extraComponents: {
@ -181,7 +181,7 @@ export function createModel (builder: Builder): void {
    {
      name: 'owners',
      label: setting.string.Owners,
-      icon: setting.icon.Password,
+      icon: setting.icon.Owners,
      component: setting.component.Owners,
      order: 1000,
      secured: true
@ -202,11 +202,11 @@ export function createModel (builder: Builder): void {
    setting.ids.Configure
  )
  builder.createDoc(
-    setting.class.SettingsCategory,
+    setting.class.WorkspaceSettingCategory,
    core.space.Model,
    {
      name: 'classes',
-      label: setting.string.ClassSetting,
+      label: setting.string.Classes,
      icon: setting.icon.Clazz,
      component: setting.component.ClassSetting,
      group: 'settings-editor',
@ -236,7 +236,7 @@ export function createModel (builder: Builder): void {
    {
      name: 'invites',
      label: setting.string.InviteSettings,
-      icon: setting.icon.Setting,
+      icon: setting.icon.InviteSettings,
      component: setting.component.InviteSetting,
      group: 'settings-editor',
      secured: true,
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@ -80,6 +80,9 @@

  --theme-clockface-sec-arrow: conic-gradient(at 50% -10px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 49%, #F47758 50%, rgba(255, 0, 0, 0) 51%, rgba(255, 0, 0, 0) 100%);
  --theme-clockface-sec-holder: #F47758;
+
+  // New
+  --global-accent-IconColor: #6796FF;
 }

 /* Dark Theme */
@ -309,9 +312,17 @@
  --theme-clockface-arrows-holder: radial-gradient(at top center, #2F2F3A, #555555);
  --theme-clockface-arrows-shadow: 0 0 1px white;

+  // New
  --global-ui-BackgroundColor: #A5BDFF0D;
  --global-ui-hover-BackgroundColor: #A5BDFF1A;
+  --global-ui-highlight-BackgroundColor: #A5BDFF0D;
+  --global-ui-hover-highlight-BackgroundColor: #A5BDFF26;
+  --global-surface-01-BorderColor: #1F2737;
  --global-surface-02-BackgroundColor: #19202E;
+  --global-primary-TextColor: #FFFFFF;
+  --global-secondary-TextColor: #C1C9D6;
+  --global-tertiary-TextColor: #8E99AF;
+  --global-accent-TextColor: #4D7FF5;
 }

 /* Light Theme */
@ -541,7 +552,15 @@
  --theme-clockface-arrows-holder: radial-gradient(at top center, #eee, #aaa);
  --theme-clockface-arrows-shadow: 0 0 1px black;

-  --global-ui-hover-BackgroundColor: #A5BDFF1A;
+  // New
  --global-ui-BackgroundColor: #1530720D;
+  --global-ui-hover-BackgroundColor: #1530721A;
+  --global-ui-highlight-BackgroundColor: #A5BDFF26;
+  --global-ui-hover-highlight-BackgroundColor: #A5BDFF40;
+  --global-surface-01-BorderColor: #DDE1E9;
  --global-surface-02-BackgroundColor: #19202E;
+  --global-primary-TextColor: #0F121A;
+  --global-secondary-TextColor: #5A667E;
+  --global-tertiary-TextColor: #7B879E;
+  --global-accent-TextColor: #3566E2;
 }
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@ -13,6 +13,39 @@
 // limitations under the License.
 //

+/* Typography */
+.font-regular-12,
+.font-medium-12,
+.font-regular-14,
+.font-medium-14,
+.font-bold-14 {
+  font-family: var(--font-family);
+  font-style: normal;
+  line-height: 1rem;
+  color: var(--global-primary-TextColor);
+}
+.font-regular-12,
+.font-medium-12 {
+  font-size: 0.75rem;
+}
+.font-regular-14,
+.font-medium-14,
+.font-bold-14 {
+  font-size: 0.875rem;
+}
+.font-regular-12,
+.font-regular-14 {
+  font-weight: 400;
+}
+.font-medium-12,
+.font-medium-14 {
+  font-weight: 500;
+}
+.font-bold-14 {
+  font-weight: 700;
+}
+
+
 /* Panels */
 * {
  --app-panel-width: 4.25rem;
--- a/packages/ui/src/components/icons/OpenedArrow.svelte
+++ b/packages/ui/src/components/icons/OpenedArrow.svelte
@ -0,0 +1,27 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.79336 4.36074C6.18388 3.97021 6.81704 3.97021 7.20757 4.36074L10.8803 8.03392L7.20711 11.7071C6.81658 12.0976 6.18342 12.0976 5.79289 11.7071C5.40237 11.3166 5.40237 10.6834 5.79289 10.2929L8.05186 8.03392L5.79336 5.77495C5.40283 5.38443 5.40283 4.75126 5.79336 4.36074Z"
+  />
+</svg>
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@ -182,6 +182,7 @@ export { default as IconEmoji } from './components/icons/Emoji.svelte'
 export { default as IconObjects } from './components/icons/Objects.svelte'
 export { default as IconUndo } from './components/icons/Undo.svelte'
 export { default as IconRedo } from './components/icons/Redo.svelte'
+export { default as IconOpenedArrow } from './components/icons/OpenedArrow.svelte'

 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'
--- a/plugins/notification-assets/assets/icons.svg
+++ b/plugins/notification-assets/assets/icons.svg
@ -1,25 +1,27 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-    <symbol id="notifications" viewBox="0 0 32 32">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-              d="M17 3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4.05493C10.5 4.55237 7 8.36745 7 13V14.8953C7 16.0307 6.6136 17.1322 5.90434 18.0188L4.18007 20.1741C3.41618 21.129 3 22.3154 3 23.5383C3 24.8978 4.10216 26 5.46174 26H12C12 26.5253 12.1035 27.0454 12.3045 27.5307C12.5055 28.016 12.8001 28.457 13.1716 28.8284C13.543 29.1999 13.984 29.4945 14.4693 29.6955C14.9546 29.8965 15.4747 30 16 30C16.5253 30 17.0454 29.8965 17.5307 29.6955C18.016 29.4945 18.457 29.1999 18.8284 28.8284C19.1999 28.457 19.4945 28.016 19.6955 27.5307C19.8965 27.0454 20 26.5253 20 26H26.5383C27.8978 26 29 24.8978 29 23.5383C29 22.3154 28.5838 21.129 27.8199 20.1741L26.0957 18.0188C25.3864 17.1322 25 16.0307 25 14.8953V13C25 8.36745 21.5 4.55237 17 4.05493V3ZM18 26H14C14 26.2626 14.0517 26.5227 14.1522 26.7654C14.2528 27.008 14.4001 27.2285 14.5858 27.4142C14.7715 27.5999 14.992 27.7472 15.2346 27.8478C15.4773 27.9483 15.7374 28 16 28C16.2626 28 16.5227 27.9483 16.7654 27.8478C17.008 27.7472 17.2285 27.5999 17.4142 27.4142C17.5999 27.2285 17.7472 27.008 17.8478 26.7654C17.9483 26.5227 18 26.2626 18 26ZM5 23.5383C5 23.7933 5.20673 24 5.46174 24H26.5383C26.7933 24 27 23.7933 27 23.5383C27 22.7696 26.7384 22.0238 26.2582 21.4235L24.5339 19.2682C23.541 18.027 23 16.4848 23 14.8953V13C23 9.13401 19.866 6 16 6C12.134 6 9 9.13401 9 13V14.8953C9 16.4848 8.45903 18.027 7.46608 19.2682L5.74181 21.4235C5.26161 22.0238 5 22.7696 5 23.5383Z"/>
-    </symbol>
-    <symbol id="inbox" viewBox="0 0 32 32">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-              d="M9.2 8.39976C9.38885 8.14795 9.68524 7.99976 10 7.99976H22C22.3148 7.99976 22.6111 8.14795 22.8 8.39976L27 13.9998H19C18.4477 13.9998 18 14.4475 18 14.9998C18 15.2624 17.9483 15.5225 17.8478 15.7651C17.7472 16.0078 17.5999 16.2283 17.4142 16.414C17.2285 16.5997 17.008 16.747 16.7654 16.8475C16.5227 16.948 16.2626 16.9998 16 16.9998C15.7374 16.9998 15.4773 16.948 15.2346 16.8475C14.992 16.747 14.7715 16.5997 14.5858 16.414C14.4001 16.2283 14.2528 16.0078 14.1522 15.7651C14.0517 15.5225 14 15.2624 14 14.9998C14 14.4475 13.5523 13.9998 13 13.9998H5L9.2 8.39976ZM12.127 15.9998H4V21.9998C4 23.1043 4.89543 23.9998 6 23.9998H26C27.1046 23.9998 28 23.1043 28 21.9998V15.9998H19.873C19.8264 16.1802 19.7672 16.3576 19.6955 16.5305C19.4945 17.0158 19.1999 17.4567 18.8284 17.8282C18.457 18.1996 18.016 18.4943 17.5307 18.6953C17.0454 18.8963 16.5253 18.9998 16 18.9998C15.4747 18.9998 14.9546 18.8963 14.4693 18.6953C13.984 18.4943 13.543 18.1996 13.1716 17.8282C12.8001 17.4567 12.5055 17.0158 12.3045 16.5305C12.2329 16.3576 12.1736 16.1802 12.127 15.9998ZM10 5.99976C9.05573 5.99976 8.16656 6.44434 7.6 7.19976L2.2 14.3998C2.07018 14.5729 2 14.7834 2 14.9998V21.9998C2 24.2089 3.79086 25.9998 6 25.9998H26C28.2091 25.9998 30 24.2089 30 21.9998V14.9998C30 14.7834 29.9298 14.5729 29.8 14.3998L24.4 7.19976C23.8334 6.44434 22.9443 5.99976 22 5.99976H10Z"/>
-    </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(--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"/>
-    </symbol>
-    <symbol id="hide" viewBox="0 0 24 24">
-        <path
-                d="M4.5,8.4C6.3,6.9,9,5.2,12,5.2c3,0,5.7,1.6,7.5,3.2c0.9,0.8,1.7,1.6,2.2,2.1c0.3,0.3,0.5,0.5,0.6,0.7c0.1,0.1,0.1,0.2,0.2,0.2c0,0,0,0,0,0.1l0,0l0,0l0,0c0,0,0,0-0.6,0.4c0.6,0.4,0.6,0.4,0.6,0.4l0,0l0,0l0,0c0,0,0,0,0,0.1c0,0-0.1,0.1-0.2,0.2c-0.1,0.2-0.3,0.4-0.6,0.7c-0.5,0.6-1.3,1.4-2.2,2.1c-1.9,1.5-4.5,3.2-7.5,3.2c-3,0-5.7-1.6-7.5-3.2c-0.9-0.8-1.7-1.6-2.2-2.1c-0.3-0.3-0.5-0.5-0.6-0.7c-0.1-0.1-0.1-0.2-0.2-0.2c0,0,0,0,0-0.1l0,0l0,0l0,0c0,0,0,0,0.6-0.4c-0.6-0.4-0.6-0.4-0.6-0.4l0,0l0,0l0,0c0,0,0,0,0-0.1c0,0,0.1-0.1,0.2-0.2c0.1-0.2,0.3-0.4,0.6-0.7C2.8,10,3.5,9.2,4.5,8.4z M2,12l-0.6-0.4c-0.2,0.3-0.2,0.6,0,0.9L2,12z M3,12c0.1,0.1,0.2,0.3,0.4,0.4c0.5,0.5,1.2,1.3,2.1,2c1.8,1.5,4.1,2.8,6.6,2.8c2.5,0,4.8-1.4,6.6-2.8c0.9-0.7,1.6-1.4,2.1-2c0.1-0.2,0.3-0.3,0.4-0.4c-0.1-0.1-0.2-0.3-0.4-0.4c-0.5-0.5-1.2-1.3-2.1-2c-1.8-1.5-4.1-2.8-6.6-2.8c-2.5,0-4.8,1.4-6.6,2.8c-0.9,0.7-1.6,1.4-2.1,2C3.2,11.7,3.1,11.9,3,12z M22,12l0.6,0.4c0.2-0.3,0.2-0.6,0-0.9L22,12z"
-        />
-        <path
-                d="M8.8,12c0-1.8,1.5-3.2,3.2-3.2s3.2,1.5,3.2,3.2s-1.5,3.2-3.2,3.2S8.8,13.8,8.8,12z M12,10.2c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8S13,10.2,12,10.2z"
-        />
-    </symbol>
+  <symbol id="notifications" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V2.02746C5.25002 2.27619 3.5 4.18372 3.5 6.5V7.44766C3.5 8.01534 3.3068 8.56611 2.95217 9.00939L2.09004 10.0871C1.70809 10.5645 1.5 11.1577 1.5 11.7691C1.5 12.4489 2.05108 13 2.73087 13H6C6 13.2626 6.05173 13.5227 6.15224 13.7654C6.25275 14.008 6.40007 14.2285 6.58579 14.4142C6.7715 14.5999 6.99198 14.7472 7.23463 14.8478C7.47728 14.9483 7.73736 15 8 15C8.26264 15 8.52272 14.9483 8.76537 14.8478C9.00802 14.7472 9.2285 14.5999 9.41421 14.4142C9.59993 14.2285 9.74725 14.008 9.84776 13.7654C9.94827 13.5227 10 13.2626 10 13H13.2691C13.9489 13 14.5 12.4489 14.5 11.7691C14.5 11.1577 14.2919 10.5645 13.91 10.0871L13.0478 9.00939C12.6932 8.56611 12.5 8.01534 12.5 7.44766V6.5C12.5 4.18372 10.75 2.27619 8.5 2.02746V1.5ZM9 13H7C7 13.1313 7.02587 13.2614 7.07612 13.3827C7.12638 13.504 7.20003 13.6142 7.29289 13.7071C7.38575 13.8 7.49599 13.8736 7.61732 13.9239C7.73864 13.9741 7.86868 14 8 14C8.13132 14 8.26136 13.9741 8.38268 13.9239C8.50401 13.8736 8.61425 13.8 8.70711 13.7071C8.79997 13.6142 8.87362 13.504 8.92388 13.3827C8.97413 13.2614 9 13.1313 9 13ZM2.5 11.7691C2.5 11.8966 2.60336 12 2.73087 12H13.2691C13.3966 12 13.5 11.8966 13.5 11.7691C13.5 11.3848 13.3692 11.0119 13.1291 10.7118L12.267 9.63409C11.7705 9.01349 11.5 8.24241 11.5 7.44766V6.5C11.5 4.567 9.933 3 8 3C6.067 3 4.5 4.567 4.5 6.5V7.44766C4.5 8.24241 4.22952 9.01349 3.73304 9.63409L2.87091 10.7118C2.63081 11.0119 2.5 11.3848 2.5 11.7691Z" />
+  </symbol>
+  <symbol id="inbox" viewBox="0 0 32 32">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.2 8.39976C9.38885 8.14795 9.68524 7.99976 10 7.99976H22C22.3148 7.99976 22.6111 8.14795 22.8 8.39976L27 13.9998H19C18.4477 13.9998 18 14.4475 18 14.9998C18 15.2624 17.9483 15.5225 17.8478 15.7651C17.7472 16.0078 17.5999 16.2283 17.4142 16.414C17.2285 16.5997 17.008 16.747 16.7654 16.8475C16.5227 16.948 16.2626 16.9998 16 16.9998C15.7374 16.9998 15.4773 16.948 15.2346 16.8475C14.992 16.747 14.7715 16.5997 14.5858 16.414C14.4001 16.2283 14.2528 16.0078 14.1522 15.7651C14.0517 15.5225 14 15.2624 14 14.9998C14 14.4475 13.5523 13.9998 13 13.9998H5L9.2 8.39976ZM12.127 15.9998H4V21.9998C4 23.1043 4.89543 23.9998 6 23.9998H26C27.1046 23.9998 28 23.1043 28 21.9998V15.9998H19.873C19.8264 16.1802 19.7672 16.3576 19.6955 16.5305C19.4945 17.0158 19.1999 17.4567 18.8284 17.8282C18.457 18.1996 18.016 18.4943 17.5307 18.6953C17.0454 18.8963 16.5253 18.9998 16 18.9998C15.4747 18.9998 14.9546 18.8963 14.4693 18.6953C13.984 18.4943 13.543 18.1996 13.1716 17.8282C12.8001 17.4567 12.5055 17.0158 12.3045 16.5305C12.2329 16.3576 12.1736 16.1802 12.127 15.9998ZM10 5.99976C9.05573 5.99976 8.16656 6.44434 7.6 7.19976L2.2 14.3998C2.07018 14.5729 2 14.7834 2 14.9998V21.9998C2 24.2089 3.79086 25.9998 6 25.9998H26C28.2091 25.9998 30 24.2089 30 21.9998V14.9998C30 14.7834 29.9298 14.5729 29.8 14.3998L24.4 7.19976C23.8334 6.44434 22.9443 5.99976 22 5.99976H10Z"
+    />
+  </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(--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"/>
+  </symbol>
+  <symbol id="hide" viewBox="0 0 24 24">
+    <path
+      d="M4.5,8.4C6.3,6.9,9,5.2,12,5.2c3,0,5.7,1.6,7.5,3.2c0.9,0.8,1.7,1.6,2.2,2.1c0.3,0.3,0.5,0.5,0.6,0.7c0.1,0.1,0.1,0.2,0.2,0.2c0,0,0,0,0,0.1l0,0l0,0l0,0c0,0,0,0-0.6,0.4c0.6,0.4,0.6,0.4,0.6,0.4l0,0l0,0l0,0c0,0,0,0,0,0.1c0,0-0.1,0.1-0.2,0.2c-0.1,0.2-0.3,0.4-0.6,0.7c-0.5,0.6-1.3,1.4-2.2,2.1c-1.9,1.5-4.5,3.2-7.5,3.2c-3,0-5.7-1.6-7.5-3.2c-0.9-0.8-1.7-1.6-2.2-2.1c-0.3-0.3-0.5-0.5-0.6-0.7c-0.1-0.1-0.1-0.2-0.2-0.2c0,0,0,0,0-0.1l0,0l0,0l0,0c0,0,0,0,0.6-0.4c-0.6-0.4-0.6-0.4-0.6-0.4l0,0l0,0l0,0c0,0,0,0,0-0.1c0,0,0.1-0.1,0.2-0.2c0.1-0.2,0.3-0.4,0.6-0.7C2.8,10,3.5,9.2,4.5,8.4z M2,12l-0.6-0.4c-0.2,0.3-0.2,0.6,0,0.9L2,12z M3,12c0.1,0.1,0.2,0.3,0.4,0.4c0.5,0.5,1.2,1.3,2.1,2c1.8,1.5,4.1,2.8,6.6,2.8c2.5,0,4.8-1.4,6.6-2.8c0.9-0.7,1.6-1.4,2.1-2c0.1-0.2,0.3-0.3,0.4-0.4c-0.1-0.1-0.2-0.3-0.4-0.4c-0.5-0.5-1.2-1.3-2.1-2c-1.8-1.5-4.1-2.8-6.6-2.8c-2.5,0-4.8,1.4-6.6,2.8c-0.9,0.7-1.6,1.4-2.1,2C3.2,11.7,3.1,11.9,3,12z M22,12l0.6,0.4c0.2-0.3,0.2-0.6,0-0.9L22,12z"
+    />
+    <path
+      d="M8.8,12c0-1.8,1.5-3.2,3.2-3.2s3.2,1.5,3.2,3.2s-1.5,3.2-3.2,3.2S8.8,13.8,8.8,12z M12,10.2c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8S13,10.2,12,10.2z"
+    />
+  </symbol>
 </svg>
--- a/plugins/setting-assets/assets/icons.svg
+++ b/plugins/setting-assets/assets/icons.svg
@ -1,17 +1,24 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="edit" viewBox="0 0 16 16">
-    <path d="M14,13.1H9.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,13.1,14,13.1z"/>
-    <path d="M11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1c1.2-1.6,1.3-1.6,1.3-1.6C12.9,5,13,4.5,12.9,4c-0.1-0.5-0.4-0.9-0.8-1.2 c0,0-1.1-0.9-1.1-0.9c-0.8-0.7-2.1-0.6-2.8,0.3c0,0,0,0,0,0l-6.3,7.9c-0.3,0.4-0.4,0.9-0.3,1.4l0.5,2.3c0.1,0.2,0.3,0.4,0.5,0.4 c0,0,0,0,0,0l2.4,0c0.5,0,1-0.2,1.3-0.6C8.9,10.2,10.5,8.2,11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1z M8.9,2.8c0.3-0.4,1-0.5,1.4-0.1 c0,0,1.2,0.9,1.2,0.9c0.2,0.1,0.4,0.3,0.4,0.6c0.1,0.2,0,0.5-0.1,0.7c0,0-0.4,0.5-0.9,1.2L8.1,3.9L8.9,2.8z M5.5,12.9 C5.4,13,5.2,13.1,5,13.1l-2,0l-0.5-1.9c0-0.2,0-0.4,0.1-0.5l4.8-6l2.8,2.2C8.9,8.6,6.8,11.2,5.5,12.9z"/>
+  <symbol id="accountSettings" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 8C9.65685 8 11 6.65685 11 5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5C5 6.65685 6.34315 8 8 8ZM8 9C10.2091 9 12 7.20914 12 5C12 2.79086 10.2091 1 8 1C5.79086 1 4 2.79086 4 5C4 7.20914 5.79086 9 8 9Z" />
+    <path d="M6.5 10C4.567 10 3 11.567 3 13.5V14.5C3 14.7761 3.22386 15 3.5 15C3.77614 15 4 14.7761 4 14.5V13.5C4 12.1193 5.11929 11 6.5 11H9.5C10.8807 11 12 12.1193 12 13.5V14.5C12 14.7761 12.2239 15 12.5 15C12.7761 15 13 14.7761 13 14.5V13.5C13 11.567 11.433 10 9.5 10H6.5Z" />
+  </symbol>
+  <symbol id="owners" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 5.5C2 3.567 3.567 2 5.5 2C7.433 2 9 3.567 9 5.5C9 7.433 7.433 9 5.5 9C3.567 9 2 7.433 2 5.5ZM5.5 3C4.11929 3 3 4.11929 3 5.5C3 6.88071 4.11929 8 5.5 8C6.88071 8 8 6.88071 8 5.5C8 4.11929 6.88071 3 5.5 3Z" />
+    <path d="M10.5 10C10.2239 10 10 10.2239 10 10.5C10 10.7761 10.2239 11 10.5 11H11.5C12.8807 11 14 12.1193 14 13.5C14 13.7761 14.2239 14 14.5 14C14.7761 14 15 13.7761 15 13.5C15 11.567 13.433 10 11.5 10H10.5Z" />
+    <path d="M4.5 11C3.11929 11 2 12.1193 2 13.5C2 13.7761 1.77614 14 1.5 14C1.22386 14 1 13.7761 1 13.5C1 11.567 2.567 10 4.5 10H6.5C8.433 10 10 11.567 10 13.5C10 13.7761 9.77614 14 9.5 14C9.22386 14 9 13.7761 9 13.5C9 12.1193 7.88071 11 6.5 11H4.5Z" />
+    <path d="M10.5 2.99988C10.2238 2.99988 9.99995 3.22374 9.99995 3.49988C9.99995 3.77602 10.2238 3.99988 10.5 3.99988C10.7846 3.99988 11.0661 4.06066 11.3254 4.17815C11.5847 4.29564 11.8159 4.46714 12.0036 4.68119C12.1913 4.89523 12.3312 5.14688 12.4138 5.41931C12.4965 5.69174 12.52 5.97868 12.4828 6.26093C12.4457 6.54318 12.3487 6.81425 12.1984 7.05601C12.048 7.29777 11.8478 7.50465 11.6111 7.66282C11.3744 7.82098 11.1066 7.92679 10.8257 7.97316C10.5449 8.01954 10.2573 8.00541 9.98232 7.93173C9.71558 7.86026 9.44141 8.01855 9.36994 8.28528C9.29847 8.55202 9.45677 8.82618 9.7235 8.89766C10.136 9.00818 10.5673 9.02937 10.9886 8.95981C11.41 8.89025 11.8116 8.73153 12.1667 8.49429C12.5217 8.25704 12.8221 7.94672 13.0476 7.58408C13.2731 7.22144 13.4186 6.81484 13.4743 6.39146C13.53 5.96807 13.4947 5.53767 13.3708 5.12902C13.2468 4.72038 13.037 4.3429 12.7555 4.02184C12.4739 3.70078 12.127 3.44353 11.7381 3.26729C11.3491 3.09105 10.927 2.99988 10.5 2.99988Z" />
  </symbol>
  <symbol id="password" viewBox="0 0 16 16">
-    <path d="M14.4,5.7l-2-2l1-1c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-1.4,1.4L8.3,6.5C7.6,5.9,6.7,5.6,5.7,5.6c-2.3,0-4.2,1.9-4.2,4.2 c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2c0-1-0.3-1.9-0.9-2.6l2.7-2.7l2,2c0.2,0.2,0.5,0.2,0.7,0S14.5,5.9,14.4,5.7z M5.7,13 c-1.8,0-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2S8.9,8,8.9,9.8S7.5,13,5.7,13z"/>
+    <path d="M11 6C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4C10.4477 4 10 4.44772 10 5C10 5.55228 10.4477 6 11 6Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 1C8.01472 1 6 3.01472 6 5.5C6 5.89536 6.05111 6.27942 6.14726 6.64563L1.29289 11.5C1.10536 11.6875 1 11.9419 1 12.2071V14.5C1 14.7761 1.22386 15 1.5 15H3.79289C4.05811 15 4.31246 14.8946 4.5 14.7071L9.35437 9.85274C9.72058 9.94889 10.1046 10 10.5 10C12.9853 10 15 7.98528 15 5.5C15 3.01472 12.9853 1 10.5 1ZM7 5.5C7 3.567 8.567 2 10.5 2C12.433 2 14 3.567 14 5.5C14 7.433 12.433 9 10.5 9C10.1048 9 9.72588 8.93469 9.37284 8.81468C9.19252 8.75339 8.99304 8.79986 8.85837 8.93453L8 9.79289L7.85355 9.64645C7.65829 9.45118 7.34171 9.45118 7.14645 9.64645C6.95118 9.84171 6.95118 10.1583 7.14645 10.3536L7.29289 10.5L6.5 11.2929L5.85355 10.6464C5.65829 10.4512 5.34171 10.4512 5.14645 10.6464C4.95118 10.8417 4.95118 11.1583 5.14645 11.3536L5.79289 12L5 12.7929L4.35355 12.1464C4.15829 11.9512 3.84171 11.9512 3.64645 12.1464C3.45118 12.3417 3.45118 12.6583 3.64645 12.8536L4.29289 13.5L3.79289 14H2V12.2071L7.06547 7.14163C7.20014 7.00696 7.24661 6.80748 7.18532 6.62716C7.06531 6.27412 7 5.8952 7 5.5Z" />
  </symbol>
-  <symbol id="settings" viewBox="0 0 32 32">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.3356 7.58904L18.6277 4.75746C18.5164 4.3123 18.1164 4 17.6576 4H14.3422C13.8833 4 13.4834 4.3123 13.3721 4.75746L12.6642 7.58904L11.8634 8.00432C11.6181 8.13154 11.3793 8.26979 11.1476 8.41844L10.3867 8.90666L7.57731 8.10299C7.13614 7.97679 6.66569 8.16704 6.43626 8.56443L4.77859 11.4356C4.54915 11.833 4.61962 12.3355 4.9495 12.6545L7.0498 14.6853L7.00919 15.5863C7.00301 15.7233 6.99989 15.8612 6.99989 16C6.99989 16.1388 7.00301 16.2767 7.00919 16.4137L7.0498 17.3147L4.9495 19.3455C4.61962 19.6645 4.54915 20.167 4.77859 20.5644L6.43626 23.4356C6.66569 23.833 7.13614 24.0232 7.57731 23.897L10.3867 23.0933L11.1476 23.5816C11.3793 23.7302 11.6181 23.8685 11.8634 23.9957L12.6642 24.411L13.3721 27.2425C13.4834 27.6877 13.8833 28 14.3422 28H17.6576C18.1164 28 18.5164 27.6877 18.6277 27.2425L19.3356 24.411L20.1363 23.9957C20.3816 23.8685 20.6204 23.7302 20.8521 23.5816L21.613 23.0934L24.4225 23.897C24.8636 24.0232 25.3341 23.833 25.5635 23.4356L27.2212 20.5644C27.4506 20.167 27.3802 19.6645 27.0503 19.3455L24.95 17.3147L24.9906 16.4138C24.9968 16.2767 24.9999 16.1388 24.9999 16C24.9999 15.8612 24.9968 15.7233 24.9906 15.5862L24.95 14.6853L27.0503 12.6545C27.3801 12.3355 27.4506 11.833 27.2212 11.4356L25.5635 8.5644C25.3341 8.16701 24.8636 7.97676 24.4225 8.10296L21.613 8.90664L20.8521 8.41842C20.6204 8.26978 20.3816 8.13154 20.1363 8.00432L19.3356 7.58904ZM21.0571 6.22888L20.568 4.27239C20.2341 2.93689 19.0342 2 17.6576 2H14.3422C12.9656 2 11.7657 2.93689 11.4318 4.27239L10.9427 6.22888C10.6426 6.38449 10.3507 6.5535 10.0676 6.73514L8.12737 6.18012C6.80386 5.80152 5.39251 6.37226 4.70421 7.56443L3.04654 10.4356C2.35824 11.6278 2.56963 13.1354 3.55927 14.0923L5.01122 15.4962C5.00369 15.6632 4.99989 15.8312 4.99989 16C4.99989 16.1688 5.00369 16.3368 5.01122 16.5038L3.55927 17.9077C2.56963 18.8646 2.35824 20.3722 3.04654 21.5644L4.70421 24.4356C5.39251 25.6277 6.80386 26.1985 8.12737 25.8199L10.0676 25.2649C10.3507 25.4465 10.6426 25.6155 10.9427 25.7711L11.4318 27.7276C11.7657 29.0631 12.9656 30 14.3422 30H17.6576C19.0342 30 20.2341 29.0631 20.568 27.7276L21.0571 25.7711C21.3571 25.6155 21.6491 25.4465 21.9322 25.2649L23.8724 25.8199C25.1959 26.1985 26.6073 25.6278 27.2956 24.4356L28.9532 21.5644C29.6415 20.3723 29.4301 18.8646 28.4405 17.9077L26.9886 16.5038C26.9961 16.3368 26.9999 16.1689 26.9999 16C26.9999 15.8311 26.9961 15.6632 26.9886 15.4962L28.4405 14.0923C29.4301 13.1354 29.6415 11.6277 28.9532 10.4356L27.2956 7.5644C26.6073 6.37223 25.1959 5.80149 23.8724 6.18009L21.9322 6.73512C21.6491 6.55349 21.3571 6.38448 21.0571 6.22888Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9999 20C18.209 20 19.9999 18.2091 19.9999 16C19.9999 13.7909 18.209 12 15.9999 12C13.7907 12 11.9999 13.7909 11.9999 16C11.9999 18.2091 13.7907 20 15.9999 20ZM15.9999 22C19.3136 22 21.9999 19.3137 21.9999 16C21.9999 12.6863 19.3136 10 15.9999 10C12.6862 10 9.99989 12.6863 9.99989 16C9.99989 19.3137 12.6862 22 15.9999 22Z" />
+  <symbol id="settings" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6678 3.79452L9.31385 2.37873C9.2582 2.15615 9.05821 2 8.82878 2H7.17111C6.94167 2 6.74168 2.15615 6.68604 2.37873L6.33209 3.79452L5.93172 4.00216C5.80906 4.06577 5.68965 4.1349 5.57382 4.20922L5.19337 4.45333L3.78866 4.0515C3.56807 3.9884 3.33285 4.08352 3.21813 4.28221L2.38929 5.7178C2.27458 5.9165 2.30981 6.16777 2.47475 6.32725L3.5249 7.34265L3.50459 7.79313C3.50151 7.86163 3.49994 7.9306 3.49994 8C3.49994 8.0694 3.50151 8.13837 3.50459 8.20687L3.5249 8.65735L2.47475 9.67275C2.30981 9.83223 2.27458 10.0835 2.38929 10.2822L3.21813 11.7178C3.33285 11.9165 3.56807 12.0116 3.78866 11.9485L5.19337 11.5467L5.57382 11.7908C5.68966 11.8651 5.80907 11.9342 5.93172 11.9978L6.33209 12.2055L6.68604 13.6213C6.74168 13.8439 6.94167 14 7.17111 14H8.82878C9.05821 14 9.2582 13.8439 9.31385 13.6213L9.6678 12.2055L10.0682 11.9978C10.1908 11.9342 10.3102 11.8651 10.4261 11.7908L10.8065 11.5467L12.2112 11.9485C12.4318 12.0116 12.667 11.9165 12.7818 11.7178L13.6106 10.2822C13.7253 10.0835 13.6901 9.83225 13.5251 9.67276L12.475 8.65736L12.4953 8.20688C12.4984 8.13837 12.4999 8.0694 12.4999 8C12.4999 7.9306 12.4984 7.86163 12.4953 7.79312L12.475 7.34264L13.5251 6.32724C13.6901 6.16775 13.7253 5.91648 13.6106 5.71779L12.7818 4.2822C12.667 4.0835 12.4318 3.98838 12.2112 4.05148L10.8065 4.45332L10.4261 4.20921C10.3102 4.13489 10.1908 4.06577 10.0682 4.00216L9.6678 3.79452ZM10.5286 3.11444L10.284 2.1362C10.1171 1.46845 9.51708 1 8.82878 1H7.17111C6.48281 1 5.88283 1.46845 5.71589 2.1362L5.47133 3.11444C5.32132 3.19224 5.17534 3.27675 5.03379 3.36757L4.06369 3.09006C3.40193 2.90076 2.69626 3.18613 2.3521 3.78221L1.52327 5.2178C1.17912 5.81389 1.28482 6.5677 1.77964 7.04615L2.50561 7.7481C2.50185 7.8316 2.49994 7.91558 2.49994 8C2.49994 8.08442 2.50185 8.1684 2.50561 8.2519L1.77964 8.95385C1.28482 9.4323 1.17912 10.1861 1.52327 10.7822L2.3521 12.2178C2.69626 12.8139 3.40193 13.0992 4.06369 12.9099L5.03379 12.6324C5.17534 12.7232 5.32132 12.8078 5.47133 12.8856L5.71589 13.8638C5.88283 14.5316 6.48281 15 7.17111 15H8.82878C9.51708 15 10.1171 14.5316 10.284 13.8638L10.5286 12.8856C10.6786 12.8078 10.8245 12.7233 10.9661 12.6324L11.9362 12.91C12.598 13.0993 13.3036 12.8139 13.6478 12.2178L14.4766 10.7822C14.8208 10.1861 14.7151 9.43231 14.2202 8.95386L13.4943 8.25191C13.498 8.16841 13.4999 8.08443 13.4999 8C13.4999 7.91557 13.498 7.83159 13.4943 7.74809L14.2202 7.04614C14.7151 6.56769 14.8208 5.81387 14.4766 5.21779L13.6478 3.7822C13.3036 3.18611 12.598 2.90074 11.9362 3.09005L10.9661 3.36756C10.8245 3.27675 10.6786 3.19224 10.5286 3.11444Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99994 10C9.10451 10 9.99994 9.10457 9.99994 8C9.99994 6.89543 9.10451 6 7.99994 6C6.89537 6 5.99994 6.89543 5.99994 8C5.99994 9.10457 6.89537 10 7.99994 10ZM7.99994 11C9.6568 11 10.9999 9.65685 10.9999 8C10.9999 6.34315 9.6568 5 7.99994 5C6.34309 5 4.99994 6.34315 4.99994 8C4.99994 9.65685 6.34309 11 7.99994 11Z" />
  </symbol>
  <symbol id="integration" viewBox="0 0 16 16">
-    <path d="M14.2,4.1l-6-3C8.1,1,7.9,1,7.8,1.1l-6,3C1.6,4.1,1.5,4.3,1.5,4.5v7c0,0.2,0.1,0.4,0.3,0.4l6,3L8,14.5l0.2,0.4l6-3 c0.2-0.1,0.3-0.3,0.3-0.4v-7C14.5,4.3,14.4,4.1,14.2,4.1z M8,2.1l4.9,2.4L8,6.9L3.1,4.5L8,2.1z M2.5,11.2V5.3l5,2.5v5.9L2.5,11.2z M8.5,13.7V7.8l5-2.5v5.9L8.5,13.7z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.99226 0.77163C7.61498 0.409457 8.38502 0.409456 9.00774 0.77163L13.5077 3.38881C14.1222 3.74616 14.5 4.402 14.5 5.11122V10.8888C14.5 11.598 14.1222 12.2538 13.5077 12.6112L9.00774 15.2284C8.38502 15.5905 7.61498 15.5905 6.99226 15.2284L2.49226 12.6112C1.87782 12.2538 1.5 11.598 1.5 10.8888V5.11122C1.5 4.402 1.87782 3.74616 2.49226 3.38881L6.99226 0.77163ZM8.50387 1.63283C8.19251 1.45175 7.80749 1.45175 7.49613 1.63283L3.00576 4.24441L7.49611 6.86378C7.80747 7.04541 8.19249 7.04541 8.50385 6.86378L12.9942 4.2444L8.50387 1.63283ZM2.5 5.11122L2.50001 5.10709L6.99224 7.72756C7.15334 7.82153 7.32429 7.89119 7.5 7.93654V14.3694C7.49871 14.3687 7.49742 14.3679 7.49613 14.3672L2.99613 11.75C2.68891 11.5713 2.5 11.2434 2.5 10.8888V5.11122ZM8.5 14.3694C8.50129 14.3687 8.50258 14.3679 8.50387 14.3672L13.0039 11.75C13.3111 11.5713 13.5 11.2434 13.5 10.8888V5.11122L13.5 5.10707L9.00772 7.72756C8.84664 7.82152 8.6757 7.89118 8.5 7.93653V14.3694Z" />
  </symbol>
  <symbol id="support" viewBox="0 0 16 16">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8,2C4.2,2,1,4.6,1,8c0,1.2,0.4,2.4,1.2,3.3c-0.1,0.3-0.3,0.7-0.5,1l-0.6,0.9c-0.1,0.2-0.1,0.4,0,0.5C1.1,13.9,1.3,14,1.5,14c1.1,0,2.2-0.2,3.2-0.7C5.7,13.7,6.8,14,8,14c3.8,0,7-2.6,7-6C15,4.6,11.8,2,8,2z M8,13c-1.1,0-2.2-0.3-3.1-0.7c-0.1-0.1-0.3-0.1-0.4,0c-0.6,0.3-1.3,0.5-2,0.6c0.3-0.5,0.6-1,0.7-1.5c0.1-0.2,0-0.3-0.1-0.5C2.4,10.1,2,9.1,2,8c0-2.7,2.6-5,6-5c3.4,0,6,2.3,6,5S11.4,13,8,13z" />
@ -32,14 +39,19 @@
    <path d="M7.92231 14.2015L7.99302 14.6964L7.92231 14.2015ZM6.22318 14.311L6.33389 13.8234L6.22318 14.311ZM4.79789 13.0748L5.26492 12.8963L4.79789 13.0748ZM13.373 12.5661L12.9774 12.2603L13.373 12.5661ZM9.05136 14.0402L8.98065 13.5452L9.05136 14.0402ZM13.1512 12.8218L13.5099 13.1701L13.1512 12.8218ZM13.1512 3.17821L12.7926 3.5266L13.1512 3.17821ZM13.373 3.43391L13.7686 3.12813L13.373 3.43391ZM7.98221 2.31213L8.98065 2.45477L9.12207 1.46482L8.12363 1.32218L7.98221 2.31213ZM13.4993 7.66487V8.33509H14.4993V7.66487H13.4993ZM8.98065 13.5452L7.8516 13.7065L7.99302 14.6964L9.12207 14.5351L8.98065 13.5452ZM7.8516 13.7065C7.39911 13.7711 7.0821 13.8162 6.83278 13.8363C6.58629 13.8562 6.44248 13.8481 6.33389 13.8234L6.11247 14.7986C6.364 14.8557 6.62341 14.8565 6.91329 14.8331C7.20033 14.8099 7.55283 14.7593 7.99302 14.6964L7.8516 13.7065ZM4.16602 11.3773C4.16602 11.822 4.1658 12.1781 4.18344 12.4655C4.20126 12.7558 4.23875 13.0125 4.33085 13.2534L5.26492 12.8963C5.22515 12.7923 5.19671 12.6511 5.18156 12.4042C5.16624 12.1546 5.16602 11.8344 5.16602 11.3773H4.16602ZM6.33389 13.8234C5.84503 13.7124 5.44393 13.3645 5.26492 12.8963L4.33085 13.2534C4.62921 14.0338 5.29771 14.6136 6.11247 14.7986L6.33389 13.8234ZM13.4993 8.33509C13.4993 9.48721 13.4986 10.3082 13.4244 10.9439C13.3517 11.5676 13.2136 11.9547 12.9774 12.2603L13.7686 12.8718C14.1587 12.3671 14.3338 11.7788 14.4177 11.0597C14.5001 10.3527 14.4993 9.46335 14.4993 8.33509H13.4993ZM9.12207 14.5351C10.239 14.3756 11.1195 14.2506 11.8078 14.069C12.5078 13.8843 13.0654 13.6277 13.5099 13.1701L12.7926 12.4734C12.5234 12.7504 12.1598 12.9419 11.5526 13.1021C10.9338 13.2654 10.1212 13.3823 8.98065 13.5452L9.12207 14.5351ZM12.9774 12.2603C12.9198 12.3347 12.8581 12.4059 12.7926 12.4734L13.5099 13.1701C13.6017 13.0756 13.688 12.9761 13.7686 12.8718L12.9774 12.2603ZM8.98065 2.45477C10.1212 2.6177 10.9338 2.73458 11.5526 2.89788C12.1598 3.05809 12.5234 3.24952 12.7926 3.5266L13.5099 2.82982C13.0654 2.37222 12.5078 2.11569 11.8078 1.93098C11.1195 1.74936 10.239 1.62438 9.12207 1.46482L8.98065 2.45477ZM14.4993 7.66487C14.4993 6.53661 14.5001 5.64727 14.4177 4.94022C14.3338 4.22111 14.1587 3.63289 13.7686 3.12813L12.9774 3.73968C13.2136 4.04531 13.3517 4.43238 13.4244 5.05606C13.4986 5.69179 13.4993 6.51275 13.4993 7.66487H14.4993ZM12.7926 3.5266C12.8581 3.59409 12.9198 3.66523 12.9774 3.73968L13.7686 3.12813C13.688 3.02391 13.6017 2.92431 13.5099 2.82982L12.7926 3.5266ZM8.12363 1.32218C7.62395 1.2508 7.22383 1.19335 6.89852 1.16973C6.56979 1.14587 6.27615 1.15257 5.99374 1.23142L6.26265 2.19458C6.38494 2.16044 6.54699 2.14684 6.82611 2.16711C7.10865 2.18762 7.46854 2.23875 7.98221 2.31213L8.12363 1.32218ZM5.16602 4.7546C5.16602 4.23572 5.1663 3.87222 5.18595 3.58961C5.20536 3.31043 5.24174 3.15194 5.29283 3.0357L4.37738 2.63328C4.25938 2.90171 4.21122 3.19145 4.18836 3.52025C4.16573 3.84563 4.16602 4.24985 4.16602 4.7546H5.16602ZM5.99374 1.23142C5.27211 1.43289 4.67888 1.9474 4.37738 2.63328L5.29283 3.0357C5.47374 2.62417 5.82967 2.31547 6.26265 2.19458L5.99374 1.23142Z"/>
    <path d="M10.666 8.00002L11.0565 7.68767L11.3063 8.00002L11.0565 8.31237L10.666 8.00002ZM2.66602 8.50002C2.38987 8.50002 2.16602 8.27616 2.16602 8.00002C2.16602 7.72388 2.38987 7.50002 2.66602 7.50002V8.50002ZM8.38978 4.35434L11.0565 7.68767L10.2756 8.31237L7.60891 4.97903L8.38978 4.35434ZM11.0565 8.31237L8.38978 11.6457L7.60891 11.021L10.2756 7.68767L11.0565 8.31237ZM10.666 8.50002H2.66602V7.50002H10.666V8.50002Z"/>
  </symbol>
-  <symbol id="clazz" viewBox="0 0 24 24">
-    <path d="M11.8,12.8h4.6c0.3,1.2,1.4,2,2.6,2c1.5,0,2.8-1.2,2.8-2.8S20.5,9.2,19,9.2c-1.3,0-2.3,0.8-2.6,2h-4.6V5.8h4.6c0.3,1.2,1.4,2,2.6,2c1.5,0,2.8-1.2,2.8-2.8S20.5,2.2,19,2.2c-1.3,0-2.3,0.8-2.6,2H11c-0.4,0-0.8,0.3-0.8,0.8v6.2H7.6c-0.3-1.2-1.4-2-2.6-2c-1.5,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c1.3,0,2.3-0.8,2.6-2h2.6V19c0,0.4,0.3,0.8,0.8,0.8h5.4c0.3,1.2,1.4,2,2.6,2c1.5,0,2.8-1.2,2.8-2.8s-1.2-2.8-2.8-2.8c-1.3,0-2.3,0.8-2.6,2h-4.6V12.8z M19,10.8c0.7,0,1.2,0.6,1.2,1.2s-0.6,1.2-1.2,1.2c-0.7,0-1.2-0.6-1.2-1.2S18.3,10.8,19,10.8z M19,3.8c0.7,0,1.2,0.6,1.2,1.2S19.7,6.2,19,6.2c-0.7,0-1.2-0.6-1.2-1.2S18.3,3.8,19,3.8z M5,13.2c-0.7,0-1.2-0.6-1.2-1.2s0.6-1.2,1.2-1.2s1.2,0.6,1.2,1.2S5.7,13.2,5,13.2z M19,17.8c0.7,0,1.2,0.6,1.2,1.2c0,0.7-0.6,1.2-1.2,1.2c-0.7,0-1.2-0.6-1.2-1.2C17.8,18.3,18.3,17.8,19,17.8z" />
+  <symbol id="clazz" viewBox="0 0 16 16">
+    <path d="M1 8L5 12L5.70711 11.2929L2.41421 8L5.70711 4.70711L5 4L1 8Z" />
+    <path d="M15 8L11 4L10.2928 4.70711L13.5857 8L10.2928 11.2929L11 12L15 8Z" />
  </symbol>
-  <symbol id="enums" viewBox="0 0 24 24">
-    <path d="M21,2.2h-5h-5c-0.4,0-0.8,0.3-0.8,0.8v18c0,0.4,0.3,0.8,0.8,0.8h5h5c0.4,0,0.8-0.3,0.8-0.8V3C21.8,2.6,21.4,2.2,21,2.2z M11.8,3.8h3.5v16.5h-3.5V3.8z M20.2,20.2h-3.5V3.8h3.5V20.2z" />
-    <path d="M9.1,2.8l-4-0.5c-0.2,0-0.4,0-0.6,0.2C4.4,2.5,4.3,2.7,4.3,2.9l-2,17.5c0,0.4,0.2,0.8,0.7,0.8l4.2,0.5c0.2,0,0.4,0,0.6-0.2S8,21.3,8,21.1L9.7,3.6C9.8,3.2,9.5,2.8,9.1,2.8z M6.6,20.2l-2.7-0.3l1.8-16l2.5,0.3L6.6,20.2z" />
-    <path d="M18.5,9.8c0.4,0,0.8-0.3,0.8-0.8V7.5c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V9C17.8,9.4,18.1,9.8,18.5,9.8z" />
-    <path d="M13.5,6.8c-0.4,0-0.8,0.3-0.8,0.8V9c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V7.5C14.2,7.1,13.9,6.8,13.5,6.8z" />
+  <symbol id="enums" viewBox="0 0 16 16">
+    <path d="M2 4.5C2.55228 4.5 3 4.05228 3 3.5C3 2.94772 2.55228 2.5 2 2.5C1.44772 2.5 1 2.94772 1 3.5C1 4.05228 1.44772 4.5 2 4.5Z" />
+    <path d="M4.5 3.5C4.5 3.22386 4.72386 3 5 3H14.5C14.7761 3 15 3.22386 15 3.5C15 3.77614 14.7761 4 14.5 4H5C4.72386 4 4.5 3.77614 4.5 3.5Z" />
+    <path d="M4.5 8C4.5 7.72386 4.72386 7.5 5 7.5H14.5C14.7761 7.5 15 7.72386 15 8C15 8.27614 14.7761 8.5 14.5 8.5H5C4.72386 8.5 4.5 8.27614 4.5 8Z" />
+    <path d="M5 12C4.72386 12 4.5 12.2239 4.5 12.5C4.5 12.7761 4.72386 13 5 13H14.5C14.7761 13 15 12.7761 15 12.5C15 12.2239 14.7761 12 14.5 12H5Z" />
+    <path d="M3 8C3 8.55229 2.55228 9 2 9C1.44772 9 1 8.55229 1 8C1 7.44772 1.44772 7 2 7C2.55228 7 3 7.44772 3 8Z" />
+    <path d="M2 13.5C2.55228 13.5 3 13.0523 3 12.5C3 11.9477 2.55228 11.5 2 11.5C1.44772 11.5 1 11.9477 1 12.5C1 13.0523 1.44772 13.5 2 13.5Z" />
+  </symbol>
+  <symbol id="inviteSettings" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V11C1 12.1046 1.89543 13 3 13H13C14.1046 13 15 12.1046 15 11V5C15 3.89543 14.1046 3 13 3H3ZM2.25155 4.3368C2.43474 4.1302 2.70217 4 3 4H13C13.2978 4 13.5653 4.1302 13.7484 4.33679L7.99999 7.43211L2.25155 4.3368ZM2 5.3371V11C2 11.5523 2.44772 12 3 12H13C13.5523 12 14 11.5523 14 11V5.33709L8.23704 8.44022C8.08905 8.51991 7.91093 8.51991 7.76294 8.44022L2 5.3371Z" />
  </symbol>
-
 </svg>
--- a/plugins/setting-assets/lang/en.json
+++ b/plugins/setting-assets/lang/en.json
@ -5,7 +5,7 @@
    "Support": "Support",
    "Privacy": "Privacy",
    "Terms": "Terms",
-    "EditProfile": "Edit profile",
+    "AccountSettings": "Account settings",
    "Categories": "Categories",
    "Delete": "Delete",
    "ChangePassword": "Change password",
@ -31,6 +31,7 @@
    "IntegrationDisabledDescr": "Integration disabled",
    "IntegrationWith": "Integration with ",
    "ClassSetting": "Class setting",
+    "Classes": "Classes",
    "Attributes": "Attributes",
    "DeleteAttribute": "Delete attribute",
    "DeleteAttributeConfirm": "Do you want to delete this attribute?",
@ -51,7 +52,7 @@
    "Leave": "Leave workspace",
    "LeaveDescr": "Are you sure you want to leave the workspace? This action cannot be undone.",
    "Owners": "Owners",
-    "WorkspaceSetting": "Workspace",
+    "WorkspaceSettings": "Workspace settings",
    "Select": "Select",
    "AddOwner": "Add owner",
    "User": "User",
@ -71,7 +72,7 @@
    "Visibility": "Visibility",
    "Hidden": "Hidden",
    "Configure": "Configure",
-    "InviteSettings": "Workspace invite settings",
+    "InviteSettings": "Invite settings",
    "DefaultValue": "Default value",
    "SelectAValue": "Select a value",
    "DateOnly": "Date only",
--- a/plugins/setting-assets/lang/ru.json
+++ b/plugins/setting-assets/lang/ru.json
@ -5,7 +5,7 @@
    "Support": "Поддержка",
    "Privacy": "Конфиденциальность",
    "Terms": "Условия",
-    "EditProfile": "Редактировать профиль",
+    "AccountSettings": "Настройки аккаунта",
    "Categories": "Категории",
    "Delete": "Удалить",
    "ChangePassword": "Изменить пароль",
@ -31,6 +31,7 @@
    "IntegrationDisabledDescr": "Интеграция отключена",
    "IntegrationWith": "Интеграция с ",
    "ClassSetting": "Настройки класса",
+    "Classes": "Классы",
    "Attributes": "Атрибуты",
    "DeleteAttribute": "Удалить атрибут",
    "DeleteAttributeConfirm": "Вы действительно хотите удалить этот атрибут?",
@ -51,7 +52,7 @@
    "Leave": "Покинуть рабочее пространство",
    "LeaveDescr": "Вы действительно хотите покинуть рабочее пространство? Отменить это действие невозможно",
    "Owners": "Владельцы",
-    "WorkspaceSetting": "Рабочее пространство",
+    "WorkspaceSettings": "Рабочее пространство",
    "Select": "Выбрать",
    "AddOwner": "Добавить владельца",
    "User": "Пользователь",
@ -72,7 +73,7 @@
    "Visibility": "Видимость",
    "Hidden": "Спрятанный",
    "Configure": "Настроить",
-    "InviteSettings": "Настройки приглашений в пространство",
+    "InviteSettings": "Настройки приглашений",
    "DefaultValue": "Значение по умолчанию",
    "SelectAValue": "Выбрать значение",
    "DateOnly": "Только дата",
--- a/plugins/setting-assets/src/index.ts
+++ b/plugins/setting-assets/src/index.ts
@ -18,7 +18,8 @@ import setting from '@hcengineering/setting'

 const icons = require('../assets/icons.svg') as string // eslint-disable-line
 loadMetadata(setting.icon, {
-  EditProfile: `${icons}#edit`,
+  AccountSettings: `${icons}#accountSettings`,
+  Owners: `${icons}#owners`,
  Password: `${icons}#password`,
  Setting: `${icons}#settings`,
  Integrations: `${icons}#integration`,
@ -28,5 +29,6 @@ loadMetadata(setting.icon, {
  Signout: `${icons}#signout`,
  SelectWorkspace: `${icons}#selectWorkspace`,
  Clazz: `${icons}#clazz`,
-  Enums: `${icons}#enums`
+  Enums: `${icons}#enums`,
+  InviteSettings: `${icons}#inviteSettings`
 })
--- a/plugins/setting-resources/src/components/CategoryElement.svelte
+++ b/plugins/setting-resources/src/components/CategoryElement.svelte
@ -1,56 +0,0 @@
-<!--
-// Copyright © 2021 Anticrm Platform Contributors.
-//
-// Licensed under the Eclipse Public License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License. You may
-// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//
-// See the License for the specific language governing permissions and
-// limitations under the License.
-->
-<script lang="ts">
-  import type { Asset, IntlString } from '@hcengineering/platform'
-  import { Icon, Label } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
-
-  export let icon: Asset | undefined = undefined
-  export let label: IntlString | undefined = undefined
-  export let selected: boolean = false
-  export let expandable = false
-
-  const dispatch = createEventDispatcher()
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class="antiNav-element flex-row-center flex-between"
-  class:selected
-  on:click|stopPropagation={() => {
-    dispatch('click')
-  }}
->
-  <div class="flex-row-center flex flex-between flex-grow">
-    <div class="flex-row-center">
-      <div class="an-element__icon">
-        {#if icon}
-          <Icon {icon} size={'small'} />
-        {/if}
-      </div>
-      <span class="an-element__label" class:trans-title={expandable}>
-        {#if label}<Label {label} />{/if}
-      </span>
-    </div>
-    <slot name="tools" />
-  </div>
-</div>
-
-<style lang="scss">
-  .expandable {
-    position: relative;
-  }
-</style>
--- a/plugins/setting-resources/src/components/NavGroup.svelte
+++ b/plugins/setting-resources/src/components/NavGroup.svelte
@ -0,0 +1,118 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { IntlString } from '@hcengineering/platform'
+  import type { AnyComponent } from '@hcengineering/ui'
+  import { Label, Component } from '@hcengineering/ui'
+
+  export let label: IntlString
+  export let categoryName: string
+  export let selected: boolean = false
+  export let tools: AnyComponent | undefined = undefined
+  export let collapsed: boolean = false
+
+  $: id = `navGroup-${categoryName}`
+</script>
+
+<div class="hulyAccordionItem-container">
+  <button class="hulyAccordionItem-header" class:selected on:click={() => (collapsed = !collapsed)}>
+    <div class="hulyAccordionItem-header__label font-medium-12">
+      <Label {label} />
+    </div>
+    {#if tools}
+      <div class="hulyAccordionItem-header__tools">
+        <Component
+          is={tools}
+          props={{
+            kind: 'tools',
+            categoryName
+          }}
+        />
+      </div>
+    {/if}
+  </button>
+  <div {id} class="hulyAccordionItem-content" class:collapsed>
+    <slot />
+  </div>
+</div>
+
+<style lang="scss">
+  .hulyAccordionItem-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    border-top: 1px solid var(--theme-navpanel-divider);
+    // border-bottom: 1px solid var(--theme-navpanel-divider); // var(--global-surface-01-BorderColor);
+
+    .hulyAccordionItem-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 0.5rem;
+      padding: 0 1rem;
+      height: 2.5rem;
+      border: none;
+      outline: none;
+
+      &__label {
+        white-space: nowrap;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0.125rem 0.25rem;
+        min-width: 0;
+        text-transform: uppercase;
+        color: var(--global-tertiary-TextColor);
+        border-radius: 0.25rem;
+      }
+      &__tools {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: 0.25rem;
+        min-width: 0;
+      }
+
+      &:hover .hulyAccordionItem-header__label {
+        color: var(--global-primary-TextColor);
+        background-color: var(--global-ui-hover-BackgroundColor);
+      }
+      &.selected .hulyAccordionItem-header__label {
+        color: var(--global-secondary-TextColor);
+        background-color: var(--global-ui-BackgroundColor);
+      }
+    }
+    .hulyAccordionItem-content {
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      padding-bottom: 0.75rem;
+      min-width: 0;
+      max-height: 100%;
+
+      &.collapsed {
+        padding-bottom: 0;
+        max-height: 0;
+      }
+    }
+  }
+  // :global(.hulyAccordionItem-container) + .hulyAccordionItem-container {
+  //   border-top: none;
+  // }
+</style>
--- a/plugins/setting-resources/src/components/NavItem.svelte
+++ b/plugins/setting-resources/src/components/NavItem.svelte
@ -0,0 +1,173 @@
+<!--
+// Copyright © 2021 Anticrm Platform Contributors.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { Asset, IntlString } from '@hcengineering/platform'
+  import { Icon, Label, IconOpenedArrow } from '@hcengineering/ui'
+
+  export let icon: Asset | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let type: 'type-link' | 'type-tag' | 'type-anchor-link' | 'type-object' = 'type-link'
+  export let color: string | null = null
+  export let count: number | null = null
+  export let selected: boolean = false
+  export let isFold: boolean = false
+</script>
+
+<button
+  class="hulyNavItem-container {type} {type === 'type-anchor-link' ? 'font-regular-12' : 'font-regular-14'}"
+  class:selected
+  on:click|stopPropagation
+>
+  <div class="hulyNavItem-icon">
+    {#if type !== 'type-tag' && icon}
+      <Icon {icon} size={'small'} />
+    {:else if type === 'type-tag'}
+      <div style:background-color={color} class="hulyNavItem-icon__tag" />
+    {/if}
+  </div>
+  <span class="hulyNavItem-label" style:color={type === 'type-tag' && selected ? color : null}>
+    {#if label}<Label {label} />{/if}
+  </span>
+  {#if count !== null}
+    <span class="hulyNavItem-count font-regular-12">
+      {count}
+    </span>
+  {/if}
+  {#if selected && type === 'type-link'}
+    <div class="hulyNavItem-icon right"><IconOpenedArrow size={'small'} /></div>
+  {/if}
+</button>
+
+<style lang="scss">
+  .hulyNavItem-container {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    padding: 0;
+    min-height: 2rem;
+    border: none;
+    border-radius: 0.375rem;
+    outline: none;
+
+    .hulyNavItem-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      width: 1rem;
+      height: 1rem;
+      color: var(--global-primary-TextColor);
+
+      &__tag {
+        flex-shrink: 0;
+        width: 0.875rem;
+        height: 0.875rem;
+        border-radius: 50%;
+      }
+      &.right {
+        visibility: hidden;
+        color: var(--global-accent-IconColor);
+      }
+    }
+    .hulyNavItem-label {
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-align: left;
+      min-width: 0;
+      color: var(--global-primary-TextColor);
+    }
+    .hulyNavItem-count {
+      color: var(--global-tertiary-TextColor);
+    }
+    &:not(.selected):hover {
+      background-color: var(--global-ui-hover-highlight-BackgroundColor);
+    }
+    &.selected {
+      cursor: auto;
+      background-color: var(--global-ui-highlight-BackgroundColor);
+
+      &:not(.type-anchor-link) .hulyNavItem-label {
+        font-weight: 700;
+      }
+      .hulyNavItem-count {
+        color: var(--global-secondary-TextColor);
+      }
+    }
+
+    &.type-link {
+      gap: 0.5rem;
+      padding: 0 0.625rem;
+
+      &.selected {
+        padding: 0 0.375rem 0 0.625rem;
+
+        .hulyNavItem-icon {
+          color: var(--global-accent-TextColor);
+        }
+        .hulyNavItem-label {
+          flex-grow: 1;
+          color: var(--global-accent-TextColor);
+        }
+        .hulyNavItem-icon.right {
+          visibility: visible;
+        }
+      }
+    }
+    &.type-tag {
+      gap: 0.5rem;
+      padding: 0 0.625rem;
+
+      .hulyNavItem-label {
+        flex-grow: 1;
+      }
+    }
+    &.type-object {
+      gap: 0.375rem;
+      padding: 0 0.625rem 0 0.25rem;
+
+      .hulyNavItem-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+        background-color: var(--global-ui-BackgroundColor);
+        border-radius: 0.25rem;
+      }
+      .hulyNavItem-label {
+        flex-grow: 1;
+      }
+      &.selected .hulyNavItem-label {
+        color: var(--global-accent-TextColor);
+      }
+    }
+    &.type-anchor-link {
+      gap: 0.5rem;
+      padding: 0 0.75rem 0 0.625rem;
+      min-height: 1.75rem;
+
+      .hulyNavItem-icon,
+      .hulyNavItem-label {
+        color: var(--global-secondary-TextColor);
+      }
+      .hulyNavItem-label {
+        font-weight: 500;
+      }
+      &.selected .hulyNavItem-icon,
+      &.selected .hulyNavItem-label {
+        color: var(--global-primary-TextColor);
+      }
+    }
+  }
+</style>
--- a/plugins/setting-resources/src/components/Profile.svelte
+++ b/plugins/setting-resources/src/components/Profile.svelte
@ -86,8 +86,8 @@

 <div class="antiComponent">
  <div class="ac-header short divide">
-    <div class="ac-header__icon"><Icon icon={setting.icon.EditProfile} size={'medium'} /></div>
-    <div class="ac-header__title"><Label label={setting.string.EditProfile} /></div>
+    <div class="ac-header__icon"><Icon icon={setting.icon.AccountSettings} size={'medium'} /></div>
+    <div class="ac-header__title"><Label label={setting.string.AccountSettings} /></div>
  </div>
  <div class="ac-body p-10">
    {#if employee}
--- a/plugins/setting-resources/src/components/Settings.svelte
+++ b/plugins/setting-resources/src/components/Settings.svelte
@ -30,11 +30,13 @@
    navigate,
    resolvedLocationStore,
    setMetadataLocalStorage,
-    showPopup
+    showPopup,
+    Label
  } from '@hcengineering/ui'
-  import { NavFooter, NavHeader } from '@hcengineering/workbench-resources'
+  import { NavFooter } from '@hcengineering/workbench-resources'
  import { onDestroy } from 'svelte'
-  import CategoryElement from './CategoryElement.svelte'
+  import NavItem from './NavItem.svelte'
+  import NavGroup from './NavGroup.svelte'

  export let visibleNav: boolean = true
  export let navFloat: boolean = false
@ -106,62 +108,53 @@
 <div class="flex h-full clear-mins">
  {#if visibleNav}
    <div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
-      <div class="antiPanel-wrap__content">
-        <NavHeader label={setting.string.Settings} />
+      <div class="antiPanel-wrap__content hulyNavPanel-container">
+        <div class="hulyNavPanel-header">
+          <Label label={setting.string.Settings} />
+        </div>

-        <Scroller>
-          {#each categories as _category, i}
-            {#if i > 0 && categories[i - 1].group !== _category.group}
-              <div class="antiNav-divider short line" />
-            {/if}
-            <CategoryElement
-              icon={_category.icon}
-              label={_category.label}
-              selected={_category.name === categoryId}
-              expandable={_category.expandable ?? _category._id === setting.ids.Setting}
-              on:click={() => {
-                selectCategory(_category.name)
-              }}
-            >
-              <svelte:fragment slot="tools">
-                {#if _category.extraComponents?.tools}
-                  <Component
-                    is={_category.extraComponents?.tools}
-                    props={{
-                      visibleNav,
-                      kind: 'tools',
-                      categoryName: _category.name
-                    }}
-                  />
-                {/if}
-              </svelte:fragment>
-            </CategoryElement>
-            {#if _category.extraComponents?.navigation}
-              <Component
-                is={_category.extraComponents?.navigation}
-                props={{
-                  visibleNav,
-                  kind: 'navigation',
-                  categoryName: _category.name
+        <Scroller shrink>
+          {#each categories as _category}
+            {#if _category.extraComponents?.navigation && (_category.expandable ?? _category._id === setting.ids.Setting)}
+              <NavGroup
+                label={_category.label}
+                categoryName={_category.name}
+                selected={_category.name === categoryId}
+                tools={_category.extraComponents?.tools}
+              >
+                <Component
+                  is={_category.extraComponents?.navigation}
+                  props={{
+                    kind: 'navigation',
+                    categoryName: _category.name
+                  }}
+                />
+              </NavGroup>
+            {:else}
+              <NavItem
+                icon={_category.icon}
+                label={_category.label}
+                selected={_category.name === categoryId}
+                on:click={() => {
+                  selectCategory(_category.name)
                }}
              />
            {/if}
          {/each}
-          <div class="antiNav-space" />
        </Scroller>

        <NavFooter split>
-          <CategoryElement
+          <NavItem
            icon={setting.icon.SelectWorkspace}
            label={setting.string.SelectWorkspace}
            on:click={selectWorkspace}
          />
-          <CategoryElement
+          <NavItem
            icon={login.icon.InviteWorkspace}
            label={setting.string.InviteWorkspace}
            on:click={inviteWorkspace}
          />
-          <CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
+          <NavItem icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
        </NavFooter>
      </div>
      <Separator
@ -185,3 +178,20 @@
    {/if}
  </div>
 </div>
+
+<style lang="scss">
+  .hulyNavPanel-container :global(.hulyNavItem-container),
+  .hulyNavPanel-container :global(.hulyTaskNavLink-container) {
+    margin: 0 0.75rem;
+  }
+  .hulyNavPanel-container :global(.hulyNavItem-container) + :global(.hulyAccordionItem-container) {
+    margin-top: 0.75rem;
+  }
+  .hulyNavPanel-header {
+    padding: 1rem 1.25rem 1.5rem;
+    font-weight: 700;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    color: var(--global-primary-TextColor);
+  }
+</style>
--- a/plugins/setting-resources/src/components/WorkspaceSettings.svelte
+++ b/plugins/setting-resources/src/components/WorkspaceSettings.svelte
@ -19,18 +19,17 @@
  import setting, { SettingsCategory } from '@hcengineering/setting'
  import { Component, Location, getCurrentResolvedLocation, navigate, resolvedLocationStore } from '@hcengineering/ui'
  import { onDestroy } from 'svelte'
-  import CategoryElement from './CategoryElement.svelte'
+  import NavItem from './NavItem.svelte'

  export let kind: 'navigation' | undefined
  export let categoryName: string
+
  let category: SettingsCategory | undefined
  let categoryId: string = ''

  let categories: SettingsCategory[] = []
  const account = getCurrentAccount() as PersonAccount

-  export let visibleNav = true
-
  const settingsQuery = createQuery()
  settingsQuery.query(
    setting.class.WorkspaceSettingCategory,
@ -69,26 +68,19 @@
 </script>

 {#if kind === 'navigation'}
-  <div class="ml-4 mt-2">
-    <div class="antiPanel-element">
-      {#each categories as category}
-        <CategoryElement
-          icon={category.icon}
-          label={category.label}
-          selected={category.name === categoryId}
-          on:click={() => {
-            selectCategory(category.name)
-          }}
-        />
-        {#if category.name === categoryId && category.extraComponents?.navigation}
-          <Component
-            is={category.extraComponents?.navigation}
-            props={{ kind: 'navigation', categoryName: categoryId }}
-          />
-        {/if}
-      {/each}
-    </div>
-  </div>
+  {#each categories as category}
+    <NavItem
+      icon={category.icon}
+      label={category.label}
+      selected={category.name === categoryId}
+      on:click={() => {
+        selectCategory(category.name)
+      }}
+    />
+    {#if category.name === categoryId && category.extraComponents?.navigation}
+      <Component is={category.extraComponents?.navigation} props={{ kind: 'navigation', categoryName: categoryId }} />
+    {/if}
+  {/each}
 {:else if category}
  <Component is={category.component} props={{ kind: 'content' }} />
 {/if}
--- a/plugins/setting/src/index.ts
+++ b/plugins/setting/src/index.ts
@ -143,7 +143,7 @@ export default plugin(settingId, {
  string: {
    Settings: '' as IntlString,
    Setting: '' as IntlString,
-    WorkspaceSetting: '' as IntlString,
+    WorkspaceSettings: '' as IntlString,
    Integrations: '' as IntlString,
    Support: '' as IntlString,
    Privacy: '' as IntlString,
@ -152,7 +152,7 @@ export default plugin(settingId, {
    Delete: '' as IntlString,
    Disconnect: '' as IntlString,
    Add: '' as IntlString,
-    EditProfile: '' as IntlString,
+    AccountSettings: '' as IntlString,
    ChangePassword: '' as IntlString,
    CurrentPassword: '' as IntlString,
    NewPassword: '' as IntlString,
@ -166,11 +166,13 @@ export default plugin(settingId, {
    SelectWorkspace: '' as IntlString,
    Reconnect: '' as IntlString,
    ClassSetting: '' as IntlString,
+    Classes: '' as IntlString,
    Owners: '' as IntlString,
    Configure: '' as IntlString
  },
  icon: {
-    EditProfile: '' as Asset,
+    AccountSettings: '' as Asset,
+    Owners: '' as Asset,
    Password: '' as Asset,
    Setting: '' as Asset,
    Integrations: '' as Asset,
@ -180,7 +182,8 @@ export default plugin(settingId, {
    Signout: '' as Asset,
    SelectWorkspace: '' as Asset,
    Clazz: '' as Asset,
-    Enums: '' as Asset
+    Enums: '' as Asset,
+    InviteSettings: '' as Asset
  },
  templateFieldCategory: {
    Integration: '' as Ref<TemplateFieldCategory>
--- a/plugins/task-resources/src/components/TemplatesIcon.svelte
+++ b/plugins/task-resources/src/components/TemplatesIcon.svelte
@ -1,11 +1,13 @@
 <script lang="ts">
  import { Icon, IconSize } from '@hcengineering/ui'
  import IconFolder from './icons/Folder.svelte'
+
  export let size: IconSize = 'small'
+  export let fill: string | undefined = undefined
 </script>

 <div class="flex-center template-icon">
-  <Icon icon={IconFolder} {size} />
+  <Icon icon={IconFolder} {size} {fill} />
 </div>

 <style lang="scss">
--- a/plugins/task-resources/src/components/projectTypes/ManageProjects.svelte
+++ b/plugins/task-resources/src/components/projectTypes/ManageProjects.svelte
@ -63,13 +63,11 @@
  $: type = typeId !== undefined ? typeMap.get(typeId) : undefined
 </script>

-<div class="ml-8 flex-row mt-1">
-  <Types
-    {type}
-    {typeId}
-    {types}
-    on:change={(evt) => {
-      selectProjectType(evt.detail)
-    }}
-  />
-</div>
+<Types
+  {type}
+  {typeId}
+  {types}
+  on:change={(evt) => {
+    selectProjectType(evt.detail)
+  }}
+/>
--- a/plugins/task-resources/src/components/projectTypes/Types.svelte
+++ b/plugins/task-resources/src/components/projectTypes/Types.svelte
@ -16,7 +16,7 @@
 <script lang="ts">
  import { Ref, WithLookup } from '@hcengineering/core'
  import { ProjectType } from '@hcengineering/task'
-  import { Component, Label, ListView } from '@hcengineering/ui'
+  import { Component, Label, IconOpenedArrow } from '@hcengineering/ui'
  import { createEventDispatcher } from 'svelte'

  export let type: ProjectType | undefined
@ -29,37 +29,121 @@
    typeId = item._id
    dispatch('change', typeId)
  }
-  $: selection = types.findIndex((it) => it._id === typeId)
 </script>

-<div id="templates" class="flex-col w-full">
-  <ListView
-    count={types.length}
-    {selection}
-    on:click={(evt) => {
-      select(types[evt.detail])
+{#each types as typeItem}
+  <button
+    class="hulyTaskNavLink-container font-regular-14"
+    class:selected={typeItem._id === typeId}
+    on:click={() => {
+      select(typeItem)
    }}
-    updateOnMouse={false}
  >
-    <svelte:fragment slot="item" let:item>
-      {@const typeItem = types[item]}
-      <div class="flex-row flex-between p-1">
-        <div class="flex-col">
-          <div class="flex-row-center">
-            {#if typeItem.$lookup?.descriptor?.icon}
-              <div class="p-1">
-                <Component is={typeItem.$lookup?.descriptor?.icon} props={{ size: 'medium' }} />
-              </div>
-            {/if}
-            {typeItem.name}
-          </div>
-          {#if typeItem.$lookup?.descriptor}
-            <div class="text-sm">
-              <Label label={typeItem.$lookup?.descriptor.name} />
-            </div>
-          {/if}
+    <div class="hulyTaskNavLink-avatar">
+      {#if typeItem.$lookup?.descriptor?.icon}
+        <div class="hulyTaskNavLink-icon">
+          <Component is={typeItem.$lookup?.descriptor?.icon} props={{ size: 'small', fill: 'currentColor' }} />
        </div>
+      {/if}
+    </div>
+    {#if typeItem.$lookup?.descriptor}
+      <div class="hulyTaskNavLink-content">
+        <span class="hulyTaskNavLink-content__title">{typeItem.name}</span>
+        <span class="hulyTaskNavLink-content__descriptor">
+          <Label label={typeItem.$lookup?.descriptor.name} />
+        </span>
      </div>
-    </svelte:fragment>
-  </ListView>
-</div>
+    {/if}
+    {#if typeItem._id === typeId}
+      <div class="hulyTaskNavLink-icon right">
+        <IconOpenedArrow size={'small'} />
+      </div>
+    {/if}
+  </button>
+{/each}
+
+<style lang="scss">
+  .hulyTaskNavLink-container {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 0.75rem;
+    padding: 0 0.75rem 0 0.5rem;
+    height: 3.5rem;
+    min-width: 0;
+    border: none;
+    border-radius: 0.375rem;
+    outline: none;
+
+    &.selected {
+      cursor: auto;
+    }
+    .hulyTaskNavLink-avatar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      width: 2.5rem;
+      height: 2.5rem;
+      min-width: 0;
+      background-color: var(--global-ui-BackgroundColor);
+      border-radius: 0.375rem;
+    }
+    .hulyTaskNavLink-icon {
+      flex-shrink: 0;
+      width: 1rem;
+      height: 1rem;
+      color: var(--global-secondary-TextColor);
+
+      &.right {
+        visibility: hidden;
+      }
+    }
+    .hulyTaskNavLink-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+      flex-grow: 1;
+      min-width: 0;
+      min-height: 0;
+
+      &__title,
+      &__descriptor {
+        white-space: nowrap;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: left;
+        min-width: 0;
+      }
+      &__title {
+        color: var(--global-primary-TextColor);
+      }
+      &__descriptor {
+        color: var(--global-secondary-TextColor);
+      }
+    }
+
+    &:hover {
+      background-color: var(--global-ui-hover-highlight-BackgroundColor);
+    }
+    &.selected {
+      background-color: var(--global-ui-highlight-BackgroundColor);
+
+      .hulyTaskNavLink-icon {
+        color: var(--global-accent-TextColor);
+
+        &.right {
+          visibility: visible;
+        }
+      }
+      .hulyTaskNavLink-content .hulyTaskNavLink-content__title {
+        font-weight: 700;
+        color: var(--global-accent-TextColor);
+      }
+      .hulyTaskNavLink-content .hulyTaskNavLink-content__descriptor {
+        color: var(--global-primary-TextColor);
+      }
+    }
+  }
+</style>
--- a/tests/sanity/tests/settings.spec.ts
+++ b/tests/sanity/tests/settings.spec.ts
@ -48,7 +48,8 @@ test.describe('contact tests', () => {
    // await page.hover('button:has-text("Settings")')
    await page.click('button:has-text("Settings")')
    // Click text=Workspace Notifications >> button
-    await page.click('.box > div:nth-child(4)')
+    // await page.click('.box > div:nth-child(4)')
+    await page.getByRole('button', { name: 'Notifications' }).click()
    await page.click('text="Text Templates"')
    // Click .flex-center.icon-button
    await page.click('#create-template')
@ -81,11 +82,12 @@ test.describe('contact tests', () => {
    // await page.hover('button:has-text("Settings")')
    await page.click('button:has-text("Settings")')
    // Click text=Workspace Notifications >> button
-    await page.click('.box > div:nth-child(4)')
+    // await page.click('.box > div:nth-child(4)')
+    await page.getByRole('button', { name: 'Notifications' }).click()
    // Click text=Vacancies
    await page.locator('#new-project-type').click()
-    await page.getByRole('button', { name: 'Recruiting' }).click()
-    await page.locator('#templates').getByText('New Recruiting project type').first().click()
+    await page.getByRole('button', { name: 'Recruiting', exact: true }).click()
+    await page.locator('#navGroup-statuses').getByText('New Recruiting project type').first().click()

    // TODO: Need rework.
    // // Click #create-template div