Skip to content

Commit f4c25bb

Browse files
renemadsenrenemadsen
committed
Adjusting the styles a bit, so we use the right font and we have the right styles.
1 parent cc75b9e commit f4c25bb

File tree

11 files changed

+94
-41
lines changed

11 files changed

+94
-41
lines changed

‎eform-client/src/app/common/const/icons.const.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,18 @@ export const PdfIcon = '<svg role="img" aria-hidden="true" focusable="false" dat
4949
'362.5 248 336V272C248 245.5 226.5 224 200 224H176C167.2 224 160 231.2 160 240V368zM288 224C279.2 224 272 231.2 272 240V368C272 ' +
5050
'376.8 279.2 384 288 384C296.8 384 304 376.8 304 368V320H336C344.8 320 352 312.8 352 304C352 295.2 344.8 288 336 ' +
5151
'288H304V256H336C344.8 256 352 248.8 352 240C352 231.2 344.8 224 336 224H288zM256 0L384 128H256V0z"></path></svg>';
52+
export const PasswordValidationIcon = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
53+
'<g clip-path="url(#clip0_3100_46162)">\n' +
54+
'<path d="M11.1733 13.8863C11.1733 13.8863 11.6942 13.8863 12.215 14.9974C12.215 14.9974 13.8694 12.2196 15.34 11.6641" stroke="#289694" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n' +
55+
'<path d="M14.1196 5.83203H14.1271" stroke="#289694" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n' +
56+
'<path d="M9.95264 5.83203H9.96014" stroke="#289694" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n' +
57+
'<path d="M5.78613 5.83203H5.79362" stroke="#289694" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n' +
58+
'<path d="M6.57644 9.97237H4.17354C2.78894 9.97237 1.6665 8.85308 1.6665 7.47237V4.16406C1.6665 2.78335 2.78894 1.66406 4.17354 1.66406H15.8261C17.2107 1.66406 18.3332 2.78335 18.3332 4.16406V7.60649" stroke="#289694" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n' +
59+
'<path d="M18.3328 13.332C18.3328 10.5706 16.088 8.33203 13.3188 8.33203C10.5496 8.33203 8.30469 10.5706 8.30469 13.332C8.30469 16.0934 10.5496 18.332 13.3188 18.332C16.088 18.332 18.3328 16.0934 18.3328 13.332Z" stroke="#289694" stroke-width="1.5" stroke-linecap="round"/>\n' +
60+
'</g>\n' +
61+
'<defs>\n' +
62+
'<clipPath id="clip0_3100_46162">\n' +
63+
'<rect width="20" height="20" fill="white"/>\n' +
64+
'</clipPath>\n' +
65+
'</defs>\n' +
66+
'</svg>\n'

‎eform-client/src/app/modules/advanced/components/units/units-otp-code/units-otp-code.component.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<h3 mat-dialog-title>{{'Activate OTP code for' | translate}} : {{selectedUnitModel.microtingUid}}!</h3>
1+
<h1 mat-dialog-title class="align-items-center">
2+
<mat-icon class="text-warning">error</mat-icon>
3+
</h1>
24
<div mat-dialog-content>
3-
<h1 class="text-danger">{{'WARNING' | translate}}!</h1>
5+
<h1>{{'New OTP for' | translate}} #{{selectedUnitModel.microtingUid}}</h1>
46
<ul>
57
<li>{{ 'When pressing OK, you will deactivate the current device paired with this location' | translate }}.</li>
68
<li>{{ 'If there is data on the current device, this data will be lost after pressing OK' | translate }}</li>
@@ -9,16 +11,15 @@ <h1 class="text-danger">{{'WARNING' | translate}}!</h1>
911
</div>
1012
<div mat-dialog-actions class="d-flex flex-row justify-content-end">
1113
<button
12-
mat-raised-button
13-
color="warn"
14-
(click)="requestOtp()"
14+
class="btn-cancel"
15+
(click)="hide()"
1516
>
16-
{{'OK' | translate}}
17+
{{'Cancel' | translate}}
1718
</button>
1819
<button
19-
mat-raised-button
20-
(click)="hide()"
20+
class="btn-warning btn-primary--icon-left"
21+
(click)="requestOtp()"
2122
>
22-
{{'Cancel' | translate}}
23+
<span>{{'OK' | translate}}</span>
2324
</button>
2425
</div>

‎eform-client/src/app/modules/advanced/components/units/units.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
matTooltip="{{ 'Get OTP code' | translate }}"
3737
(click)="openModalUnitsOtpCode(row)"
3838
>
39-
<mat-icon>key</mat-icon>
39+
<mat-icon svgIcon="password-validation"></mat-icon>
4040
</button>
4141
</ng-container>
4242
</ng-template>

‎eform-client/src/app/modules/advanced/components/units/units.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import {Overlay} from '@angular/cdk/overlay';
1111
import { TranslateService } from '@ngx-translate/core';
1212
import {Store} from '@ngrx/store';
1313
import {selectCurrentUserClaimsSitesCreate} from 'src/app/state/auth/auth.selector';
14+
import {PasswordValidationIcon} from "src/app/common/const";
15+
import {MatIconRegistry} from "@angular/material/icon";
16+
import {DomSanitizer} from "@angular/platform-browser";
1417

1518
@Component({
1619
selector: 'app-units',
@@ -23,6 +26,8 @@ export class UnitsComponent implements OnInit {
2326
dialog = inject(MatDialog);
2427
private overlay = inject(Overlay);
2528
private translateService = inject(TranslateService);
29+
private iconRegistry = inject(MatIconRegistry);
30+
private sanitizer = inject(DomSanitizer);
2631

2732
@ViewChild('modalUnitsMove', {static: true}) modalUnitsMove;
2833
unitModels: Array<UnitDto> = [];
@@ -44,6 +49,7 @@ export class UnitsComponent implements OnInit {
4449
unitsOtpCodeComponentAfterClosedSub$: Subscription;
4550

4651
ngOnInit() {
52+
this.iconRegistry.addSvgIconLiteral('password-validation', this.sanitizer.bypassSecurityTrustHtml(PasswordValidationIcon));
4753
this.loadAllUnits();
4854
// this.getCurrentUserClaimsAsyncSub$ = this.authStateService.currentUserClaimsAsync.subscribe(x => {
4955
// if(x.sitesDelete || x.sitesUpdate) {

‎eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -278,15 +278,17 @@ <h4>
278278
<h4>{{ 'Languages' | translate }}</h4>
279279
</mat-card-header>
280280
<mat-card-content>
281-
<ng-container *ngFor="let language of languagesModel.languages">
282-
<p class="p-0 pb-2 m-0">
283-
<mat-checkbox
284-
[(ngModel)]="language.isActive"
285-
[ngModelOptions]="{standalone: true}">
286-
{{language.name}} ({{language.languageCode}})
287-
</mat-checkbox>
288-
</p>
289-
</ng-container>
281+
<div class="d-flex flex-wrap">
282+
<ng-container *ngFor="let language of languagesModel.languages">
283+
<p class="p-0 pb-2 m-0" style="width: 50%;">
284+
<mat-checkbox
285+
[(ngModel)]="language.isActive"
286+
[ngModelOptions]="{standalone: true}">
287+
{{language.name}} ({{language.languageCode}})
288+
</mat-checkbox>
289+
</p>
290+
</ng-container>
291+
</div>
290292
</mat-card-content>
291293
</mat-card>
292294
</div>

‎eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
matTooltip="{{ 'New OTP' | translate }}"
7070
(click)="openOtpModal(row)"
7171
>
72-
<mat-icon>key</mat-icon>
72+
<mat-icon svgIcon="password-validation"></mat-icon>
7373
</button>
7474
</ng-container>
7575
<ng-container *ngIf="!row.unitId"> N/A</ng-container>

‎eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import {DeleteModalComponent} from 'src/app/common/modules/eform-shared/componen
1818
import {Store} from '@ngrx/store';
1919
import {selectCurrentUserClaimsDeviceUsersCreate} from 'src/app/state/auth/auth.selector';
2020
import {selectDeviceUsersFilters, selectDeviceUsersNameFilter} from "src/app/state/device-user/device-user.selector";
21+
import {MatIconRegistry} from "@angular/material/icon";
22+
import {DomSanitizer} from "@angular/platform-browser";
23+
import {PasswordValidationIcon} from "src/app/common/const";
2124

2225
@AutoUnsubscribe()
2326
@Component({
@@ -32,6 +35,8 @@ export class DeviceUsersPageComponent implements OnInit, OnDestroy {
3235
dialog = inject(MatDialog);
3336
private overlay = inject(Overlay);
3437
private translateService = inject(TranslateService);
38+
private iconRegistry = inject(MatIconRegistry);
39+
private sanitizer = inject(DomSanitizer);
3540

3641
sitesDto: Array<SiteDto>;
3742

@@ -60,6 +65,7 @@ export class DeviceUsersPageComponent implements OnInit, OnDestroy {
6065
private selectDeviceUsersNameFilter$ = this.authStore.select(selectDeviceUsersNameFilter);
6166

6267
ngOnInit() {
68+
this.iconRegistry.addSvgIconLiteral('password-validation', this.sanitizer.bypassSecurityTrustHtml(PasswordValidationIcon));
6369
this.getDeviceUsersFiltered();
6470
let actionsEnabled = false;
6571
this.selectCurrentUserClaimsDeviceUsersUpdate$.subscribe(x => {

‎eform-client/src/app/modules/device-users/components/new-otp-modal/new-otp-modal.component.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<h3 mat-dialog-title>{{'New OTP for' | translate}} {{selectedSimpleSite.unitId}}</h3>
1+
<h1 mat-dialog-title class="align-items-center">
2+
<mat-icon class="text-warning">error</mat-icon>
3+
</h1>
24
<div mat-dialog-content>
3-
<h1 class="text-danger">{{'WARNING' | translate}}!</h1>
5+
<h1>{{'New OTP for' | translate}} #{{selectedSimpleSite.unitId}}</h1>
46
<ul>
57
<li>{{ 'When pressing OK, you will deactivate the current device paired with this location' | translate }}.</li>
68
<li>{{ 'If there is data on the current device, this data will be lost after pressing OK' | translate }}</li>
@@ -9,16 +11,15 @@ <h1 class="text-danger">{{'WARNING' | translate}}!</h1>
911
</div>
1012
<div mat-dialog-actions class="d-flex flex-row justify-content-end">
1113
<button
12-
mat-raised-button
13-
color="warn"
14-
(click)="requestOtp()"
14+
class="btn-cancel"
15+
(click)="hide()"
1516
>
16-
{{'OK' | translate}}
17+
{{'Cancel' | translate}}
1718
</button>
1819
<button
19-
mat-raised-button
20-
(click)="hide()"
20+
class="btn-warning btn-primary--icon-left"
21+
(click)="requestOtp()"
2122
>
22-
{{'Cancel' | translate}}
23+
<span>{{'OK' | translate}}</span>
2324
</button>
2425
</div>

‎eform-client/src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">
1717
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap" rel="stylesheet">
1818
<link rel="preconnect" href="https://fonts.gstatic.com">
19+
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
1920
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
2021
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2122
</head>

‎eform-client/src/scss/styles.scss‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ body, .theme-light {
5858
--tp-th-bg: #f7f9fa;
5959
--tp-border: #EBEFF2;
6060
--tp-text: #111827;
61-
--tp-white-text: black;
61+
--tp-white-text: #0F1316;
6262
--border: #{$border-light};
6363
--icon-secondary: #{$icon-secondary-light};
6464
--bg: #{$bg-light};
@@ -452,7 +452,6 @@ ngx-material-timepicker-container {
452452
align-items: center;
453453
}
454454
span {
455-
font-family: var(--font-family);
456455
font-size: var(--Text-size-sm, 14px);
457456
font-style: normal;
458457
font-weight: 600;
@@ -507,7 +506,6 @@ ngx-material-timepicker-container {
507506
color: var(--text-header);
508507
cursor: pointer;
509508

510-
font-family: var(--font-family);
511509
font-size: var(--Text-size-sm, 14px);
512510
font-style: normal;
513511
font-weight: 600;
@@ -537,7 +535,6 @@ ngx-material-timepicker-container {
537535
cursor: pointer;
538536
border: unset;
539537

540-
font-family: var(--font-family);
541538
font-size: var(--Text-size-sm, 14px);
542539
font-style: normal;
543540
font-weight: 600;
@@ -566,7 +563,34 @@ ngx-material-timepicker-container {
566563
cursor: pointer;
567564
border: unset;
568565

569-
font-family: var(--font-family);
566+
font-size: var(--Text-size-sm, 14px);
567+
font-style: normal;
568+
font-weight: 600;
569+
line-height: var(--Text-line-height-sm, 22px); /* 157.143% */
570+
571+
&:disabled,
572+
&[disabled] {
573+
background-color: var(--border) !important;
574+
color: var(--tp-text) !important;
575+
opacity: 0.5;
576+
cursor: not-allowed !important;
577+
pointer-events: none;
578+
}
579+
}
580+
581+
.warning-btn {
582+
display: flex;
583+
height: 48px;
584+
padding: var(--312-px, 12px) var(--832-px, 32px);
585+
justify-content: center;
586+
align-items: center;
587+
gap: var(--156-px, 6px);
588+
border-radius: var(--rounded-full);
589+
background: var(--warning);
590+
color: var(--btn-delete-text);
591+
cursor: pointer;
592+
border: unset;
593+
570594
font-size: var(--Text-size-sm, 14px);
571595
font-style: normal;
572596
font-weight: 600;
@@ -593,7 +617,6 @@ ngx-material-timepicker-container {
593617
box-shadow: unset!important;
594618
h2{
595619
color: var(--text-header, #0F1316);
596-
font-family: var(--font-family, "Nunito Sans");
597620
font-size: var(--Header-size-md, 24px);
598621
font-style: normal;
599622
font-weight: 600;
@@ -669,7 +692,6 @@ ngx-material-timepicker-container {
669692

670693
a{
671694
color: var(--text-header, #0F1316);
672-
font-family: var(--font-family, "Nunito Sans");
673695
font-size: var(--Text-size-sm, 14px);
674696
font-style: normal;
675697
font-weight: 600;
@@ -678,7 +700,6 @@ ngx-material-timepicker-container {
678700

679701
.nav-link{
680702
color: var(--text-header, #0F1316);
681-
font-family: var(--font-family, "Nunito Sans");
682703
font-size: var(--Text-size-sm, 14px);
683704
font-style: normal;
684705
font-weight: 600;
@@ -715,7 +736,6 @@ ngx-material-timepicker-container {
715736
th{
716737
border-color: var(--border) !important;
717738
color: var(--text-header, #0F1316);
718-
font-family: var(--font-family, "Nunito Sans");
719739
font-size: var(--Text-size-sm, 14px);
720740
font-style: normal;
721741
font-weight: 600;
@@ -731,7 +751,6 @@ ngx-material-timepicker-container {
731751
td{
732752
border-color: var(--border) !important;
733753
color: var(--text-body);
734-
font-family: var(--font-family, "Nunito Sans");
735754
font-size: var(--Text-size-sm, 14px);
736755
font-style: normal;
737756
font-weight: 500;
@@ -751,7 +770,6 @@ ngx-material-timepicker-container {
751770
}
752771
.mat-mdc-paginator-container, .mat-mdc-select-value-text, .mat-mdc-select-arrow svg{
753772
color: var(--text-header, #0F1316);
754-
font-family: var(--font-family, "Nunito Sans");
755773
font-size: var(--Text-size-sm, 14px);
756774
font-style: normal;
757775
font-weight: 500;
@@ -781,4 +799,6 @@ ngx-material-timepicker-container {
781799

782800
.mat-mdc-card{
783801
box-shadow: unset !important;
802+
border: 1px solid var(--border) !important;
803+
//border-color: var(--border) !important;
784804
}

0 commit comments

Comments
 (0)