refactor: improve navigation component CSS

Author: shubhamkumar9199

src/app/navigation/navigation.component.scss

@@ -0,0 +1,53 @@
+// Component-specific styles - minimal overrides
+// Leverages global layout classes from main.scss
+
+:host {
+  display: block;
+}
+
+.container {
+  width: 100%;
+}
+
+// Using existing .layout-row-wrap.responsive-column from global styles
+// Only adding specific alignment needed for this component
+.layout-row-wrap.responsive-column {
+  align-items: flex-start;
+}
+
+// Extending global .flex-48 with min-width constraint for this component
+.flex-48 {
+  min-width: 20rem;
+
+  @media (width >= 1200px) {
+    flex-basis: 48%;
+  }
+}
+
+mat-card {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+mat-card-content {
+  display: grid;
+  grid-template-columns: 100%;
+
+  @media (width >= 768px) {
+    grid-template-columns: 50% 50%;
+  }
+
+  @media (width >= 1200px) {
+    grid-template-columns: 50% 50%;
+    gap: 1rem;
+  }
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+mat-label {
+  letter-spacing: 0.0125rem;
+}

src/app/navigation/office-navigation/office-navigation.component.html

@@ -1,45 +1,31 @@
-<mat-card-header class="layout-row gap-5percent header">
-  <fa-icon class="main-icon" icon="building" size="3x"></fa-icon>
-  <mat-card-title-group>
-    <div class="mat-typography">
-      <mat-card-title>
-        <h2>
-          {{ officeData.name }}
-        </h2>
-      </mat-card-title>
-      <mat-card-subtitle>
-        <p *ngIf="officeData.externalId">
-          {{ 'labels.inputs.External Id' | translate }}:<mifosx-external-identifier
-            externalId="{{ officeData.externalId }}"
-          ></mifosx-external-identifier>
-        </p>
-      </mat-card-subtitle>
-    </div>
+<mat-card-header class="layout-row align-items-center gap-10px">
+  <fa-icon icon="building" size="3x"></fa-icon>
+  <mat-card-title-group class="flex-fill">
+    <mat-card-title>
+      <h2>{{ officeData.name }}</h2>
+    </mat-card-title>
   </mat-card-title-group>
 </mat-card-header>
 
 <mat-card-content>
   <div class="layout-row-wrap">
+    <div class="flex-50 mat-body-strong" *ngIf="officeData.externalId">
+      {{ 'labels.inputs.External Id' | translate }}
+    </div>
+    <div class="flex-50" *ngIf="officeData.externalId">
+      <mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
+    </div>
+
     <div class="flex-50 mat-body-strong">
       {{ 'labels.inputs.Opened On' | translate }}
     </div>
-
     <div class="flex-50">
       {{ officeData.openingDate | dateFormat }}
     </div>
 
-    <div class="flex-50 mat-body-strong" *ngIf="officeData.parentName">
-      {{ 'labels.inputs.Parent officeData' | translate }}
-    </div>
-
-    <div class="flex-50" *ngIf="officeData.parentName">
-      {{ officeData.parentName }}
-    </div>
-
     <div class="flex-50 mat-body-strong">
       {{ 'labels.inputs.Number of Staff' | translate }}
     </div>
-
     <div class="flex-50">
       {{ employeeData ? employeeData.length : '' }}
     </div>

src/app/navigation/office-navigation/office-navigation.component.scss

@@ -1,14 +1,55 @@
-h2 {
-  font-weight: 500;
+// Component-specific styles - minimal overrides to global styles
+// Follows existing patterns from general-tab components
+
+mat-card-header {
+  padding: 1.5rem 1.5rem 1rem;
+
+  h2 {
+    font-weight: 500;
+    font-size: 1.5rem;
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  @media (width <= 480px) {
+    padding: 1rem;
+
+    h2 {
+      font-size: 1.25rem;
+    }
+  }
 }
 
-.content {
-  div {
-    margin: 1rem 0;
+mat-card-content {
+  padding: 1.5rem;
+
+  .layout-row-wrap {
+    display: grid;
+    grid-template-columns: 50% 50%;
+
+    @media (width <= 768px) {
+      grid-template-columns: 100%;
+    }
+  }
+
+  .flex-50 {
+    padding: 0.625rem 0;
+    display: flex;
+    align-items: center;
+    font-size: 0.875rem;
     word-wrap: break-word;
+    line-height: 1.6;
+
+    &.mat-body-strong {
+      font-weight: 600;
+    }
+
+    &:not(:last-child, :nth-last-child(2)) {
+      border-bottom: 1px solid #ddd;
+    }
   }
-}
 
-.main-icon {
-  margin: 7px 0 0;
+  @media (width <= 480px) {
+    padding: 1rem;
+  }
 }