Update Kanban and Setting layouts (#651)

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

packages/theme/styles/_layouts.scss

@@ -193,14 +193,19 @@ p:last-child { margin-block-end: 0; }
 .ml-6 { margin-left: 1.5rem; }
 .mr-1 { margin-right: .25rem; }
 .mr-2 { margin-right: .5rem; }
+.mr-3 { margin-right: .75rem; }
 .mr-4 { margin-right: 1rem; }
 .mr-6 { margin-right: 1.5rem; }
 .mr-8 { margin-right: 2rem; }
 .mt-2 { margin-top: .5rem; }
+.mt-3 { margin-top: .75rem; }
+.mt-4 { margin-top: 1rem; }
 .mt-5 { margin-top: 1.25rem; }
+.mt-9 { margin-top: 2.25rem; }
 .mt-10 { margin-top: 2.5rem; }
 .mt-14 { margin-top: 3.5rem; }
 .mb-1 { margin-bottom: .25rem; }
+.mb-3 { margin-bottom: .75rem; }
 .mb-4 { margin-bottom: 1rem; }
 
 /* --------- */
@@ -244,7 +249,7 @@ p:last-child { margin-block-end: 0; }
 .square-36 { width: 2.25rem; height: 2.25rem; }
 
 /* --------- */
-.svg-xsmall {
+.svg-x-small {
   width: 0.857em;
   height: 0.857em;
 }
@@ -300,6 +305,13 @@ a.no-line {
   color: var(--theme-caption-color);
   user-select: none;
 }
+.trans-title {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: .75rem;
+  color: var(--theme-content-trans-color);
+  user-select: none;
+}
 .fs-bold { font-weight: 500; }
 
 .over-underline {
@@ -342,6 +354,11 @@ a.no-line {
   }
 }
 
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-auto { overflow-y: auto; }
+
+.scroll-m-10::-webkit-scrollbar-track { margin: 2.5rem; }
+
 /* Backgrounds & Colors */
 .background-theme-bg-color { background-color: var(--theme-bg-color); }
 .background-highlight-red { background-color: var(--highlight-red); }

packages/ui/src/components/Icon.svelte

@@ -17,7 +17,7 @@
   import { AnySvelteComponent } from '../types';
 
   export let icon: Asset | AnySvelteComponent
-  export let size: 'xsmall' | 'small' | 'medium' | 'large'
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
   export let fill = 'currentColor'
   export let filled: boolean = false
 
@@ -42,7 +42,7 @@
 {/if}
 
 <style lang="scss">
-  .xsmall {
+  .x-small {
     width: 0.857em;
     height: 0.857em;
   }

plugins/lead-assets/assets/icons.svg

@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="funnel" viewBox="0 0 16 16">
-    <path d="M14,9.6h-3.2l0.4-3.2H14c0.3,0,0.6-0.3,0.6-0.6S14.3,5.2,14,5.2h-2.7l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7 c-0.3,0-0.6,0.2-0.7,0.5l-0.4,3.8H6.9l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7c-0.3,0-0.6,0.2-0.7,0.5L5.7,5.2H2.3C2,5.2,1.7,5.5,1.7,5.8 S2,6.4,2.3,6.4h3.2L5.2,9.6H2.3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.7l-0.4,3.7c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0 c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8h3.2L9,14.5c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8H14 c0.3,0,0.6-0.3,0.6-0.6S14.3,9.6,14,9.6z M6.4,9.6l0.4-3.2h3.2L9.6,9.6H6.4z"/>
+    <path d="M13.2,9.4h-2.8l0.3-2.7h2.5c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-2.4l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6 c-0.3,0-0.5,0.2-0.6,0.4L9.8,5.6H7.1l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6c-0.3,0-0.5,0.2-0.6,0.4L6.1,5.6H3.2c-0.3,0-0.5,0.2-0.5,0.5 s0.2,0.5,0.5,0.5h2.8L5.6,9.4H3.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.4l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0 c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.7l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.9 c0.3,0,0.5-0.2,0.5-0.5S13.4,9.4,13.2,9.4z M6.6,9.4l0.3-2.7h2.7L9.4,9.4H6.6z"/>
   </symbol>
   <symbol id="leadapplication" viewBox="0 0 16 16">
-    <path d="M14,9.6h-3.2l0.4-3.2H14c0.3,0,0.6-0.3,0.6-0.6S14.3,5.2,14,5.2h-2.7l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7 c-0.3,0-0.6,0.2-0.7,0.5l-0.4,3.8H6.9l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7c-0.3,0-0.6,0.2-0.7,0.5L5.7,5.2H2.3C2,5.2,1.7,5.5,1.7,5.8 S2,6.4,2.3,6.4h3.2L5.2,9.6H2.3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.7l-0.4,3.7c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0 c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8h3.2L9,14.5c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8H14 c0.3,0,0.6-0.3,0.6-0.6S14.3,9.6,14,9.6z M6.4,9.6l0.4-3.2h3.2L9.6,9.6H6.4z"/>
+    <path d="M13.2,9.4h-2.8l0.3-2.7h2.5c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-2.4l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6 c-0.3,0-0.5,0.2-0.6,0.4L9.8,5.6H7.1l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6c-0.3,0-0.5,0.2-0.6,0.4L6.1,5.6H3.2c-0.3,0-0.5,0.2-0.5,0.5 s0.2,0.5,0.5,0.5h2.8L5.6,9.4H3.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.4l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0 c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.7l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.9 c0.3,0,0.5-0.2,0.5-0.5S13.4,9.4,13.2,9.4z M6.6,9.4l0.3-2.7h2.7L9.4,9.4H6.6z"/>
   </symbol>
-    <symbol id="lead" viewBox="0 0 16 16">
+  <symbol id="lead" viewBox="0 0 16 16">
-    <path d="M14,9.6h-3.2l0.4-3.2H14c0.3,0,0.6-0.3,0.6-0.6S14.3,5.2,14,5.2h-2.7l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7 c-0.3,0-0.6,0.2-0.7,0.5l-0.4,3.8H6.9l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7c-0.3,0-0.6,0.2-0.7,0.5L5.7,5.2H2.3C2,5.2,1.7,5.5,1.7,5.8 S2,6.4,2.3,6.4h3.2L5.2,9.6H2.3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.7l-0.4,3.7c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0 c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8h3.2L9,14.5c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8H14 c0.3,0,0.6-0.3,0.6-0.6S14.3,9.6,14,9.6z M6.4,9.6l0.4-3.2h3.2L9.6,9.6H6.4z"/>
+    <path d="M13.2,9.4h-2.8l0.3-2.7h2.5c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-2.4l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6 c-0.3,0-0.5,0.2-0.6,0.4L9.8,5.6H7.1l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6c-0.3,0-0.5,0.2-0.6,0.4L6.1,5.6H3.2c-0.3,0-0.5,0.2-0.5,0.5 s0.2,0.5,0.5,0.5h2.8L5.6,9.4H3.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.4l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0 c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.7l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.9 c0.3,0,0.5-0.2,0.5-0.5S13.4,9.4,13.2,9.4z M6.6,9.4l0.3-2.7h2.7L9.4,9.4H6.6z"/>
   </symbol>
 </svg>

plugins/lead-resources/src/components/TemplatesIcon.svelte

@@ -3,16 +3,12 @@
   import lead from '@anticrm/lead'
 </script>
 
-<div class="root">
+<div class="flex-center template-icon">
-  <Icon icon={lead.icon.LeadApplication} size="xsmall" />
+  <Icon icon={lead.icon.LeadApplication} size="small" />
 </div>
 
 <style lang="scss">
-  .root {
+  .template-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
     width: 100%;
     height: 100%;
     color: #fff;

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

@@ -2,16 +2,12 @@
   import VacancyIcon from './icons/Vacancy.svelte'
 </script>
 
-<div class="root">
+<div class="flex-center template-icon">
-  <VacancyIcon size="xsmall" />
+  <VacancyIcon size="small" />
 </div>
 
 <style lang="scss">
-  .root {
+  .template-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
     width: 100%;
     height: 100%;
     color: #fff;

plugins/recruit-resources/src/components/icons/Vacancy.svelte

@@ -15,11 +15,11 @@
 -->
 
 <script lang="ts">
-  export let size: 'xsmall' | 'small' | 'medium' | 'large'
+  export let size: 'x-small' | '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 d="M12.9,2.1h-1.5C11.2,0.9,10.2,0,9,0H7C5.8,0,4.8,0.9,4.6,2.1H3.1C1.4,2.1,0,3.5,0,5.2V8c0,0.2,0.1,0.5,0.3,0.6 c2.1,1.3,4.8,2,7.7,2c2.8,0,5.6-0.7,7.7-2C15.9,8.4,16,8.2,16,8V5.2C16,3.5,14.6,2.1,12.9,2.1z M7,1.3h2c0.5,0,0.9,0.3,1,0.7H6 C6.1,1.6,6.5,1.3,7,1.3z M14.7,7.6c-1.9,1-4.2,1.6-6.7,1.6c-2.4,0-4.8-0.6-6.7-1.6V5.2c0-1,0.8-1.8,1.8-1.8h9.8 c1,0,1.8,0.8,1.8,1.8V7.6z"/>
+  <path d="M11.7,3.6h-1.1C10.4,2.7,9.7,2,8.8,2H7.2C6.3,2,5.6,2.7,5.4,3.6H4.3C3,3.6,2,4.6,2,5.9V8c0,0.2,0.1,0.3,0.2,0.4 C3.8,9.4,5.9,9.9,8,9.9c2.1,0,4.2-0.5,5.8-1.5C13.9,8.3,14,8.2,14,8V5.9C14,4.6,13,3.6,11.7,3.6z M7.2,3h1.5c0.4,0,0.6,0.2,0.8,0.6 H6.5C6.6,3.2,6.9,3,7.2,3z M13,7.7c-1.4,0.8-3.2,1.2-5,1.2c-1.8,0-3.6-0.4-5-1.2V5.9c0-0.7,0.6-1.3,1.3-1.3h7.4 c0.7,0,1.3,0.6,1.3,1.3V7.7z"/>
-  <path d="M15.4,10.2c-0.4,0-0.7,0.2-0.7,0.6l-0.1,2c-0.1,1-0.9,1.8-1.9,1.8H3.4c-1,0-1.8-0.8-1.9-1.8l-0.2-2 c0-0.4-0.3-0.6-0.7-0.6C0.3,10.3,0,10.6,0,11l0.2,2c0.1,1.7,1.5,3,3.2,3h9.2c1.7,0,3.1-1.3,3.2-3l0.1-2 C16,10.6,15.7,10.3,15.4,10.2z"/>
+  <path d="M13.5,9.7c-0.3,0-0.5,0.2-0.5,0.5l-0.1,1.5c-0.1,0.8-0.7,1.3-1.4,1.3H4.5c-0.7,0-1.4-0.6-1.4-1.3L3,10.1 c0-0.3-0.3-0.5-0.5-0.5C2.2,9.7,2,9.9,2,10.2l0.1,1.5C2.2,13,3.3,14,4.5,14h6.9c1.3,0,2.3-1,2.4-2.3l0.1-1.5 C14,9.9,13.8,9.7,13.5,9.7z"/>
 </svg>

plugins/setting-assets/assets/icons.svg

@@ -19,9 +19,8 @@
     <path d="M4,7.7h0.8c0.3,0,0.6-0.3,0.6-0.6S5.1,6.5,4.8,6.5H4c-0.3,0-0.6,0.3-0.6,0.6S3.6,7.7,4,7.7z"/>
     <path d="M6.4,9.7H4c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.4c0.3,0,0.6-0.3,0.6-0.6S6.7,9.7,6.4,9.7z"/>
   </symbol>
-
   <symbol id="statuses" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6974 5.2801C13.0712 3.98287 12.0184 2.93015 10.7212 2.30405C10.4726 2.53359 10.2795 2.82225 10.1641 3.14771C11.3555 3.68588 12.3155 4.64586 12.8537 5.83725C13.1792 5.72184 13.4678 5.52868 13.6974 5.2801ZM7.69387 2.68004C4.84738 2.81598 2.5813 5.16687 2.5813 8.04703C2.5813 11.0146 4.98696 13.4202 7.9545 13.4202C10.8347 13.4202 13.1857 11.154 13.3215 8.30742C13.6748 8.21476 14.0115 8.08119 14.3263 7.91209C14.3272 7.95696 14.3277 8.00193 14.3277 8.04703C14.3277 11.5668 11.4743 14.4202 7.9545 14.4202C4.43468 14.4202 1.5813 11.5668 1.5813 8.04703C1.5813 4.52721 4.43468 1.67383 7.9545 1.67383C7.9995 1.67383 8.04438 1.67429 8.08916 1.67522C7.92007 1.99002 7.78652 2.32675 7.69387 2.68004Z"/>
+    <path d="M13.3,8.3c-0.1,2.8-2.5,5.1-5.4,5.1C5,13.4,2.6,11,2.6,8c0-2.9,2.3-5.2,5.1-5.4c0.1-0.4,0.2-0.7,0.4-1c0,0-0.1,0-0.1,0 C4.4,1.7,1.6,4.5,1.6,8c0,3.5,2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4c0,0,0-0.1,0-0.1C14,8.1,13.7,8.2,13.3,8.3z"/>
-    <ellipse cx="12.1497" cy="3.85107" rx="2.51709" ry="2.51708"/>
+    <ellipse cx="12.1" cy="3.9" rx="2.5" ry="2.5"/>
   </symbol>
 </svg>

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

@@ -18,6 +18,7 @@
   import setting from '@anticrm/setting'
   import type { Integration, IntegrationType } from '@anticrm/setting'
   import PluginCard from './PluginCard.svelte'
+  import { Icon, Label } from '@anticrm/ui'
 
   const accountId = getCurrentAccount()._id
   const typeQuery = createQuery()
@@ -30,13 +31,26 @@
   integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
 </script>
 
-<div class="cards-container">
+<div class="flex-col h-full">
-  {#each integrationTypes as integrationType (integrationType._id)}
+  <div class="flex-row-center header">
-    <PluginCard integration={integrations.find((p) => p.type === integrationType._id)} {integrationType} />
+    <div class="content-color mr-3"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
-  {/each}
+    <div class="fs-title"><Label label={setting.string.Integrations}/></div>
+  </div>
+  <div class="cards-container">
+    {#each integrationTypes as integrationType (integrationType._id)}
+      <PluginCard integration={integrations.find((p) => p.type === integrationType._id)} {integrationType} />
+    {/each}
+  </div>
 </div>
 
 <style lang="scss">
+  .header {
+    padding: 0 1.75rem 0 2.5rem;
+    height: 4rem;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+  }
+
   .cards-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, auto));

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

@@ -0,0 +1,49 @@
+<!--
+// Copyright © 2020, 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
+  import { createQuery } from '@anticrm/presentation'
+  import setting from '@anticrm/setting'
+  import type { Integration, IntegrationType } from '@anticrm/setting'
+  import PluginCard from './PluginCard.svelte'
+  import { Icon, Label } from '@anticrm/ui'
+
+  // const accountId = getCurrentAccount()._id
+  // const typeQuery = createQuery()
+  // const integrationQuery = createQuery()
+
+  // let integrations: Integration[] = []
+  // let integrationTypes: IntegrationType[] = []
+
+  // typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
+  // integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
+</script>
+
+<div class="flex-col h-full">
+  <div class="flex-row-center header">
+    <div class="content-color mr-3"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
+    <div class="fs-title"><Label label={setting.string.Privacy}/></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .header {
+    padding: 0 1.75rem 0 2.5rem;
+    height: 4rem;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+  }
+</style>

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

@@ -0,0 +1,49 @@
+<!--
+// Copyright © 2020, 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
+  import { createQuery } from '@anticrm/presentation'
+  import setting from '@anticrm/setting'
+  import type { Integration, IntegrationType } from '@anticrm/setting'
+  import PluginCard from './PluginCard.svelte'
+  import { Icon, Label } from '@anticrm/ui'
+
+  // const accountId = getCurrentAccount()._id
+  // const typeQuery = createQuery()
+  // const integrationQuery = createQuery()
+
+  // let integrations: Integration[] = []
+  // let integrationTypes: IntegrationType[] = []
+
+  // typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
+  // integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
+</script>
+
+<div class="flex-col h-full">
+  <div class="flex-row-center header">
+    <div class="content-color mr-3"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
+    <div class="fs-title"><Label label={setting.string.Setting}/></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .header {
+    padding: 0 1.75rem 0 2.5rem;
+    height: 4rem;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+  }
+</style>

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

@@ -0,0 +1,49 @@
+<!--
+// Copyright © 2020, 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
+  import { createQuery } from '@anticrm/presentation'
+  import setting from '@anticrm/setting'
+  import type { Integration, IntegrationType } from '@anticrm/setting'
+  import PluginCard from './PluginCard.svelte'
+  import { Icon, Label } from '@anticrm/ui'
+
+  // const accountId = getCurrentAccount()._id
+  // const typeQuery = createQuery()
+  // const integrationQuery = createQuery()
+
+  // let integrations: Integration[] = []
+  // let integrationTypes: IntegrationType[] = []
+
+  // typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
+  // integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
+</script>
+
+<div class="flex-col h-full">
+  <div class="flex-row-center header">
+    <div class="content-color mr-3"><Icon icon={setting.icon.Support} size={'medium'} /></div>
+    <div class="fs-title"><Label label={setting.string.Support}/></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .header {
+    padding: 0 1.75rem 0 2.5rem;
+    height: 4rem;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+  }
+</style>

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

@@ -0,0 +1,49 @@
+<!--
+// Copyright © 2020, 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
+  import { createQuery } from '@anticrm/presentation'
+  import setting from '@anticrm/setting'
+  import type { Integration, IntegrationType } from '@anticrm/setting'
+  import PluginCard from './PluginCard.svelte'
+  import { Icon, Label } from '@anticrm/ui'
+
+  // const accountId = getCurrentAccount()._id
+  // const typeQuery = createQuery()
+  // const integrationQuery = createQuery()
+
+  // let integrations: Integration[] = []
+  // let integrationTypes: IntegrationType[] = []
+
+  // typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
+  // integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
+</script>
+
+<div class="flex-col h-full">
+  <div class="flex-row-center header">
+    <div class="content-color mr-3"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
+    <div class="fs-title"><Label label={setting.string.Terms}/></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .header {
+    padding: 0 1.75rem 0 2.5rem;
+    height: 4rem;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+  }
+</style>

plugins/setting-resources/src/components/icons/ArrowRight.svelte

@@ -0,0 +1,24 @@
+<!--
+// 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">
+  <polygon points="6.4,14.4 5.6,13.6 11.3,8 5.6,2.4 6.4,1.6 12.7,8 "/>
+</svg>

plugins/setting-resources/src/components/statuses/Folders.svelte

@@ -19,6 +19,7 @@
   import { Label, Component } from '@anticrm/ui'
   import task, { KanbanTemplateSpace } from '@anticrm/task'
   import setting from '@anticrm/setting'
+  import IconArrowRight from '../icons/ArrowRight.svelte'
 
 
   export let folder: KanbanTemplateSpace | undefined
@@ -35,86 +36,52 @@
   }
 </script>
 
-<div class="root flex-col w-full">
+<div class="flex-between trans-title header mb-3">
-  <div class="header">
+  <Label label={setting.string.Folders}/>
-    <Label label={setting.string.Folders}/>
+</div>
-  </div>
+<div class="flex-col overflow-y-auto">
-  <div class="content">
+  {#each folders as f (f._id)}
-    {#each folders as f (f._id)}
+    <div class="flex-between item" class:selected={f._id === folder?._id} on:click={() => select(f)}>
-      <div class="item" class:selected={f._id === folder?._id} on:click={() => select(f)}>
+      <div class="icon mr-4">
-        <div class="item-icon">
+        <Component is={f.icon}/>
-          <Component is={f.icon}/>
+      </div>
+      <div class="flex-grow flex-col">
+        <div class="fs-title overflow-label">
+          {f.name}
         </div>
-        <div class="item-content">
+        <div class="small-text content-dark-color overflow-label">
-          <div class="item-name">
+          {f.description}
-            {f.name}
-          </div>
-          <div class="item-description">
-            {f.description}
-          </div>
         </div>
       </div>
-    {/each}
+      {#if f._id === folder?._id}
-  </div>
+        <div class="caption-color ml-4"><IconArrowRight size={'small'} /></div>
+      {/if}
+    </div>
+  {/each}
 </div>
 
 <style lang="scss">
-  .root {
+  .header { min-height: 1.75rem; }
-    gap: 1rem;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--theme-content-trans-color);
-    font-size: 0.75rem;
-    height: 1.75rem;
-  }
-
-  .content {
-    display: flex; 
-    flex-direction: column;
-    
-    overflow-y: auto;
-  }
-
   .item {
-    display: flex;
+    padding: 1.25rem 1rem 1.25rem 1.25rem;
-    padding: 20px;
+    background-color: var(--theme-button-bg-enabled);
-
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
     cursor: pointer;
 
-    &:hover, &.selected {
+    &:hover { background-color: var(--theme-button-bg-hovered); }
-      background-color: var(--theme-button-bg-enabled);
+    &.selected {
-      border-radius: 12px;
+      background-color: var(--theme-button-bg-pressed);
+      border-color: var(--theme-bg-accent-color);
+      cursor: auto;
     }
   }
+  .item + .item { margin-top: .75rem; }
 
-  .item-icon {
+  .icon {
-    width: 36px;
+    width: 2.25rem;
-    height: 36px;
+    height: 2.25rem;
     border-radius: 50%;
     overflow: hidden;
-
-    margin-right: 1rem;
-  }
-
-  .item-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .item-name {
-    color: var(--theme-caption-color);
-    font-size: 1rem;
-    font-weight: 500;
-  }
-
-  .item-description {
-    color: var(--theme-content-dark-color);
   }
 </style>

plugins/setting-resources/src/components/statuses/ManageStatuses.svelte

@@ -51,21 +51,21 @@
   }
 </script>
 
-<div class="root">
+<div class="flex-col h-full">
-  <div class="header">
+  <div class="flex-row-center header">
-    <Icon icon={setting.icon.Statuses} size="large"/>
+    <div class="content-color mr-3"><Icon icon={setting.icon.Statuses} size={'medium'} /></div>
-    <Label label={setting.string.ManageStatuses}/>
+    <div class="fs-title"><Label label={setting.string.ManageStatuses}/></div>
   </div>
-  <div class="content">
+  <div class="flex-row-top h-full overflow-x-auto scroll-m-10">
-    <div class="folders flex-stretch">
+    <div class="flex-col section">
       <Folders bind:folder={folder}/>
     </div>
-    <div class="templates flex-stretch">
+    <div class="flex-col section">
       {#if folder !== undefined}
         <Templates {folder} bind:template={template}/>
       {/if}
     </div>
-    <div class="statuses flex-stretch">
+    <div class="flex-col section max">
       {#if template !== undefined}
         <KanbanTemplateEditor kanban={template} on:delete={(e) => deleteState(e.detail)}/>
       {/if}
@@ -74,52 +74,25 @@
 </div>
 
 <style lang="scss">
-  .root {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
   .header {
-    display: flex;
+    padding: 0 1.75rem 0 2.5rem;
-    align-items: center;
+    height: 4rem;
-    gap: 10px;
+    min-height: 4rem;
-
+    border-bottom: 1px solid var(--theme-menu-divider);
-    padding: 24px 42px;
-    border-bottom: 1px solid var(--theme-bg-accent-hover);
-
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--theme-caption-color);
   }
 
-  .content {
+  .section {
-    display: flex;
+    overflow-y: auto;
-    align-items: stretch;
+    padding: 1.75rem 2.5rem;
+    min-width: 25rem;
+    max-width: 25rem;
     height: 100%;
-    width: 100%;
+    border-right: 1px solid var(--theme-menu-divider);
-    overflow: auto;
+    
-  }
+    &.max {
-
+      width: 40rem;
-  .folders {
+      max-width: 40rem;
-    width: 380px;
+      border-right: none;
-    padding: 2rem 2.5rem 1rem;
+    }
-    flex-shrink: 0;
-    flex-grow: 0;
-    border-right: 1px solid var(--theme-bg-accent-hover);
-  }
-
-  .templates {
-    width: 380px;
-    padding: 2rem 2.5rem 1rem;
-    flex-shrink: 0;
-    flex-grow: 0;
-    border-right: 1px solid var(--theme-bg-accent-hover);
-  }
-
-  .statuses {
-    width: 100%;
-    padding: 2rem 2.5rem 1rem;
-    flex-grow: 1;
   }
 </style>

plugins/setting-resources/src/components/statuses/Templates.svelte

@@ -100,60 +100,38 @@
   }
 </script>
 
-<div class="root flex-col w-full">
+<div class="flex-between trans-title mb-3">
-  <div class="header">
+  <Label label={setting.string.Templates}/>
-    <Label label={setting.string.Templates}/>
+  <CircleButton icon={IconAdd} size="medium" on:click={createTemplate} />
-    <CircleButton icon={IconAdd} size="medium" on:click={createTemplate} />
+</div>
-  </div>
+<div class="flex-col overflow-y-auto">
-  <div class="content">
+  {#each templates as t (t._id)}
-    {#each templates as t (t._id)}
+    <div class="flex-between item" class:selected={t._id === template?._id} on:click={() => select(t)}>
-      <div class="item flex-between" class:selected={t._id === template?._id} on:click={() => select(t)}>
+      <AttributeEditor maxWidth={'18rem'} _class={task.class.KanbanTemplate} object={t} key="title"/>
-        <AttributeEditor maxWidth="20rem" _class={task.class.KanbanTemplate} object={t} key="title"/>
+      <div class="hover-trans"
-        <div class="tool hover-trans"
+        on:click|stopPropagation={(ev) => {
-          on:click|stopPropagation={(ev) => {
+          showPopup(ContextMenu, { object: t }, ev.target, () => {})
-            showPopup(ContextMenu, { object: t }, ev.target, () => {})
+        }}
-          }}
+      >
-        >
+        <IconMoreH size={'medium'} />
-          <IconMoreH size="medium" />
-        </div>
       </div>
-    {/each}
+    </div>
-  </div>
+  {/each}
 </div>
 
 <style lang="scss">
-  .root {
-    gap: 1rem;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--theme-content-trans-color);
-    font-size: 0.75rem;
-
-    height: 1.75rem;
-  }
-
-  .content {
-    display: flex; 
-    flex-direction: column;
-
-    overflow-y: auto;
-  }
-
   .item {
-    padding: 10px 20px;
+    min-height: 2.5rem;
-
+    padding: 0 1.25rem;
+    border: 1px solid transparent;
+    border-radius: 12px;
     cursor: pointer;
 
-    &:hover, &.selected {
+    &:hover { background-color: var(--theme-bg-accent-color); }
+    &.selected {
       background-color: var(--theme-button-bg-enabled);
-      border-radius: 12px;
+      border-color: var(--theme-bg-accent-color);
+      cursor: auto;
     }
   }
 </style>

plugins/setting-resources/src/index.ts

@@ -13,14 +13,22 @@
 // limitations under the License.
 //
 
+import Setting from './components/Setting.svelte'
 import Integrations from './components/Integrations.svelte'
-import ConnectEmail from './components/integrations/ConnectEmail.svelte'
 import ManageStatuses from './components/statuses/ManageStatuses.svelte'
+import Support from './components/Support.svelte'
+import Privacy from './components/Privacy.svelte'
+import Terms from './components/Terms.svelte'
+import ConnectEmail from './components/integrations/ConnectEmail.svelte'
 import IconGmail from './components/icons/Gmail.svelte'
 
 export default async () => ({
   component: {
+    Setting,
     Integrations,
+    Support,
+    Privacy,
+    Terms,
     ConnectEmail,
     IconGmail,
     ManageStatuses

plugins/task-resources/src/components/CreateTask.svelte

@@ -120,52 +120,3 @@
     />
   </Grid>
 </Card>
-
-<style lang="scss">
-  .channels {
-    margin-top: 1.25rem;
-    span {
-      margin-left: 0.5rem;
-    }
-  }
-
-  .locations {
-    span {
-      margin-bottom: 0.125rem;
-      font-weight: 500;
-      font-size: 0.75rem;
-      color: var(--theme-content-accent-color);
-    }
-
-    .row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: 0.75rem;
-      color: var(--theme-caption-color);
-    }
-  }
-
-  .separator {
-    margin: 1rem 0;
-    height: 1px;
-    background-color: var(--theme-card-divider);
-  }
-
-  .resume {
-    margin-top: 1rem;
-    padding: 0.75rem;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px dashed rgba(255, 255, 255, 0.2);
-    border-radius: 0.5rem;
-    backdrop-filter: blur(10px);
-    &.solid {
-      border-style: solid;
-    }
-  }
-  // .resume a {
-  //   font-size: .75rem;
-  //   color: var(--theme-content-dark-color);
-  //   &:hover { color: var(--theme-content-color); }
-  // }
-</style>

plugins/task-resources/src/components/TemplatesIcon.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
   import { Icon } from '@anticrm/ui'
-  import task from '@anticrm/task'
+  import IconFolder from './icons/Folder.svelte'
 </script>
 
-<div class="root">
+<div class="flex-center template-icon">
-  <Icon icon={task.icon.Task} size="xsmall" />
+  <Icon icon={IconFolder} size="small" />
 </div>
 
 <style lang="scss">
-  .root {
+  .template-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
     width: 100%;
     height: 100%;
     color: #fff;

plugins/task-resources/src/components/icons/Folder.svelte

@@ -0,0 +1,24 @@
+<!--
+// 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 d="M14.5,6.7c0-2,0-3-0.7-3.8C13,2.2,12,2.2,10,2.2H6c-0.2,0-0.4,0-0.6,0l-0.1,0v0c-1.5,0-2.5,0.1-3.1,0.7 C1.5,3.6,1.5,4.7,1.5,6.7v2.7c0,2,0,3,0.7,3.8C3,13.8,4,13.8,6,13.8h4c2,0,3,0,3.8-0.7c0.5-0.5,0.7-1.3,0.7-2.4h0V10 c0-0.1,0-0.3,0-0.4c0-0.1,0-0.2,0-0.3V6.7z M13.1,3.6c0.4,0.4,0.4,1.3,0.4,3.1v0c-0.1-0.1-0.2-0.2-0.3-0.2c-0.6-0.3-1.2-0.3-2.5-0.3 c-0.7,0-1.1,0-1.3-0.1C9.2,6,9,5.9,8.9,5.8C8.7,5.6,8.5,5.3,8.2,4.6L7.6,3.5C7.6,3.3,7.5,3.3,7.4,3.2H10C11.7,3.2,12.6,3.2,13.1,3.6 z M10,12.8H6c-1.7,0-2.6,0-3.1-0.4C2.5,12,2.5,11.1,2.5,9.3V6.7c0-1.7,0-2.6,0.4-3.1c0.4-0.4,1.1-0.4,2.5-0.4l0.1,0 c0.5,0,1,0.3,1.2,0.8l0.6,1.1c0.4,0.7,0.6,1.1,0.9,1.4C8.4,6.7,8.7,6.9,9,7c0.4,0.2,0.9,0.2,1.7,0.2c1.1,0,1.7,0,2,0.2 c0.2,0.1,0.4,0.3,0.6,0.6c0.2,0.3,0.2,0.9,0.2,1.9c0,1.4,0,2.2-0.4,2.6C12.6,12.8,11.7,12.8,10,12.8z"/>
+</svg>

plugins/task-resources/src/components/kanban/KanbanPanel.svelte

@@ -50,7 +50,7 @@
     align-items: stretch;
     width: 20rem;
     height: 100%;
-    background-color: var(--theme-button-bg-enabled);
+    background-color: var(--theme-bg-color);
     border: 1px solid var(--theme-bg-accent-color);
     border-radius: .75rem;
 

plugins/task-resources/src/components/kanban/KanbanPanelEmpty.svelte

@@ -40,7 +40,7 @@
     height: 100%;
     padding: .75rem;
     color: var(--theme-caption-color);
-    background-color: var(--theme-button-bg-enabled);
+    background-color: var(--theme-bg-color);
     border: 1px dotted var(--theme-bg-accent-color);
     border-radius: .75rem;
     cursor: pointer;
@@ -59,9 +59,7 @@
     }
 
     &:hover {
-      background-color: var(--theme-bg-accent-hover);
+      background-color: var(--theme-bg-accent-color);
-      box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .15);
-
       .circle .icon { opacity: 1; }
     }
   }

plugins/task-resources/src/components/kanban/KanbanView.svelte

@@ -209,7 +209,7 @@
   {#if isDragging && wonState !== undefined && lostState !== undefined}
     <div class="done-panel">
       <div
-        class="done-item flex-center w-full" 
+        class="flex-grow flex-center done-item" 
         class:hovered={hoveredDoneState === wonState._id}
         on:dragenter={() => {
           hoveredDoneState = wonState?._id
@@ -219,11 +219,11 @@
         }}
         on:dragover|preventDefault={() => {}}
         on:drop={onDone(wonState)}>
-        <div class="done-icon won"/>
+        <div class="done-icon won mr-2"/>
         {wonState.title}
       </div>
       <div
-        class="done-item flex-center w-full"
+        class="flex-grow flex-center done-item"
         class:hovered={hoveredDoneState === lostState._id}
         on:dragenter={() => {
           console.log('enter')
@@ -235,7 +235,7 @@
         }}
         on:dragover|preventDefault={() => {}}
         on:drop={onDone(lostState)}>
-        <div class="done-icon lost"/>
+        <div class="done-icon lost mr-2"/>
         {lostState.title}
       </div>
     </div>
@@ -245,6 +245,7 @@
 
 <style lang="scss">
   .kanban-container {
+    position: relative;
     height: 100%;
   }
   .kanban-content {
@@ -254,42 +255,42 @@
   }
 
   .done-panel {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+
     display: flex;
-    align-items: stretch;
+    align-items: center;
     justify-content: stretch;
-    height: 4rem;
+    padding: .5rem 2.5rem;
-    border-top: 1px solid var(--theme-bg-accent-hover);
+    background-color: var(--theme-bg-color);
+    border-top: 1px solid var(--theme-dialog-divider);
   }
 
   .done-item {
-    gap: 0.5rem;
+    height: 3rem;
-    color: var(--theme-content-accent-color);
+    color: var(--theme-caption-color);
-
+    border: 1px dashed transparent;
-    margin: 0.5rem 2.5rem;
+    border-radius: .75rem;
 
     &.hovered {
-      background-color: var(--theme-bg-selection);
+      background-color: var(--theme-button-bg-enabled);
-      border-radius: 12px;
+      border-color: var(--theme-dialog-divider);
-      border: 1px dashed var(--theme-bg-accent-hover);
     }
   }
 
   .done-icon {
-    width: 0.5rem;
+    width: .5rem;
-    height: 0.5rem;
+    height: .5rem;
-
     border-radius: 50%;
 
-    &.won {
+    &.won { background-color: #27B166; }
-      background-color: #a5d179;
+    &.lost { background-color: #F96E50; }
-    }
-
-    &.lost {
-      background-color: #f28469;
-    }
   }
+
   .scrollable {
     height: 100%;
-    margin-bottom: 0.25rem;
+    margin-bottom: .25rem;
   }
 </style>

plugins/task-resources/src/components/state/StatesEditor.svelte

@@ -13,6 +13,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   import { Ref } from '@anticrm/core'
   import { AttributeEditor, getClient } from '@anticrm/presentation'
@@ -72,106 +73,90 @@
   }
 </script>
 
-<div class="root w-full">
+<div class="flex-col">
-  <div class="flex-col w-full">
+  <div class="flex-no-shrink flex-between trans-title">
-    <div class="flex-no-shrink flex-between states-header">
+    <Label label={'ACTIVE STATUSES'} />
-      <Label label={'ACTIVE STATUSES'} />
+    <div on:click={onAdd}><CircleButton icon={IconAdd} size={'medium'} /></div>
-      <div on:click={onAdd}><CircleButton icon={IconAdd} size={'medium'} /></div>
+  </div>
-    </div>
+  <div class="overflow-y-auto mt-3">
-    <div class="content">
+    {#each states as state, i}
-      {#each states as state, i}
+      {#if state}
-        {#if state}
+        <div bind:this={elements[i]} class="flex-between states" draggable={true}
-          <div bind:this={elements[i]} class="flex-between states" draggable={true}
+          on:dragover|preventDefault={(ev) => {
-            on:dragover|preventDefault={(ev) => {
+            dragover(ev, i)
-              dragover(ev, i)
+          }}
+          on:drop|preventDefault={() => {
+            onMove(i)
+          }}
+          on:dragstart={() => {
+            selected = i
+            dragState = states[i]._id
+          }}
+          on:dragend={() => {
+            selected = undefined
+          }}
+        >
+          <div class="bar"><Circles /></div>
+          <div class="color" style="background-color: {state.color}"
+            on:click={() => {
+              showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
             }}
-            on:drop|preventDefault={() => {
+          />
-              onMove(i)
+          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
-            }}
+          <div class="tool hover-trans"
-            on:dragstart={() => {
+            on:click={(ev) => {
-              selected = i
+              showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
-              dragState = states[i]._id
-            }}
-            on:dragend={() => {
-              selected = undefined
             }}
           >
-            <div class="bar"><Circles /></div>
+            <IconMoreH size={'medium'} />
-            <div class="color" style="background-color: {state.color}"
-              on:click={() => {
-                showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
-              }}
-            />
-            <div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
-            <div class="tool hover-trans"
-              on:click={(ev) => {
-                showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
-              }}
-            >
-              <IconMoreH size={'medium'} />
-            </div>
           </div>
-        {/if}
+        </div>
-      {/each}
+      {/if}
-    </div>
+    {/each}
   </div>
-  <div class="flex-col w-full">
+</div>
-    <div class="flex-no-shrink states-header">
+<div class="flex-col mt-9">
-      <Label label={'DONE STATUS / WON'} />
+  <div class="flex-no-shrink trans-title">
-    </div>
+    <Label label={'DONE STATUS / WON'} />
-    <div class="content">
-      {#each wonStates as state, i}
-        {#if state}
-          <div class="states flex-row-center">
-            <div class="bar"/>
-            <div class="color" style="background-color: #a5d179"/>
-            <div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
-          </div>
-        {/if}
-      {/each}
-    </div>
   </div>
-  <div class="flex-col w-full">
+  <div class="overflow-y-auto mt-4">
-    <div class="flex-no-shrink states-header">
+    {#each wonStates as state, i}
-      <Label label={'DONE STATUS / LOST'} />
+      {#if state}
-    </div>
+        <div class="states flex-row-center">
-    <div class="content">
+          <div class="bar"/>
-      {#each lostStates as state, i}
+          <div class="color" style="background-color: #a5d179"/>
-        {#if state}
+          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
-          <div class="states flex-row-center">
+        </div>
-            <div class="bar"/>
+      {/if}
-            <div class="color" style="background-color: #f28469"/>
+    {/each}
-            <div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
+  </div>
-          </div>
+</div>
-        {/if}
+<div class="flex-col mt-9">
-      {/each}
+  <div class="flex-no-shrink trans-title">
-    </div>
+    <Label label={'DONE STATUS / LOST'} />
+  </div>
+  <div class="overflow-y-auto mt-4">
+    {#each lostStates as state, i}
+      {#if state}
+        <div class="states flex-row-center">
+          <div class="bar"/>
+          <div class="color" style="background-color: #f28469"/>
+          <div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
+        </div>
+      {/if}
+    {/each}
   </div>
 </div>
 
 <style lang="scss">
-  .root {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(1px, max-content) min-content min-content;
-    gap: 2rem;
-    height: 100%;
-  }
   .states {
-    padding: .625rem 1rem;
+    padding: .5rem 1rem;
-    color: #fff;
+    color: var(--theme-caption-color);
-    background-color: rgba(67, 67, 72, .3);
+    background-color: var(--theme-button-bg-enabled);
     border: 1px solid var(--theme-bg-accent-color);
     border-radius: .75rem;
     user-select: none;
 
-    &-header {
-      margin-bottom: 1rem;
-      font-weight: 600;
-      font-size: .75rem;
-      color: var(--theme-content-trans-color);
-    }
-
     .bar {
       margin-right: .375rem;
       width: .375rem;
@@ -189,8 +174,4 @@
     .tool { margin-left: 1rem; }
   }
   .states + .states { margin-top: .5rem; }
-
-  .content {
-    overflow-y: auto;
-  }
 </style>