From 07062c37b976d017a469fe8aef0a642213edada1 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 5 Apr 2022 11:02:08 +0300
Subject: [PATCH] Fix Kanban card design (#1278)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_colors.scss                    | 10 +++++++---
 packages/ui/src/components/MiniToggle.svelte          |  2 +-
 packages/ui/src/components/PopupInstance.svelte       |  2 ++
 .../lead-resources/src/components/KanbanCard.svelte   |  9 +++++----
 .../src/components/CandidateCard.svelte               |  8 +++++---
 .../src/components/KanbanCard.svelte                  |  8 +++++---
 .../src/components/kanban/KanbanPanel.svelte          |  9 ++++-----
 .../src/components/kanban/KanbanView.svelte           |  4 ++--
 plugins/tracker-assets/lang/en.json                   |  2 +-
 plugins/tracker-assets/lang/ru.json                   |  1 +
 .../src/components/SelectPopup.svelte                 |  4 ++--
 .../src/components/issues/EditIssue.svelte            | 11 -----------
 plugins/tracker-resources/src/plugin.ts               |  2 +-
 tests/sanity/tests/contacts.spec.ts                   |  1 +
 14 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 18cbdc7e77..d61c254bb2 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -54,8 +54,12 @@
 .theme-dark {
   --body-color: #1f2023;
   --body-accent: #222326;
-  --tooltip-bg-color: #27282b;
-  --tooltip-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
+  --board-bg-color: #1c1d1f;
+  --board-card-bg-color: #27282b;
+  --board-card-bg-hover: #2a2b2e;
+  --board-card-shadow: rgb(0 0 0 / 6%) 0px 0px 1px;
+  --accent-bg-color: #27282b;
+  --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
 
   --content-color: #8a8f98;
   --accent-color: #d7d8db;
@@ -66,7 +70,7 @@
   --divider-color: #303236;
   --menu-bg-select: #2d2f36;
   --menu-icon-hover: #f3f3f8;
-  --popup-bg-color: linear-gradient(136.61deg, var(--tooltip-bg-color) 13.72%, #2d2e31 74.3%);
+  --popup-bg-color: linear-gradient(136.61deg, var(--accent-bg-color) 13.72%, #2d2e31 74.3%);
   --popup-bg-hover: #37373c;
   --popup-divider: #313236;
   --popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;
diff --git a/packages/ui/src/components/MiniToggle.svelte b/packages/ui/src/components/MiniToggle.svelte
index dc105fb16f..3e5c0cd386 100644
--- a/packages/ui/src/components/MiniToggle.svelte
+++ b/packages/ui/src/components/MiniToggle.svelte
@@ -82,7 +82,7 @@
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background: var(--tooltip-bg-color);
+        background: var(--accent-bg-color);
         // box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
         transition: all .1s ease-out;
       }
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index ea331e688e..3d1b0af161 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -16,6 +16,7 @@
 
 <script lang="ts">
   import { afterUpdate } from 'svelte'
+  import { fade } from 'svelte/transition'
   import type { AnySvelteComponent, AnyComponent, PopupAlignment } from '../types'
 
   export let is: AnyComponent | AnySvelteComponent
@@ -129,5 +130,6 @@
     left: 0;
     width: 100%;
     height: 100vh;
+    transition: background-color .5s ease;
   }
 </style>
diff --git a/plugins/lead-resources/src/components/KanbanCard.svelte b/plugins/lead-resources/src/components/KanbanCard.svelte
index 842df2fc7e..843e4eb66d 100644
--- a/plugins/lead-resources/src/components/KanbanCard.svelte
+++ b/plugins/lead-resources/src/components/KanbanCard.svelte
@@ -75,12 +75,13 @@
   .card-container {
     display: flex;
     flex-direction: column;
-    padding: 1rem 1.25rem;
-    background-color: rgba(222, 222, 240, 0.06);
-    border-radius: 0.75rem;
+    padding: .5rem 1rem;
+    background-color: var(--board-card-bg-color);
+    border: 1px solid var(--board-card-bg-color);
+    border-radius: .25rem;
     user-select: none;
-    backdrop-filter: blur(10px);
 
+    &:hover { background-color: var(--board-card-bg-hover); }
     &.draggable {
       cursor: grab;
     }
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte
index 8ebc745784..353bfd5f28 100644
--- a/plugins/recruit-resources/src/components/CandidateCard.svelte
+++ b/plugins/recruit-resources/src/components/CandidateCard.svelte
@@ -63,9 +63,11 @@
 <style lang="scss">
   .card-container {
     padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--theme-button-bg-enabled);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-radius: .75rem;
+    background-color: var(--board-card-bg-color);
+    border: 1px solid var(--board-card-bg-color);
+    border-radius: .25rem;
+
+    &:hover { background-color: var(--board-card-bg-hover); }
 
     .label {
       margin-bottom: 1.75rem;
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index 818af8c70c..c2858d3038 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -81,11 +81,13 @@
   .card-container {
     display: flex;
     flex-direction: column;
-    padding: 1rem 1.25rem;
-    background-color: rgba(222, 222, 240, 0.06);
-    border-radius: 0.75rem;
+    padding: .5rem 1rem;
+    background-color: var(--board-card-bg-color);
+    border: 1px solid var(--board-card-bg-color);
+    border-radius: .25rem;
     user-select: none;
 
+    &:hover { background-color: var(--board-card-bg-hover); }
     &.draggable {
       cursor: grab;
     }
diff --git a/plugins/task-resources/src/components/kanban/KanbanPanel.svelte b/plugins/task-resources/src/components/kanban/KanbanPanel.svelte
index 1b6818a381..70058ba2ba 100644
--- a/plugins/task-resources/src/components/kanban/KanbanPanel.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanPanel.svelte
@@ -49,21 +49,20 @@
     align-items: stretch;
     width: 20rem;
     height: 100%;
-    background-color: var(--theme-bg-color);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-radius: .75rem;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: .25rem;
 
     .header {
       display: flex;
       flex-direction: column;
-      margin: 0 .75rem;
       height: 4rem;
       min-height: 4rem;
       user-select: none;
 
       .bar {
         height: .375rem;
-        border-radius: 1px;
+        border-radius: .25rem;
       }
       .label {
         padding: 0 .5rem 0 1rem;
diff --git a/plugins/task-resources/src/components/kanban/KanbanView.svelte b/plugins/task-resources/src/components/kanban/KanbanView.svelte
index aa810295d7..bfd7b3a74b 100644
--- a/plugins/task-resources/src/components/kanban/KanbanView.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanView.svelte
@@ -221,15 +221,15 @@
   .kanban-container {
     position: relative;
     height: 100%;
+    background: var(--board-bg-color);
   }
   .kanban-content {
     display: flex;
-    margin: 0 2.5rem;
+    margin: 1.5rem 2rem;
     height: 100%;
   }
 
   .scrollable {
     height: 100%;
-    margin-bottom: .25rem;
   }
 </style>
diff --git a/plugins/tracker-assets/lang/en.json b/plugins/tracker-assets/lang/en.json
index 91135f58a6..fc4788a3a3 100644
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@@ -23,6 +23,7 @@
     "Done": "Done",
     "Canceled": "Canceled",
     "SetStatus": "Set status...",
+    "Priority": "Priority",
     "NoPriority": "No priority",
     "Urgent": "Urgent",
     "High": "High",
@@ -32,7 +33,6 @@
     "Title": "Title",
     "Description": "",
     "Status": "",
-    "Priority": "",
     "Number": "Number",
     "Assignee": "Assignee",
     "Parent": "",
diff --git a/plugins/tracker-assets/lang/ru.json b/plugins/tracker-assets/lang/ru.json
index 1850583bb0..89091261da 100644
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@@ -22,6 +22,7 @@
     "Done": "Done",
     "Canceled": "Canceled",
     "SetStatus": "Set status...",
+    "Priority": "Priority",
     "NoPriority": "No priority",
     "Urgent": "Urgent",
     "High": "High",
diff --git a/plugins/tracker-resources/src/components/SelectPopup.svelte b/plugins/tracker-resources/src/components/SelectPopup.svelte
index 757d642cea..c5eadd681a 100644
--- a/plugins/tracker-resources/src/components/SelectPopup.svelte
+++ b/plugins/tracker-resources/src/components/SelectPopup.svelte
@@ -22,8 +22,8 @@
   import { Icon, Label } from '@anticrm/ui'
   import tracker from '../plugin'
 
-  export let _class: Ref<Class<Space>>
-  export let spaceQuery: DocumentQuery<Space> | undefined
+  // export let _class: Ref<Class<Space>>
+  // export let spaceQuery: DocumentQuery<Space> | undefined
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
   export let searchable: boolean = false
diff --git a/plugins/tracker-resources/src/components/issues/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
index 00f6d26b5b..9ac52d0b9d 100644
--- a/plugins/tracker-resources/src/components/issues/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
@@ -109,14 +109,3 @@
     </div>
   </Panel>
 {/if}
-
-<style lang="scss">
-  .description {
-    display: flex;
-    padding: 1rem;
-    height: 12rem;
-    border-radius: 0.25rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
-  }
-</style>
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 356e0fed0d..044cbdcdbb 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -43,6 +43,7 @@ export default mergeIds(trackerId, tracker, {
     Done: '' as IntlString,
     Canceled: '' as IntlString,
     SetStatus: '' as IntlString,
+    Priority: '' as IntlString,
     NoPriority: '' as IntlString,
     Urgent: '' as IntlString,
     High: '' as IntlString,
@@ -53,7 +54,6 @@ export default mergeIds(trackerId, tracker, {
     Identifier: '' as IntlString,
     Description: '' as IntlString,
     Status: '' as IntlString,
-    Priority: '' as IntlString,
     Number: '' as IntlString,
     Assignee: '' as IntlString,
     Parent: '' as IntlString,
diff --git a/tests/sanity/tests/contacts.spec.ts b/tests/sanity/tests/contacts.spec.ts
index 99381bfad8..9288bd4ac1 100644
--- a/tests/sanity/tests/contacts.spec.ts
+++ b/tests/sanity/tests/contacts.spec.ts
@@ -41,6 +41,7 @@ test.describe('contact tests', () => {
     await firstName.fill(orgName)
 
     await page.locator('.antiCard').locator('button:has-text("Create")').click()
+    await page.isHidden('button:has-text("Create")')
     await expect(page.locator(`text=${orgName}`)).toBeVisible()
   })
   test('contact-search', async ({ page }) => {