[ADF-1664] fix color text login for dark theme (#2433)

* fix color text login for dark theme

* fix test
This commit is contained in:
Eugenio Romano 2017-10-05 15:05:38 +01:00 committed by Maurizio Vitale
parent 1a7b390930
commit 4d0047b8d2
3 changed files with 18 additions and 20 deletions

View File

@ -97,8 +97,8 @@
</div> </div>
</button> </button>
<div *ngIf="showRememberMe" class="adf-login__remember-me" id="login-remember"> <div *ngIf="showRememberMe" class="adf-login__remember-me">
<md-checkbox color="primary" class="rememberme-cb" [checked]="rememberMe" <md-checkbox id="adf-login-remember" color="primary" class="adf-login-rememberme" [checked]="rememberMe"
(change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }} (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
</md-checkbox> </md-checkbox>
</div> </div>

View File

@ -3,6 +3,8 @@
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$text-color-primary: mat-color($foreground, text);
.adf-login-content { .adf-login-content {
display: -webkit-flex; display: -webkit-flex;
@ -63,8 +65,8 @@
} }
} }
.adf-error-container{ .adf-error-container {
height:10px; height: 10px;
} }
.adf-error-message { .adf-error-message {
@ -195,16 +197,7 @@
} }
.mat-input-container .adf-login-password-icon.mat-icon { .mat-input-container .adf-login-password-icon.mat-icon {
font-size: 24px; color: $text-color-primary;
cursor: pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
position: relative;
top: -6px;
height: 20px;
opacity: 0.54;
} }
.adf-login__field .mat-input-wrapper { .adf-login__field .mat-input-wrapper {
@ -213,7 +206,8 @@
} }
.adf-login__field input:-webkit-autofill { .adf-login__field input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-box-shadow: 0 0 0px 1000px mat-color($background, dialog) inset;
-webkit-text-fill-color: $text-color-primary !important;
} }
.adf-login-validation { .adf-login-validation {
@ -253,6 +247,10 @@
padding-bottom: 18px; padding-bottom: 18px;
} }
.adf-login-rememberme {
color: $text-color-primary !important;
}
.adf-login-action-container { .adf-login-action-container {
border-top: 1px solid rgba(0, 0, 0, .1); border-top: 1px solid rgba(0, 0, 0, .1);
margin-top: 23px; margin-top: 23px;

View File

@ -133,16 +133,16 @@ describe('AlfrescoLogin', () => {
describe('Remember me', () => { describe('Remember me', () => {
it('should be checked by default', () => { it('should be checked by default', () => {
expect(element.querySelector('.rememberme-cb input[type="checkbox"]').checked).toBe(true); expect(element.querySelector('#adf-login-remember input[type="checkbox"]').checked).toBe(true);
}); });
it('should set the component\'s rememberMe property properly', () => { it('should set the component\'s rememberMe property properly', () => {
element.querySelector('.rememberme-cb').dispatchEvent(new Event('change')); element.querySelector('#adf-login-remember').dispatchEvent(new Event('change'));
fixture.detectChanges(); fixture.detectChanges();
expect(component.rememberMe).toBe(false); expect(component.rememberMe).toBe(false);
element.querySelector('.rememberme-cb').dispatchEvent(new Event('change')); element.querySelector('#adf-login-remember').dispatchEvent(new Event('change'));
fixture.detectChanges(); fixture.detectChanges();
expect(component.rememberMe).toBe(true); expect(component.rememberMe).toBe(true);
@ -162,8 +162,8 @@ describe('AlfrescoLogin', () => {
expect(element.querySelector('[for="username"]')).toBeDefined(); expect(element.querySelector('[for="username"]')).toBeDefined();
expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME'); expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME');
expect(element.querySelector('#login-remember')).toBeDefined(); expect(element.querySelector('#adf-login-remember')).toBeDefined();
expect(element.querySelector('#login-remember').innerText).toContain('LOGIN.LABEL.REMEMBER'); expect(element.querySelector('#adf-login-remember').innerText).toContain('LOGIN.LABEL.REMEMBER');
expect(element.querySelector('[for="password"]')).toBeDefined(); expect(element.querySelector('[for="password"]')).toBeDefined();
expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD'); expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD');