From c47591db236ca4c5cd68442c8e594eafde7b6432 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 4 Jan 2022 12:04:21 +0300
Subject: [PATCH] Update EditStatuses layout (#755)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/state/EditStatuses.svelte  | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/plugins/task-resources/src/components/state/EditStatuses.svelte b/plugins/task-resources/src/components/state/EditStatuses.svelte
index bf12c0d02c..5962377ea5 100644
--- a/plugins/task-resources/src/components/state/EditStatuses.svelte
+++ b/plugins/task-resources/src/components/state/EditStatuses.svelte
@@ -74,16 +74,17 @@
   }
 </script>
 
+<div class="overlay" on:click={() => { dispatch('close') }}/>
 <div class="flex-col floatdialog-container">
   <div class="flex-between header">
     <div class="flex-grow flex-col">
       <div class="flex-row-center">
-        <div class="icon"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
-        <span class="overflow-label title">Manage application statuses within <Label label={spaceClassInstance?.label}/></span>
+        <div class="mr-2"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
+        <span class="fs-title overflow-label">Manage application statuses within <Label label={spaceClassInstance?.label}/></span>
       </div>
-      <div class="overflow-label subtitle">{spaceInstance?.name}</div>
+      <div class="small-text content-dark-color overflow-label">{spaceInstance?.name}</div>
     </div>
-    <div class="tool" on:click={() => dispatch('close')}><IconClose size={'small'} /></div>
+    <div class="ml-4 content-accent-color cursor-pointer" on:click={() => dispatch('close')}><IconClose size={'small'} /></div>
   </div>
   <div class="flex-grow flex-col content">
     {#if kanban !== undefined}
@@ -94,39 +95,32 @@
 
 <style lang="scss">
   .floatdialog-container {
-    margin: 2rem 1rem 1.25rem 0;
-    height: calc(100% - 3.25rem);
-    background: var(--theme-dialog-bg-spec);
+    position: fixed;
+    top: 32px;
+    bottom: 1.25rem;
+    right: 1rem;
+    height: calc(100% - 32px - 1.25rem);
+    background-color: var(--theme-bg-color);
     border-radius: 1.25rem;
-    box-shadow: var(--theme-dialog-shadow);
-    backdrop-filter: blur(15px);
 
     .header {
       padding: 0 2rem 0 2.5rem;
       height: 4.5rem;
       min-height: 4.5rem;
-
-      .icon {
-        margin-right: .5rem;
-        opacity: .6;
-      }
-      .title {
-        font-weight: 500;
-        font-size: 1rem;
-        color: var(--theme-caption-color);
-      }
-      .subtitle {
-        font-size: .75rem;
-        color: var(--theme-content-dark-color);
-      }
-      .tool {
-        margin-left: 2.5rem;
-        cursor: pointer;
-      }
     }
     .content {
       overflow: auto;
       margin: 1rem 2.5rem 1rem 2.5rem;
     }
   }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .5;
+  }
 </style>