ui feedback updates

public/themes/Theme187.css

@@ -4,10 +4,10 @@ html {
   color-scheme: light;
 
   /* Primary palette variables */
-  --mat-sys-primary: light-dark(#486363, #afcccc);
+  --mat-sys-primary: light-dark(#607c7c, #afcccc);
   --mat-sys-on-primary: light-dark(#ffffff, #193535);
-  --mat-sys-primary-container: light-dark(#cae8e8, #304b4c);
+  --mat-sys-primary-container: light-dark(#ffffff, #304b4c);
-  --mat-sys-on-primary-container: light-dark(#022020, #cae8e8);
+  --mat-sys-on-primary-container: light-dark(#607c7c, #cae8e8);
   --mat-sys-inverse-primary: light-dark(#afcccc, #486363);
   --mat-sys-primary-fixed: light-dark(#cae8e8, #cae8e8);
   --mat-sys-primary-fixed-dim: light-dark(#afcccc, #afcccc);
@@ -15,10 +15,10 @@ html {
   --mat-sys-on-primary-fixed-variant: light-dark(#304b4c, #304b4c);
 
   /* Secondary palette variables */
-  --mat-sys-secondary: light-dark(#4c6266, #b3cbcf);
+  --mat-sys-secondary: light-dark(#607c7c, #b3cbcf);
   --mat-sys-on-secondary: light-dark(#ffffff, #1d3437);
-  --mat-sys-secondary-container: light-dark(#cee7eb, #344a4e);
+  --mat-sys-secondary-container: light-dark(#607c7c, #344a4e);
-  --mat-sys-on-secondary-container: light-dark(#071f22, #cee7eb);
+  --mat-sys-on-secondary-container: light-dark(#ffffff, #cee7eb);
   --mat-sys-secondary-fixed: light-dark(#cee7eb, #cee7eb);
   --mat-sys-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf);
   --mat-sys-on-secondary-fixed: light-dark(#071f22, #071f22);
@@ -53,7 +53,8 @@ html {
   --mat-sys-inverse-on-surface: light-dark(#f1f0f0, #2f3130);
   --mat-sys-outline: light-dark(#727878, #8b9292);
   --mat-sys-outline-variant: light-dark(#c1c8c7, #414848);
-  --mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c); /* Variable used for the form field native select option text color */
+  --mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c);
+  /* Variable used for the form field native select option text color */
 
   /* Error palette variables */
   --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@@ -64,16 +65,22 @@ html {
   /* Neutral variant palette variables */
   --mat-sys-surface-variant: light-dark(#dde4e3, #414848);
   --mat-sys-on-surface-variant: light-dark(#414848, #c1c8c7);
-  --mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232); /* Variable used for the sidenav scrim (container background shadow when opened) */
+  --mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232);
+  /* Variable used for the sidenav scrim (container background shadow when opened) */
 
   /* TYPOGRAPHY SYSTEM VARIABLES */
 
   /* Typography variables. Only used in the different typescale system variables. */
-  --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
+  --mat-sys-brand-font-family: Roboto;
-  --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
+  /* The font-family to use for brand text. */
-  --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
+  --mat-sys-plain-font-family: Roboto;
-  --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
+  /* The font-family to use for plain text. */
-  --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
+  --mat-sys-bold-font-weight: 700;
+  /* The font-weight to use for bold text. */
+  --mat-sys-medium-font-weight: 500;
+  /* The font-weight to use for medium text. */
+  --mat-sys-regular-font-weight: 400;
+  /* The font-weight to use for regular text. */
 
   /* Typescale variables. */
   /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
@@ -233,4 +240,13 @@ html {
   --mat-sys-focus-state-layer-opacity: 0.12;
   --mat-sys-hover-state-layer-opacity: 0.08;
   --mat-sys-pressed-state-layer-opacity: 0.12;
+
+  /* CUSTOM BUTTON COLORS */
+  --custom-button-color: #ffffff;
+  --custom-button-background-color: #627f9a;
+  --custom-hover-color: #384857;
+
+  /* CUSTOM NAV COLORS */
+  --custom-nav-color: #ffffff;
+  --custom-nav-background-color: #607c7c;
 }

public/themes/Theme188.css

@@ -1,13 +1,13 @@
-/* Note: Color palettes are generated from primary: #103454, secondary: #18749c */
+/* Note: Color palettes are generated from primary: #003057, secondary: #18749c */
 html {
   /* COLOR SYSTEM VARIABLES */
   color-scheme: light;
 
   /* Primary palette variables */
-  --mat-sys-primary: light-dark(#416183, #aac9f1);
+  --mat-sys-primary: light-dark(#003057, #aac9f1);
   --mat-sys-on-primary: light-dark(#ffffff, #0d3252);
-  --mat-sys-primary-container: light-dark(#d1e4ff, #29496a);
+  --mat-sys-primary-container: light-dark(#ffffff, #29496a);
-  --mat-sys-on-primary-container: light-dark(#001d35, #d1e4ff);
+  --mat-sys-on-primary-container: light-dark(#003057, #d1e4ff);
   --mat-sys-inverse-primary: light-dark(#aac9f1, #416183);
   --mat-sys-primary-fixed: light-dark(#d1e4ff, #d1e4ff);
   --mat-sys-primary-fixed-dim: light-dark(#aac9f1, #aac9f1);
@@ -15,10 +15,10 @@ html {
   --mat-sys-on-primary-fixed-variant: light-dark(#29496a, #29496a);
 
   /* Secondary palette variables */
-  --mat-sys-secondary: light-dark(#00658b, #84cffc);
+  --mat-sys-secondary: light-dark(#003057, #84cffc);
   --mat-sys-on-secondary: light-dark(#ffffff, #00344a);
-  --mat-sys-secondary-container: light-dark(#c5e7ff, #004c6a);
+  --mat-sys-secondary-container: light-dark(#003057, #004c6a);
-  --mat-sys-on-secondary-container: light-dark(#001e2d, #c5e7ff);
+  --mat-sys-on-secondary-container: light-dark(#ffffff, #c5e7ff);
   --mat-sys-secondary-fixed: light-dark(#c5e7ff, #c5e7ff);
   --mat-sys-secondary-fixed-dim: light-dark(#84cffc, #84cffc);
   --mat-sys-on-secondary-fixed: light-dark(#001e2d, #001e2d);
@@ -53,7 +53,8 @@ html {
   --mat-sys-inverse-on-surface: light-dark(#f1f0f3, #2f3033);
   --mat-sys-outline: light-dark(#73777e, #8d9198);
   --mat-sys-outline-variant: light-dark(#c3c7ce, #43474e);
-  --mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e); /* Variable used for the form field native select option text color */
+  --mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e);
+  /* Variable used for the form field native select option text color */
 
   /* Error palette variables */
   --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@@ -64,16 +65,22 @@ html {
   /* Neutral variant palette variables */
   --mat-sys-surface-variant: light-dark(#dfe2eb, #43474e);
   --mat-sys-on-surface-variant: light-dark(#43474e, #c3c7ce);
-  --mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137); /* Variable used for the sidenav scrim (container background shadow when opened) */
+  --mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137);
+  /* Variable used for the sidenav scrim (container background shadow when opened) */
 
   /* TYPOGRAPHY SYSTEM VARIABLES */
 
   /* Typography variables. Only used in the different typescale system variables. */
-  --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
+  --mat-sys-brand-font-family: Roboto;
-  --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
+  /* The font-family to use for brand text. */
-  --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
+  --mat-sys-plain-font-family: Roboto;
-  --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
+  /* The font-family to use for plain text. */
-  --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
+  --mat-sys-bold-font-weight: 700;
+  /* The font-weight to use for bold text. */
+  --mat-sys-medium-font-weight: 500;
+  /* The font-weight to use for medium text. */
+  --mat-sys-regular-font-weight: 400;
+  /* The font-weight to use for regular text. */
 
   /* Typescale variables. */
   /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
@@ -233,4 +240,13 @@ html {
   --mat-sys-focus-state-layer-opacity: 0.12;
   --mat-sys-hover-state-layer-opacity: 0.08;
   --mat-sys-pressed-state-layer-opacity: 0.12;
+
+  /* CUSTOM BUTTON COLORS */
+  --custom-button-color: #fff;
+  --custom-button-background-color: #FF6A00;
+  --custom-hover-color: #FFAC70;
+
+  /* CUSTOM NAV COLORS */
+  --custom-nav-color: #003057;
+  --custom-nav-background-color: #ffffff;
 }

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/app.config.ts

@@ -6,6 +6,8 @@ import { provideClientHydration, withEventReplay } from '@angular/platform-brows
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AuthInterceptor } from './core/interceptors/auth.interceptor';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -15,5 +17,6 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(withInterceptorsFromDi()),
     provideCharts(withDefaultRegisterables()),
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
+    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } }
   ]
 };

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;
@@ -20,6 +19,7 @@
         flex-direction: column;
         align-items: center;
         gap: 8px;
+        background: var(--mat-sys-primary);
     }
 
     .footer-links {
@@ -27,22 +27,46 @@
         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-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        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,32 +62,39 @@
         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;
             overflow: hidden;
             z-index: 101;
+            font-size: 0.875rem;
 
             .profile-info {
                 display: flex;
                 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,21 +106,28 @@
                 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);
                 }
             }
         }
     }
 }
 
+.mat-mdc-menu-item:not([disabled]):hover {
+    color: var(--mat-sys-on-primary);
+    background-color: var(--mat-sys-primary);
+}
+
+
 @media (max-width: 768px) {
     .navbar {
         padding: 0 12px;

src/app/home/home.component.html

@@ -58,7 +58,7 @@
 
                     <ng-container matColumnDef="carnetValue">
                         <th mat-header-cell *matHeaderCellDef mat-sort-header>Carnet Value</th>
-                        <td mat-cell *matCellDef="let item">{{ item.carnetValue }}</td>
+                        <td mat-cell *matCellDef="let item">{{ item.carnetValue | currency}}</td>
                     </ng-container>
 
                     <ng-container matColumnDef="issueDate">
@@ -94,7 +94,8 @@
                     </tr>
                 </table>
 
-                <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+                <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!"
+                    [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
                     [hidePageSize]="true" showFirstLastButtons></mat-paginator>
             </div>
 

src/app/preparer/add/add-preparer.component.html

@@ -16,7 +16,7 @@
             <ng-template matStepLabel>Locations</ng-template>
 
             <app-location *ngIf="clientid" [clientid]="clientid" (hasLocations)="onLocationSaved($event)"
-                [userPreferences]="userPreferences">
+                (updated)="onLocationUpdated($event)" [userPreferences]="userPreferences">
             </app-location>
         </mat-step>
 
@@ -25,7 +25,7 @@
             <ng-template matStepLabel>Contacts</ng-template>
 
             <app-contacts *ngIf="clientid" [clientid]="clientid" (hasContacts)="onContactsSaved($event)"
-                [userPreferences]="userPreferences">
+                [userPreferences]="userPreferences" [refreshLocationData]="refreshLocationData">
             </app-contacts>
         </mat-step>
 

src/app/preparer/add/add-preparer.component.ts

@@ -25,6 +25,7 @@ export class AddPreparerComponent {
   contactsCompleted: boolean = false;
   locationCompleted: boolean = false;
   showLocation: boolean = false;
+  refreshLocationData: boolean = false;
 
   constructor(userPrefenceService: UserPreferencesService) {
     this.userPreferences = userPrefenceService.getPreferences();
@@ -43,6 +44,10 @@ export class AddPreparerComponent {
     this.locationCompleted = event;
   }
 
+  onLocationUpdated(updated: boolean): void {
+    this.refreshLocationData = updated;
+  }
+
   onShowLocations(event: boolean): void {
     this.showLocation = event;
   }

src/app/preparer/contacts/contacts.component.html

@@ -100,8 +100,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Contact Form -->
@@ -269,10 +269,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="contactForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>
@@ -310,10 +310,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="contactLoginForm.invalid">
                     Save
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/preparer/contacts/contacts.component.scss

@@ -86,7 +86,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -103,6 +103,7 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
@@ -154,7 +155,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/preparer/contacts/contacts.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { CustomPaginator } from '../../shared/custom-paginator';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
@@ -55,6 +55,7 @@ export class ContactsComponent {
 
   @Input() clientid: number = 0;
   @Input() userPreferences: UserPreferences = {};
+  @Input() refreshLocationData = false;
   @Output() hasContacts = new EventEmitter<boolean>();
 
   private fb = inject(FormBuilder);
@@ -92,6 +93,12 @@ export class ContactsComponent {
     this.dataSource.sort = this.sort;
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['refreshLocationData']) {
+      this.loadLocations();
+    }
+  }
+
   loadLocations(): void {
     this.isLoading = true;
     this.locationService.getLocationsById(this.clientid).subscribe({

src/app/preparer/edit/edit-preparer.component.html

@@ -18,14 +18,16 @@
         <mat-expansion-panel-header>
             <mat-panel-title> Locations </mat-panel-title>
         </mat-expansion-panel-header>
-        <app-location [clientid]="clientid" [userPreferences]="userPreferences"></app-location>
+        <app-location [clientid]="clientid" [userPreferences]="userPreferences"
+            (updated)="onLocationUpdated($event)"></app-location>
     </mat-expansion-panel>
 
     <mat-expansion-panel>
         <mat-expansion-panel-header>
             <mat-panel-title> Contacts </mat-panel-title>
         </mat-expansion-panel-header>
-        <app-contacts [clientid]="clientid" [userPreferences]="userPreferences"></app-contacts>
+        <app-contacts [clientid]="clientid" [userPreferences]="userPreferences"
+            [refreshLocationData]="refreshLocationData"></app-contacts>
     </mat-expansion-panel>
 
 </mat-accordion>

src/app/preparer/edit/edit-preparer.component.ts

@@ -21,6 +21,7 @@ export class EditPreparerComponent {
   clientid = 0;
   clientName: string | null = null;
   userPreferences: UserPreferences;
+  refreshLocationData: boolean = false;
 
   private route = inject(ActivatedRoute);
 
@@ -40,4 +41,8 @@ export class EditPreparerComponent {
   onClientNameUpdate(event: string): void {
     this.clientName = event;
   }
+
+  onLocationUpdated(updated: boolean): void {
+    this.refreshLocationData = updated;
+  }
 }

src/app/preparer/location/location.component.html

@@ -69,8 +69,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Location Form -->
@@ -210,10 +210,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="locationForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/preparer/location/location.component.scss

@@ -76,7 +76,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -93,6 +93,7 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
@@ -136,7 +137,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/preparer/location/location.component.ts

@@ -48,6 +48,7 @@ export class LocationComponent {
   @Input() clientid: number = 0;
   @Input() userPreferences: UserPreferences = {};
   @Output() hasLocations = new EventEmitter<boolean>();
+  @Output() updated = new EventEmitter<boolean>();
 
   countriesHasStates = ['US', 'CA', 'MX'];
 
@@ -160,6 +161,7 @@ export class LocationComponent {
     saveObservable.subscribe({
       next: () => {
         this.notificationService.showSuccess(`Location ${this.isEditing ? 'updated' : 'added'} successfully`);
+        this.updated.emit(true); // to update dependent data
         this.loadLocations();
         this.cancelEdit();
         this.hasLocations.emit(true);

src/app/preparer/manage/manage-preparer.component.html

@@ -127,7 +127,7 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 </div>

src/app/preparer/manage/manage-preparer.component.scss

@@ -38,6 +38,7 @@
         display: flex;
         justify-content: flex-end;
         gap: 0.5rem;
+        margin-top: 0.75rem;
 
         button {
             display: flex;

src/app/service-provider/basic-fee/basic-fee.component.html

@@ -53,8 +53,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Fee Form -->
@@ -136,10 +136,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="feeForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/basic-fee/basic-fee.component.scss

@@ -1,5 +1,5 @@
 .basic-fee-container {
-    padding: 24px;
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -62,7 +62,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -79,6 +79,7 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
@@ -130,7 +131,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/service-provider/carnet-fee/carnet-fee.component.html

@@ -54,8 +54,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Fee & Commission Form -->
@@ -123,10 +123,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="feeCommissionForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/carnet-fee/carnet-fee.component.scss

@@ -76,7 +76,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -93,6 +93,7 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
@@ -140,7 +141,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/service-provider/carnet-sequence/carnet-sequence.component.html

@@ -65,8 +65,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Sequence Form -->
@@ -138,10 +138,10 @@
             </mat-error>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="sequenceForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/carnet-sequence/carnet-sequence.component.scss

@@ -1,5 +1,5 @@
 .carnet-sequence-container {
-    padding: 24px;
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 24px;

src/app/service-provider/contacts/contacts.component.html

@@ -85,8 +85,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Contact Form -->
@@ -243,10 +243,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="contactForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/contacts/contacts.component.scss

@@ -1,5 +1,5 @@
 .contacts-container {
-    padding: 24px;
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -81,7 +81,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -98,6 +98,7 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
@@ -141,7 +142,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.html

@@ -65,8 +65,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Continuation Sheet Form -->
@@ -151,10 +151,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="continuationSheetForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.scss

@@ -1,5 +1,5 @@
 .continuation-sheet-container {
-    padding: 24px;
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -76,7 +76,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -93,10 +93,15 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
                 }
+
+                mat-label {
+                    font-size: 0.875rem;
+                }
             }
 
             .form-error {
@@ -158,7 +163,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/service-provider/counterfoil-fee/counterfoil-fee.component.html

@@ -77,8 +77,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Counterfoil Form -->
@@ -197,10 +197,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="counterfoilForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/counterfoil-fee/counterfoil-fee.component.scss

@@ -1,5 +1,5 @@
 .counterfoil-container {
-    padding: 24px;
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -76,7 +76,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -93,10 +93,15 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
                 }
+
+                mat-label {
+                    font-size: 0.875rem;
+                }
             }
 
             .form-error {
@@ -158,7 +163,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/service-provider/expedited-fee/expedited-fee.component.html

@@ -65,8 +65,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Fee Form -->
@@ -195,10 +195,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="feeForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/expedited-fee/expedited-fee.component.scss

@@ -1,5 +1,5 @@
 .expedited-fee-container {
-    padding: 24px;
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -76,7 +76,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -93,10 +93,15 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
                 }
+
+                mat-label {
+                    font-size: 0.875rem;
+                }
             }
 
             .form-error {
@@ -158,7 +163,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/service-provider/security-deposit/security-deposit.component.html

@@ -79,8 +79,8 @@
             </tr>
         </table>
 
-        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
+        <mat-paginator *ngIf="dataSource.data.length > userPreferences.pageSize!" [length]="dataSource.data.length"
-            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
+            [pageSizeOptions]="[userPreferences.pageSize!]" [hidePageSize]="true" showFirstLastButtons></mat-paginator>
     </div>
 
     <!-- Deposit Form -->
@@ -179,10 +179,10 @@
             </div>
 
             <div class="form-actions">
-                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
                 <button mat-raised-button color="primary" type="submit" [disabled]="depositForm.invalid">
                     {{ isEditing ? 'Update' : 'Save' }}
                 </button>
+                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
             </div>
         </form>
     </div>

src/app/service-provider/security-deposit/security-deposit.component.scss

@@ -1,5 +1,5 @@
 .security-deposit-container {
-    padding: 24px;
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -81,7 +81,7 @@
         margin-top: 16px;
 
         .form-header {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
 
             h3 {
                 margin: 0;
@@ -98,10 +98,15 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
                 }
+
+                mat-label {
+                    font-size: 0.875rem;
+                }
             }
 
             .form-error {
@@ -163,7 +168,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -9,10 +9,10 @@ import { AngularMaterialModule } from '../../module/angular-material.module';
     <h2 mat-dialog-title>{{ data.title }}</h2>
     <mat-dialog-content>{{ data.message }}</mat-dialog-content>
     <mat-dialog-actions align="end">
-      <button mat-button [mat-dialog-close]="false">{{ data.cancelText || 'Cancel' }}</button>
       <button mat-raised-button color="warn" [mat-dialog-close]="true">
         {{ data.confirmText || 'Confirm' }}
       </button>
+      <button mat-button [mat-dialog-close]="false">{{ data.cancelText || 'Cancel' }}</button>
     </mat-dialog-actions>
   `,
   styles: [`

src/app/user-settings/user-settings.component.scss

@@ -28,6 +28,7 @@
             .label {
                 padding-right: 1rem;
                 padding-bottom: 2rem;
+                font-size: 0.875rem;
             }
 
             .control {

src/styles.scss

@@ -2,8 +2,7 @@
 @use '@angular/material' as mat;
 
 html {
-    @include mat.theme((density: -3,
+    @include mat.theme((density: -5));
-        ));
 }
 
 html,
@@ -15,3 +14,101 @@ body {
     margin: 0;
     font-family: Roboto, "Helvetica Neue", sans-serif;
 }
+
+:root {
+
+    /*form field*/
+    @include mat.form-field-overrides((container-text-size: 0.875rem,
+            container-text-line-height:1.7, // line height should be atleast 1.5 times text size
+            outlined-label-text-size:0.875rem));
+
+    /* 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
+        ));
+
+    /*select*/
+    @include mat.select-overrides((trigger-text-size:0.875rem,
+            trigger-text-line-height:1.7, // line height should be atleast 1.5 times text size
+        ));
+
+    /*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;
+        }
+    }
+
+    /* Table */
+    @include mat.table-overrides((header-headline-color:var(--mat-sys-on-primary),
+        ));
+
+    .mat-mdc-table .mat-mdc-header-cell {
+        background: var(--mat-sys-primary);
+    }
+
+    /* Sort */
+    @include mat.sort-overrides((arrow-color: var(--mat-sys-on-primary),
+        ));
+}