(F) Add accordion to form

Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.css

+/* #region Accordion*/
+.accordion {
+    margin-bottom: 1em;
+}
+.accordion-header{
+    border: none;
+    
+}
+.accordion-header .accordion-button{
+    border: none;
+    
+}
+
+.accordion-item {
+    border: none;
+}
+
+.custom-accordion-header .btn-primary{
+    width: 100%;
+    background-color: var(--heading-color);
+    font-weight: 700;
+}
+
+/* #endregion */
+
 /* #region Form card*/
 .custom-form {
     width: 50%;
@@ -43,13 +68,13 @@
 
 .custom-buttons .btn-outline-primary {
     color: white;
-    background-color: var(--accent-color);
+    background-color: var(--heading-color);
 }
 
 .custom-buttons .btn-outline-primary:hover {
     background-color: white;
-    color: var(--accent-color);
-    box-shadow: 0 0 0 0.1em var(--accent-color);
+    color: var(--heading-color);
+    box-shadow: 0 0 0 0.1em var(--heading-color);
 }
 /* #endregion */
 

Clinics.Frontend/src/app/usecases/admin/create-doctor-user/components/create-doctor-user-form/create-doctor-user-form.component.ts

@@ -26,13 +26,18 @@ export class CreateDoctorUserFormComponent {
   formModel: CreateDoctorUserCommand = new CreateDoctorUserCommand();
 
   isFailure: boolean = false;
+  isInvalid: boolean = false;
   errorMessage: string = '';
+
+  isUserSectionOpen:boolean = true;
+  isPersonalInfoSectionOpen:boolean = false;
+  isOptionsSectionOpen:boolean = false;
   //#endregion
 
   // #region on submit
   onSubmit(): void {
-    console.table(this.loginForm);
     if (this.loginForm.valid) {
+      this.isInvalid = false;
       this.isFailure = false;
       this.errorMessage = '';
 
@@ -42,7 +47,9 @@ export class CreateDoctorUserFormComponent {
             if (result.status === false) {
               this.isFailure = true;
               this.errorMessage = result.errorMessage!;
-              this.scroller.scrollToPosition([0,0])
+              this.scroller.scrollToPosition([0,0]);
+              this.loginForm.form.markAsPristine();
+
             }
             else {
               this.toastrService.success("تم إضافة الطبيب بنجاح ✔");
@@ -50,7 +57,14 @@ export class CreateDoctorUserFormComponent {
             }
           }
         )
+    }
+    else {
+      this.isInvalid = true;
+      this.isOptionsSectionOpen = true;
+      this.isPersonalInfoSectionOpen = true;
+      this.isOptionsSectionOpen = true;
       this.loginForm.form.markAsPristine();
+      this.scroller.scrollToPosition([0,0]);
 
     }
   }

Clinics.Frontend/src/app/usecases/shared/components/template/header/header.component.css

@@ -15,6 +15,7 @@
     font-weight: 700;
     color: white;
     border-color: var(--accent-color);
+    background-color: var(--accent-color);
 }
 
 .custom-buttons .btn-outline-secondary {

Clinics.Frontend/src/styles/templateConstants.css

@@ -7,13 +7,15 @@
 
 /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
 :root {
-    --background-color: #ffffff;
+    --background-color: #f7ffff;
+    /* --background-color: #ffffff; */
     /* Background color for the entire website, including individual sections */
     --default-color: #444444;
     /* Default color used for the majority of the text content across the entire website */
     --heading-color: #2c4964;
     /* Color for headings, subheadings and title throughout the website */
-    --accent-color: #1977cc;
+    --accent-color: #05a9b2;
+    /* --accent-color: #1977cc; */
     /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
     --surface-color: #ffffff;
     /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */