ui feedback updates

src/app/app.component.html

@@ -4,4 +4,4 @@
   <router-outlet></router-outlet>
 </main>
 
-<app-footer></app-footer>
+<app-footer [isUserLoggedIn]="isUserLoggedIn" ></app-footer>

src/app/carnet/travel-plan/travel-plan.component.ts

@@ -107,6 +107,8 @@ export class TravelPlanComponent {
         visits: this.visitsCount
       });
     }
+
+    this.visitsCount = 1;
   }
 
   fyiAction(country: Country): void {
@@ -166,6 +168,7 @@ export class TravelPlanComponent {
 
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
+        this.transitsCount = this.visitsCount;
         this.selectedAvailableTransitCountry = this.selectedAvailableVisitCountry;
         this.addVisitCountryToCollection();
         this.addTransitCountryToCollection();
@@ -192,6 +195,7 @@ export class TravelPlanComponent {
         visits: this.transitsCount
       });
     }
+    this.transitsCount = 1;
   }
 
   IsCountryExists(countryType: string, country: Country): boolean {

src/app/common/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="footer">
+<footer class="footer" [ngClass]="{'general': !isUserLoggedIn}">
     <div class="footer-content">
         <div class="footer-links">
             <a href="#">Privacy Policy</a>

src/app/common/footer/footer.component.scss

@@ -1,9 +1,8 @@
 .footer {
-    color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
-    background: var(--mat-sys-primary-container);
+    background: var(--mat-sys-primary);
     padding: 8px;
     border-top: 1px solid var(--mat-sys-outline-variant);
-    backdrop-filter: blur(10px);
 
     /* Fixed footer styles */
     position: fixed;
@@ -27,22 +26,36 @@
         gap: 24px;
 
         a {
-            color: var(--mat-sys-secondary);
+            color: var(--mat-sys-on-primary);
+            background: var(--mat-sys-primary);
             text-decoration: none;
             transition: color 0.3s ease;
 
             &:hover {
-                color: var(--mat-sys-primary);
+                transform: scale(103%);
             }
         }
     }
 
     .copyright {
-        color: var(--mat-sys-secondary);
         font-size: 12px;
     }
 }
 
+/* footer styles - not logged in users */
+.footer.general {
+    color: #000000;
+    background: #ffffff;
+
+    .footer-links {
+        a {
+            color: #000000;
+            background: #ffffff;
+        }
+    }
+}
+
+
 @media (max-width: 600px) {
     .footer {
         padding: 16px;

src/app/common/footer/footer.component.ts

@@ -1,12 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-footer',
-  imports: [AngularMaterialModule],
+  imports: [AngularMaterialModule, CommonModule],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
   currentYear = new Date().getFullYear();
+  @Input() isUserLoggedIn = false;
 }

src/app/common/secured-header/secured-header.component.scss

@@ -4,9 +4,9 @@
     align-items: center;
     padding: 0 24px;
     height: 64px;
-    color: var(--mat-sys-primary);
+    color: var(--custom-nav-color);
-    background: var(--mat-sys-primary-container);
+    background: var(--custom-nav-background-color);
-    box-shadow: var(--mat-sys-level2);
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
     position: relative;
     z-index: 100; // Higher than footer's z-index
 
@@ -31,6 +31,20 @@
         align-items: center;
         gap: 24px;
 
+        button {
+            color: var(--custom-nav-color);
+            background-color: var(--custom-nav-background-color);
+
+            &:hover {
+                color: var(--custom-nav-background-color);
+                background-color: var(--custom-nav-color);
+            }
+        }
+
+        .mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
+            opacity: 0;
+        }
+
         // .nav-link {
         //     cursor: pointer;
         //     padding: 8px 12px;
@@ -48,15 +62,21 @@
         position: relative;
 
         .profile-button {
-            color: var(--mat-sys-primary);
+            color: var(--custom-nav-background-color);
-            background: var(--mat-sys-primary-container);
+            background-color: var(--custom-nav-color);
+
+            &:hover {
+                color: var(--custom-nav-color);
+                background-color: var(--custom-nav-background-color);
+            }
         }
 
         .profile-menu {
             position: absolute;
             right: 0;
             top: 48px;
-            background-color: var(--mat-sys-secondary-container);
+            color: var(--mat-sys-on-primary-container);
+            background-color: var(--mat-sys-primary-container);
             border-radius: 4px;
             box-shadow: var(--mat-sys-level3);
             min-width: 200px;
@@ -68,12 +88,12 @@
                 align-items: center;
                 gap: 8px;
                 padding: 12px 16px;
-                background-color: #fff;
+                color: var(--mat-sys-on-primary-container);
-                color: var(--mat-sys-secondary);
+                background-color: var(--mat-sys-primary-container);
                 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
                 mat-icon {
-                    color: var(--mat-sys-secondary);
+                    color: var(--mat-sys-on-primary-container);
                 }
             }
 
@@ -85,15 +105,16 @@
                 padding: 8px 16px;
                 border: none;
                 cursor: pointer;
-                background-color: var(--mat-sys-surface-container);
+                color: var(--mat-sys-on-primary-container);
-                color: var(--mat-sys-secondary);
+                background-color: var(--mat-sys-primary-container);
 
-                mat-icon {
+                // mat-icon {
-                    color: var(--mat-sys-secondary);
+                //     color: var(--mat-sys-on-primary-container);
-                }
+                // }
 
                 &:hover {
-                    background-color: var(--mat-sys-secondary-container);
+                    color: var(--mat-sys-on-primary);
+                    background-color: var(--mat-sys-primary);
                 }
             }
         }

src/styles.scss

@@ -22,9 +22,6 @@ body {
             container-text-line-height:1.7, // line height should be atleast 1.5 times text size
             outlined-label-text-size:0.875rem));
 
-    /* stepper */
-    @include mat.stepper-overrides((header-height:50px));
-
     /* list */
     @include mat.list-overrides((list-item-label-text-size:0.875rem,
             list-item-label-text-line-height:1.7, // line height should be atleast 1.5 times text size
@@ -37,4 +34,69 @@ body {
 
     /*select options*/
     --mat-option-label-text-size: 0.875rem;
+
+    /* stepper */
+    @include mat.stepper-overrides((header-height:50px,
+            header-hover-state-layer-color:var(--mat-sys-primary),
+            header-focus-state-layer-color:var(--mat-sys-primary),
+        ));
+
+    .mat-step-header:hover:not([aria-disabled]),
+    .mat-step-header:hover[aria-disabled=false] {
+
+        .mat-step-icon {
+            color: var(--mat-sys-on-primary-container);
+            background-color: var(--mat-sys-primary-container);
+        }
+
+        .mat-step-label {
+            color: var(--mat-sys-on-primary);
+        }
+    }
+
+    .mat-step-header:focus:not([aria-disabled]),
+    .mat-step-header:focus[aria-disabled=false] {
+
+        .mat-step-icon {
+            color: var(--mat-sys-on-primary-container);
+            background-color: var(--mat-sys-primary-container);
+        }
+
+        .mat-step-label {
+            color: var(--mat-sys-on-primary);
+        }
+    }
+
+    /* expansion panel */
+    @include mat.expansion-overrides((header-hover-state-layer-color:var(--mat-sys-primary),
+            header-focus-state-layer-color:var(--mat-sys-primary),
+        ));
+
+    .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
+        .mat-expansion-panel-header-title {
+            color: var(--mat-sys-on-primary);
+        }
+
+        .mat-expansion-indicator svg {
+            fill: var(--mat-sys-on-primary);
+        }
+    }
+
+    /* button */
+    @include mat.button-overrides((protected-container-color: var(--custom-button-background-color),
+            protected-container-elevation-shadow:var(--custom-button-hover-color),
+            protected-label-text-color:var(--custom-button-color)));
+
+    /* Nav bar */
+    .navbar-menu {
+        .mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before {
+            opacity: 0;
+        }
+    }
+
+    .profile-container {
+        .profile-button:hover>.mat-mdc-button-persistent-ripple::before {
+            opacity: 0;
+        }
+    }
 }