Merge pull request #2999 from AnvayKharb/web-583-improving-the-ui-of-the-investor

WEB-583: Improve UI Alignment of Investor Filters

src/app/organization/investors/investors.component.html

@@ -8,13 +8,14 @@
 
 <mat-card class="container">
   <mat-card-content>
-    <div class="layout-row-wrap gap-2px responsive-column">
+    <div class="investor-filter-section">
-      <mat-form-field class="flex-18">
+      <div class="filter-row">
+        <mat-form-field class="filter-field">
           <mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
           <input matInput [formControl]="searchText" />
         </mat-form-field>
 
-      <mat-form-field class="flex-18" (click)="effectiveFromDatePicker.open()">
+        <mat-form-field class="filter-field" (click)="effectiveFromDatePicker.open()">
           <mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
           <input
             matInput
@@ -27,7 +28,7 @@
           <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
         </mat-form-field>
 
-      <mat-form-field class="flex-18" (click)="effectiveToDatePicker.open()">
+        <mat-form-field class="filter-field" (click)="effectiveToDatePicker.open()">
           <mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
           <input
             matInput
@@ -39,8 +40,10 @@
           <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #effectiveToDatePicker></mat-datepicker>
         </mat-form-field>
+      </div>
 
-      <mat-form-field class="flex-18" (click)="settlementFromDatePicker.open()">
+      <div class="filter-row">
+        <mat-form-field class="filter-field" (click)="settlementFromDatePicker.open()">
           <mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
           <input
             matInput
@@ -53,7 +56,7 @@
           <mat-datepicker #settlementFromDatePicker></mat-datepicker>
         </mat-form-field>
 
-      <mat-form-field class="flex-18" (click)="settlementToDatePicker.open()">
+        <mat-form-field class="filter-field" (click)="settlementToDatePicker.open()">
           <mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
           <input
             matInput
@@ -66,12 +69,13 @@
           <mat-datepicker #settlementToDatePicker></mat-datepicker>
         </mat-form-field>
 
-      <div class="center m-t-15 flex-98">
+        <div class="filter-button-container">
-        <button mat-raised-button color="primary" (click)="searchEAO()">
+          <button mat-raised-button color="primary" (click)="searchEAO()" class="search-button">
             <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
           </button>
         </div>
       </div>
+    </div>
 
     <div class="mat-elevation-z8 container m-t-20">
       @if (isLoading) {

src/app/organization/investors/investors.component.scss

@@ -6,6 +6,90 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+// Filter Section Styling
+.investor-filter-section {
+  margin-bottom: 24px;
+
+  .filter-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .filter-field {
+    flex: 1 1 calc(33.333% - 11px);
+    min-width: 200px;
+    max-width: 100%;
+
+    // Ensure consistent height across all fields
+    ::ng-deep .mat-mdc-form-field-infix {
+      min-height: 56px;
+    }
+
+    // Align datepicker icons consistently
+    ::ng-deep .mat-datepicker-toggle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .filter-button-container {
+    flex: 1 1 calc(33.333% - 11px);
+    min-width: 200px;
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 4px;
+
+    .search-button {
+      width: 100%;
+      height: 48px;
+      font-size: 15px;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+
+      fa-icon {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  // Responsive adjustments for tablets
+  @media screen and (width <= 1024px) {
+    .filter-field,
+    .filter-button-container {
+      flex: 1 1 calc(50% - 8px);
+      min-width: 180px;
+    }
+  }
+
+  // Responsive adjustments for mobile
+  @media screen and (width <= 768px) {
+    .filter-row {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .filter-field,
+    .filter-button-container {
+      flex: 1 1 100%;
+      width: 100%;
+      max-width: 100%;
+      min-width: 100%;
+    }
+
+    .filter-button-container {
+      padding-bottom: 0;
+      margin-top: 8px;
+    }
+  }
+}
+
 .status {
   color: black;
 }