clean code & bugfix

src/app/components/add-task/add-task.component.scss

@@ -104,10 +104,15 @@ p {
   }
   .close {
     position: absolute;
-    top: 45px;
+    top: 50px;
-    right: 15px;
+    right: 20px;
-    width: 25px;
+    width: 16px;
-    height: 25px;
+    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;
+      width: 16px;
-      height: 25px;
+      height: 16px;
       &:hover {
         filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
           brightness(92%) contrast(92%);

src/app/shared/components/overlay/overlay.component.html

@@ -1,5 +1,6 @@
-@if (overlayData) {
+@if (overlayType) {
 <div class="overlay">
+  <div class="overlay-content">
     @if (overlayType === "taskOverlay") {
     <app-task-overlay
       [overlayData]="overlayData"
@@ -11,5 +12,6 @@
       (closeDialogEmitter)="onCloseOverlay($event)"
     ></app-task-edit-overlay>
     }
+  </div>
 </div>
 }

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