ui feedback updates

src/app/app.config.ts

@@ -6,6 +6,7 @@ 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: [
@@ -16,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/carnet/application/application.component.scss

@@ -11,6 +11,10 @@
         background: none;
         box-shadow: none;
 
+        mat-card-content {
+            padding: inherit 0;
+        }
+
         .loading-shade {
             position: absolute;
             top: 0;

src/app/carnet/goods/goods.component.scss

@@ -1,8 +1,7 @@
 .goods-container {
-    padding: 16px;
 
     .form-section {
-        margin-bottom: 1rem;
+        margin-bottom: 0.75rem;
     }
 
     .checkbox-group {
@@ -29,14 +28,14 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 16px;
+        margin-bottom: 0.75rem;
 
         h3 {
             margin: 0;
             color: var(--mat-sys-primary);
             font-weight: 500;
         }
-        
+
         .actions {
             display: flex;
             gap: 16px;
@@ -58,9 +57,8 @@
     }
 
     .table-container {
-        position: relative;
+        // position: relative;
-        overflow-x: auto;
+        // overflow-x: auto;
-        margin-bottom: 16px;
 
         .loading-shade {
             position: absolute;
@@ -139,6 +137,7 @@
             display: flex;
             gap: 16px;
             margin-bottom: 16px;
+            align-items: start;
 
             mat-form-field {
                 flex: 1;
@@ -164,6 +163,6 @@
     .form-actions {
         display: flex;
         justify-content: flex-end;
-        margin-top: 24px;
+        margin-top: 0.9rem;
     }
 }

src/app/carnet/goods/goods.component.ts

@@ -186,6 +186,7 @@ export class GoodsComponent {
       weight: 0,
       value: 0
     });
+    this.itemForm.markAsUntouched();
   }
 
   // Edit existing item

src/app/carnet/shipping/shipping.component.html

@@ -49,7 +49,7 @@
                         <mat-label>Company Name</mat-label>
                         <input matInput formControlName="companyName" required>
                         <mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['required']">
-                            Address is required
+                            Company name is required
                         </mat-error>
                         <mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['maxlength']">
                             Maximum 100 characters allowed

src/app/carnet/shipping/shipping.component.scss

@@ -1,14 +1,14 @@
 .shipping-container {
-    padding: 16px;
+    padding-top: 0.5rem;
 
     .section {
-        margin-bottom: 24px;
+        margin-bottom: 1rem;
         padding: 16px;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
 
         h3 {
-            margin: 0px 0px 16px 0px;
+            margin: 0 0 0.9rem 0;
             color: var(--mat-sys-primary);
             font-weight: 500;
         }
@@ -33,12 +33,14 @@
     .radio-group {
         display: flex;
         gap: 16px;
-        margin-bottom: 16px;
+        margin-bottom: 0.9rem;
     }
 
     .form-row {
         display: flex;
         gap: 16px;
+        margin-bottom: 0.5rem;
+        align-items: start;
 
         mat-form-field {
             flex: 1;
@@ -58,7 +60,7 @@
         display: flex;
         justify-content: flex-end;
         gap: 16px;
-        margin-top: 16px;
+        margin-top: 0.9rem;
     }
 
     .presaved-address {
@@ -66,6 +68,7 @@
         display: flex;
         flex-direction: row;
         gap: 8px;
+        font-size: 0.875rem;
 
         p {
             margin: 0;

src/app/carnet/shipping/shipping.component.ts

@@ -413,7 +413,7 @@ export class ShippingComponent {
         notes: shipping.contact?.notes,
       })
     }
-
+    this.shippingForm.markAsUntouched();
     this.completed.emit(this.shippingForm.valid);
   }
 

src/app/carnet/terms-conditions/terms-conditions.component.scss

@@ -20,6 +20,7 @@ mat-card-header {
     flex: 1;
     overflow-y: auto;
     padding: 16px;
+    font-size: 0.875rem;
 
     h3 {
         color: var(--mat-sys-primary);

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

@@ -8,6 +8,18 @@
     //     max-width: 300px;
     // }
 
+
+    .form-row {
+        // display: flex;
+        // gap: 16px;
+        margin-bottom: 16px;
+        //align-items: start;
+
+        // mat-form-field {
+        //     flex: 1;
+        // }
+    }
+
     .usa-entries {
         width: 300px;
     }
@@ -32,7 +44,7 @@
 
         h3 {
             margin: 0 0 16px 0;
-            font-size: 16px;
+            font-size: 0.875rem;
             font-weight: 500;
         }
 
@@ -99,6 +111,7 @@
         .totals-section {
             display: flex;
             gap: 24px;
+            font-size: 0.875rem;
 
             .total-item {
                 display: flex;

src/app/holder/contacts/contacts.component.scss

@@ -104,6 +104,7 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;
@@ -155,7 +156,7 @@
 
                     .readonly-value {
                         padding: 0.25rem;
-                        font-size: 0.9375rem;
+                        font-size: 0.875rem;
                         display: flex;
                         align-items: center;
                     }

src/app/holder/search/search-holder.component.scss

@@ -1,5 +1,5 @@
 .page-header {
-    margin: 0.5rem 0px;
+    margin: 0.5rem 0 0;
     color: var(--mat-sys-primary);
     font-weight: 500;
 }
@@ -38,6 +38,7 @@
         display: flex;
         justify-content: flex-end;
         gap: 0.5rem;
+        margin-top: 0.9rem;
 
         button {
             display: flex;
@@ -63,6 +64,11 @@
             justify-content: center;
         }
 
+        mat-slide-toggle {
+            transform: scale(0.8);
+            margin-left: -0.5rem;
+        }
+
         .selected-holder {
             color: #28a745;
             font-weight: 500;

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

@@ -13,4 +13,28 @@ body {
 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));
+
+    /* 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
+        ));
+
+    /*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;
 }