Skip to content

Commit 247c1f7

Browse files
fcv-iteratorItfcv-iteratorIt
committed
Fix some colors and font sizes
1 parent 5411f75 commit 247c1f7

File tree

9 files changed

+99
-53
lines changed

9 files changed

+99
-53
lines changed

‎src/app/applications/applications-list/applications-list-dashboard/applications-list-dashboard.component.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
<div class="info-box-containers">
22
<app-basic-information-box
3-
[matSVGSrc]="'exclamation-triangle'"
4-
[type]="'warning'"
5-
[count]="withError"
63
[countOf]="total"
4+
[count]="withError"
75
[description]="'APPLICATION-INFORMATION-BOX.APPLICATIONS-WITH-ERROR' | translate"
86
[height]="35"
7+
[matSVGSrc]="'exclamation-triangle'"
8+
[type]="'warning'"
99
[width]="25"
1010
/>
1111
<app-basic-information-box
12-
[matSVGSrc]="'check-circle'"
13-
[type]="'stable'"
14-
[count]="withoutError"
1512
[countOf]="total"
13+
[count]="withoutError"
1614
[description]="'APPLICATION-INFORMATION-BOX.APPLICATIONS-WITHOUT-ERROR' | translate"
1715
[height]="30"
16+
[matSVGSrc]="'check-circle'"
17+
[type]="'stable'"
1818
[width]="25"
1919
/>
2020
<app-basic-information-box
21+
[count]="totalDevices"
22+
[description]="'APPLICATION-INFORMATION-BOX.DEVICES' | translate"
2123
[height]="35"
22-
[width]="25"
2324
[matSVGSrc]="'micro-chip'"
2425
[type]="'default'"
25-
[count]="totalDevices"
26-
[description]="'APPLICATION-INFORMATION-BOX.DEVICES' | translate"
26+
[width]="25"
2727
/>
2828
<app-basic-information-box
29+
[count]="totalGateways"
30+
[description]="'APPLICATION-INFORMATION-BOX.GATEWAYS' | translate"
2931
[height]="35"
30-
[width]="25"
3132
[matSVGSrc]="'satellite-dish'"
3233
[type]="'default'"
33-
[count]="totalGateways"
34-
[description]="'APPLICATION-INFORMATION-BOX.GATEWAYS' | translate"
34+
[width]="25"
3535
/>
3636
</div>

‎src/app/applications/applications-list/applications-list-dashboard/applications-list-dashboard.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
gap: 30px;
55
margin-bottom: 30px;
66
height: fit-content;
7+
flex-wrap: wrap;
78
}

‎src/app/navbar/navbar.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<nav
22
aria-expanded="false"
3-
class="navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3"
3+
class="navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3 no-shadow"
44
>
55
<img [src]="imagePath" alt="OS2IoT-logo" class="img-logo"/>
66

‎src/app/navbar/navbar.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ button:focus,
8383
height: 33px;
8484
line-height: 14px;
8585
margin: 2px 10px;
86+
font-size: 14px;
8687

8788
&:hover,
8889
&.link-hover,
@@ -115,3 +116,20 @@ button:focus,
115116
}
116117
}
117118
}
119+
120+
.no-shadow {
121+
box-shadow: none;
122+
z-index: 10000;
123+
}
124+
125+
::ng-deep .mdc-notched-outline__leading {
126+
border-color: $light-border-color !important;
127+
}
128+
129+
::ng-deep .mdc-notched-outline__notch {
130+
border-color: $light-border-color !important;
131+
}
132+
133+
::ng-deep .mdc-notched-outline__trailing {
134+
border-color: $light-border-color !important;
135+
}

‎src/app/shared/components/top-bar/top-bar.component.html‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<ng-template #emptySearchForm>
22
<mat-form-field class="search-form--full-width invisible">
3-
<input matInput />
3+
<input matInput/>
44
</mat-form-field>
55
</ng-template>
66

@@ -9,43 +9,43 @@
99
<form class="search-form">
1010
<ng-container *ngIf="hasEmail() && hasAnyPermission(); else emptySearchForm">
1111
<div class="custom-search-field">
12+
<mat-icon class="icon" svgIcon="search-icon"></mat-icon>
1213
<input
13-
placeholder="{{ 'SEARCH.PLACEHOLDER' | translate }}"
14-
type="text"
15-
id="searchQuery"
16-
class="search-input"
17-
aria-label="Search"
1814
#searchInput
19-
[value]="searchText"
2015
(keyup.enter)="search(searchInput.value)"
21-
(input)="search(searchInput.value)"
16+
[value]="searchText"
17+
aria-label="Search"
18+
class="search-input"
19+
id="searchQuery"
20+
placeholder="{{ 'SEARCH.PLACEHOLDER' | translate }}"
21+
type="text"
2222
/>
2323
</div>
2424
</ng-container>
2525
</form>
2626

27-
<button class="profile-button" [matMenuTriggerFor]="menu" id="userDropdown">
27+
<button [matMenuTriggerFor]="menu" class="profile-button" id="userDropdown">
2828
<div class="user-information-container">
2929
<div class="name-and-title-container">
3030
<div class="name-container">{{ getUsername() }}</div>
3131
<!-- <div class="title-container">Global Admin</div> -->
3232
</div>
3333
<div>
34-
<mat-icon svgIcon="angle-down" class="angle-down-icon"></mat-icon>
34+
<mat-icon class="angle-down-icon" svgIcon="angle-down"></mat-icon>
3535
</div>
3636
</div>
3737
</button>
38-
<mat-menu class="matMenuMargin" xPosition="before" #menu="matMenu">
39-
<button mat-menu-item class="userName">
38+
<mat-menu #menu="matMenu" class="matMenuMargin" xPosition="before">
39+
<button class="userName" mat-menu-item>
4040
<div class="userNameFont">{{ getUsername() }}</div>
4141
</button>
4242
<a *ngIf="hasEmail()" mat-menu-item routerLink="/user-page">{{ "USER_PAGE.USER_PAGE" | translate }} </a>
4343
<a
44-
mat-menu-item
44+
(click)="onLogout()"
4545
[attr.href]="getKombitLogoutUrl() ? getKombitLogoutUrl() : null"
46+
mat-menu-item
4647
target="{{ isLoggedInWithKombit() ? '_blank' : undefined }}"
47-
(click)="onLogout()"
48-
>{{ "NAV.LOGOUT" | translate }}
48+
>{{ "NAV.LOGOUT" | translate }}
4949
</a>
5050
</mat-menu>
5151
</div>
@@ -55,11 +55,11 @@
5555
<nav>
5656
<ng-template [ngIf]="backButtonTitle">
5757
<fa-icon [icon]="faChevronLeft" class="icon--primary mb-1"></fa-icon>
58-
<a (click)="routeTo()" class="back-button" [routerLink]="[]">{{ backButtonTitle }}</a>
58+
<a (click)="routeTo()" [routerLink]="[]" class="back-button">{{ backButtonTitle }}</a>
5959
</ng-template>
6060
<ng-template [ngIf]="data || subPage === true">
6161
<fa-icon [icon]="faChevronLeft" class="icon--primary mb-1"></fa-icon>
62-
<a (click)="routeTo()" class="back-button" [routerLink]="[]">{{ backButton.label }}</a>
62+
<a (click)="routeTo()" [routerLink]="[]" class="back-button">{{ backButton.label }}</a>
6363
<h3 class="pl-md-3">{{ subTitle || staticTitle }}</h3>
6464
</ng-template>
6565
<ng-template [ngIf]="title">
@@ -71,25 +71,25 @@ <h3 class="pl-md-3">{{ subTitle || staticTitle }}</h3>
7171

7272
<div *ngIf="dropDownButton && addDetailDowndown === true && canEdit">
7373
<button
74-
type="button"
75-
id="dropdown-{{ data?.name }}"
74+
aria-expanded="false"
75+
aria-haspopup="true"
7676
class="btn btn-primary dropdown-toggle"
7777
data-toggle="dropdown"
78-
aria-haspopup="true"
79-
aria-expanded="false"
78+
id="dropdown-{{ data?.name }}"
79+
type="button"
8080
>
8181
{{ dropDownButton.label }} <span class="caret"></span>
8282
</button>
83-
<ul class="dropdown-menu" attr.aria-labelledby="dropdown-{{ data?.name }}">
83+
<ul attr.aria-labelledby="dropdown-{{ data?.name }}" class="dropdown-menu">
8484
<li class="dropdown-item">
8585
<a [routerLink]="dropDownButton.editRouterLink">{{ "TOPBAR.DROPDOWN.EDIT" | translate }} </a>
8686
</li>
8787
<ng-container *ngIf="dropDownButton.extraOptions?.length > 0">
88-
<li class="dropdown-item" *ngFor="let option of dropDownButton.extraOptions">
88+
<li *ngFor="let option of dropDownButton.extraOptions" class="dropdown-item">
8989
<a (click)="onClickExtraDropdownOption(option.id)">{{ option.label }}</a>
9090
</li>
9191
</ng-container>
92-
<li class="dropdown-item" *ngIf="dropDownButton.isErasable === true">
92+
<li *ngIf="dropDownButton.isErasable === true" class="dropdown-item">
9393
<a (click)="onClickDelete()">{{ "TOPBAR.DROPDOWN.DELETE" | translate }} </a>
9494
</li>
9595
</ul>
@@ -99,13 +99,13 @@ <h3 class="pl-md-3">{{ subTitle || staticTitle }}</h3>
9999

100100
<button
101101
*ngIf="ctaRouterLink && ctaRouterLink != '' && canEdit"
102+
[attr.aria-label]="ctaLabel"
102103
[routerLink]="ctaRouterLink"
103-
routerLinkActive="active"
104104
class="create-application"
105+
routerLinkActive="active"
105106
type="button"
106-
[attr.aria-label]="ctaLabel"
107107
>
108-
<mat-icon svgIcon="plus-circle" class="plus-circle-icon"></mat-icon>
108+
<mat-icon class="plus-circle-icon" svgIcon="plus-circle"></mat-icon>
109109
<div class="create-application-button-label">
110110
{{ ctaLabel }}
111111
</div>
@@ -114,16 +114,16 @@ <h3 class="pl-md-3">{{ subTitle || staticTitle }}</h3>
114114

115115
<!-- action buttons end -->
116116

117-
@if(searchText){
118-
<div class="search-view">
119-
<div class="container-fluid">
120-
<div class="row">
121-
<div class="col-12">
122-
<div class="jumbotron--table">
123-
<app-search-table [searchText]="searchText"></app-search-table>
117+
@if (searchText) {
118+
<div class="search-view">
119+
<div class="container-fluid">
120+
<div class="row">
121+
<div class="col-12">
122+
<div class="jumbotron--table">
123+
<app-search-table [searchText]="searchText"></app-search-table>
124+
</div>
124125
</div>
125126
</div>
126127
</div>
127128
</div>
128-
</div>
129129
}

‎src/app/shared/components/top-bar/top-bar.component.scss‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
height: 72px;
99
justify-content: space-between;
1010
align-items: center;
11+
border-bottom: $light-border-color 1px solid;
1112
}
1213

1314
.bottom-main-container {
@@ -76,13 +77,18 @@
7677
}
7778

7879
:host .search-input {
79-
border-radius: 0px;
80-
border-width: 0px;
8180
display: flex;
8281
flex-direction: row;
8382
width: 100%;
84-
border: transparent;
85-
margin-left: 30px;
83+
border: 0 transparent;
84+
}
85+
86+
input::placeholder {
87+
color: $selector-font-color !important;
88+
}
89+
90+
input::-ms-input-placeholder {
91+
color: $selector-font-color !important;
8692
}
8793

8894
:host input:focus {
@@ -158,3 +164,10 @@
158164
line-height: 36px;
159165
margin-bottom: 20px;
160166
}
167+
168+
.custom-search-field {
169+
display: flex;
170+
flex-direction: row;
171+
align-items: center;
172+
margin-left: 32px;
173+
}

‎src/app/shared/components/top-bar/top-bar.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,12 @@ export class TopBarComponent implements OnInit {
9595
{}
9696
);
9797

98+
this.matIconRegistry.addSvgIcon(
99+
"search-icon",
100+
this.domSanitizer.bypassSecurityTrustResourceUrl("../../../../assets/images/search.svg"),
101+
{}
102+
);
103+
98104
this.sharedVariableService.getUserInfo;
99105
}
100106

‎src/assets/images/search.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/scss/setup/_variables.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,8 @@ $color-orange-002: rgba(245, 122, 47, 0.75) !default;
192192
$color-orange-003: rgba(245, 122, 47, 0.5) !default;
193193
$color-orange-004: rgba(245, 122, 47, 0.25) !default;
194194

195+
$light-border-color: #e0e0e0;
196+
195197
// // Colors used for alert boxes
196198
$color-base-001: $color-white-001 !default;
197199
$color-base-002: $color-black-001 !default;
@@ -274,7 +276,7 @@ $border-width: 5px;
274276
$border-width-small: 1px;
275277
$border-radius-primary: 0.25rem;
276278
$border-radius-secondary: 20px;
277-
$outer-border: $border-width-small solid $color-border;
279+
$outer-border: $border-width-small solid $light-border-color;
278280
$inner-border: $border-width solid lighten($color-border, 50%);
279281
$focus-border: $border-width solid $color-border;
280282
$focus-outline: $border-width solid $color-border;
@@ -384,6 +386,7 @@ $red: #dc3545;
384386
overflow-y: hidden;
385387
}
386388
}
389+
387390
$alert-color: #991b1b;
388391
$stable-color: #047857;
389392
$warning-color: #fde047;

0 commit comments

Comments
 (0)