System views updated

src/app/shared/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div class="layout-column m-b-20" id="footer" *ngIf="displayBackEndInfo">
+<div class="layout-column m-b-20" ngClass="{{ styleClass }}" id="footer" *ngIf="displayBackEndInfo">
   <mat-divider class="divider align-center"></mat-divider>
   <div class="layout-column m-b-20 content-wrapper footer-center">
     <table class="versions">
@@ -28,5 +28,7 @@
     </table>
   </div>
   <mat-divider class="divider align-center"></mat-divider>
+</div>
+<div class="layout-column m-b-20 copy-label">
   <p class="footer-content align-center">{{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos</p>
 </div>

src/app/shared/footer/footer.component.scss

@@ -3,11 +3,13 @@
 
 #footer {
   align-items: center;
+  min-width: 400px;
 
   .content-wrapper {
     max-width: 100%;
-    width: 70%;
-    padding-left: 30%;
+    min-width: 90%;
+    padding-left: 5%;
+    padding-right: 5%;
 
     .versions {
       width: 100%;
@@ -36,3 +38,15 @@
     }
   }
 }
+
+.main-page {
+  max-width: 70%;
+  min-width: 50%;
+  padding-left: 30%;
+}
+
+.copy-label {
+  min-width: 100%;
+  text-align: center;
+  font-size: large;
+}

src/app/shared/footer/footer.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Alert } from 'app/core/alert/alert.model';
 import { AlertService } from 'app/core/alert/alert.service';
 import { AuthenticationService } from 'app/core/authentication/authentication.service';
@@ -21,6 +21,8 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit, OnDestroy {
+  @Input() styleClass: string = '';
+
   /** Mifos X version. */
   versions: any = {
     mifos: environment.version,

src/app/shared/search-tool/search-tool.component.html

@@ -1,21 +1,23 @@
-<div *ngIf="searchVisible" class="search-bar flex-auto layout-row gap-2percent hide-lt-sm" [@fadeInOut]>
-  <mat-form-field class="search">
-    <mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
-    <input matInput type="text" [formControl]="query" (keydown.enter)="search()" />
-  </mat-form-field>
+<div class="flex-100 layout-row">
+  <div *ngIf="searchVisible" class="search-bar flex-90 layout-row hide-lt-sm" [@fadeInOut]>
+    <mat-form-field class="search flex-45">
+      <mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
+      <input matInput type="text" [formControl]="query" (keydown.enter)="search()" />
+    </mat-form-field>
 
-  <mat-form-field class="resource">
-    <mat-label>{{ 'labels.inputs.Resource' | translate }}</mat-label>
-    <mat-select [formControl]="resource">
-      <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
-        {{ 'labels.text.' + option.name | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-</div>
+    <mat-form-field class="resource flex-50">
+      <mat-label>{{ 'labels.inputs.Resource' | translate }}</mat-label>
+      <mat-select [formControl]="resource">
+        <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
+          {{ 'labels.text.' + option.name | translate }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
 
-<div class="search-icon">
-  <button mat-icon-button (click)="toggleSearchVisibility()" class="hide-lt-sm">
-    <fa-icon icon="search" size="lg" matTooltip="{{ 'labels.text.Search' | translate }}"></fa-icon>
-  </button>
+  <div class="search-icon flex-10">
+    <button mat-icon-button (click)="toggleSearchVisibility()" class="hide-lt-sm">
+      <fa-icon icon="search" size="lg" matTooltip="{{ 'labels.text.Search' | translate }}"></fa-icon>
+    </button>
+  </div>
 </div>

src/app/shared/search-tool/search-tool.component.scss

@@ -1,14 +1,16 @@
 .search-bar {
   .search {
-    max-width: 400px;
+    max-width: 500px;
     width: 100%;
     font-size: 1rem;
+    color: white;
   }
 
   .resource {
     max-width: 90px;
     width: 100%;
     font-size: 1rem;
+    color: white;
   }
 }
 
@@ -17,3 +19,17 @@
   display: flex;
   align-items: center;
 }
+
+.mat-mdc-floating-label,
+mat-form-field input {
+  color: white !important;
+  height: 16px;
+  transition: height ease-in-out 400ms;
+}
+
+mat-form-field input:focus {
+  color: white !important;
+  background-color: transparent;
+  height: 16px;
+  transition: height ease-in-out 400ms;
+}