From 5ec7affaf72d1a98b7755bbcec62693bc09d08c9 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 25 Apr 2024 10:11:12 +0200
Subject: [PATCH] clean code & bugfix

---
 .../add-task/add-task.component.scss          |  17 ++-
 .../components/overlay/overlay.component.html |  26 ++--
 .../task-edit-overlay.component.scss          | 133 ------------------
 3 files changed, 25 insertions(+), 151 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss
index d6a1bd4..5d1fb4a 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/src/app/components/add-task/add-task.component.scss
@@ -104,10 +104,15 @@ p {
   }
   .close {
     position: absolute;
-    top: 45px;
-    right: 15px;
-    width: 25px;
-    height: 25px;
+    top: 50px;
+    right: 20px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    &:hover {
+      filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
+        brightness(92%) contrast(92%);
+    }
   }
 }
 
@@ -187,8 +192,8 @@ p {
       background-color: var(--light-gray);
     }
     img {
-      width: 25px;
-      height: 25px;
+      width: 16px;
+      height: 16px;
       &:hover {
         filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
           brightness(92%) contrast(92%);
diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index 8253fee..b762c61 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/src/app/shared/components/overlay/overlay.component.html
@@ -1,15 +1,17 @@
-@if (overlayData) {
+@if (overlayType) {
 <div class="overlay">
-  @if (overlayType === "taskOverlay") {
-  <app-task-overlay
-    [overlayData]="overlayData"
-    (closeDialogEmitter)="onCloseOverlay($event)"
-  ></app-task-overlay>
-  } @if (overlayType === "taskOverlayEdit") {
-  <app-task-edit-overlay
-    [overlayData]="overlayData"
-    (closeDialogEmitter)="onCloseOverlay($event)"
-  ></app-task-edit-overlay>
-  }
+  <div class="overlay-content">
+    @if (overlayType === "taskOverlay") {
+    <app-task-overlay
+      [overlayData]="overlayData"
+      (closeDialogEmitter)="onCloseOverlay($event)"
+    ></app-task-overlay>
+    } @if (overlayType === "taskOverlayEdit") {
+    <app-task-edit-overlay
+      [overlayData]="overlayData"
+      (closeDialogEmitter)="onCloseOverlay($event)"
+    ></app-task-edit-overlay>
+    }
+  </div>
 </div>
 }
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
index 103259c..69d0282 100644
--- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
@@ -10,136 +10,3 @@ section {
   display: flex;
   justify-content: right;
 }
-
-input,
-textarea,
-select {
-  font-size: 20px;
-  font-weight: 400;
-  border-radius: 10px;
-  border: 1px solid var(--light-gray);
-  padding: 12px 21px;
-  width: calc(100% - 48px);
-  resize: none;
-}
-
-input:invalid,
-textarea:invalid,
-select:invalid {
-  border: 1px dashed red;
-}
-
-input:valid,
-textarea:valid,
-select:valid {
-  border: 1px solid black;
-}
-
-.headline {
-  p {
-    color: var(--very-dark-gray);
-  }
-}
-
-p {
-  font-size: 20px;
-  font-weight: 400;
-  padding-bottom: 6px;
-}
-
-.red-dot {
-  color: var(--light-red);
-}
-
-.error-msg {
-  height: 24px;
-  padding: 6px;
-  p {
-    color: var(--red);
-    font-size: 12px;
-    font-weight: 400;
-  }
-}
-
-// PRIORITY BTNS
-
-.btns {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 36px;
-}
-
-.btn-text {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-}
-
-.btn {
-  background-color: var(--white);
-  font-size: 20px;
-  font-weight: 400;
-  width: 160px;
-  border-radius: 10px;
-  border: 1px solid var(--light-gray);
-  padding: 16px 24px;
-  cursor: pointer;
-}
-
-.btn-active {
-  cursor: unset;
-  color: var(--white);
-  img {
-    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
-      hue-rotate(346deg) brightness(99%) contrast(103%);
-  }
-}
-
-.btn:hover {
-  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-}
-
-// ASSIGNED
-
-.assigned {
-  position: relative;
-  .open {
-    position: absolute;
-    top: 55px;
-    right: 20px;
-    width: 14px;
-    height: 7px;
-  }
-  .close {
-    position: absolute;
-    top: 45px;
-    right: 15px;
-    width: 25px;
-    height: 25px;
-  }
-}
-
-.assigned-badget {
-  display: flex;
-  margin-top: 6px;
-  height: 40px;
-}
-
-.circle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  min-width: 30px;
-  height: 30px;
-  border-radius: 100%;
-  border: 2px solid var(--white);
-  margin-right: 6px;
-  .initials {
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--white);
-    text-shadow: 1px 1px 2px var(--black);
-  }
-}