Login view with the support of dark theme

src/app/core/shell/toolbar/toolbar.component.html

@@ -59,7 +59,7 @@
   </div>
 
   <div #themeToggle>
-    <theme-toggle-component></theme-toggle-component>
+    <mifosx-theme-toggle></mifosx-theme-toggle>
   </div>
   
   <div #appMenu>

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -21,8 +21,10 @@
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <input matInput required formControlName="transactionAmount">
-            <mat-error type="number" *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
+            <span matTextSuffix class="m-l-10" *ngIf="dataObject.currency">{{ dataObject.currency.code }}</span>
+            <span fxFlex="auto"></span>
+            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
+            <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
               {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>

src/app/login/login.component.html

@@ -35,13 +35,14 @@
     <!-- Language Selector to the extreme right -->
     <div fxLayout="row-reverse" fxFlex="1 0 auto">
       <mifosx-language-selector class="p-r-10 p-t-10"></mifosx-language-selector>
+      <mifosx-theme-toggle class="p-r-10 p-t-10"></mifosx-theme-toggle>
       <div fxFlex></div>
       <mifosx-server-selector class="p-l-10 p-t-10" *ngIf="environment.allowServerSwitch"></mifosx-server-selector>
     </div>
 
     <!-- Logo with Organization Name -->
     <div fxLayout="row" fxLayoutAlign="center center" fxFlex="1 0 auto">
-      <img src="assets/images/mifos-logo-flat.png" alt="{{ 'APP_NAME' | translate}} Logo" class="img-container">
+      <img src="assets/images/mifos_lg-logo.png" alt="{{ 'APP_NAME' | translate}} Logo" class="img-container">
     </div>
 
     <!-- Tenant Identifier Name -->
@@ -72,6 +73,9 @@
     <!-- Footer -->
     <mifosx-footer></mifosx-footer>
 
+    <div fxLayout="row" fxLayoutAlign="end" class="m-b-20 m-r-10">
+      <a (click)="reloadSettings()"><fa-icon icon="refresh"></fa-icon></a>
+    </div>
   </div>
 
 </div>

src/app/login/login.component.ts

@@ -13,6 +13,7 @@ import { AlertService } from '../core/alert/alert.service';
 
 /** Environment Imports */
 import { environment } from '../../environments/environment';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Login component.
@@ -38,7 +39,8 @@ export class LoginComponent implements OnInit, OnDestroy {
    * @param {Router} router Router for navigation.
    */
   constructor(private alertService: AlertService,
-              private router: Router) { }
+      private settingsService: SettingsService,
+      private router: Router) { }
 
   /**
    * Subscribes to alert event of alert service.
@@ -67,4 +69,12 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.alert$.unsubscribe();
   }
 
+  reloadSettings(): void {
+    this.settingsService.setTenantIdentifier('');
+    this.settingsService.setTenantIdentifier(environment.fineractPlatformTenantId || 'default');
+    this.settingsService.setTenantIdentifiers(environment.fineractPlatformTenantIds.split(','));
+    this.settingsService.setServers(environment.baseApiUrls.split(','));
+    window.location.reload();
+  }
+
 }

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.scss

@@ -23,8 +23,3 @@
     }
   }
 }
-
-.strike {
-  text-decoration: line-through;
-  color: red;
-}

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

@@ -2,25 +2,25 @@
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <div fxLayout="column" class="m-b-20 content">
 
-  <table class="versions">
-    <tr>
-      <td class="footer-content">Mifos</td>
-      <td class="right footer-content">{{ versions.mifos }} - <b>{{ hash }}</b></td>
-    </tr>
-    <tr>
-      <td class="footer-content">Fineract</td>
-      <td class="right footer-content">{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b></td>
-    </tr>
-    <tr *ngIf="displayBackEndInfo">
-      <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
-    </tr>
-    <tr *ngIf="isBusinessDateDefined">
-      <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
-      <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
-    </tr>
-  </table>
+    <table class="versions">
+      <tr>
+        <td class="footer-content">Mifos</td>
+        <td class="right footer-content">{{ versions.mifos }} - <b>{{ hash }}</b></td>
+      </tr>
+      <tr>
+        <td class="footer-content">Fineract</td>
+        <td class="right footer-content">{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b></td>
+      </tr>
+      <tr *ngIf="displayBackEndInfo">
+        <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
+      </tr>
+      <tr *ngIf="isBusinessDateDefined">
+        <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
+        <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
+      </tr>
+    </table>
   </div>
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate}} {{'labels.text.by' | translate}} Mifos
   </p>
-</div>
+</div>

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

@@ -5,6 +5,12 @@
 
   .content {
     max-width: 30%;
+    width: 30%;
+
+    .versions {
+      width: 100%;
+      color: $status-inactive;
+    }
 
     .footer-content {
       margin: 0;
@@ -20,9 +26,6 @@
     color: $status-approved;
   }
 
-  .versions {
-    color: $status-inactive;
-  }
 
   table {
     border: none;

src/app/shared/shared.module.ts

@@ -22,7 +22,6 @@ import { SearchToolComponent } from './search-tool/search-tool.component';
 import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
 import { ServerSelectorComponent } from './server-selector/server-selector.component';
 import { TenantSelectorComponent } from './tenant-selector/tenant-selector.component';
-import { ThemeToggleComponent } from '../theme-toggle/theme-toggle.component';
 
 /** Custom Modules */
 import { IconsModule } from './icons.module';
@@ -47,6 +46,7 @@ import { StepperButtonsComponent } from './steppers/stepper-buttons/stepper-butt
 import { GlAccountSelectorComponent } from './accounting/gl-account-selector/gl-account-selector.component';
 import { GlAccountDisplayComponent } from './accounting/gl-account-display/gl-account-display.component';
 import { ViewSavingsAccountingDetailsComponent } from './accounting/view-savings-accounting-details/view-savings-accounting-details.component';
+import { ThemeToggleComponent } from './theme-toggle/theme-toggle.component';
 
 /**
  * Shared Module
@@ -132,7 +132,7 @@ import { ViewSavingsAccountingDetailsComponent } from './accounting/view-savings
     GlAccountSelectorComponent,
     GlAccountDisplayComponent,
     ViewSavingsAccountingDetailsComponent,
-    ThemeToggleComponent,
+    ThemeToggleComponent
   ]
 })
 export class SharedModule { }

src/app/shared/theme-toggle/theme-toggle.component.ts

@@ -2,11 +2,12 @@ import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ThemingService } from './theming.service';
 
 @Component({
-  selector: 'theme-toggle-component',
+  selector: 'mifosx-theme-toggle',
   templateUrl: './theme-toggle.component.html',
-  styleUrls: ['./theme-toggle.component.scss'],
+  styleUrls: ['./theme-toggle.component.scss']
 })
 export class ThemeToggleComponent implements OnInit, OnChanges {
+
   darkModeOn: boolean;
 
   constructor(private themingService: ThemingService) {
@@ -25,4 +26,5 @@ export class ThemeToggleComponent implements OnInit, OnChanges {
     this.darkModeOn = !this.darkModeOn;
     this.themingService.setDarkMode(this.darkModeOn);
   }
+
 }

src/app/shared/theme-toggle/theming.service.ts

@@ -7,24 +7,22 @@ import { BehaviorSubject } from 'rxjs';
 export class ThemingService {
   private darkModeOn = false;
 
-  themes = ["dark-theme", "light-theme"]; // <- list all themes in this array
-  theme = new BehaviorSubject("light-theme"); // <- initial theme
+  themes = ['dark-theme', 'light-theme']; // <- list all themes in this array
+  theme = new BehaviorSubject('light-theme'); // <- initial theme
 
   constructor(private ref: ApplicationRef) {
     // Initially check if dark mode is enabled on system
     this.darkModeOn =
       window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches;
-    
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
+
     // If dark mode is enabled then directly switch to the dark-theme
-    if(this.darkModeOn){
-      this.theme.next("dark-theme");
-    }
+    this.setDarkMode(this.darkModeOn);
 
     // Watch for changes of the preference
-    window.matchMedia("(prefers-color-scheme: dark)").addListener(e => {
+    window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
       const turnOn = e.matches;
-      this.theme.next(turnOn ? "dark-theme" : "light-theme");
+      this.theme.next(turnOn ? 'dark-theme' : 'light-theme');
 
       // Trigger refresh of UI
       this.ref.tick();
@@ -34,7 +32,7 @@ export class ThemingService {
   isDarkMode(): boolean {
     this.darkModeOn =
       window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches;
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
     return this.darkModeOn;
   }
 
@@ -42,10 +40,14 @@ export class ThemingService {
     this.darkModeOn = isDarkMode;
     if (isDarkMode) {
       document.body.classList.add('dark-theme');
-      this.theme.next("dark-theme");
+      this.theme.next('dark-theme');
     } else {
       document.body.classList.remove('dark-theme');
-      this.theme.next("light-theme");
+      this.theme.next('light-theme');
     }
   }
+
+  setInitialDarkMode(): void {
+    this.setDarkMode(this.darkModeOn);
+  }
 }

src/app/web-app.component.ts

@@ -27,7 +27,7 @@ import { KeyboardShortcutsConfiguration } from './keyboards-shortcut-config';
 import { Dates } from './core/utils/dates';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { I18nService } from './core/i18n/i18n.service';
-import { ThemingService } from './theme-toggle/theming.service';
+import { ThemingService } from './shared/theme-toggle/theming.service';
 
 /** Initialize Logger */
 const log = new Logger('MifosX');
@@ -124,9 +124,10 @@ export class WebAppComponent implements OnInit {
    * 5) Alerts
    */
   ngOnInit() {
-    this.themingService.theme.subscribe((theme: string) => {
-      this.cssClass = theme;
+    this.themingService.theme.subscribe((value: string) => {
+      this.cssClass = value;
     });
+    this.themingService.setInitialDarkMode();
 
     // Setup logger
     if (environment.production) {

src/assets/styles/_colours.scss

@@ -94,3 +94,8 @@ $error-log: #ffa726;
 .cdk-drag-placeholder {
   background: $peter-river;
 }
+
+.strike {
+  text-decoration: line-through;
+  color: red;
+}

src/theme/_dark_content.scss

@@ -4,6 +4,33 @@
 @mixin account-view-component-dark-theme($theme) {
   $primary: map-get($theme, primary);
 
+  mifosx-login {
+    .login-container {
+      background-color: #424242;
+      box-shadow: 1px 1px 50px white;
+    }
+
+    .cover {
+      .cover-content {
+        color: white;
+    
+        .cover-description {
+          .cover-link {
+            color: white !important;
+    
+            &:hover {
+              color: #d3d3d3;
+            }
+          }
+        }
+      }
+    }    
+  }
+
+  mifosx-login-form {
+    color: white;
+  }
+
   mifosx-view-bulk-import {
     .cover {
       background-color: #424242;
@@ -106,9 +133,19 @@
       }
     }
   }
+
+  fa-icon,
+  mat-icon,
+  mat-checkbox {
+    color: white;
+  }
+
 }
 
 .dark-theme {
+  .sticky {
+    background-color: #303135 !important;
+  }
 
   // Override the background color of the label text for dark theme
   .mat-option-text,
@@ -159,6 +196,7 @@
     color: #303135;
   }
 
+  a.mat-tab-link,
   a.tab-link {
     color: white !important;
   }
@@ -175,6 +213,16 @@
   }
 
   #footer {
+    color: white;
+
+    .mat-checkbox {
+      color: white !important;
+    }
+
+    .versions {
+      color: white !important;
+    }
+  
     .business-date {
       color: #0098ff;
     }