From 2512abecc3f6e1d189a75fdbf3fc55bd74cd55da Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Thu, 15 Oct 2020 18:11:03 +0200
Subject: [PATCH] feat: style detail improvements

---
 .../tasks/task/task.component.mixins.scss      |  5 ++---
 .../features/tasks/task/task.component.scss    | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/features/tasks/task/task.component.mixins.scss b/src/app/features/tasks/task/task.component.mixins.scss
index 80d26fed59..13a2c6f314 100644
--- a/src/app/features/tasks/task/task.component.mixins.scss
+++ b/src/app/features/tasks/task/task.component.mixins.scss
@@ -1,6 +1,5 @@
-$task-shadow: $shadow-card-shadow;
-$task-active-shadow-dark: $whiteframe-shadow-6dp;
-$task-active-shadow-light: $whiteframe-shadow-3dp;
+$task-current-shadow-dark: $whiteframe-shadow-12dp;
+$task-current-shadow-light: $whiteframe-shadow-3dp;
 $task-selected-shadow-light: $whiteframe-shadow-2dp;
 $task-selected-shadow-dark: $whiteframe-shadow-2dp;
 
diff --git a/src/app/features/tasks/task/task.component.scss b/src/app/features/tasks/task/task.component.scss
index d5627516c2..0aadff0784 100644
--- a/src/app/features/tasks/task/task.component.scss
+++ b/src/app/features/tasks/task/task.component.scss
@@ -97,6 +97,9 @@
     transition: $transition-enter;
     transition-property: left, right, box-shadow;
     box-shadow: $task-selected-shadow-light;
+    // because of the shadow, this looks better
+    //bottom: 2px;
+
     @include darkTheme {
       box-shadow: $task-selected-shadow-dark;
     }
@@ -116,6 +119,9 @@
 
   @include isHostFocus('.inner-wrapper') {
     border-radius: $task-border-radius;
+    // because of the border, this looks better
+    //top: 2px;
+    //bottom: 2px;
 
     @include mq(xs) {
       // NOTE: somehow ng build messes up, if we don't include it like that
@@ -126,11 +132,15 @@
   }
 
   :host.isCurrent.isCurrent.isCurrent.isCurrent.isCurrent & {
-    border-radius: 12px !important;
-    box-shadow: $task-active-shadow-light;
+    border-radius: $task-border-radius !important;
+    box-shadow: $task-current-shadow-light;
+    // because of the shadow, this looks better
+    //bottom: 2px;
 
     @include mq(xs) {
-      transform: scale($task-current-task-zoom);
+      //transform: scale($task-current-task-zoom);
+      left: -1 * ($task-border-radius);
+      right: -1 * ($task-border-radius);
     }
   }
 
@@ -142,7 +152,7 @@
 
   :host-context(.isDarkTheme).isCurrent.isCurrent.isCurrent.isCurrent & {
     background: $task-c-current-bg-dark;
-    box-shadow: $task-active-shadow-dark;
+    box-shadow: $task-current-shadow-dark;
   }