From 2db8d7123117b4d2232b974589675f7a4d0dfd09 Mon Sep 17 00:00:00 2001
From: Cyril Joseph <ccyyrriill83@gmail.com>
Date: Sun, 27 Jul 2025 16:50:25 -0300
Subject: [PATCH] ui feedback updates

---
 src/app/app.component.html                    |  2 +-
 .../travel-plan/travel-plan.component.ts      |  4 ++
 src/app/common/footer/footer.component.html   |  2 +-
 src/app/common/footer/footer.component.scss   | 25 +++++--
 src/app/common/footer/footer.component.ts     |  6 +-
 .../secured-header.component.scss             | 51 ++++++++++----
 src/styles.scss                               | 68 ++++++++++++++++++-
 7 files changed, 130 insertions(+), 28 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index ac1b298..41b409a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,4 +4,4 @@
   <router-outlet></router-outlet>
 </main>
 
-<app-footer></app-footer>
\ No newline at end of file
+<app-footer [isUserLoggedIn]="isUserLoggedIn" ></app-footer>
\ No newline at end of file
diff --git a/src/app/carnet/travel-plan/travel-plan.component.ts b/src/app/carnet/travel-plan/travel-plan.component.ts
index d375614..66b60d3 100644
--- a/src/app/carnet/travel-plan/travel-plan.component.ts
+++ b/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 {
diff --git a/src/app/common/footer/footer.component.html b/src/app/common/footer/footer.component.html
index 7f3012d..0a8b626 100644
--- a/src/app/common/footer/footer.component.html
+++ b/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>
diff --git a/src/app/common/footer/footer.component.scss b/src/app/common/footer/footer.component.scss
index c9b87ce..78f7009 100644
--- a/src/app/common/footer/footer.component.scss
+++ b/src/app/common/footer/footer.component.scss
@@ -1,9 +1,8 @@
 .footer {
-    color: var(--mat-sys-primary);
-    background: var(--mat-sys-primary-container);
+    color: var(--mat-sys-on-primary);
+    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;
diff --git a/src/app/common/footer/footer.component.ts b/src/app/common/footer/footer.component.ts
index cbc09f9..2f94b31 100644
--- a/src/app/common/footer/footer.component.ts
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/app/common/secured-header/secured-header.component.scss b/src/app/common/secured-header/secured-header.component.scss
index cfd0fcf..0ade47b 100644
--- a/src/app/common/secured-header/secured-header.component.scss
+++ b/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);
-    background: var(--mat-sys-primary-container);
-    box-shadow: var(--mat-sys-level2);
+    color: var(--custom-nav-color);
+    background: var(--custom-nav-background-color);
+    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);
-            background: var(--mat-sys-primary-container);
+            color: var(--custom-nav-background-color);
+            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-secondary);
+                color: var(--mat-sys-on-primary-container);
+                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-secondary);
+                color: var(--mat-sys-on-primary-container);
+                background-color: var(--mat-sys-primary-container);
 
-                mat-icon {
-                    color: var(--mat-sys-secondary);
-                }
+                // mat-icon {
+                //     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);
                 }
             }
         }
diff --git a/src/styles.scss b/src/styles.scss
index ec773ad..2b095a3 100644
--- a/src/styles.scss
+++ b/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;
+        }
+    }
 }
\ No newline at end of file