This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-395
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-395 by this push:
new e668aca [STREAMPIPES-395] Further harmonize colors in UI
e668aca is described below
commit e668acac9d35b4dc2160f47b4d220de6a4625a99
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Jul 6 22:04:57 2021 +0200
[STREAMPIPES-395] Further harmonize colors in UI
---
ui/src/app/add/add.component.html | 18 +-
.../endpoint-item/endpoint-item.component.html | 2 +-
.../endpoint-item/endpoint-item.component.ts | 8 +-
.../add-endpoint/add-endpoint.component.html | 8 +-
.../endpoint-installation.component.html | 4 +-
.../app-asset-monitoring.component.html | 8 +-
.../app/app-overview/app-overview.component.html | 10 +-
.../pipeline-element-runtime-info.component.html | 6 +-
.../pipeline-element-runtime-info.component.scss | 9 +
.../panel-dialog/panel-dialog.component.scss | 5 +-
.../standard-dialog/standard-dialog.component.scss | 7 +-
.../static-any-input.component.html | 6 +-
.../static-code-input.component.html | 4 +-
.../static-color-picker.component.html | 2 +-
.../static-file-input.component.css | 4 +-
.../static-file-input.component.html | 8 +-
.../static-free-input.component.html | 9 +-
.../static-mapping-nary.component.html | 4 +-
.../static-one-of-input.component.html | 4 +-
...tic-runtime-resolvable-any-input.component.html | 6 +-
...c-runtime-resolvable-oneof-input.component.html | 2 +-
.../components/feedback/feedback.component.html | 8 +-
.../core/components/toolbar/toolbar.component.scss | 1 +
.../overview/dashboard-overview.component.html | 2 +-
.../components/panel/dashboard-panel.component.css | 3 +-
.../panel/dashboard-panel.component.html | 8 +-
.../pipeline-assembly.component.html | 2 +-
.../pipeline-assembly.component.scss | 4 +
.../pipeline-element-preview.component.html | 4 +-
.../pipeline-element-preview.component.scss | 11 +-
.../dialog/customize/customize.component.html | 12 +-
ui/src/app/editor/dialog/help/help.component.html | 10 +-
ui/src/app/editor/dialog/help/help.component.scss | 11 +-
.../save-pipeline/save-pipeline.component.html | 20 ++-
.../file-overview/file-overview.component.html | 4 +-
.../file-overview/file-overview.component.scss | 10 +-
.../file-upload/file-upload-dialog.component.html | 10 +-
ui/src/app/files/files.component.html | 4 +-
.../login/components/setup/setup.component.html | 10 +-
.../pipeline-overview.component.html | 10 +-
.../pipeline-overview.component.scss | 7 +-
.../delete-pipeline-dialog.component.html | 6 +-
.../pipeline-categories-dialog.component.html | 20 +--
.../pipeline-status-dialog.component.html | 5 +-
ui/src/app/pipelines/pipelines.component.html | 6 +-
.../general-profile-settings.component.html | 2 +-
.../token/token-management-settings.component.html | 6 +-
.../token/token-management-settings.component.scss | 6 +-
ui/src/app/profile/profile.component.html | 6 +-
ui/src/scss/sp/buttons.scss | 2 +-
ui/src/scss/sp/colors.scss | 4 +-
ui/src/scss/sp/feedback.ng1.scss | 5 +-
ui/src/scss/sp/main.scss | 6 +-
ui/src/scss/sp/pipeline-validation.scss | 6 +-
ui/src/scss/sp/sp-theme-yellow.scss | 194 ---------------------
ui/src/scss/sp/sp-theme.scss | 6 +-
56 files changed, 206 insertions(+), 359 deletions(-)
diff --git a/ui/src/app/add/add.component.html
b/ui/src/app/add/add.component.html
index 33943d5..0591fd4 100644
--- a/ui/src/app/add/add.component.html
+++ b/ui/src/app/add/add.component.html
@@ -20,7 +20,7 @@
<div fxLayout="row" class="border sp-bg-lightgray p-0">
<div fxFlex="100" class="page-container-nav">
<div fxFlex="100" fxLayout="row">
- <button mat-button mat-flat-button color="primary"
(click)="showManageRdfEndpointsDialog()">Manage
+ <button mat-button mat-flat-button color="accent"
(click)="showManageRdfEndpointsDialog()">Manage
Endpoints
</button>
<div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'">
@@ -39,23 +39,23 @@
<div fxLayout="row" class="fixed-height add-options sp-tab-bg">
<div class="add-options-item pl-5" fxLayoutAlign="start center"
fxLayout="row">
<div fxFlex="100" fxLayout="row">
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
[disabled]="selectedEndpointItems.length === 0"
(click)="installSelected()" class="mr-10">
<i class="material-icons">cloud_download</i>
Install selected
</button>
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
[disabled]="selectedEndpointItems.length === 0"
(click)="uninstallSelected()" class="mr-10">
<i class="material-icons">delete</i>
Uninstall selected
</button>
- <button mat-button mat-icon-button color="primary"
class="mr-10" (click)="selectAll(true)"
+ <button mat-button mat-icon-button color="accent"
class="mr-10" (click)="selectAll(true)"
matTooltip="Select all" matTooltipPosition="above">
<i class="material-icons">queue</i>
</button>
- <button mat-button mat-icon-button color="primary"
class="mr-10" (click)="selectAll(false)"
+ <button mat-button mat-icon-button color="accent"
class="mr-10" (click)="selectAll(false)"
matTooltip="Select none" matTooltipPosition="above">
<i class="material-icons">filter_none</i>
</button>
@@ -65,13 +65,13 @@
<div class="add-options-item pl-5" fxLayoutAlign="start center"
fxLayout="row">
<mat-icon>search</mat-icon>
- <mat-form-field class="form-style">
+ <mat-form-field class="form-style" color="accent">
<input matInput placeholder="Find Element" value=""
[(ngModel)]="filterTerm"
name="something">
</mat-form-field>
</div>
<div class="add-options-item" fxLayoutAlign="start center"
fxLayout="row">
- <mat-form-field>
+ <mat-form-field color="accent">
<mat-select [(value)]="selectedInstallationStatus">
<mat-option [value]="'all'">
Available & Installed
@@ -86,7 +86,7 @@
</mat-form-field>
</div>
<div class="add-options-item" fxLayoutAlign="start center"
fxLayout="row">
- <button mat-button mat-icon-button color="primary"
(click)="getEndpointItems()"
+ <button mat-button mat-icon-button color="accent"
(click)="getEndpointItems()"
matTooltip="Reload items" matTooltipPosition="above">
<mat-icon>refresh</mat-icon>
</button>
@@ -109,7 +109,7 @@
</div>
</div>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center center"
*ngIf="!endpointItemsLoadingComplete">
- <mat-spinner [mode]="'indeterminate'" [diameter]="20"></mat-spinner>
+ <mat-spinner [mode]="'indeterminate'" [diameter]="20"
color="accent"></mat-spinner>
<h4> Searching for available pipeline elements, please
wait...</h4>
</div>
</div>
diff --git
a/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
b/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
index b6d55f4..7b804bd 100644
--- a/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
+++ b/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
@@ -33,7 +33,7 @@
<div class="ml-5"><small *ngIf="!(item.editable)">Internally
managed by StreamPipes</small></div>
<div fxFlex fxLayoutAlign="start end" class="ml-5">
- <button class="small-button-add" mat-button mat-raised-button
color="primary" [disabled]="!(item.editable)"
+ <button class="small-button-add" mat-button mat-raised-button
color="accent" [disabled]="!(item.editable)"
(click)="installSingleElement($event, item)"
*ngIf="!item.installed">
<span> Install</span>
</button>
diff --git a/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
b/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
index 35ffd80..7bdf08e 100644
--- a/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
+++ b/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
@@ -81,8 +81,12 @@ export class EndpointItemComponent implements OnInit {
}
getSelectedBackground() {
- if (this.itemSelected) return "#EEEEEE";
- else return "#FFFFFF";
+ if (this.itemSelected) {
+ return "var(--color-bg-2)";
+ }
+ else {
+ return "var(--color-bg-1)";
+ }
}
findItemTypeTitle() {
diff --git a/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.html
b/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.html
index 800fe8a..6dd1064 100644
--- a/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.html
+++ b/ui/src/app/add/dialogs/add-endpoint/add-endpoint.component.html
@@ -27,7 +27,7 @@
</div>
<div class="md-list-item-text" fxFlex="20"
fxLayout="column">
<button mat-button mat-flat-button
(click)="removeRdfEndpoint(rdfEndpoint._id)">
- <mat-icon color="primary">delete</mat-icon>
+ <mat-icon color="accent">delete</mat-icon>
</button>
</div>
</div>
@@ -41,7 +41,7 @@
<input matInput type="text"
[(ngModel)]="newEndpoint.endpointUrl">
</mat-form-field>
</div>
- <div class="md-list-item-text" flex="20" layout="column">
+ <div class="md-list-item-text" fxFlex="20"
fxlayout="column">
<button mat-button mat-flat-button
(click)="addRdfEndpoint(newEndpoint)">
<mat-icon>save</mat-icon>
</button>
@@ -50,7 +50,7 @@
</div>
</div>
<div style="margin-top:10px;">
- <button mat-button mat-raised-button color="primary"
(click)="showAddInput()">Add Category</button>
+ <button mat-button mat-raised-button color="accent"
(click)="showAddInput()">Add Category</button>
</div>
</div>
<mat-divider></mat-divider>
@@ -59,4 +59,4 @@
Close
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.html
b/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.html
index 147422b..2d92712 100644
---
a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.html
+++
b/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.html
@@ -44,8 +44,8 @@
<button mat-button mat-raised-button class="mat-basic"
(click)="close()" style="margin-right: 10px;" *ngIf="nextButton !== 'Close'">
Close
</button>
- <button mat-button mat-raised-button color="primary" (click)="next()"
[disabled]="installationRunning">
+ <button mat-button mat-raised-button color="accent" (click)="next()"
[disabled]="installationRunning">
{{nextButton}}
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
index 81a89ab..ef2f44c 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
@@ -17,9 +17,9 @@
-->
<div fxLayout="column" fxFlex="100" class="page-container-connect">
- <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;">
- <div fxLayout="fill" style="line-height:24px;border-bottom:1px solid
#ccc">
- <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="selectedIndexChange($event)">
+ <div fxLayout="row" class="sp-tab-bg">
+ <div fxLayout="fill" class="page-container-nav">
+ <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="selectedIndexChange($event)" color="accent">
<mat-tab label="Asset Dashboards">
</mat-tab>
<mat-tab id="all-adapters" label="New Asset Dashboard">
@@ -33,4 +33,4 @@
<view-asset fxFlex="100" *ngIf="selectedIndex == 0 &&
dashboardSelected" [dashboardConfig]="selectedDashboard"
(dashboardClosed)="closeDashboard($event)"></view-asset>
<create-asset *ngIf="selectedIndex == 1" fxFlex="100"
(dashboardClosed)="closeDashboard($event)"></create-asset>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/app-overview/app-overview.component.html
b/ui/src/app/app-overview/app-overview.component.html
index ce1010e..769e232 100644
--- a/ui/src/app/app-overview/app-overview.component.html
+++ b/ui/src/app/app-overview/app-overview.component.html
@@ -17,11 +17,11 @@
-->
<div fxLayout="column" fxFlex="100" class="page-container
page-container-padding page-container-connect">
- <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;">
- <div fxLayoutAlign="end center" fxLayout="fill"
- style="padding-right:10px;
width:100%;min-height:50px;line-height:24px;border-bottom:1px solid
#ccc;margin-bottom:1px;">
+ <div fxLayout="row" class="sp-tab-bg">
+ <div fxLayoutAlign="end center" fxLayout="fill"
class="page-container-nav"
+ style="padding-right:10px;
width:100%;min-height:50px;line-height:24px;margin-bottom:1px;">
<div *ngIf="appOpen">
- <button mat-button mat-raised-button color="primary"
(click)="appClosed()">
+ <button mat-button mat-raised-button color="accent"
(click)="appClosed()">
Close App
</button>
</div>
@@ -40,7 +40,7 @@
</mat-card-header>
</div>
<div fxFlex="25" fxLayoutAlign="center end"
fxLayout="column">
- <button mat-button mat-raised-button color="primary"
(click)="selectApp(app.appId)">Open App
+ <button mat-button mat-raised-button color="accent"
(click)="selectApp(app.appId)">Open App
</button>
</div>
</div>
diff --git
a/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.html
b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.html
index af1bd91..79022ee 100644
---
a/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.html
+++
b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.html
@@ -19,7 +19,7 @@
<div *ngIf="!runtimeData && !runtimeDataError">
<div fxLayout="column">
<div fxLayoutAlign="center" >
- <mat-spinner [diameter]="40" fxLayoutAlign="center" style="margin:
10px 0 5px 0" >Loading</mat-spinner>
+ <mat-spinner [diameter]="40" fxLayoutAlign="center" style="margin:
10px 0 5px 0" color="accent">Loading</mat-spinner>
</div>
<div fxLayoutAlign="center">
<h3>Gathering data for live preview...</h3>
@@ -36,7 +36,7 @@
</tr>
</thead>
<tbody id="preview-data-rows-id">
- <tr *ngFor="let property of
streamDescription.eventSchema.eventProperties">
+ <tr *ngFor="let property of
streamDescription.eventSchema.eventProperties" class="preview-row">
<td>{{property.runtimeName}}</td>
<td *ngIf="isImage(property)"> <img
src="data:image/png;base64,{{runtimeData[property.runtimeName]}}"
style="max-width: 150px;" /> </td>
<td
*ngIf="isTimestamp(property)">{{runtimeData[property.runtimeName] |
date:'yyyy-MM-dd HH:mm:ss '}}</td>
@@ -47,4 +47,4 @@
</div>
<div *ngIf="runtimeDataError">
<p>Preview is currently unavailable.</p>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.scss
b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.scss
index 13cbc4a..56e3a59 100644
---
a/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.scss
+++
b/ui/src/app/connect/components/runtime-info/pipeline-element-runtime-info.component.scss
@@ -15,3 +15,12 @@
* limitations under the License.
*
*/
+
+.preview-row, .preview-table {
+ background: var(--color-bg-dialog);
+}
+
+.dataTable tbody tr:hover {
+ background: var(--color-bg-1);
+}
+
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
index b1e126c..17e0e92 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
+++ b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
@@ -20,7 +20,8 @@
app-dialog-container {
width: 100%;
- background-color: #fff;
+ background-color: var(--color-bg-dialog);
+ color: var(--color-default-text);
box-shadow: -7px 0px 5px -5px #777;
}
@@ -53,4 +54,4 @@ app-dialog-container {
#portal {
width:100%;
-}
\ No newline at end of file
+}
diff --git
a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
index 360631a..11590d4 100644
--- a/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
+++ b/ui/src/app/core-ui/dialog/standard-dialog/standard-dialog.component.scss
@@ -20,7 +20,8 @@
standard-dialog-container {
width: 100%;
- background-color: #fff;
+ background-color: var(--color-bg-dialog);
+ color: var(--color-default-text);
border-radius: 5px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
@@ -40,7 +41,7 @@ standard-dialog-container {
height: 50px;
min-height: 50px;
width: 100%;
- background: $sp-color-primary;
+ background: var(--color-primary);
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
@@ -59,4 +60,4 @@ standard-dialog-container {
#portal {
width:100%;
-}
\ No newline at end of file
+}
diff --git
a/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.html
b/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.html
index c43d8bc..abe44bb 100644
---
a/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-any-input/static-any-input.component.html
@@ -18,14 +18,14 @@
<div id="formWrapper" fxFlex="100" fxLayout="column">
<div *ngIf="!staticProperty.horizontalRendering" fxLayout="column">
- <mat-checkbox *ngFor="let option of staticProperty.options"
[(ngModel)]="option.selected" style="margin-left: 10px;">
+ <mat-checkbox color="accent" *ngFor="let option of
staticProperty.options" [(ngModel)]="option.selected" style="margin-left:
10px;">
{{option.name}}
</mat-checkbox>
</div>
<div *ngIf="staticProperty.horizontalRendering">
- <mat-form-field style="width: 100%">
+ <mat-form-field style="width: 100%" color="accent">
<mat-select multiple>
<mat-option *ngFor="let option of staticProperty.options"
[value]="option.elementId"
(click)="select(option.elementId)">
@@ -36,4 +36,4 @@
</mat-select>
</mat-form-field>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html
b/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html
index 011ea19..c7aec95 100644
---
a/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html
@@ -18,7 +18,7 @@
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
- <button mat-button mat-raised-button color="primary"
class="small-button" (click)="resetCode()"
+ <button mat-button mat-raised-button color="accent"
class="small-button" (click)="resetCode()"
style="margin-right:10px;margin-bottom:10px;">Reset code
template
</button>
</div>
@@ -31,4 +31,4 @@
</ngx-codemirror>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-color-picker/static-color-picker.component.html
b/ui/src/app/core-ui/static-properties/static-color-picker/static-color-picker.component.html
index 499b126..577de4e 100644
---
a/ui/src/app/core-ui/static-properties/static-color-picker/static-color-picker.component.html
+++
b/ui/src/app/core-ui/static-properties/static-color-picker/static-color-picker.component.html
@@ -17,7 +17,7 @@
-->
<div [formGroup]="parentForm" id="formWrapper">
<div fxFlex="100" fxLayout="row">
- <mat-form-field>
+ <mat-form-field color="accent">
<input matInput
[(colorPicker)]="staticProperty.selectedColor"
(colorPickerChange)="parentForm.get(staticProperty.internalName).setValue($event)"
diff --git
a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.css
b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.css
index 8ca8b6c..53ae5ea 100644
---
a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.css
+++
b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.css
@@ -26,9 +26,9 @@ form {
}
.green-icon {
- color: green;
+ color: var(--color-accent);
}
.green-icon svg {
- fill: green;
+ fill: var(--color-accent);
}
diff --git
a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html
b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html
index 7134363..c7cf40e 100644
---
a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html
@@ -19,7 +19,7 @@
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="column">
<div fxFlex="row">
- <mat-radio-group [(ngModel)]="chooseExistingFile" color="primary">
+ <mat-radio-group [(ngModel)]="chooseExistingFile" color="accent">
<mat-radio-button style="margin-right:10px;"
[value]="true">Choose existing file</mat-radio-button>
<mat-radio-button [value]="false">Upload new
file</mat-radio-button>
</mat-radio-group>
@@ -53,7 +53,7 @@
</div>
- <button color="primary" matSuffix
+ <button color="accent" matSuffix
mat-button style="min-width: 0px">
<mat-icon *ngIf="uploadStatus <
99">insert_drive_file</mat-icon>
<mat-icon *ngIf="uploadStatus == 100"
class="green-icon">check_circle</mat-icon>
@@ -66,7 +66,7 @@
</mat-form-field>
<!--<div fxLayoutAlign="center none">-->
<div>
- <button color="primary" mat-raised-button (click)="upload()"
[disabled]="!fileName">
+ <button color="accent" mat-raised-button (click)="upload()"
[disabled]="!fileName">
Upload
</button>
</div>
@@ -74,4 +74,4 @@
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html
b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html
index b8ff16b..95c030b 100644
---
a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html
@@ -18,7 +18,7 @@
<div [formGroup]="parentForm" fxFlex="100" fxLayout="column">
<div fxFlex fxLayout="row" *ngIf="!staticProperty.valueSpecification &&
!staticProperty.multiLine">
- <mat-form-field fxFlex>
+ <mat-form-field fxFlex color="accent">
<input formControlName="{{fieldName}}" fxFlex
matInput
[placeholder]="staticProperty.label"
@@ -35,7 +35,8 @@
[max]="staticProperty.valueSpecification.maxValue"
[min]="staticProperty.valueSpecification.minValue"
[step]="staticProperty.valueSpecification.step"
- [displayWith]="formatLabel">
+ [displayWith]="formatLabel"
+ color="accent">
</mat-slider>
</div>
</div>
@@ -44,7 +45,7 @@
<h5>Possible placeholders: </h5>
<div fxFlex="100" fxLayout="row" style="background:white;">
<mat-chip-list style="margin-bottom:10px;">
- <mat-chip (click)="applyPlaceholder(property.runtimeName)"
color="primary" *ngFor="let property of
eventSchemas[0].eventProperties">#{{property.runtimeName}}#</mat-chip>
+ <mat-chip (click)="applyPlaceholder(property.runtimeName)"
color="accent" *ngFor="let property of
eventSchemas[0].eventProperties">#{{property.runtimeName}}#</mat-chip>
</mat-chip-list>
</div>
</div>
@@ -53,4 +54,4 @@
<quill-editor *ngIf="!staticProperty.htmlFontFormat" #textEditor
formControlName="{{fieldName}}" [modules]="quillModules"></quill-editor>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html
b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html
index cf3e607..807d756 100644
---
a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html
+++
b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html
@@ -18,7 +18,7 @@
<div id="formWrapper" fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayoutAlign="start center">
- <button mat-button mat-raised-button color="primary"
class="small-button" (click)="selectAll()"
+ <button mat-button mat-raised-button color="accent"
class="small-button" (click)="selectAll()"
style="margin-right:10px;margin-left:10px;">Select all
</button>
<button mat-button mat-raised-button class="mat-basic small-button"
(click)="selectNone()">Select
@@ -31,4 +31,4 @@
{{property.runtimeName}}
</mat-checkbox>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.html
b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.html
index 1c78422..fbbe56c 100644
---
a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.html
@@ -22,7 +22,7 @@
<div *ngIf="!staticProperty.horizontalRendering" fxLayout="column">
<div fxFlex fxLayout="row">
<div fxLayout="column" style="margin-left: 10px">
- <mat-radio-group class="radio-group">
+ <mat-radio-group class="radio-group" color="accent">
<mat-radio-button *ngFor="let option of
staticProperty.options" style="margin-top: -10px"
[value]="option"
(click)="select(option.elementId)" [checked]="option.selected">
<label style="font-weight: normal">
@@ -35,7 +35,7 @@
</div>
<div *ngIf="staticProperty.horizontalRendering">
- <mat-form-field style="width: 100%">
+ <mat-form-field style="width: 100%" color="accent">
<mat-select [(value)]="selectedOption">
<mat-option *ngFor="let option of staticProperty.options"
[value]="option.elementId"
(click)="select(option.elementId)">
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
index faeb85d..3e466cb 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html
@@ -19,7 +19,7 @@
<div id="formWrapper" fxFlex="100" fxLayout="column">
<div>
- <button mat-button mat-raised-button color="primary"
class="small-button"
+ <button mat-button mat-raised-button color="accent"
class="small-button"
(click)="loadOptionsFromRestApi()"
style="margin-right:10px;margin-left:10px;"
[disabled]="!showOptions">
<span>Reload</span>
@@ -27,7 +27,7 @@
</div>
<div *ngIf="!staticProperty.horizontalRendering" fxLayout="column"
style="margin-top:10px;">
<mat-checkbox style="padding-left: 10px;"
- color="primary"
+ color="accent"
*ngFor="let option of staticProperty.options"
[(ngModel)]="option.selected">
{{option.name}}
</mat-checkbox>
@@ -40,7 +40,7 @@
</div>
<div *ngIf="staticProperty.horizontalRendering">
- <mat-form-field style="width: 100%">
+ <mat-form-field style="width: 100%" color="accent">
<mat-label>{{staticProperty.label}}</mat-label>
<mat-select multiple [(ngModel)]="option.selected">
<mat-option *ngFor="let option of staticProperty.options"
[value]="option">
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
index 1f18050..55a763f 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html
@@ -18,7 +18,7 @@
<div id="formWrapper" fxFlex="100" fxLayout="column">
<div>
- <button mat-button mat-raised-button color="primary"
class="small-button"
+ <button mat-button mat-raised-button color="accent"
class="small-button"
(click)="loadOptionsFromRestApi()"
style="margin-right:10px;margin-left:10px;"
[disabled]="!showOptions">
<span>Reload</span>
diff --git a/ui/src/app/core/components/feedback/feedback.component.html
b/ui/src/app/core/components/feedback/feedback.component.html
index 0c6acb2..790ffd1 100644
--- a/ui/src/app/core/components/feedback/feedback.component.html
+++ b/ui/src/app/core/components/feedback/feedback.component.html
@@ -23,12 +23,12 @@
</div>
<div fxLayout="column" fxFlex="40" fxLayoutAlign="start center"
style="margin-bottom:20px;">
<div fxFlex="100" class="feedback-explainer">
- <span>Your feedback helps us to improve StreamPipes.</span>
+ <span>Your feedback helps us to improve
StreamPipes.<br/></span>
<span>Features you'd like to see, bugs you've found or things
you like - tell us what you think!</span>
</div>
</div>
<div fxLayout="column" fxFlex="40" fxLayoutAlign="start center"
style="margin-bottom:20px;">
- <mat-form-field class="feedback-width-100
feedback-font-size-small">
+ <mat-form-field class="feedback-width-100
feedback-font-size-small" color="accent">
<label>Your feedback</label>
<textarea matInput [(ngModel)]="feedback.feedbackText"
maxlength="500" rows="5"></textarea>
</mat-form-field>
@@ -38,7 +38,7 @@
<button mat-button mat-raised-button class="mat-basic"
(click)="closeDialog()" style="margin-right:10px;">
Close
</button>
- <button mat-button mat-raised-button color="primary"
type="submit"
+ <button mat-button mat-raised-button color="accent"
type="submit"
(click)="sendMail()">
Send Mail
</button>
@@ -61,4 +61,4 @@
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.scss
b/ui/src/app/core/components/toolbar/toolbar.component.scss
index ce59853..531c9d0 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.scss
+++ b/ui/src/app/core/components/toolbar/toolbar.component.scss
@@ -22,6 +22,7 @@
}
.current-user {
+ color: var(--color-default-text);
display: block;
line-height: 48px;
height: 48px;
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
index 5a1227d..e252bb1 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
@@ -20,7 +20,7 @@
<div fxFlex="100" fxLayout="column">
<div fxLayout="row" class="fixed-height options-bar sp-tab-bg">
<div class="options-bar-item pl-10" fxLayoutAlign="start center"
fxLayout="row">
- <button mat-button mat-raised-button color="primary"
(click)="openNewDashboardDialog()">
+ <button mat-button mat-raised-button color="accent"
(click)="openNewDashboardDialog()">
<i class="material-icons">add</i>
<span> New dashboard</span>
</button>
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
b/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
index 87d5aa4..0bde2c6 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
@@ -32,8 +32,7 @@
.options-bar {
padding:0px;
- background-color:#f6f6f6;
- border-bottom: 1px solid #cccccc;
+ border-bottom: 1px solid var(--color-bg-2);
margin-bottom: 10px;
height: 50px;
}
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
index 04b8746..637f1cf 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
@@ -16,9 +16,9 @@
~
-->
<div fxFlex="100" fxLayout="column">
- <div fxLayout="row" class="fixed-height options-bar" *ngIf="editMode">
+ <div fxLayout="row" class="fixed-height options-bar sp-tab-bg"
*ngIf="editMode">
<div class="options-bar-item pl-10" fxLayoutAlign="start center"
fxLayout="row">
- <button mat-button mat-raised-button color="primary"
(click)="updateDashboardAndCloseEditMode()" class="mr-10">
+ <button mat-button mat-raised-button color="accent"
(click)="updateDashboardAndCloseEditMode()" class="mr-10">
<i class="material-icons">save</i>
<span> Save</span>
</button>
@@ -26,7 +26,7 @@
<i class="material-icons">clear</i>
<span> Discard</span>
</button>
- <button mat-button mat-raised-button color="primary"
(click)="addWidget()" [disabled]="!editMode">
+ <button mat-button mat-raised-button color="accent"
(click)="addWidget()" [disabled]="!editMode">
<i class="material-icons">add</i>
<span> Add visualization</span>
</button>
@@ -34,7 +34,7 @@
<span fxFlex></span>
<div class="options-bar-item" fxLayoutAlign="start center"
fxLayout="row" >
<mat-slide-toggle
- color="primary"
+ color="accent"
[(ngModel)]="headerVisible">
Show widget controls
</mat-slide-toggle>
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
index 6a616a4..8267683 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
@@ -79,7 +79,7 @@
</div>
<div class="editor-error-notifications"
*ngIf="PipelineValidationService.errorMessages.length > 0
&& errorMessagesDisplayed">
- <h5 style="color:darkred">
+ <h5 class="color-warn">
<b>{{PipelineValidationService.errorMessages.length}}
{{PipelineValidationService.errorMessages.length == 1 ? "error" : "errors"}}
found.</b></h5>
<hr/>
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
index 9018cd5..074ae2a 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
@@ -157,3 +157,7 @@
margin-right: 10px;
background: #b8b8b8;
}
+
+.color-warn {
+ color: var(--color-warn);
+}
diff --git
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
index 7a9c5ab..5ba91c5 100644
---
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
+++
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
@@ -18,12 +18,12 @@
<div class="data-preview">
<div *ngIf="!runtimeData" fxFlex="100" fxLayout="column"
fxLayoutAlign="center center">
- <mat-spinner [diameter]="20"></mat-spinner>
+ <mat-spinner [diameter]="20" color="accent"></mat-spinner>
<span class="preview-table mt-10">Waiting for live data...</span>
</div>
<table class="dataTable row-border hover preview-table"
*ngIf="runtimeData">
<tbody id="preview-data-rows-id">
- <tr *ngFor="let item of runtimeData | keyvalue">
+ <tr *ngFor="let item of runtimeData | keyvalue" class="preview-row">
<td>{{item.key}}</td>
<td><b>{{item.value}}</b></td>
</tr>
diff --git
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss
index c201870..691742f 100644
---
a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss
@@ -22,7 +22,7 @@
top: 120px;
width: 250px;
height: 120px;
- background: white;
+ background: var(--color-bg-dialog);
overflow: auto;
border: 1px solid gray;
box-shadow: 0.175em 0.175em 0 0 rgba(15, 28, 63, 0.125);
@@ -36,3 +36,12 @@
.mt-10 {
margin-top: 10px;
}
+
+.preview-row, .preview-table {
+ background: var(--color-bg-dialog);
+}
+
+.dataTable tbody tr:hover {
+ background: var(--color-bg-1);
+}
+
diff --git a/ui/src/app/editor/dialog/customize/customize.component.html
b/ui/src/app/editor/dialog/customize/customize.component.html
index 28f82d8..1de29b0 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.html
+++ b/ui/src/app/editor/dialog/customize/customize.component.html
@@ -19,7 +19,7 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content">
<div fxFlex="100" fxLayout="column">
- <div style="border-bottom:1px solid
#ccc;padding:10px;background-color:#f6f6f6" fxLayout="row">
+ <div style="border-bottom:1px solid #ccc;padding:10px;"
fxLayout="row" class="sp-tab-bg">
<div fxFlex fxLayoutAlign="start center"
*ngIf="availableTemplates && availableTemplates.length > 0">
<mat-form-field class="form-field" floatLabel="never">
<mat-label>Use template</mat-label>
@@ -33,12 +33,12 @@
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="end center">
<mat-slide-toggle [(ngModel)]="showDocumentation"
- color="primary"
+ color="accent"
[disabled]="!pipelineElement.payload.includesAssets">
Show documentation
</mat-slide-toggle>
<span> </span>
- <mat-slide-toggle [(ngModel)]="displayRecommended"
color="primary">
+ <mat-slide-toggle [(ngModel)]="displayRecommended"
color="accent">
Show only recommended settings
</mat-slide-toggle>
</div>
@@ -102,7 +102,7 @@
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
<div fxLayout="row" *ngIf="!templateMode">
- <button mat-button mat-raised-button color="primary"
(click)="save()" style="margin-right:10px;"
+ <button mat-button mat-raised-button color="accent"
(click)="save()" style="margin-right:10px;"
[disabled]="!(formValid)">
<i class="material-icons">save</i><span> Save</span>
</button>
@@ -110,13 +110,13 @@
Cancel
</button>
<div fxFlex></div>
- <button mat-button mat-raised-button color="primary"
[disabled]="!(formValid)"
+ <button mat-button mat-raised-button color="accent"
[disabled]="!(formValid)"
(click)="triggerTemplateMode()">
<i
class="material-icons">add_circle_outline</i><span> Create template</span>
</button>
</div>
<div fxLayout="row" *ngIf="templateMode">
- <button mat-button mat-raised-button color="primary"
(click)="saveTemplate()" style="margin-right:10px;"
+ <button mat-button mat-raised-button color="accent"
(click)="saveTemplate()" style="margin-right:10px;"
[disabled]="!(formValid)">
<i class="material-icons">save</i><span> Save
template</span>
</button>
diff --git a/ui/src/app/editor/dialog/help/help.component.html
b/ui/src/app/editor/dialog/help/help.component.html
index 42de2af..2db3e96 100644
--- a/ui/src/app/editor/dialog/help/help.component.html
+++ b/ui/src/app/editor/dialog/help/help.component.html
@@ -23,7 +23,7 @@
{{pipelineElement.description}}
</p>
- <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="selectedIndex=$event">
+ <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="selectedIndex=$event" color="accent">
<mat-tab *ngFor="let tab of tabs" label="{{tab.title}}">
</mat-tab>
</mat-tab-group>
@@ -32,9 +32,9 @@
<h5>Field Names</h5>
<div>
- <table class="dataTable row-border hover">
+ <table class="dataTable row-border hover preview-table">
<thead>
- <tr>
+ <tr class="preview-row">
<th>Field Name</th>
<th>Description</th>
<th>Runtime Name</th>
@@ -42,7 +42,7 @@
</tr>
</thead>
<tbody id="preview-data-rows-id">
- <tr *ngFor="let property of
pipelineElement.eventSchema.eventProperties">
+ <tr *ngFor="let property of
pipelineElement.eventSchema.eventProperties" class="preview-row">
<td>{{property.label ? property.label :
"(n/a)"}}</td>
<td>{{property.description ? property.description
: "(n/a)"}}</td>
<td>{{property.runtimeName}}</td>
@@ -68,4 +68,4 @@
Close
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/editor/dialog/help/help.component.scss
b/ui/src/app/editor/dialog/help/help.component.scss
index 0a776e5..4976538 100644
--- a/ui/src/app/editor/dialog/help/help.component.scss
+++ b/ui/src/app/editor/dialog/help/help.component.scss
@@ -16,4 +16,13 @@
*
*/
-@import '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
+@import '../../../../scss/sp/sp-dialog.scss';
+
+.preview-row, .preview-table {
+ background: var(--color-bg-dialog);
+}
+
+.dataTable tbody tr:hover {
+ background: var(--color-bg-1);
+}
+
diff --git
a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html
b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html
index 4599345..95c3707 100644
--- a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html
+++ b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html
@@ -21,7 +21,7 @@
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="column" *ngIf="!saved && !saving &&
!storageError">
<div id="overwriteCheckbox" class="checkbox"
*ngIf="currentModifiedPipelineId">
- <mat-radio-group [(ngModel)]="updateMode"
fxLayout="column" color="primary" class="pipeline-radio-group">
+ <mat-radio-group [(ngModel)]="updateMode"
fxLayout="column" color="accent" class="pipeline-radio-group">
<mat-radio-button [value]="'update'" class="mb-10"
style="padding-left: 0;">
Update pipeline <b>{{currentPipelineName}}</b>
</mat-radio-button>
@@ -32,31 +32,33 @@
</div>
<form [formGroup]="submitPipelineForm">
<div fxFlex="100" fxLayout="column"
*ngIf="!currentModifiedPipelineId || updateMode=='clone'">
- <mat-form-field fxFlex><mat-label>Pipeline Name</mat-label>
+ <mat-form-field fxFlex color="accent">
+ <mat-label>Pipeline Name</mat-label>
<input [formControlName]="'pipelineName'" matInput
name="pipelineName"/>
<!-- <span
ng-show="submitPipelineForm.pipelineName.$touched &&
submitPipelineForm.pipelineName.$error.required">Please provide a pipeline
name.</span>-->
<!-- <span
ng-show="submitPipelineForm.pipelineName.$error.maxlength">Please provide a
shorter pipeline name.</span>-->
</mat-form-field>
- <mat-form-field fxFlex><mat-label>Description</mat-label>
+ <mat-form-field fxFlex color="accent">
+ <mat-label>Description</mat-label>
<input [formControlName]="'pipelineDescription'"
matInput/>
<!-- <span
ng-show="submitPipelineForm.pipelineDescription.$error.maxlength">Please
provide a shorter description.</span>-->
</mat-form-field>
</div>
</form>
- <mat-checkbox (click)="triggerTutorial()" color="primary"
[(ngModel)]="startPipelineAfterStorage">
+ <mat-checkbox (click)="triggerTutorial()" color="accent"
[(ngModel)]="startPipelineAfterStorage">
Start pipeline immediately
</mat-checkbox>
</div>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"
*ngIf="saving">
- <mat-spinner [mode]="'indeterminate'"
[diameter]="50"></mat-spinner>
+ <mat-spinner [mode]="'indeterminate'" [diameter]="50"
color="accent"></mat-spinner>
<span class="status-text">Saving pipeline...</span>
</div>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"
*ngIf="saved">
- <mat-icon color="primary"
style="font-size:50pt;height:60px;width:60px;">check_circle</mat-icon>
+ <mat-icon color="accent"
style="font-size:50pt;height:60px;width:60px;">check_circle</mat-icon>
<span class="status-text">Pipeline successfully stored.</span>
</div>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"
*ngIf="storageError">
- <mat-icon color="primary"
style="font-size:50pt;height:60px;width:60px;">error</mat-icon>
+ <mat-icon color="accent"
style="font-size:50pt;height:60px;width:60px;">error</mat-icon>
<span class="status-text">Your pipeline could not be
stored.</span>
<span class="status-subtext">{{errorMessage}}</span>
</div>
@@ -64,10 +66,10 @@
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button [disabled]="!submitPipelineForm.valid || saving || saved"
mat-button mat-raised-button color="primary" (click)="savePipeline(false)"
style="margin-right:10px;">
+ <button [disabled]="!submitPipelineForm.valid || saving || saved"
mat-button mat-raised-button color="accent" (click)="savePipeline(false)"
style="margin-right:10px;">
Save
</button>
- <button [disabled]="!submitPipelineForm.valid || saving || saved"
mat-button mat-raised-button color="primary" (click)="savePipeline(true)"
style="margin-right:10px;">
+ <button [disabled]="!submitPipelineForm.valid || saving || saved"
mat-button mat-raised-button color="accent" (click)="savePipeline(true)"
style="margin-right:10px;">
Save and go to pipeline view
</button>
<button mat-button mat-raised-button class="mat-basic"
(click)="hide()">
diff --git
a/ui/src/app/files/components/file-overview/file-overview.component.html
b/ui/src/app/files/components/file-overview/file-overview.component.html
index af32a8b..fcb8c51 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.html
+++ b/ui/src/app/files/components/file-overview/file-overview.component.html
@@ -40,7 +40,7 @@
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action</th>
<td mat-cell *matCellDef="let fileMetadata">
- <button color="primary" mat-button mat-icon-button
matTooltip="Delete file" matTooltipPosition="above"
+ <button color="accent" mat-button mat-icon-button
matTooltip="Delete file" matTooltipPosition="above"
(click)="deleteFile(fileMetadata)">
<i class="material-icons">delete</i>
</button>
@@ -57,4 +57,4 @@
</div>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"
*ngIf="!filesAvailable">
<h5>(no files available)</h5>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/files/components/file-overview/file-overview.component.scss
b/ui/src/app/files/components/file-overview/file-overview.component.scss
index 7b83d93..e37a83c 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.scss
+++ b/ui/src/app/files/components/file-overview/file-overview.component.scss
@@ -17,19 +17,19 @@
*/
.mat-table {
- background: #FAFAFA;
+ //background: #FAFAFA;
}
.mat-paginator {
border-top: 1px solid rgba(0,0,0,.12);
- background: #FAFAFA;
+ //background: #FAFAFA;
}
.mat-row:nth-child(even) {
- background-color: #FAFAFA;
+ background-color: var(--color-bg-2);
}
.mat-row:nth-child(odd) {
- background-color:#ffffff;
+ background-color: var(--color-bg-3);
}
.filetype-container {
@@ -37,4 +37,4 @@
color: white;
padding: 5px 15px;
border-radius: 5px;
-}
\ No newline at end of file
+}
diff --git
a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
index 2ec920f..1fbcffa 100644
--- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
+++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
@@ -21,15 +21,15 @@
<div class="sp-dialog-content p-15">
<div fxFlex="100">
<div fxFlex="100" style="margin:5px;width:100%">
- <mat-form-field style="width: 95%"
(click)="fileInput.click();">
+ <mat-form-field style="width: 95%"
(click)="fileInput.click();" color="accent">
<input matInput placeholder="File" disabled
(value)="fileName">
<input #fileInput type="file" style="display:none;"
(change)="handleFileInput($event.target.files)">
<div>
{{fileName}}
- <mat-progress-bar mode="determinate"
value="{{uploadStatus}}" *ngIf="uploadStatus > 0"></mat-progress-bar>
+ <mat-progress-bar mode="determinate"
value="{{uploadStatus}}" *ngIf="uploadStatus > 0"
color="accent"></mat-progress-bar>
</div>
- <button color="primary" matSuffix
+ <button color="accent" matSuffix
mat-button style="min-width: 0px">
<mat-icon *ngIf="uploadStatus <
99">insert_drive_file</mat-icon>
<mat-icon *ngIf="uploadStatus == 100"
class="green-icon">check_circle</mat-icon>
@@ -43,11 +43,11 @@
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button mat-button mat-raised-button color="primary" (click)="store()"
style="margin-right:10px;">
+ <button mat-button mat-raised-button color="accent" (click)="store()"
style="margin-right:10px;">
Store file
</button>
<button mat-button mat-raised-button class="mat-basic"
(click)="cancel()" style="margin-right:10px;">
Cancel
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/files/files.component.html
b/ui/src/app/files/files.component.html
index 4b04ef8..6dba0c4 100644
--- a/ui/src/app/files/files.component.html
+++ b/ui/src/app/files/files.component.html
@@ -21,7 +21,7 @@
<div fxFlex="100" class="page-container-nav">
<div fxFlex="100" fxLayout="row">
<div fxFlex fxLayoutAlign="start center">
- <mat-tab-group>
+ <mat-tab-group color="accent">
<mat-tab label="Files"></mat-tab>
</mat-tab-group>
</div>
@@ -31,7 +31,7 @@
<div fxLayout="row" class="fixed-height add-options sp-tab-bg">
<div class="add-options-item" fxLayoutAlign="start center"
fxLayout="row" style="padding-left:5px;">
<div fxFlex="100" fxLayout="row">
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
(click)="openFileUploadDialog()" class="mr-10">
<i class="material-icons">cloud_upload</i>
Upload new file
diff --git a/ui/src/app/login/components/setup/setup.component.html
b/ui/src/app/login/components/setup/setup.component.html
index 1f2ecc5..39eb033 100644
--- a/ui/src/app/login/components/setup/setup.component.html
+++ b/ui/src/app/login/components/setup/setup.component.html
@@ -29,17 +29,17 @@
<div class="setup-inline-content">
<h3>Initial User</h3>
<div fxLayout="column">
- <mat-form-field fxFlex>
+ <mat-form-field fxFlex color="accent">
<mat-label>Email</mat-label>
<input [(ngModel)]="setup.adminEmail"
matInput type="email" name="email" class="sp"
required/>
</mat-form-field>
- <mat-form-field fxFlex>
+ <mat-form-field fxFlex color="accent">
<mat-label>Password</mat-label>
<input [(ngModel)]="setup.adminPassword"
matInput type="password" name="password"
class="sp" required/>
</mat-form-field>
- <mat-checkbox style="margin-bottom: 10px;"
color="primary"
+ <mat-checkbox style="margin-bottom: 10px;"
color="accent"
[(ngModel)]="setup.installPipelineElements" name="install"><span>Also install
available data streams, processors and sinks.</span>
</mat-checkbox>
</div>
@@ -74,12 +74,12 @@
<mat-divider></mat-divider>
<div fxLayout="row" fxLayoutAlign="center center">
<div fxLayout="row" style="margin-top: 10px;
margin-bottom: 10px;">
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
[disabled]="!(setupForm.valid) || loading ||
installationFinished"
(click)="configure(0)"
*ngIf="!installationFinished">
<span>{{!installationRunning ? 'Install' :
'Installing...'}}</span>
</button>
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
(click)="openLoginPage()"
*ngIf="installationFinished">
<mat-icon>arrow_forward</mat-icon>
<span>Go to login page</span>
diff --git
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
index 1b2ea47..d34b5d1 100644
---
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
+++
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
@@ -40,12 +40,12 @@
<ng-container matColumnDef="start">
<th mat-header-cell *matHeaderCellDef> Start</th>
<td mat-cell *matCellDef="let pipeline">
- <button color="primary" mat-button mat-icon-button
matTooltip="Start pipeline" matTooltipPosition="above"
+ <button color="accent" mat-button mat-icon-button
matTooltip="Start pipeline" matTooltipPosition="above"
(click)="pipelineOperationsService.startPipeline(pipeline._id,
refreshPipelinesEmitter, toggleRunningOperation)"
[disabled]="starting" *ngIf="!pipeline.running">
<i class="material-icons">play_arrow</i>
</button>
- <button color="primary" mat-button mat-icon-button
matTooltip="Stop pipeline" matTooltipPosition="above"
+ <button color="accent" mat-button mat-icon-button
matTooltip="Stop pipeline" matTooltipPosition="above"
(click)="pipelineOperationsService.stopPipeline(pipeline._id,
refreshPipelinesEmitter, toggleRunningOperation)"
[disabled]="stopping" *ngIf="pipeline.running">
<i class="material-icons">stop</i>
@@ -73,20 +73,20 @@
<td mat-cell *matCellDef="let pipeline">
<div fxLayout="row">
<span fxFlex fxFlexOrder="1" fxLayout="row"
fxLayoutAlign="center center">
- <button color="primary"mat-button mat-icon-button
matTooltip="Show pipeline" matTooltipPosition="above"
+ <button color="accent" mat-button mat-icon-button
matTooltip="Show pipeline" matTooltipPosition="above"
(click)="pipelineOperationsService.showPipelineDetails(pipeline._id)"><i
class="material-icons">search</i>
</button>
</span>
<span fxFlex fxFlexOrder="2" fxLayout="row"
fxLayoutAlign="center center">
- <button color="primary"mat-button mat-icon-button
matTooltip="Modify pipeline" matTooltipPosition="above"
+ <button color="accent" mat-button mat-icon-button
matTooltip="Modify pipeline" matTooltipPosition="above"
[disabled]="pipeline.running"
(click)="pipelineOperationsService.modifyPipeline(pipeline._id)">
<i class="material-icons">mode_edit</i>
</button>
</span>
<span fxFlex fxFlexOrder="3" fxLayout="row"
fxLayoutAlign="center center">
- <button color="primary" mat-button mat-icon-button
matTooltip="Delete pipeline" matTooltipPosition="above"
+ <button color="accent" mat-button mat-icon-button
matTooltip="Delete pipeline" matTooltipPosition="above"
(click)="pipelineOperationsService.showDeleteDialog(pipeline,
refreshPipelinesEmitter)">
<i class="material-icons">delete</i>
</button>
diff --git
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
index 404cd64..c2bef23 100644
---
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
+++
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
@@ -18,20 +18,17 @@
.mat-table {
- background: #FAFAFA;
}
.mat-paginator {
border-top: 1px solid rgba(0, 0, 0, .12);
- background: #FAFAFA;
}
.mat-row:nth-child(even) {
- background-color: #FAFAFA;
+ background-color: var(--color-bg-2);
}
-
.mat-row:nth-child(odd) {
- background-color: #ffffff;
+ background-color: var(--color-bg-3);
}
.mat-column-status {
diff --git
a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
index ab26a9f..ca2f304 100644
---
a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
+++
b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
@@ -26,11 +26,11 @@
</div>
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <button mat-button mat-raised-button color="primary"
*ngIf="!pipeline.running"
+ <button mat-button mat-raised-button color="accent"
*ngIf="!pipeline.running"
(click)="deletePipeline()">Delete
pipeline
</button>
- <button mat-button mat-raised-button color="primary"
*ngIf="pipeline.running"
+ <button mat-button mat-raised-button color="accent"
*ngIf="pipeline.running"
(click)="stopAndDeletePipeline()">Stop and
delete pipeline
</button>
@@ -49,4 +49,4 @@
Close
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
index d4d7082..a1fce33 100644
---
a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
+++
b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
@@ -47,14 +47,14 @@
<div fxFlex="50" fxLayout="row"
fxLayoutAlign="center end">
<button mat-button mat-icon-button
(click)="addPipelineToCategory(pipelineCategory)"
- color="primary">
+ color="accent">
<mat-icon>save</mat-icon>
</button>
</div>
<div fxFlex="50" fxLayout="row"
fxLayoutAlign="center end">
<button mat-button mat-icon-button
(click)="showAddToCategoryInput(pipelineCategory._id, false)"
- color="primary">
+ color="accent">
<mat-icon>delete</mat-icon>
</button>
</div>
@@ -68,7 +68,7 @@
fxLayoutAlign="end center">
<button mat-button mat-icon-button
(click)="removePipelineFromCategory(pipeline, pipelineCategory._id)"
- color="primary">
+ color="accent">
<mat-icon>delete</mat-icon>
</button>
</div>
@@ -81,14 +81,14 @@
<div class="md-list-item-text" fxFlex="33" fxLayout="row"
fxLayoutAlign="center start">
<button mat-button mat-icon-button
*ngIf="categoryDetailsVisible[pipelineCategory._id]"
(click)="toggleCategoryDetailsVisibility(pipelineCategory._id)"
- color="primary"
+ color="accent"
matTooltip="Hide Details"
matTooltipPosition="above">
<mat-icon>expand_less</mat-icon>
</button>
<button mat-button mat-icon-button
*ngIf="!categoryDetailsVisible[pipelineCategory._id]"
(click)="toggleCategoryDetailsVisibility(pipelineCategory._id)"
- color="primary"
+ color="accent"
matTooltip="Show Details"
matTooltipPosition="above">
<mat-icon>expand_more</mat-icon>
</button>
@@ -96,7 +96,7 @@
<div class="md-list-item-text" fxFlex="33" fxLayout="row"
fxLayoutAlign="center start">
<button mat-button mat-icon-button
(click)="showAddToCategoryInput(pipelineCategory._id, true)"
- color="primary"
+ color="accent"
matTooltip="Add Pipeline To Category"
matTooltipPosition="above">
<mat-icon>add_circle_outline</mat-icon>
</button>
@@ -104,7 +104,7 @@
<div class="md-list-item-text" flex="33" layout="row"
layout-align="center start">
<button mat-button mat-icon-button
(click)="deletePipelineCategory(pipelineCategory._id)"
- color="primary"
+ color="accent"
matTooltip="Delete Category"
matTooltipPosition="above">
<mat-icon>delete</mat-icon>
</button>
@@ -127,14 +127,14 @@
</mat-form-field>
</div>
<div class="md-list-item-text" fxFlex="20" fxLayout="column">
- <button mat-button mat-icon-button
(click)="addPipelineCategory()" color="primary"
+ <button mat-button mat-icon-button
(click)="addPipelineCategory()" color="accent"
class="md-accent md-icon-button">
<mat-icon>save</mat-icon>
</button>
</div>
</div>
<div style="margin-top:10px;">
- <button mat-button mat-raised-button color="primary"
(click)="showAddInput()">Add Category</button>
+ <button mat-button mat-raised-button color="accent"
(click)="showAddInput()">Add Category</button>
</div>
</div>
<mat-divider></mat-divider>
@@ -143,4 +143,4 @@
Close
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
index 556182d..f8800bc 100644
---
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
+++
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
@@ -20,7 +20,8 @@
<div class="sp-dialog-content p-15">
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column"
*ngIf="operationInProgress">
<div fxLayoutAlign="center" >
- <mat-spinner [diameter]="50"
+ <mat-spinner color="accent"
+ [diameter]="50"
fxLayoutAlign="center"
style="margin: 10px 0 5px 0" >{{action == 0 ?
"Starting..." : "Stopping"}}
</mat-spinner>
@@ -51,7 +52,7 @@
<div *ngIf="!statusDetailsVisible">Show Details</div>
<div *ngIf="statusDetailsVisible">Hide Details</div>
</button>
- <button mat-button mat-raised-button class="ml-10"
color="primary" (click)="forceStopPipeline()" *ngIf="action == 1 &&
!pipelineOperationStatus.success">
+ <button mat-button mat-raised-button class="ml-10"
color="accent" (click)="forceStopPipeline()" *ngIf="action == 1 &&
!pipelineOperationStatus.success">
<div>Force stop</div>
</button>
</div>
diff --git a/ui/src/app/pipelines/pipelines.component.html
b/ui/src/app/pipelines/pipelines.component.html
index 45bb49d..b5f48ad 100644
--- a/ui/src/app/pipelines/pipelines.component.html
+++ b/ui/src/app/pipelines/pipelines.component.html
@@ -20,7 +20,7 @@
<div fxLayout="row" class="border sp-tab-bg" style="padding:0px;">
<div fxFlex="100" class="page-container-nav">
<div fxFlex="100" fxLayout="row">
- <button mat-button mat-flat-button color="primary"
(click)="showPipelineCategoriesDialog()">Manage Categories</button>
+ <button mat-button mat-flat-button color="accent"
(click)="showPipelineCategoriesDialog()">Manage Categories</button>
<div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'">
<mat-tab-group [selectedIndex]="selectedCategoryIndex"
(selectedIndexChange)="setSelectedTab($event)" color="accent">
<mat-tab label="All pipelines"></mat-tab>
@@ -32,10 +32,10 @@
</div>
<div class="fixed-height page-container-padding-inner" fxLayout="column"
fxFlex="100">
<div fxLayout="row">
- <button class="mr-10" mat-button mat-raised-button color="primary"
(click)="startAllPipelines(true)"
+ <button class="mr-10" mat-button mat-raised-button color="accent"
(click)="startAllPipelines(true)"
[disabled]="checkCurrentSelectionStatus(false)">Start
all pipelines
</button>
- <button mat-button mat-raised-button color="primary"
(click)="startAllPipelines(false)"
+ <button mat-button mat-raised-button color="accent"
(click)="startAllPipelines(false)"
[disabled]="checkCurrentSelectionStatus(true)">Stop all
pipelines
</button>
</div>
diff --git
a/ui/src/app/profile/components/general/general-profile-settings.component.html
b/ui/src/app/profile/components/general/general-profile-settings.component.html
index dc7bdb9..63a76a3 100644
---
a/ui/src/app/profile/components/general/general-profile-settings.component.html
+++
b/ui/src/app/profile/components/general/general-profile-settings.component.html
@@ -38,7 +38,7 @@
<input [(ngModel)]="userData.fullName" matInput/>
</mat-form-field>
<div>
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
(click)="saveProfileSettings()">
Update profile
</button>
diff --git
a/ui/src/app/profile/components/token/token-management-settings.component.html
b/ui/src/app/profile/components/token/token-management-settings.component.html
index 724e2dc..63a7474 100644
---
a/ui/src/app/profile/components/token/token-management-settings.component.html
+++
b/ui/src/app/profile/components/token/token-management-settings.component.html
@@ -28,12 +28,12 @@
<div fxFill fxLayout="column">
<div fxLayout="column" class="subsection">
<div class="subsection-title">New API key</div>
- <mat-form-field fxFlex>
+ <mat-form-field fxFlex color="accent">
<mat-label>Name</mat-label>
<input [(ngModel)]="newTokenName" matInput/>
</mat-form-field>
<div>
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
(click)="requestNewKey()">
Create new API key
</button>
@@ -47,7 +47,7 @@
<div class="displayed-token">
{{newlyCreatedToken.rawToken}}
</div>
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
[cdkCopyToClipboard]="newlyCreatedToken.rawToken">
Copy
</button>
diff --git
a/ui/src/app/profile/components/token/token-management-settings.component.scss
b/ui/src/app/profile/components/token/token-management-settings.component.scss
index 4264dcf..696831b 100644
---
a/ui/src/app/profile/components/token/token-management-settings.component.scss
+++
b/ui/src/app/profile/components/token/token-management-settings.component.scss
@@ -66,10 +66,10 @@
}
.displayed-token {
- background: #f6f6f6;
- border: 1px solid #cccccc;
+ background: var(--color-bg-2);
+ border: 1px solid var(--color-bg-1);
padding: 10px;
- color: black;
+ color: var(--color-default-text);
margin-left: 10px;
margin-right: 10px;
}
diff --git a/ui/src/app/profile/profile.component.html
b/ui/src/app/profile/profile.component.html
index 329d064..dd34979 100644
--- a/ui/src/app/profile/profile.component.html
+++ b/ui/src/app/profile/profile.component.html
@@ -18,11 +18,11 @@
<div fxLayout="column" class="page-container">
- <div fxLayout="row" class="border"
style="padding:0px;background-color:#f6f6f6;">
- <div fxFlex="100" style="line-height:24px;border-bottom:1px solid
#ccc">
+ <div fxLayout="row" class="border sp-tab-bg">
+ <div fxFlex="100" class="page-container-nav">
<div fxFlex="100" fxLayout="row">
<div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'">
- <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="selectedIndexChange($event)">
+ <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="selectedIndexChange($event)" color="accent">
<mat-tab label="General Settings"></mat-tab>
<mat-tab label="API Keys"></mat-tab>
</mat-tab-group>
diff --git a/ui/src/scss/sp/buttons.scss b/ui/src/scss/sp/buttons.scss
index 7507159..ce26ed7 100644
--- a/ui/src/scss/sp/buttons.scss
+++ b/ui/src/scss/sp/buttons.scss
@@ -133,7 +133,7 @@
}
.mat-flat-button.mat-accent:hover:enabled {
- background: #d9d9d9;
+ background: var(--color-bg-2);
-webkit-transition: all 0.75s ease;
transition: all 0.75s ease;
}
diff --git a/ui/src/scss/sp/colors.scss b/ui/src/scss/sp/colors.scss
index accfc9e..852dfd0 100644
--- a/ui/src/scss/sp/colors.scss
+++ b/ui/src/scss/sp/colors.scss
@@ -53,8 +53,8 @@
.sp-blue-border {
border: 3px solid var(--content-box-color);
- padding-top:20px;
- padding-bottom:20px;
+ //padding-top:20px;
+ //padding-bottom:20px;
}
.sp-border-left-accent-light {
diff --git a/ui/src/scss/sp/feedback.ng1.scss b/ui/src/scss/sp/feedback.ng1.scss
index 26a5874..c20b9db 100644
--- a/ui/src/scss/sp/feedback.ng1.scss
+++ b/ui/src/scss/sp/feedback.ng1.scss
@@ -20,14 +20,13 @@
.feedback-container {
font-size:14pt;
- background: var(--color-bg-0);
height: 600px;
z-index: 100;
//border-left: 2px solid $sp-color-primary;
//border-bottom: 2px solid $sp-color-primary;
//border-right: 2px solid $sp-color-primary;
padding:24px;
- //color:black;
+ color: var(--color-default-text);
}
.feedback-width-100 {
@@ -45,7 +44,7 @@
.feedback-title {
font-size:20pt;
font-weight:bold;
- color: $sp-color-accent;
+ color: var(--color-accent);
text-align: center;
}
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 3b9f268..a36f7ee 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -66,11 +66,11 @@ code[class*="language-"], pre[class*="language-"] {
left: -226px;
top: 40px;
z-index: 1;
- background: white;
- border: 2px solid $sp-color-error;
+ background: var(--color-bg-dialog);
+ border: 2px solid var(--color-warn);
border-radius: 5px;
width: 300px;
- color: rgba(0,0,0,0.87);
+ color: var(--color-default-text);
padding: 5px;
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0,
0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}
diff --git a/ui/src/scss/sp/pipeline-validation.scss
b/ui/src/scss/sp/pipeline-validation.scss
index ba6865e..fae3e7b 100644
--- a/ui/src/scss/sp/pipeline-validation.scss
+++ b/ui/src/scss/sp/pipeline-validation.scss
@@ -19,7 +19,7 @@
@import '../_variables';
.pipeline-validation-summary {
- background: white;
+ background: var(--color-bg-0);
border-radius: 3px;
color: #5b5b5b;
padding: 2px 5px;
@@ -27,5 +27,5 @@
}
.pipeline-validation-summary-error {
- color: $sp-color-error;
-}
\ No newline at end of file
+ color: var(--color-warn);
+}
diff --git a/ui/src/scss/sp/sp-theme-yellow.scss
b/ui/src/scss/sp/sp-theme-yellow.scss
deleted file mode 100644
index 7323ba3..0000000
--- a/ui/src/scss/sp/sp-theme-yellow.scss
+++ /dev/null
@@ -1,194 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-@import '~@angular/material/theming';
-@import '../variables';
-
-@include mat-core();
-
-$mat-streampipes-primary: (
- 50: #ffebee,
- 100: #ffcdd2,
- 200: #72e879,
- 300: #49e750,
- 400: #49e750,
- 500: $sp-color-primary,
- 600: #06c12a,
- 700: #01a51d,
- 800: #00841b,
- 900: #005818,
- A100: #ff8a80,
- A200: #ff5252,
- A400: #ff1744,
- A700: #d50000,
- contrast: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: white,
- )
-);
-
-$mat-streampipes-accent: (
- 50: #ffebee,
- 100: #ffcdd2,
- 200: #4e3c93,
- 300: #2a0c9a,
- 400: #395481,
- 500: $sp-color-accent,
- 600: #0303a3,
- 700: #01016a,
- 800: #000039,
- 900: #00002b,
- A100: #ff8a80,
- A200: #ff5252,
- A400: #ff1744,
- A700: #d50000,
- contrast: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: white,
- )
-);
-
-$mat-streampipes-accent-dark: (
- 50: #ffebee,
- 100: #ffcdd2,
- 200: #4e3c93,
- 300: #2a0c9a,
- 400: #395481,
- 500: #83a3de,
- 600: #0303a3,
- 700: #01016a,
- 800: #000039,
- 900: #00002b,
- A100: #ff8a80,
- A200: #ff5252,
- A400: #ff1744,
- A700: #d50000,
- contrast: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: white,
- )
-);
-
-$custom-theme-primary: mat-palette($mat-streampipes-primary);
-$custom-theme-accent-dark: mat-palette($mat-streampipes-accent-dark);
-$custom-theme-accent: mat-palette($mat-streampipes-accent);
-$custom-theme-warn: mat-palette($mat-red);
-
-$custom-theme-light: mat-light-theme($custom-theme-primary,
$custom-theme-accent, $custom-theme-warn);
-$custom-theme-dark: mat-dark-theme($custom-theme-primary,
$custom-theme-accent-dark, $custom-theme-warn);
-
-$custom-typography: mat-typography-config($font-family: 'Roboto, Arial');
-
-
-@include angular-material-typography($custom-typography);
-
-$primary: map-get($custom-theme-light, primary);
-$accent-dark: map-get($custom-theme-dark, accent);
-$accent: map-get($custom-theme-light, accent);
-
-
-.dark-mode {
- @include angular-material-theme($custom-theme-dark);
-
- .base-style {
- color: rgba(255, 255, 255, 0.87);
- background: #121212;
- }
-
- .mat-toolbar.mat-primary {
- color: #121212;
- }
-
- .mat-tooltip.tooltip {
- background-color: rgba(255, 255, 255, 0.87);
- font-size: 12px;
- }
-
- --color-primary: #{mat-color($primary)};
- --color-accent: #{mat-color($accent-dark)};
- --color-bg-0: #121212;
- --color-bg-1: #282828;
- --color-bg-2: #404040;
- --color-bg-3: #424242;
- --color-shadow: #c4c4c4;
- --color-pe: #404040;
- --color-default-text: rgba(255, 255, 255, 0.87);
-
- --content-box-color: #404040;
- --canvas-color: linear-gradient(90deg, rgba(40, 40, 40, 0.5) 10%,
transparent 0%), linear-gradient(rgba(40, 40, 40, 0.5) 10%, transparent 0%);
-
-}
-
-.light-mode {
- @include angular-material-theme($custom-theme-light);
-
- .base-style {
- color: #121212;
- background: #FFFFFF;
- }
-
- --color-primary: #{mat-color($primary)};
- --color-accent: #{mat-color($accent)};
- --color-bg-0: #FFFFFF;
- --color-bg-1: #FAFAFA;
- --color-bg-2: #f1f1f1;
- --color-bg-3: rgb(204, 204, 204);
- --color-shadow: #555;
- --color-pe: #FFFFFF;
- --color-default-text: #121212;
-
- --content-box-color: rgb(156, 156, 156);
- --canvas-color: linear-gradient(90deg, rgba(208, 208, 208, 0.5) 10%,
transparent 0%), linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%);
-
-}
diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss
index 4facd31..fe1302f 100644
--- a/ui/src/scss/sp/sp-theme.scss
+++ b/ui/src/scss/sp/sp-theme.scss
@@ -161,9 +161,11 @@ $accent: map-get($custom-theme-light, accent);
--color-bg-1: #282828;
--color-bg-2: #404040;
--color-bg-3: #424242;
+ --color-bg-dialog: rgb(66, 66, 66);
--color-shadow: #c4c4c4;
--color-pe: #404040;
--color-default-text: rgba(255, 255, 255, 0.87);
+ --color-warn: #b36161;
--content-box-color: #404040;
--canvas-color: linear-gradient(90deg, rgba(40, 40, 40, 0.5) 10%,
transparent 0%), linear-gradient(rgba(40, 40, 40, 0.5) 10%, transparent 0%);
@@ -183,10 +185,12 @@ $accent: map-get($custom-theme-light, accent);
--color-bg-0: #FFFFFF;
--color-bg-1: #FAFAFA;
--color-bg-2: #f1f1f1;
- --color-bg-3: rgb(204, 204, 204);
+ --color-bg-3: rgb(224, 224, 224);
+ --color-bg-dialog: #FFFFFF;
--color-shadow: #555;
--color-pe: #FFFFFF;
--color-default-text: #121212;
+ --color-warn: #B71C1C;
--content-box-color: rgb(156, 156, 156);
--canvas-color: linear-gradient(90deg, rgba(208, 208, 208, 0.5) 10%,
transparent 0%), linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%);
