priority change btns added

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html

@@ -75,6 +75,62 @@
           }
         </div>
       </div>
+      <div class="priority">
+        <p>Prio</p>
+        <div class="btns">
+          <button
+            type="button"
+            class="btn"
+            [ngClass]="{
+              'btn-active': taskDataEdit.priority == 'urgent'
+            }"
+            [ngStyle]="{
+              'background-color':
+                taskDataEdit.priority == 'urgent' ? 'red' : 'white'
+            }"
+            (click)="tooglePriority('urgent')"
+          >
+            <div class="btn-text">
+              <span>Urgent</span>
+              <img src="./../../../assets/img/urgent.svg" alt="" />
+            </div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            [ngClass]="{
+              'btn-active': taskDataEdit.priority == 'medium'
+            }"
+            [ngStyle]="{
+              'background-color':
+                taskDataEdit.priority == 'medium' ? 'orange' : 'white'
+            }"
+            (click)="tooglePriority('medium')"
+          >
+            <div class="btn-text">
+              <span>Medium</span>
+              <img src="./../../../assets/img/medium.svg" alt="" />
+            </div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            [ngClass]="{
+              'btn-active': taskDataEdit.priority == 'low'
+            }"
+            [ngStyle]="{
+              'background-color':
+                taskDataEdit.priority == 'low' ? 'green' : 'white'
+            }"
+            (click)="tooglePriority('low')"
+          >
+            <div class="btn-text">
+              <span>Low</span>
+              <img src="./../../../assets/img/low.svg" alt="" />
+            </div>
+          </button>
+        </div>
+      </div>
     </div>
   </form>
 </section>

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss

@@ -66,3 +66,42 @@ p {
     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);
+}

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts

@@ -4,11 +4,12 @@ import { OverlayService } from '../../../../services/overlay.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { Task } from '../../../../interfaces/task.interface';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-task-edit-overlay',
   standalone: true,
-  imports: [BtnCloseComponent, FormsModule],
+  imports: [BtnCloseComponent, FormsModule, CommonModule],
   templateUrl: './task-edit-overlay.component.html',
   styleUrl: './task-edit-overlay.component.scss',
 })
@@ -89,6 +90,13 @@ export class TaskEditOverlayComponent implements OnInit {
       : (this.dateInPast = false);
   }
 
+  tooglePriority(prio: string) {
+    this.taskDataEdit.priority !== prio
+      ? (this.taskDataEdit.priority = prio)
+      : this.taskDataEdit.priority;
+    this.saveTaskData();
+  }
+
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
     }