(F) Edit layout

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component.css

@@ -12,14 +12,16 @@
     border-bottom: 1px solid var(--accent-color);
 }
 
-.custom-edit-button button {
+.custom-edit-button button:hover {
     font-weight: 900;
     background-color: inherit;
     border-color: var(--heading-color);
     color: var(--heading-color);
 }
 
-.custom-edit-button button:hover {
+.custom-edit-button button {
+    font-weight: 900;
+
     background-color: var(--heading-color);
     color: white;
 }
@@ -28,9 +30,9 @@
 
 /* #region collection item */
 .collection-item {
-    background-color: #dff7ff;
+    background-color: var(--background-color);
     text-align: center;
-    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 35%);
+    border: 1px solid var(--accent-color);
     border-radius: 3%;
     padding: 80px 20px;
     transition: all ease-in-out 0.3s;

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component.html

@@ -23,7 +23,9 @@
     <!-- #region buttons-->
 
     <div class="d-grid gap-3 custom-edit-button">
-        <button class="btn btn-outline-secondary">تعديل</button>
+        <button class="btn btn-outline-secondary">
+            تعديل <i class="bi bi-pencil-fill"></i>
+        </button>
     </div>
 
     <!-- #endregion -->

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component.css

 /* #region custom*/
 .custom-title {
-    width: 31%;
+    width: 35%;
     padding-bottom: 0.3em;
-    border-bottom: 2px solid var(--accent-color);
+    border-bottom: 1px solid var(--accent-color);
     color: var(--heading-color);
 }
 
@@ -10,4 +10,17 @@
     font-weight: 700;
 }
 
+.custom-create-button button:hover {
+    font-weight: 900;
+    background-color: inherit;
+    border-color: var(--heading-color);
+    color: var(--heading-color);
+}
+
+.custom-create-button button {
+    font-weight: 900;
+
+    background-color: var(--heading-color);
+    color: white;
+}
 /* #endregion */
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component.html

@@ -2,10 +2,19 @@
     <section class="section">
 
         <!-- #region Title -->
-        <div class="container text-center mb-5 custom-title">
+        <div class="container text-center mb-3 custom-title">
             <h2>الأطباء المسجلون في النظام:</h2>
         </div>
 
+        <!-- #endregion -->
+
+        <!-- #region buttons-->
+
+        <div class="text-center custom-create-button">
+            <button class="btn btn-lg btn-outline-success mb-5" style="width: 35%;">إضافة طبيب +</button>
+        </div>
+
+
         <!-- #endregion -->
 
         <!-- #region container-->
@@ -14,6 +23,18 @@
                 <div class="col-lg-4 col-md-6">
                     <app-doctor-user></app-doctor-user>
                 </div>
+                <div class="col-lg-4 col-md-6">
+                    <app-doctor-user></app-doctor-user>
+                </div>
+                <div class="col-lg-4 col-md-6">
+                    <app-doctor-user></app-doctor-user>
+                </div>
+                <div class="col-lg-4 col-md-6">
+                    <app-doctor-user></app-doctor-user>
+                </div>
+                <div class="col-lg-4 col-md-6">
+                    <app-doctor-user></app-doctor-user>
+                </div>
             </div>
         </div>
         <!-- #endregion -->

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

@@ -7,6 +7,14 @@
 
 .custom-buttons .btn-outline-primary {
     font-weight: 700;
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+.custom-buttons .btn-outline-primary:hover {
+    font-weight: 700;
+    color: white;
+    border-color: var(--accent-color);
 }
 
 .custom-buttons .btn-outline-secondary {
@@ -16,13 +24,14 @@
 }
 
 .custom-buttons .btn-outline-secondary:hover {
-    box-shadow: inset 0 0 0 2px gray;
+    box-shadow: inset 0 0 0 2px var(--heading-color);
     background-color: inherit;
 }
 
 .navmenu .dropdown ul li a {
     cursor: pointer;
     font-weight: 700;
+    color: var(--heading-color);
 }
 
 .navmenu .dropdown ul li a {
@@ -194,7 +203,7 @@
 
     .navmenu a,
     .navmenu a:focus {
-        color: var(--nav-color);
+        color: var(--heading-color);
         font-size: 15px;
         padding: 0 2px;
         font-family: var(--nav-font);
@@ -222,7 +231,7 @@
         height: 2px;
         bottom: -6px;
         left: 0;
-        background-color: var(--nav-hover-color);
+        background-color: var(--accent-color);
         visibility: hidden;
         width: 0px;
         transition: all 0.3s ease-in-out 0s;
@@ -238,7 +247,7 @@
     .navmenu li:hover>a,
     .navmenu .active,
     .navmenu .active:focus {
-        color: var(--nav-hover-color);
+        color: var(--accent-color);
     }
 
     .navmenu .dropdown ul {
@@ -265,7 +274,7 @@
         padding: 10px 20px;
         font-size: 15px;
         text-transform: none;
-        color: var(--nav-dropdown-color);
+        color: var(--heading-color);
     }
 
     .navmenu .dropdown ul a i {
@@ -275,7 +284,7 @@
     .navmenu .dropdown ul a:hover,
     .navmenu .dropdown ul .active:hover,
     .navmenu .dropdown ul li:hover>a {
-        color: var(--nav-dropdown-hover-color);
+        color: var(--accent-color);
     }
 
     .navmenu .dropdown ul {

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

@@ -10,7 +10,7 @@
 
                 <div class="container app-name-container m-auto">
                     <h1 class="h3 custom-app-name mb-4">المركز الطبي - برنامج الأطباء</h1>
-                    <h3 dir="rtl" *ngIf="userData!==null" class="h5 text-primary">أهلاَ <span *ngIf="userData.role===DOCTOR">د.</span> {{userData.fullName}}!</h3>
+                    <h3 dir="rtl" *ngIf="userData!==null" class="h5" style="color:var(--accent-color);">أهلاَ <span *ngIf="userData.role===DOCTOR">د.</span> {{userData.fullName}}!</h3>
                 </div>
 
                 <!-- #region unregistered buttons -->

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

@@ -8,6 +8,10 @@
 app-footer {
     margin-top: auto;
 }
+
+.custom-header {
+    border-bottom: 0.1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
+}
 /* #endregion */
 
 /* #region General */

Clinics.Frontend/src/app/usecases/shared/components/template/layout/layout.component.html

 <div class="custom-parent">
-    <app-header class="sticky-top" [userData]="userData"></app-header>
+    <app-header class="sticky-top custom-header" [userData]="userData"></app-header>
 
     <router-outlet></router-outlet>