improve the css of general-tab (#2721)

remove  the dupicate line of code

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -1,27 +1,22 @@
-<div class="tab-container mat-typography">
+<div class="tab-container mat-typography compact-view">
-  <div class="layout-align-end action-button m-b-20">
+  <div class="layout-row-wrap responsive-column compact-details condensed">
-    <span *mifosxHasPermission="'UPDATE_OFFICE'">
-      <button mat-raised-button color="primary" [routerLink]="['../edit']">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-      </button>
-    </span>
-  </div>
-
-  <div class="layout-row-wrap responsive-column">
     <div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Parent Office' | translate }}</div>
     <div class="flex-50 right">
       {{ officeData.parentName ? officeData.parentName : 'N/A' }}
     </div>
+    <hr class="section-divider" />
 
     <div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Opened On' | translate }}</div>
     <div class="flex-50 right">
       {{ officeData.openingDate ? (officeData.openingDate | dateFormat) : 'Unassigned' }}
     </div>
+    <hr class="section-divider" />
 
     <div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Name Decorated' | translate }}</div>
     <div class="flex-50 right">
       {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
     </div>
+    <hr class="section-divider" />
 
     <div class="flex-45 mat-body-strong left">{{ 'labels.inputs.External Id' | translate }}</div>
     <div class="flex-50 right" *ngIf="officeData.externalId">
@@ -31,4 +26,12 @@
       {{ 'labels.inputs.Unassigned' | translate }}
     </div>
   </div>
+
+  <div class="bottom-button-container small-buttons">
+    <span *mifosxHasPermission="'UPDATE_OFFICE'">
+      <button mat-raised-button color="primary" [routerLink]="['../edit']" class="edit-button">
+        <fa-icon icon="edit" class="m-r-5"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+      </button>
+    </span>
+  </div>
 </div>

src/app/organization/offices/view-office/general-tab/general-tab.component.scss

@@ -1,6 +1,8 @@
 .tab-container {
-  padding: 1%;
+  padding: 0.5rem;
-  margin: 1%;
+  margin: 1% auto;
+  max-width: 600px;
+  width: 90%;
 
   .delete-button {
     margin-left: 1%;
@@ -14,3 +16,89 @@
 .table-data {
   margin-top: 3px;
 }
+
+.compact-button {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.9rem;
+  line-height: 1.75;
+}
+
+.compact-details {
+  font-size: 0.9rem;
+
+  .left,
+  .right {
+    padding: 0.25rem 0;
+  }
+
+  .mat-body-strong {
+    font-size: 0.9rem;
+  }
+}
+
+.bottom-button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+  padding: 1rem 0;
+}
+
+.edit-button {
+  min-width: 120px;
+  padding: 0.5rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 4px;
+  box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
+    transform: translateY(-2px);
+  }
+}
+
+.layout-row-wrap {
+  margin: 0 auto;
+  padding: 0.5rem;
+}
+
+.section-divider {
+  width: 100%;
+  border: 0;
+  border-top: 1px solid rgb(0 0 0 / 10%);
+  margin: 8px 0;
+}
+
+.compact-view {
+  padding: 0.3rem;
+  margin: 0 auto;
+  max-width: 450px;
+  width: 90%;
+}
+
+.condensed {
+  .flex-45,
+  .flex-50 {
+    padding: 0.2rem 0;
+    font-size: 0.85rem;
+  }
+
+  .section-divider {
+    margin: 4px 0;
+  }
+}
+
+.small-buttons {
+  margin-top: 1rem;
+
+  .edit-button {
+    min-width: 100px;
+    padding: 0.35rem 1rem;
+    font-size: 0.9rem;
+  }
+}
+
+.tab-container.compact-view {
+  max-width: 450px;
+  width: 90%;
+}

src/app/organization/offices/view-office/view-office.component.html

@@ -1,6 +1,6 @@
-<div class="container">
+<div class="container narrow-container extra-small">
   <mat-card class="office-card">
-    <mat-card-content>
+    <mat-card-content class="card-content">
       <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
         <a
           mat-tab-link
@@ -8,6 +8,7 @@
           routerLinkActive
           #general="routerLinkActive"
           [active]="general.isActive"
+          class="compact-tab"
         >
           {{ 'labels.inputs.General' | translate }}
         </a>
@@ -19,13 +20,14 @@
             routerLinkActive
             #datatable="routerLinkActive"
             [active]="datatable.isActive"
+            class="compact-tab"
           >
             {{ officeDatatable.registeredTableName }}
           </a>
         </span>
       </nav>
 
-      <mat-tab-nav-panel #tabPanel>
+      <mat-tab-nav-panel #tabPanel class="tab-panel">
         <router-outlet></router-outlet>
       </mat-tab-nav-panel>
     </mat-card-content>

src/app/organization/offices/view-office/view-office.component.scss

@@ -1,13 +1,74 @@
 .action-button {
-  width: 95%;
+  width: 85%;
+  margin: 0.2rem auto;
+  padding: 0.3rem;
+  border-radius: 3px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
+  }
 }
 
 .office-card {
-  margin: 0 auto;
+  width: 100%;
-  width: 90%;
+  margin: 0.75rem auto;
-  padding: 0;
+  padding: 0.5rem;
+  border-radius: 8px !important;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
 
   .navigation-tabs {
     overflow: auto;
+    padding: 0.2rem 0;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgb(0 0 0 / 20%);
+      border-radius: 4px;
+    }
+
+    .mat-tab-label {
+      min-width: 80px;
+      padding: 0 0.5rem;
+      height: 36px;
+      font-size: 0.85rem;
+    }
+  }
+
+  @media (width <= 768px) {
+    width: 85%;
+    padding: 0.4rem;
   }
 }
+
+.container {
+  padding: 0.5rem;
+}
+
+.narrow-container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0.75rem;
+}
+
+.extra-small {
+  max-width: 500px;
+}
+
+.compact-tab {
+  min-width: auto;
+  padding: 0 12px;
+}
+
+.card-content {
+  padding: 0.5rem;
+}
+
+.tab-panel {
+  padding: 0.5rem 0;
+}