diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html index 3c10b8f7d..36bc347ce 100644 --- a/src/app/core/shell/toolbar/toolbar.component.html +++ b/src/app/core/shell/toolbar/toolbar.component.html @@ -59,7 +59,7 @@
- +
diff --git a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html index 0092c527a..371a2d959 100644 --- a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html +++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html @@ -21,8 +21,10 @@ {{"labels.inputs.Transaction Amount" | translate}} - - + {{ dataObject.currency.code }} + + + {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} {{"labels.commons.required" | translate}} diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 5d01af702..ebd2ac891 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -35,13 +35,14 @@
+
- {{ 'APP_NAME' | translate}} Logo + {{ 'APP_NAME' | translate}} Logo
@@ -72,6 +73,9 @@ +
+ +
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 7d0a0a844..e91238eb9 100644 --- a/src/app/login/login.component.ts +++ b/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(); + } + } diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.scss b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.scss index 72ec04a33..83f2418c0 100644 --- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.scss +++ b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.scss @@ -23,8 +23,3 @@ } } } - -.strike { - text-decoration: line-through; - color: red; -} \ No newline at end of file diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html index 12a590f8c..021dad2b4 100644 --- a/src/app/shared/footer/footer.component.html +++ b/src/app/shared/footer/footer.component.html @@ -2,25 +2,25 @@
- - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + +
- + \ No newline at end of file diff --git a/src/app/shared/footer/footer.component.scss b/src/app/shared/footer/footer.component.scss index 53ceadcd9..8140d915e 100644 --- a/src/app/shared/footer/footer.component.scss +++ b/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; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 47ac1b165..1040f0fac 100644 --- a/src/app/shared/shared.module.ts +++ b/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 { } diff --git a/src/app/theme-toggle/theme-toggle.component.html b/src/app/shared/theme-toggle/theme-toggle.component.html similarity index 100% rename from src/app/theme-toggle/theme-toggle.component.html rename to src/app/shared/theme-toggle/theme-toggle.component.html diff --git a/src/app/theme-toggle/theme-toggle.component.scss b/src/app/shared/theme-toggle/theme-toggle.component.scss similarity index 100% rename from src/app/theme-toggle/theme-toggle.component.scss rename to src/app/shared/theme-toggle/theme-toggle.component.scss diff --git a/src/app/theme-toggle/theme-toggle.component.spec.ts b/src/app/shared/theme-toggle/theme-toggle.component.spec.ts similarity index 100% rename from src/app/theme-toggle/theme-toggle.component.spec.ts rename to src/app/shared/theme-toggle/theme-toggle.component.spec.ts diff --git a/src/app/theme-toggle/theme-toggle.component.ts b/src/app/shared/theme-toggle/theme-toggle.component.ts similarity index 89% rename from src/app/theme-toggle/theme-toggle.component.ts rename to src/app/shared/theme-toggle/theme-toggle.component.ts index 8055e06b1..ed035716a 100644 --- a/src/app/theme-toggle/theme-toggle.component.ts +++ b/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); } + } diff --git a/src/app/theme-toggle/theming.service.ts b/src/app/shared/theme-toggle/theming.service.ts similarity index 61% rename from src/app/theme-toggle/theming.service.ts rename to src/app/shared/theme-toggle/theming.service.ts index 61104ff29..ba501db64 100644 --- a/src/app/theme-toggle/theming.service.ts +++ b/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); + } } diff --git a/src/app/web-app.component.ts b/src/app/web-app.component.ts index 5fb5005c7..b7d24075e 100644 --- a/src/app/web-app.component.ts +++ b/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) { diff --git a/src/assets/images/mifos-logo-flat.png b/src/assets/images/mifos-logo-flat.png index 7f271a6af..30a166d64 100644 Binary files a/src/assets/images/mifos-logo-flat.png and b/src/assets/images/mifos-logo-flat.png differ diff --git a/src/assets/styles/_colours.scss b/src/assets/styles/_colours.scss index c085bfa23..6fa1f99a5 100644 --- a/src/assets/styles/_colours.scss +++ b/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; +} diff --git a/src/theme/_dark_content.scss b/src/theme/_dark_content.scss index 6bb85ae22..b0aa38862 100644 --- a/src/theme/_dark_content.scss +++ b/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; }