Fix Kanban card design (#1278)

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

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;

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;
       }

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>

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;
     }

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;

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;
     }

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;

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>

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": "",

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",

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

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>

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,

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 }) => {