This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 1b0e3b6417 feat(#4020): Harmonize font sizes (#4027)
1b0e3b6417 is described below
commit 1b0e3b64172e2ed711198b3a32d98d53c3575f97
Author: Dominik Riemer <[email protected]>
AuthorDate: Fri Dec 5 19:50:24 2025 +0100
feat(#4020): Harmonize font sizes (#4027)
---
.../asset-browser-toolbar.component.html | 2 +-
.../basic-header-title/header-title.component.html | 16 +-
.../basic-header-title/header-title.component.scss | 10 +-
.../basic-header-title/header-title.component.ts | 13 +-
.../basic-inner-panel.component.html | 2 +-
.../split-section/split-section.component.html | 6 +-
.../split-section/split-section.component.scss | 37 ++---
.../chart-container/chart-container.component.html | 2 +-
.../chart-container/chart-container.component.scss | 5 -
.../no-data/no-data-in-date-range.component.html | 4 +-
.../no-data/no-data-in-date-range.component.scss | 7 +-
.../charts/image/image-widget.component.scss | 37 -----
.../charts/image/image-widget.component.ts | 1 -
.../charts/status/status-widget.component.scss | 6 -
.../charts/table/table-widget.component.scss | 6 +-
.../traffic-light-widget-config.component.html | 2 +-
.../traffic-light-widget-config.component.scss | 1 -
.../traffic-light-widget.component.html | 2 +-
.../traffic-light-widget.component.scss | 7 -
.../chart-designer-panel.component.scss | 15 --
.../chart-data-settings.component.html | 13 +-
.../chart-data-settings.component.scss | 18 +--
.../chart-visualisation-settings.component.html | 2 +-
.../chart-visualisation-settings.component.scss | 2 +-
.../toolbar/chart-view-toolbar.component.html | 3 +-
ui/src/app/configuration/configuration.routes.ts | 2 +-
...xtensions-service-details-dialog.component.html | 2 +-
...xtensions-service-details-dialog.component.scss | 1 -
.../file-upload/file-upload-dialog.component.html | 2 +-
.../edit-location-area.component.html | 2 +-
.../edit-location-area.component.scss | 1 -
.../email-configuration.component.html | 2 +-
.../export/data-export-import.component.html | 3 +-
.../endpoint-item/endpoint-item.component.html | 4 +-
.../extensions-service-management.component.html | 2 +-
.../app/configuration/files/files.component.html | 60 ++++----
.../app/configuration/files/files.component.scss | 4 -
.../general-configuration.component.html | 2 +-
.../general-configuration.component.scss | 2 +-
.../label-configuration.component.html | 2 +-
.../messaging-configuration.component.html | 7 +-
.../messaging-configuration.component.scss | 3 +-
.../edit-role-dialog.component.scss | 2 +-
.../edit-user-dialog.component.html | 2 +-
.../edit-user-dialog.component.scss | 1 -
.../edit-user-dialog/edit-user-dialog.component.ts | 1 +
.../security-configuration.component.html | 8 +-
.../sites-configuration.component.html | 26 ++--
.../existing-adapters.component.html | 12 +-
.../loading-indicator.component.scss | 2 +-
.../multi-step-status-indicator.component.html | 2 +-
.../multi-step-status-indicator.component.scss | 6 +-
.../pipeline-started-status.component.scss | 8 +-
.../static-mapping-nary.component.scss | 4 -
.../static-one-of-input.component.scss | 4 -
.../static-property.component.html | 12 +-
.../static-property.component.scss | 4 -
...tic-runtime-resolvable-any-input.component.scss | 21 ---
...tatic-runtime-resolvable-any-input.component.ts | 1 -
...c-runtime-resolvable-oneof-input.component.scss | 4 -
.../breadcrumb/breadcrumb.component.html | 2 +-
.../breadcrumb/breadcrumb.component.scss | 1 -
.../core/components/iconbar/iconbar.component.html | 8 +-
.../core/components/iconbar/iconbar.component.scss | 15 +-
.../core/components/toolbar/toolbar.component.html | 4 +-
.../core/components/toolbar/toolbar.component.scss | 22 ---
.../slide-view/dashboard-slide-view.component.html | 11 +-
.../slide-view/dashboard-slide-view.component.scss | 1 -
.../slide-view/dashboard-slide-view.component.ts | 8 +-
.../chart-preview/chart-preview.component.html | 4 +-
.../chart-preview/chart-preview.component.scss | 4 -
.../chart-selection/chart-selection.component.html | 6 +-
.../chart-selection/chart-selection.component.scss | 2 +-
.../property-selection.component.html | 6 +-
.../property-selection.component.scss | 21 ---
.../property-selection.component.ts | 1 -
.../pipeline-element-icon-stand-row.component.html | 3 +-
.../pipeline-element-icon-stand-row.component.scss | 4 -
.../pipeline-element-icon-stand.component.html | 11 +-
.../pipeline-element-icon-stand.component.scss | 4 +-
.../pipeline-element-options.component.html | 12 +-
.../pipeline-element-preview.component.html | 4 +-
.../pipeline-element-preview.component.scss | 4 -
...ipeline-element-statistics-badge.component.html | 2 +-
...ipeline-element-statistics-badge.component.scss | 1 -
.../components/pipeline/pipeline.component.html | 2 +-
.../components/pipeline/pipeline.component.scss | 4 +-
ui/src/app/home/components/status.component.html | 14 +-
ui/src/app/home/components/status.component.scss | 7 -
ui/src/app/home/home.component.html | 11 +-
ui/src/app/home/home.component.scss | 13 --
ui/src/app/home/home.module.ts | 2 +
.../pipeline-overview.component.html | 4 +-
.../pipeline-notifications.component.html | 5 +-
.../pipeline-notifications.component.scss | 8 +-
.../pipeline-status-dialog.component.scss | 8 +-
ui/src/scss/main.scss | 1 +
ui/src/scss/sp/_typography.scss | 171 +++++++++++++++++++++
ui/src/scss/sp/_variables.scss | 13 +-
ui/src/scss/sp/buttons-mat3.scss | 10 +-
ui/src/scss/sp/main.scss | 73 +--------
101 files changed, 430 insertions(+), 517 deletions(-)
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html
index e275d98b48..b61e30d33e 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html
@@ -33,7 +33,7 @@
>filter_alt</mat-icon
>
@if (filterActive) {
- <span>{{
+ <span class="text-md">{{
selectedAssetCount + ' of ' + allAssetCount + ' ' +
'assets'
}}</span>
} @else {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html
index 8d858ab132..00a260e60b 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.html
@@ -16,9 +16,21 @@
~
-->
-<div class="header-title title-left-border" [ngStyle]="{ margin: margin }">
+<div
+ class="header-title title-left-border"
+ [class.text-2xl]="!compact"
+ [class.text-md]="compact"
+ [class.compact]="compact"
+ [ngStyle]="{ margin: margin }"
+>
{{ title }}
@if (description) {
- <div class="header-description">{{ description }}</div>
+ <div
+ class="header-description"
+ [class.text-md]="!compact"
+ [class.text-sm]="compact"
+ >
+ {{ description }}
+ </div>
}
</div>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
index 50f3c6a8e3..7791137b03 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss
@@ -17,7 +17,7 @@
*/
.header-title {
- font-size: 1.5rem;
+ font-family: var(--font-emphasized), sans-serif;
font-weight: 700;
display: inline-block;
padding-left: 12px; /* space so text doesn't overlap border */
@@ -30,9 +30,13 @@
1;
}
+.compact {
+ padding-left: 0;
+ border-left: 0 solid transparent;
+}
+
.header-description {
- font-size: clamp(0.875rem, 1.2vw, 0.95rem);
- line-height: 1.35;
+ font-family: var(--font-emphasized), sans-serif;
color: var(--fg-muted);
font-weight: 300;
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
index 9934cf101a..009b04b6d9 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.ts
@@ -32,7 +32,16 @@ export class SpBasicHeaderTitleComponent implements OnInit {
description: string;
@Input()
- margin = '20px 0px';
+ compact = false;
- ngOnInit(): void {}
+ @Input()
+ margin: string = undefined;
+
+ ngOnInit(): void {
+ if (!this.margin && !this.compact) {
+ this.margin = '20px 0px';
+ } else if (!this.margin && this.compact) {
+ this.margin = '10px 0px';
+ }
+ }
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
index 75a59f2e76..6647e8d501 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
@@ -34,7 +34,7 @@
<div fxLayout="fill" fxFlex="100">
<div fxLayoutAlign="start center" fxLayout="row">
@if (showTitle) {
- <div class="content-box-title">
+ <div class="content-box-title text-lg">
{{ panelTitle }}
</div>
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
index 17352af9ee..aa4871c6d1 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.html
@@ -16,20 +16,20 @@
~
-->
-<section class="section" [class.compact]="compact">
+<section [class.compact]="compact">
<header class="section-header">
@if (eyebrow) {
<div class="eyebrow">{{ eyebrow }}</div>
}
- <h2 class="title">{{ title }}</h2>
+ <h2 class="title text-xl">{{ title }}</h2>
<div class="header-actions">
<ng-content select="[section-actions]"></ng-content>
</div>
@if (subtitle) {
- <p class="description">
+ <p class="description text-md">
{{ subtitle }}
</p>
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
index 79a351b11f..769c369d0b 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss
@@ -23,30 +23,20 @@
--divider: color-mix(in oklab, currentColor 18%, transparent);
}
-.section {
- position: relative;
- padding: 0.75rem 0 1rem 0.875rem;
-}
-
-.section::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0.75rem;
- bottom: 1rem;
- width: 2px;
- background: var(--color-primary);
- border-radius: 2px;
- opacity: 0.35;
-}
-
.section-header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: 0.75rem;
- row-gap: 0.25rem;
align-items: start;
+ padding-left: 12px;
+ border-left: 4px solid transparent;
+ border-image: linear-gradient(
+ to bottom,
+ var(--color-primary),
+ var(--color-primary-dark)
+ )
+ 1;
}
.eyebrow {
@@ -60,9 +50,6 @@
.title {
margin: 0;
- font-weight: 600;
- line-height: 1.2;
- font-size: clamp(1rem, 1.8vw, 1.25rem);
letter-spacing: -0.01em;
}
@@ -72,21 +59,21 @@
display: flex;
gap: 0.5rem;
align-items: center;
+ align-self: center;
}
.description {
grid-column: 1 / 2;
grid-row: 2 / 3;
margin: 0;
- font-size: clamp(0.875rem, 1.2vw, 0.95rem);
- line-height: 1.35;
color: var(--fg-muted);
font-weight: 300;
}
.section-body {
- margin-top: 0.75rem;
- margin-left: 20px;
+ margin-top: 1.5rem;
+ margin-bottom: 2.25em;
+ margin-left: 16px;
display: block;
}
diff --git
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
index bddbd7de47..5c07656efd 100644
---
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
+++
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
@@ -34,7 +34,7 @@
fxFlex
fxLayout="row"
fxLayoutAlign="start center"
- class="widget-header-text"
+ class="text-md font-bold"
>
{{ configuredWidget.baseAppearanceConfig.widgetTitle }}
</div>
diff --git
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss
index edbf29c51d..429546c68f 100644
---
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss
+++
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss
@@ -50,11 +50,6 @@
flex: 0 1 auto;
}
-.widget-header-text {
- font-size: var(--mat-sys-body-large-size);
- font-weight: bold;
-}
-
.widget-header {
padding-left: 15px;
}
diff --git
a/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.html
b/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.html
index 24d96a8b9d..ca6ab876d6 100644
---
a/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.html
+++
b/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.html
@@ -26,10 +26,10 @@
<i class="material-icons warning-icon">warning</i>
</div>
<div fxLayout="column" fxLayoutAlign="center center">
- <div class="default-text">
+ <div class="default-text text-xl">
{{ 'Found no data in selected time range' | translate }}
</div>
- <div class="default-text date-range-text">
+ <div class="default-text text-md">
{{ viewDateRange.startTime | date: 'MM/dd/yyyy HH:mm' }} -
{{ viewDateRange.endTime | date: 'MM/dd/yyyy HH:mm' }}
</div>
diff --git
a/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.scss
b/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.scss
index 4fd6dc57a1..443fe4bd41 100644
---
a/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.scss
+++
b/ui/src/app/chart-shared/components/charts/base/no-data/no-data-in-date-range.component.scss
@@ -18,15 +18,10 @@
.default-text {
padding: 10px;
- font-size: 16pt;
text-align: center;
}
.warning-icon {
color: var(--color-warn);
- font-size: 24pt;
-}
-
-.date-range-text {
- font-size: 12pt;
+ font-size: var(--font-size-3xl);
}
diff --git
a/ui/src/app/chart-shared/components/charts/image/image-widget.component.scss
b/ui/src/app/chart-shared/components/charts/image/image-widget.component.scss
deleted file mode 100644
index fba6c4900c..0000000000
---
a/ui/src/app/chart-shared/components/charts/image/image-widget.component.scss
+++ /dev/null
@@ -1,37 +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.
- *
- */
-
-.numberItem {
- font-size: 60px;
- font-weight: bold;
-}
-
-.title-panel {
- font-size: 20px;
-}
-
-.assemblyOptionsDataExplorer {
- color: white;
- padding: 5px;
-}
-
-.assemblyOptionsDataExplorer {
- background: #f6f6f6;
- border-bottom: 1px solid #ccc;
- padding: 5px;
-}
diff --git
a/ui/src/app/chart-shared/components/charts/image/image-widget.component.ts
b/ui/src/app/chart-shared/components/charts/image/image-widget.component.ts
index 6c2508e7c6..9d1681ce2e 100644
--- a/ui/src/app/chart-shared/components/charts/image/image-widget.component.ts
+++ b/ui/src/app/chart-shared/components/charts/image/image-widget.component.ts
@@ -30,7 +30,6 @@ import { SecurePipe } from '../../../../services/secure.pipe';
@Component({
selector: 'sp-data-explorer-image-widget',
templateUrl: './image-widget.component.html',
- styleUrls: ['./image-widget.component.scss'],
standalone: false,
})
export class ImageWidgetComponent
diff --git
a/ui/src/app/chart-shared/components/charts/status/status-widget.component.scss
b/ui/src/app/chart-shared/components/charts/status/status-widget.component.scss
index c18549cdc5..86868cdd85 100644
---
a/ui/src/app/chart-shared/components/charts/status/status-widget.component.scss
+++
b/ui/src/app/chart-shared/components/charts/status/status-widget.component.scss
@@ -63,9 +63,3 @@
background: repeating-linear-gradient(#0d0, #0c0 5px);
box-shadow: 0 0 40px #0d0;
}
-
-.title-panel {
- font-size: 20px;
- height: 30px;
- margin: 10px 0;
-}
diff --git
a/ui/src/app/chart-shared/components/charts/table/table-widget.component.scss
b/ui/src/app/chart-shared/components/charts/table/table-widget.component.scss
index 269fe12962..a94e38aa13 100644
---
a/ui/src/app/chart-shared/components/charts/table/table-widget.component.scss
+++
b/ui/src/app/chart-shared/components/charts/table/table-widget.component.scss
@@ -27,12 +27,8 @@
color: inherit;
}
-.title-panel {
- font-size: 20px;
-}
-
.column-header {
- font-size: 12px;
+ font-size: var(--text-sm);
font-weight: bold;
}
diff --git
a/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.html
b/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.html
index 244bdb8052..3690f997ed 100644
---
a/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.html
+++
b/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.html
@@ -102,7 +102,7 @@
(keydown)="restrictInput($event)"
/>
@if (warningRangeInterval) {
- <div class="warning-range-info">
+ <div class="warning-range-info text-sm">
<small>{{ warningRangeInterval }}</small>
</div>
}
diff --git
a/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.scss
b/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.scss
index 159b9f5901..101efb8ac9 100644
---
a/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.scss
+++
b/ui/src/app/chart-shared/components/charts/traffic-light/config/traffic-light-widget-config.component.scss
@@ -16,7 +16,6 @@
*/
.warning-range-info {
- font-size: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git
a/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.html
b/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.html
index d18e569eab..a77361e1c6 100644
---
a/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.html
+++
b/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.html
@@ -55,7 +55,7 @@
</div>
<div class="light-value-container">
@if (selectedToShowValue) {
- <div class="light-value">
+ <div class="light-value text-md">
{{ displayed_value }}
</div>
}
diff --git
a/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.scss
b/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.scss
index 918f615ee5..160ee935a7 100644
---
a/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.scss
+++
b/ui/src/app/chart-shared/components/charts/traffic-light/traffic-light-widget.component.scss
@@ -77,12 +77,6 @@
box-shadow: 0 0 40px #0d0;
}
-.title-panel {
- font-size: 20px;
- height: 30px;
- margin: 10px 0;
-}
-
.light-value-container {
background-color: #222;
border-radius: 10px;
@@ -92,7 +86,6 @@
.light-value {
color: #fff;
font-weight: bold;
- font-size: 16px;
text-align: center;
background-color: #222;
padding: 10px;
diff --git
a/ui/src/app/chart/components/chart-view/designer-panel/chart-designer-panel.component.scss
b/ui/src/app/chart/components/chart-view/designer-panel/chart-designer-panel.component.scss
index 4869604b4a..8265260b0d 100644
---
a/ui/src/app/chart/components/chart-view/designer-panel/chart-designer-panel.component.scss
+++
b/ui/src/app/chart/components/chart-view/designer-panel/chart-designer-panel.component.scss
@@ -24,21 +24,6 @@
margin-left: 5px;
}
-.designer-panel-config {
- padding: 0;
-}
-
-.designer-panel-title {
- margin-left: 20px;
- font-size: 12pt;
- font-weight: bold;
- height: 40px;
-}
-
-.designer-panel-header {
- border-bottom: 1px solid var(--color-tab-border);
-}
-
.scroll-tab-content {
overflow-y: auto;
height: calc(100%);
diff --git
a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.html
b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.html
index 6babd4b6a5..9348370739 100644
---
a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.html
+++
b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.html
@@ -33,7 +33,7 @@
<span
fxFlex
fxLayoutAlign="start center"
- class="measure-name"
+ class="text-sm"
>
{{
sourceConfig?.measureName ||
@@ -90,22 +90,19 @@
fxFlex
fxLayout="row"
fxLayoutAlign="end end"
+ fxLayoutGap="0.5rem"
class="mt-10"
>
<button
- mat-button
mat-flat-button
- color="accent"
- class="small-button"
+ class="mat-basic small-button"
(click)="navigateToConnect()"
>
{{ 'Connect Adapter' | translate }}
</button>
<button
- mat-button
mat-flat-button
- color="accent"
- class="small-button"
+ class="mat-basic small-button"
(click)="navigateToPipelines()"
>
{{ 'Start Pipeline' | translate }}
@@ -137,7 +134,7 @@
<mat-option
[value]="measurement.measureName"
>
- <span class="pipeline-name">{{
+ <span class="font-medium
text-sm">{{
measurement.measureName
}}</span>
</mat-option>
diff --git
a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.scss
b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.scss
index 54fbfbdb99..c9ef728b4d 100644
---
a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.scss
+++
b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/chart-data-settings.component.scss
@@ -16,16 +16,6 @@
*
*/
-.pipeline-name {
- font-weight: bold;
- font-size: 9pt;
-}
-
-.measure-name {
- font-weight: normal;
- font-size: 9pt;
-}
-
.selection-radio-group {
vertical-align: top;
display: flex;
@@ -64,9 +54,9 @@
}
.description {
- margin: 0 0 10px 44px;
+ margin: 0 0 10px 36px;
color: #6c757d;
- font-size: 0.75rem;
+ font-size: var(--font-size-xs);
line-height: 1.2;
}
@@ -82,12 +72,12 @@
align-items: center;
gap: 8px;
box-sizing: border-box;
- font-size: 10pt;
+ font-size: var(--font-size-sm);
}
.warning-icon {
color: #dea843;
- font-size: 18px;
+ font-size: var(--font-size-sm);
}
.mat-accordion .mat-expansion-panel-header.expansion-panel-header {
diff --git
a/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.html
b/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.html
index ba44e1bb69..5be9d62784 100644
---
a/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.html
+++
b/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.html
@@ -38,7 +38,7 @@
[attr.data-cy]="'select-widget-' + widget.id"
>
<mat-icon>{{ widget.icon }}</mat-icon>
- <span class="pipeline-name">{{
+ <span class="font-emphasized text-md">{{
widget.label
}}</span>
<span class="widget-description">{{
diff --git
a/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.scss
b/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.scss
index 7187ec52aa..a4b7d1671c 100644
---
a/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.scss
+++
b/ui/src/app/chart/components/chart-view/designer-panel/visualisation-settings/chart-visualisation-settings.component.scss
@@ -18,6 +18,6 @@
.widget-description {
display: block;
- font-size: 12px;
+ font-size: var(--font-size-xs);
color: var(--color-secondary-text);
}
diff --git
a/ui/src/app/chart/components/chart-view/toolbar/chart-view-toolbar.component.html
b/ui/src/app/chart/components/chart-view/toolbar/chart-view-toolbar.component.html
index 751a8e4508..c7d1eefbff 100644
---
a/ui/src/app/chart/components/chart-view/toolbar/chart-view-toolbar.component.html
+++
b/ui/src/app/chart/components/chart-view/toolbar/chart-view-toolbar.component.html
@@ -35,7 +35,7 @@
fxFlex="100"
fxLayout="row"
fxLayoutAlign="start center"
- class="mt-5 form-field-small widget-title-container"
+ class="form-field-small widget-title-container"
>
<span class="widget-title-text">{{
'Chart Name' | translate
@@ -44,6 +44,7 @@
appearance="outline"
color="accent"
fxFlex="100"
+ subscriptSizing="dynamic"
>
<input
data-cy="appearance-config-widget-title"
diff --git a/ui/src/app/configuration/configuration.routes.ts
b/ui/src/app/configuration/configuration.routes.ts
index 83500ea14d..5133ab0001 100644
--- a/ui/src/app/configuration/configuration.routes.ts
+++ b/ui/src/app/configuration/configuration.routes.ts
@@ -19,5 +19,5 @@
import { SpBreadcrumbItem } from '@streampipes/shared-ui';
export class SpConfigurationRoutes {
- static BASE: SpBreadcrumbItem = { label: 'Configuration' };
+ static BASE: SpBreadcrumbItem = { label: 'Settings' };
}
diff --git
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
index dd57482cca..e079412736 100644
---
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
+++
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
@@ -40,7 +40,7 @@
<div fxFlex="80">
<div>
@for (tag of serviceReg.tags; track tag) {
- <div class="service-tag">
+ <div class="service-tag text-sm">
<span class="service-tag-prefix">{{
tag.prefix.toLowerCase()
}}</span>
diff --git
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
index 70a4047621..0fed18c7fa 100644
---
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
+++
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
@@ -21,7 +21,6 @@
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
- font-size: small;
border: 1px solid var(--color-bg-3);
display: inline-block;
padding-top: 5px;
diff --git
a/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
b/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
index 6adcd4bac3..3e180822b3 100644
---
a/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
+++
b/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
@@ -19,7 +19,7 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15" fxLayout="column">
@if (uploadError) {
- <sp-warning-box style="font-size: smaller">
+ <sp-warning-box class="text-sm">
{{ uploadErrorMessage }}
</sp-warning-box>
}
diff --git
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
index 7d478c2df7..66c8a3e2ea 100644
---
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
+++
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
@@ -42,7 +42,7 @@
}
@if (site.areas.length === 0) {
<div fxLayoutAlign="start center">
- <div class="no-areas-defined">
+ <div class="no-areas-defined text-sm">
{{ 'No areas defined yet.' | translate }}
</div>
</div>
diff --git
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
index 8edf5ad359..1483f22ce2 100644
---
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
+++
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
@@ -19,7 +19,6 @@
.no-areas-defined {
margin-top: 5px;
margin-bottom: 5px;
- font-size: smaller;
}
.area {
diff --git
a/ui/src/app/configuration/email-configuration/email-configuration.component.html
b/ui/src/app/configuration/email-configuration/email-configuration.component.html
index 3498e8a64d..9255bb8b4e 100644
---
a/ui/src/app/configuration/email-configuration/email-configuration.component.html
+++
b/ui/src/app/configuration/email-configuration/email-configuration.component.html
@@ -17,7 +17,7 @@
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'email'">
- <div fxLayout="column" class="page-container-padding">
+ <div fxLayout="column" class="page-container-padding-inner">
@if (formReady) {
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
diff --git a/ui/src/app/configuration/export/data-export-import.component.html
b/ui/src/app/configuration/export/data-export-import.component.html
index 499daa8e64..40e30aef9e 100644
--- a/ui/src/app/configuration/export/data-export-import.component.html
+++ b/ui/src/app/configuration/export/data-export-import.component.html
@@ -17,7 +17,7 @@
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'export'">
- <div fxLayout="column" class="page-container-padding">
+ <div fxLayout="column" class="page-container-padding-inner">
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Export' | translate"
@@ -54,7 +54,6 @@
</div>
</sp-split-section>
</div>
- <mat-divider></mat-divider>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Import' | translate"
diff --git
a/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
index b14a592e2c..5e9f8c8eac 100644
---
a/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
+++
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
@@ -156,9 +156,9 @@
<div fxLayout="column">
<div fxFlex fxLayout="column">
<h3>
- <b>{{ item.name }}</b>
+ {{ item.name }}
</h3>
- <p>{{ item.description }}</p>
+ <span class="text-md">{{ item.description }}</span>
</div>
</div>
</div>
diff --git
a/ui/src/app/configuration/extensions-service-management/extensions-service-management.component.html
b/ui/src/app/configuration/extensions-service-management/extensions-service-management.component.html
index 86039fc9e9..a331558fc9 100644
---
a/ui/src/app/configuration/extensions-service-management/extensions-service-management.component.html
+++
b/ui/src/app/configuration/extensions-service-management/extensions-service-management.component.html
@@ -20,7 +20,7 @@
[spNavigationItems]="tabs"
[activeLink]="'extensions-services'"
>
- <div fxLayout="row" class="page-container-padding">
+ <div fxLayout="row" class="page-container-padding-inner">
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Registered services' | translate"
diff --git a/ui/src/app/configuration/files/files.component.html
b/ui/src/app/configuration/files/files.component.html
index 2cdd9b2a8a..623a1765f8 100644
--- a/ui/src/app/configuration/files/files.component.html
+++ b/ui/src/app/configuration/files/files.component.html
@@ -17,36 +17,38 @@
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'files'">
- <sp-split-section
- [title]="'Files' | translate"
- [subtitle]="
- 'Upload and manage files that are used by adapters or pipeline
elements.'
- | translate
- "
- >
- <div
- fxLayout="row"
- fxLayoutAlign="start start"
- fxLayoutGap="10px"
- section-actions
+ <div class="page-container-padding-inner">
+ <sp-split-section
+ [title]="'Files' | translate"
+ [subtitle]="
+ 'Upload and manage files that are used by adapters or pipeline
elements.'
+ | translate
+ "
>
- <button
- mat-flat-button
- color="accent"
- (click)="openFileUploadDialog()"
- data-cy="sp-open-file-upload-dialog"
- class="mr-10"
+ <div
+ fxLayout="row"
+ fxLayoutAlign="start start"
+ fxLayoutGap="10px"
+ section-actions
>
- <i class="material-icons">cloud_upload</i>
- {{ 'Upload new file' | translate }}
- </button>
- </div>
+ <button
+ mat-flat-button
+ color="accent"
+ (click)="openFileUploadDialog()"
+ data-cy="sp-open-file-upload-dialog"
+ class="mr-10"
+ >
+ <i class="material-icons">cloud_upload</i>
+ {{ 'Upload new file' | translate }}
+ </button>
+ </div>
- <div fxFlex="100" fxLayout="column">
- <sp-file-overview
- fxFlex="100"
- #fileOverviewComponent
- ></sp-file-overview>
- </div>
- </sp-split-section>
+ <div fxFlex="100" fxLayout="column">
+ <sp-file-overview
+ fxFlex="100"
+ #fileOverviewComponent
+ ></sp-file-overview>
+ </div>
+ </sp-split-section>
+ </div>
</sp-basic-nav-tabs>
diff --git a/ui/src/app/configuration/files/files.component.scss
b/ui/src/app/configuration/files/files.component.scss
index ba9f01dd22..a5e1b82c8b 100644
--- a/ui/src/app/configuration/files/files.component.scss
+++ b/ui/src/app/configuration/files/files.component.scss
@@ -22,10 +22,6 @@
padding-bottom: 10px;
}
-.page-container-padding-inner {
- margin: 20px;
-}
-
.add-options-item {
display: inline;
margin-right: 10px;
diff --git
a/ui/src/app/configuration/general-configuration/general-configuration.component.html
b/ui/src/app/configuration/general-configuration/general-configuration.component.html
index 4256320eb9..b5c60d3e24 100644
---
a/ui/src/app/configuration/general-configuration/general-configuration.component.html
+++
b/ui/src/app/configuration/general-configuration/general-configuration.component.html
@@ -16,7 +16,7 @@
~
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'general'">
- <div fxLayout="column" class="page-container-padding">
+ <div fxLayout="column" class="page-container-padding-inner max-w-50">
@if (formReady) {
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<form
diff --git
a/ui/src/app/configuration/general-configuration/general-configuration.component.scss
b/ui/src/app/configuration/general-configuration/general-configuration.component.scss
index b0dea608f3..8283390e12 100644
---
a/ui/src/app/configuration/general-configuration/general-configuration.component.scss
+++
b/ui/src/app/configuration/general-configuration/general-configuration.component.scss
@@ -25,5 +25,5 @@
background: var(--mat-sys-error-container);
color: var(--mat-sys-on-error-container);
padding: 5px;
- font-size: 10pt;
+ font-size: var(--font-size-sm);
}
diff --git
a/ui/src/app/configuration/label-configuration/label-configuration.component.html
b/ui/src/app/configuration/label-configuration/label-configuration.component.html
index 6c58a0c56a..7123e9aae5 100644
---
a/ui/src/app/configuration/label-configuration/label-configuration.component.html
+++
b/ui/src/app/configuration/label-configuration/label-configuration.component.html
@@ -17,7 +17,7 @@
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'labels'">
- <div fxLayout="column" class="page-container-padding">
+ <div fxLayout="column" class="page-container-padding-inner">
<sp-split-section
[title]="'Labels' | translate"
[subtitle]="
diff --git
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
index 4bd35c1c2f..b67b5a1728 100644
---
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
+++
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
@@ -17,7 +17,7 @@
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'messaging'">
- <div fxLayout="column" class="page-container-padding">
+ <div fxLayout="column" class="page-container-padding-inner">
<sp-split-section
[title]="'Kafka Settings' | translate"
[subtitle]="
@@ -83,7 +83,6 @@
}
</div>
</sp-split-section>
- <mat-divider></mat-divider>
<sp-split-section
[title]="'Protocols' | translate"
@@ -93,7 +92,7 @@
@if (loadingCompleted) {
<div
cdkDropList
- class="data-format-list"
+ class="data-format-list text-sm"
(cdkDropListDropped)="dropProtocol($event)"
>
@for (
@@ -120,7 +119,7 @@
</div>
</div>
</sp-split-section>
- <mat-divider></mat-divider>
+
@if (loadingCompleted) {
<sp-split-section
[title]="'Broker Configuration' | translate"
diff --git
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
index a06c58b6bc..0537bbaa7e 100644
---
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
+++
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
@@ -36,7 +36,7 @@
}
.data-format-box {
- padding: 20px 10px;
+ padding: 1rem 0.5rem;
border-bottom: solid 1px var(--color-bg-3);
color: var(--color-default-text);
display: flex;
@@ -46,7 +46,6 @@
box-sizing: border-box;
cursor: move;
background: var(--color-bg-dialog);
- font-size: 14px;
}
.cdk-drag-preview {
diff --git
a/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
b/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
index ebb3e55286..df7edb4bd3 100644
---
a/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
+++
b/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
@@ -22,7 +22,7 @@
}
.list-section {
- font-size: 10pt;
+ font-size: var(--font-size-xs);
border: 1px solid var(--color-bg-2);
}
diff --git
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
index 778cc555d7..3ffd55cc6e 100644
---
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
+++
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
@@ -65,7 +65,7 @@
</mat-form-field>
}
@if (emailChanged) {
- <div class="email-changed">
+ <div class="email-changed text-sm">
{{
"Changing the current user's email will
require a re-login."
| translate
diff --git
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
index d9bff1285f..50e11791da 100644
---
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
+++
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
@@ -26,6 +26,5 @@
.email-changed {
color: var(--color-warn);
- font-size: small;
margin-bottom: 10px;
}
diff --git
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
index d000dfeaa2..13a00a2909 100644
---
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
+++
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
@@ -269,6 +269,7 @@ export class EditUserDialogComponent implements OnInit {
private handleFormChanges(): void {
this.parentForm.valueChanges.subscribe(v => {
+ this.emailChanged = v.username !== this.clonedUser.username;
if (this.clonedUser instanceof UserAccount && !this.editMode) {
if (this.sendPasswordToUser !== v.sendPasswordToUser) {
this.sendPasswordToUser = v.sendPasswordToUser;
diff --git
a/ui/src/app/configuration/security-configuration/security-configuration.component.html
b/ui/src/app/configuration/security-configuration/security-configuration.component.html
index 39cd523077..1896aff5a0 100644
---
a/ui/src/app/configuration/security-configuration/security-configuration.component.html
+++
b/ui/src/app/configuration/security-configuration/security-configuration.component.html
@@ -17,7 +17,7 @@
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'security'">
- <div fxLayout="column" class="page-container-padding">
+ <div fxLayout="column" class="page-container-padding-inner">
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'User Accounts' | translate"
@@ -35,7 +35,7 @@
<sp-security-user-config></sp-security-user-config>
</sp-split-section>
</div>
- <mat-divider></mat-divider>
+
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Service Accounts' | translate"
@@ -54,7 +54,7 @@
<sp-security-service-config></sp-security-service-config>
</sp-split-section>
</div>
- <mat-divider></mat-divider>
+
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Groups' | translate"
@@ -92,7 +92,7 @@
<sp-security-role-config></sp-security-role-config>
</sp-split-section>
</div>
- <mat-divider></mat-divider>
+
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
<sp-split-section
[title]="'Authentication' | translate"
diff --git
a/ui/src/app/configuration/sites-configuration/sites-configuration.component.html
b/ui/src/app/configuration/sites-configuration/sites-configuration.component.html
index 379fc99a5e..bcaff4a39e 100644
---
a/ui/src/app/configuration/sites-configuration/sites-configuration.component.html
+++
b/ui/src/app/configuration/sites-configuration/sites-configuration.component.html
@@ -17,16 +17,18 @@
-->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'sites'">
- @if (locationConfig) {
- <div fxLayout="column">
- @if (isAdminUser) {
- <sp-location-features-configuration
- [locationConfig]="locationConfig"
- >
- </sp-location-features-configuration>
- }
- <sp-site-area-configuration [locationConfig]="locationConfig">
- </sp-site-area-configuration>
- </div>
- }
+ <div class="page-container-padding-inner">
+ @if (locationConfig) {
+ <div fxLayout="column">
+ @if (isAdminUser) {
+ <sp-location-features-configuration
+ [locationConfig]="locationConfig"
+ >
+ </sp-location-features-configuration>
+ }
+ <sp-site-area-configuration [locationConfig]="locationConfig">
+ </sp-site-area-configuration>
+ </div>
+ }
+ </div>
</sp-basic-nav-tabs>
diff --git
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
index e3e8f13933..5a72e94297 100644
---
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -175,7 +175,9 @@
fxLayoutAlign="start start"
class="truncate"
>
- <b data-cy="adapter-name">{{ adapter.name }}</b>
+ <span data-cy="adapter-name">{{
+ adapter.name
+ }}</span>
<small> {{ adapter.description }}</small>
</div>
</td>
@@ -204,9 +206,9 @@
{{ 'Created' | translate }}
</th>
<td mat-cell *matCellDef="let adapter">
- <h5>
+ <span>
{{ adapter.createdAt | date: 'dd.MM.yyyy HH:mm' }}
- </h5>
+ </span>
</td>
</ng-container>
@@ -234,7 +236,7 @@
{{ 'Last message' | translate }}
</th>
<td mat-cell *matCellDef="let adapter">
- <h5>
+ <span>
{{
adapterMetrics[adapter.elementId] &&
adapterMetrics[adapter.elementId]
@@ -244,7 +246,7 @@
| date: 'dd.MM.yyyy HH:mm')
: 'n/a'
}}
- </h5>
+ </span>
</td>
</ng-container>
diff --git
a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
index ab46954fee..59443f668b 100644
--- a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
+++ b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.scss
@@ -17,6 +17,6 @@
*/
.message-text {
- font-size: 12pt;
+ font-size: var(--font-size-md);
margin-top: 10px;
}
diff --git
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
index 3a3f99fb60..40852f0157 100644
---
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
+++
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.html
@@ -43,7 +43,7 @@
<i class="material-icons status-icon">error</i>
</div>
}
- <div fxFlex class="message-text" fxLayoutAlign="start center">
+ <div fxFlex class="text-md" fxLayoutAlign="start center">
{{ step.message }}
</div>
</div>
diff --git
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.scss
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.scss
index 3e4f709c97..3988c1bfd9 100644
---
a/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.scss
+++
b/ui/src/app/core-ui/multi-step-status-indicator/multi-step-status-indicator.component.scss
@@ -17,10 +17,6 @@
*/
.status-icon {
- font-size: 22pt;
+ font-size: var(--font-size-3xl);
color: var(--color-primay);
}
-
-.message-text {
- font-size: 12pt;
-}
diff --git
a/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.scss
b/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.scss
index 4369324432..fe2168bf09 100644
---
a/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.scss
+++
b/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.scss
@@ -18,7 +18,13 @@
.success-message {
text-align: center;
- font-size: 14pt;
+ font-size: var(--font-size-lg);
margin-top: 20px;
margin-bottom: 20px;
+
+ .mat-icon {
+ font-size: var(--font-size-xl);
+ width: var(--font-size-xl);
+ height: var(--font-size-xl);
+ }
}
diff --git
a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.scss
b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.scss
index 5b67ddc3b7..d32a7969f3 100644
---
a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.scss
+++
b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.scss
@@ -23,7 +23,3 @@ p {
form {
float: left;
}
-
-.description {
- font-size: 10px;
-}
diff --git
a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.scss
b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.scss
index f4aa17ff9f..7ba7dc33ce 100644
---
a/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.scss
+++
b/ui/src/app/core-ui/static-properties/static-one-of-input/static-one-of-input.component.scss
@@ -31,10 +31,6 @@
background-color: rgb(27, 20, 100);
}
-.description {
- font-size: 10px;
-}
-
.radio-group {
display: flex;
flex-direction: column;
diff --git
a/ui/src/app/core-ui/static-properties/static-property.component.html
b/ui/src/app/core-ui/static-properties/static-property.component.html
index c5cc7f639e..9439f07044 100644
--- a/ui/src/app/core-ui/static-properties/static-property.component.html
+++ b/ui/src/app/core-ui/static-properties/static-property.component.html
@@ -19,12 +19,12 @@
<div fxFlex="100" fxLayout="column" class="small-form-field-density">
<div fxFlex="100" fxLayout="column" class="static-property-panel">
@if (showLabel) {
- <div fxFlex="100" fxLayout="column" style="margin-bottom: 10px">
- <b>{{ staticProperty.label }}</b>
- <mat-hint class="description">{{
- staticProperty.description
- }}</mat-hint>
- </div>
+ <sp-basic-header-title-component
+ [compact]="true"
+ [title]="staticProperty.label"
+ [description]="staticProperty.description"
+ >
+ </sp-basic-header-title-component>
}
<div fxFlex="100">
@if (isCodeInputStaticProperty(staticProperty)) {
diff --git
a/ui/src/app/core-ui/static-properties/static-property.component.scss
b/ui/src/app/core-ui/static-properties/static-property.component.scss
index 48f97326b3..bf15b61ffb 100644
--- a/ui/src/app/core-ui/static-properties/static-property.component.scss
+++ b/ui/src/app/core-ui/static-properties/static-property.component.scss
@@ -25,7 +25,3 @@
margin-bottom: 10px;
margin-top: 10px;
}
-
-.description {
- font-size: 10px;
-}
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.scss
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.scss
deleted file mode 100644
index 440a058e0b..0000000000
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.scss
+++ /dev/null
@@ -1,21 +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.
- *
- */
-
-.description {
- font-size: 10px;
-}
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
index 136a3b5a97..bda4292452 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.ts
@@ -29,7 +29,6 @@ import { MatSelectChange } from '@angular/material/select';
@Component({
selector: 'sp-app-static-runtime-resolvable-any-input',
templateUrl: './static-runtime-resolvable-any-input.component.html',
- styleUrls: ['./static-runtime-resolvable-any-input.component.scss'],
standalone: false,
})
export class StaticRuntimeResolvableAnyInputComponent
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.scss
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.scss
index fb20a420e4..4a53e494ba 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.scss
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.scss
@@ -30,7 +30,3 @@
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: rgb(27, 20, 100);
}
-
-.description {
- font-size: 10px;
-}
diff --git a/ui/src/app/core/components/breadcrumb/breadcrumb.component.html
b/ui/src/app/core/components/breadcrumb/breadcrumb.component.html
index 93680319af..669cb25218 100644
--- a/ui/src/app/core/components/breadcrumb/breadcrumb.component.html
+++ b/ui/src/app/core/components/breadcrumb/breadcrumb.component.html
@@ -19,7 +19,7 @@
<div
fxLayout="column"
fxFlex="100"
- class="breadcrumb-outer"
+ class="breadcrumb-outer text-sm"
fxLayoutAlign="center start"
>
<div fxLayout="row" fxLayoutAlign="start center">
diff --git a/ui/src/app/core/components/breadcrumb/breadcrumb.component.scss
b/ui/src/app/core/components/breadcrumb/breadcrumb.component.scss
index ae16cff034..2c215f6bd0 100644
--- a/ui/src/app/core/components/breadcrumb/breadcrumb.component.scss
+++ b/ui/src/app/core/components/breadcrumb/breadcrumb.component.scss
@@ -19,7 +19,6 @@
.breadcrumb-outer {
max-height: 20px;
height: 20px;
- font-size: 10pt;
color: var(--color-toolbar-text);
}
diff --git a/ui/src/app/core/components/iconbar/iconbar.component.html
b/ui/src/app/core/components/iconbar/iconbar.component.html
index ce65e5a743..c3a52d9aed 100644
--- a/ui/src/app/core/components/iconbar/iconbar.component.html
+++ b/ui/src/app/core/components/iconbar/iconbar.component.html
@@ -60,7 +60,7 @@
>
<mat-icon class="item-icon">{{ item.icon }}</mat-icon>
<span
- class="item-title text-ellipsis"
+ class="item-title text-ellipsis text-md"
[class.hidden]="collapsed()"
>{{ item.title }}</span
>
@@ -72,12 +72,12 @@
<!-- Grouped sections -->
<div class="groups">
@for (group of menuGroups; track group.title) {
- <section class="menu-group">
+ <section class="menu-group text-md">
<!-- Group header -->
<button
type="button"
[class.hidden]="collapsed()"
- class="menu-group-title"
+ class="menu-group-title text-sm"
(click)="toggleGroup(group)"
[attr.aria-expanded]="!group.collapsed"
[title]="collapsed() ? group.title : null"
@@ -126,7 +126,7 @@
item.icon
}}</mat-icon>
<span
- class="item-title text-ellipsis"
+ class="item-title text-md
text-ellipsis"
[class.hidden]="collapsed()"
>{{ item.title }}</span
>
diff --git a/ui/src/app/core/components/iconbar/iconbar.component.scss
b/ui/src/app/core/components/iconbar/iconbar.component.scss
index 89c3eaf4b6..c31651b35f 100644
--- a/ui/src/app/core/components/iconbar/iconbar.component.scss
+++ b/ui/src/app/core/components/iconbar/iconbar.component.scss
@@ -166,7 +166,6 @@
border: 0;
background: var(--color-menubar-bg-menu-group);
color: var(--color-menubar-text-menu-group);
- font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 8px 10px;
@@ -185,13 +184,6 @@
outline-color: var(--mb-outline-strong);
}
-.group-icon {
- font-size: 18px;
- width: 18px;
- height: 18px;
- opacity: 0.9;
-}
-
.chevron {
margin-left: auto;
transition:
@@ -257,16 +249,15 @@
}
.item-icon {
- font-size: 18px;
- width: 18px;
- height: 18px;
+ font-size: var(--font-size-xl);
+ width: var(--font-size-xl);
+ height: var(--font-size-xl);
opacity: 0.96;
margin-left: auto;
margin-right: auto;
}
.item-title {
- font-size: 0.86rem;
flex: 1 1 auto;
}
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.html
b/ui/src/app/core/components/toolbar/toolbar.component.html
index 9e5dfac4e5..54c25f9809 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.html
+++ b/ui/src/app/core/components/toolbar/toolbar.component.html
@@ -110,9 +110,7 @@
</div>
<mat-menu #menu="matMenu" id="account"
class="toolbar-menu">
<div class="current-user">
- <span class="user-email">{{
- userEmail | shorten: 30
- }}</span>
+ <span>{{ userEmail | shorten: 30 }}</span>
</div>
<mat-divider></mat-divider>
<button
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.scss
b/ui/src/app/core/components/toolbar/toolbar.component.scss
index 1b2256c490..d11249a954 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.scss
+++ b/ui/src/app/core/components/toolbar/toolbar.component.scss
@@ -59,28 +59,6 @@
width: 100%;
}
-.version-info-text {
- color: var(--color-navigation-text);
- font-size: small;
- display: block;
- margin-top: 3px;
- margin-right: 15px;
- white-space: nowrap;
-}
-
-.active-page {
- font-size: small;
- background: var(--color-navigation-bg-selected);
- color: var(--color-navigation-selected);
- font-weight: bold;
- padding: 5px;
- border-radius: 2px;
-}
-
-.user-email {
- font-size: 11pt;
-}
-
::ng-deep .toolbar-menu {
background-color: var(--mat-sys-surface);
--mat-menu-item-icon-color: var(--mat-sys-on-surface);
diff --git
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
index 9c9a907450..5cfc09ad9b 100644
---
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
+++
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
@@ -23,12 +23,12 @@
@for (item of dashboard.widgets; track item; let i = $index) {
<div
[ngClass]="
- item.id === currentWidget.elementId
+ item.dataViewElementId === currentWidget.elementId
? 'viz-preview viz-preview-selected'
: 'viz-preview'
"
fxLayoutAlign="center center"
- (click)="selectWidget(i, item.id)"
+ (click)="selectWidget(i, item.dataViewElementId)"
>
<div
fxFlex="100"
@@ -36,9 +36,10 @@
fxLayoutAlign="center center"
>
@if (widgetsVisible) {
- <span class="slide-view-title">{{
- configuredWidgets.get(item.id)
- .baseAppearanceConfig.widgetTitle
+ <span class="slide-view-title text-sm">{{
+ configuredWidgets.get(
+ item.dataViewElementId
+ ).baseAppearanceConfig.widgetTitle
}}</span>
}
</div>
diff --git
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.scss
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.scss
index dd87689641..2af383da5b 100644
---
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.scss
+++
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.scss
@@ -40,7 +40,6 @@
.slide-view-title {
text-align: center;
- font-size: 10pt;
}
.mw-100 {
diff --git
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.ts
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.ts
index 835fb2762d..c99f40df8f 100644
---
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.ts
+++
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.ts
@@ -47,19 +47,19 @@ export class DashboardSlideViewComponent
this.loadWidgetConfigs();
}
- selectWidget(index: number, widgetId: string): void {
+ selectWidget(index: number, dataViewElementId: string): void {
this.displayWidget = false;
setTimeout(() => {
this.selectedWidgetIndex = index;
- this.currentWidget = this.configuredWidgets.get(widgetId);
- this.currentMeasure = this.dataLakeMeasures.get(widgetId);
+ this.currentWidget = this.configuredWidgets.get(dataViewElementId);
+ this.currentMeasure = this.dataLakeMeasures.get(dataViewElementId);
this.currentDashboardItem = this.dashboard.widgets[index];
this.displayWidget = true;
});
}
onWidgetsAvailable(): void {
- this.selectWidget(0, this.dashboard.widgets[0].id);
+ this.selectWidget(0, this.dashboard.widgets[0].dataViewElementId);
}
isGridView(): boolean {
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.html
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.html
index d282dee790..dd3be00b33 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.html
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.html
@@ -27,7 +27,7 @@
>
<div fxFlex fxLayout="column">
<h5>{{ chart.baseAppearanceConfig.widgetTitle }}</h5>
- <div fxLayout="row" fxLayoutGap="15px" class="data-view-preview-info">
+ <div fxLayout="row" fxLayoutGap="15px" class="text-sm">
<span fxLayoutAlign="start center"
><mat-icon color="primary">insert_chart</mat-icon></span
>
@@ -35,7 +35,7 @@
widgetTypeLabel
}}</span>
</div>
- <div fxLayout="row" fxLayoutGap="15px" class="data-view-preview-info">
+ <div fxLayout="row" fxLayoutGap="15px" class="text-sm">
<span fxLayoutAlign="start center"
><mat-icon color="primary">folder</mat-icon></span
>
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
index 162429ebe2..1a98fbb087 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
@@ -27,10 +27,6 @@
cursor: pointer;
}
-.data-view-preview-info {
- font-size: small;
-}
-
mat-icon {
--mat-icon-color: var(--mat-sys-secondary);
}
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
index 0737ebe5b0..377df74878 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
@@ -36,12 +36,12 @@
@if (hasChartWritePrivileges) {
<button
- mat-button
- color="accent"
- class="mt-10"
+ mat-flat-button
+ class="mt-10 mat-basic"
data-cy="create-chart-button"
(click)="navigateToDataViewCreation()"
>
+ <mat-icon>add</mat-icon>
{{ 'Create chart' | translate }}
</button>
}
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
index 0bfc9c03c3..8cf72cbca9 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss
@@ -21,6 +21,6 @@
}
.no-widget-hint {
- font-size: 10pt;
+ font-size: var(--font-size-md);
text-align: center;
}
diff --git
a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html
b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html
index 81696a77a2..a7ceb9ce9b 100644
---
a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html
+++
b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html
@@ -29,9 +29,11 @@
<div>
@if (eventProperty.label) {
<div>
- <b>{{ eventProperty.label }}</b
+ <span class="text-sm font-emphasized">{{
+ eventProperty.label
+ }}</span
><br />
- <mat-hint class="description"
+ <mat-hint class="text-xs"
>{{ eventProperty.description }}, field name:
{{ eventProperty.runtimeName }}</mat-hint
>
diff --git
a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.scss
b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.scss
deleted file mode 100644
index 440a058e0b..0000000000
---
a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.scss
+++ /dev/null
@@ -1,21 +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.
- *
- */
-
-.description {
- font-size: 10px;
-}
diff --git
a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
index d5d08ebff3..b0d2fd42f4 100644
---
a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
+++
b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
@@ -26,7 +26,6 @@ import {
@Component({
selector: 'sp-property-selection',
templateUrl: './property-selection.component.html',
- styleUrls: ['./property-selection.component.scss'],
standalone: false,
})
export class PropertySelectionComponent implements OnInit {
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
index 41e97612d9..f47a7373c5 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
@@ -45,6 +45,7 @@
</div>
<div fxFlex fxLayoutAlign="start start" fxLayout="column">
<div
+ class="font-bold"
[ngClass]="{
'element-name-hover': currentMouseOver,
'element-name': !currentMouseOver
@@ -54,7 +55,7 @@
</div>
@if (currentMouseOver) {
<div class="element-description" fxLayoutAlign="start start">
- <small>{{ element.description }}</small>
+ <span class="text-xs">{{ element.description }}</span>
</div>
}
</div>
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
index 3cc6731de3..fd11ce6d45 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
@@ -49,8 +49,6 @@
}
.element-name {
- font-size: 11pt;
- font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
@@ -59,8 +57,6 @@
}
.element-name-hover {
- font-size: 11pt;
- font-weight: 500;
word-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
index acb97129ff..2f7f236f26 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
@@ -77,7 +77,7 @@
[ngStyle]="{ background: 'var(--color-bg-2)' }"
>
<div
- class="panel-title"
+ class="panel-title text-md"
fxLayoutAlign="start center"
>
{{ availableType.title }}
@@ -193,9 +193,12 @@
) {
<div fxLayout="column">
<div class="group-outer">
- <span
class="group-title">{{
- category.label
- }}</span>
+ <span
+ class="group-title
text-sm"
+ >{{
+ category.label
+ }}</span
+ >
</div>
@for (
element of allElements
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
index 1672c1abae..797913ee47 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
@@ -56,7 +56,6 @@
}
.panel-title {
- font-weight: 400;
padding-left: 5px;
}
@@ -104,9 +103,8 @@
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
- font-size: small;
background: var(--color-secondary);
- color: var(--color-primary);
+ color: var(--color-bg-0);
}
.sort-option {
diff --git
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
index 4b1a6d3d31..4fc91c67e2 100644
---
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
+++
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
@@ -38,7 +38,7 @@
(click)="customizeElement(pipelineElement)"
data-cy="settings-pipeline-element-button"
>
- <i class="material-icons
options-icon-size">settings</i>
+ <mat-icon class="options-icon-size">settings</mat-icon>
</button>
</span>
}
@@ -54,7 +54,7 @@
[matTooltipPosition]="'above'"
(click)="openCustomizeStreamDialog()"
>
- <i class="material-icons
options-icon-size">settings</i>
+ <mat-icon class="options-icon-size">settings</mat-icon>
</button>
</span>
}
@@ -66,7 +66,7 @@
[matTooltipPosition]="'above'"
(click)="removeElement(pipelineElement)"
>
- <i class="material-icons options-icon-size">clear</i>
+ <mat-icon class="options-icon-size">clear</mat-icon>
</button>
</span>
@if (pipelineElement.type !== 'action') {
@@ -91,8 +91,8 @@
"
_
>
- <i class="material-icons options-icon-size"
- >account_tree</i
+ <mat-icon class="options-icon-size"
+ >account_tree</mat-icon
>
</button>
</span>
@@ -105,7 +105,7 @@
mat-icon-button
(click)="openHelpDialog()"
>
- <i class="material-icons options-icon-size">help</i>
+ <mat-icon class="options-icon-size">help</mat-icon>
</button>
</span>
</div>
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 eb0deeb848..b678246f97 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
@@ -20,13 +20,13 @@
@if (!runtimeData) {
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center">
<mat-spinner [diameter]="20" color="accent"></mat-spinner>
- <span class="preview-table mt-10"
+ <span class="preview-table text-sm mt-10"
>{{ 'Waiting for live data' | translate }}...</span
>
</div>
}
@if (runtimeData) {
- <table class="row-border hover preview-table">
+ <table class="row-border hover preview-table text-sm">
<tbody id="preview-data-rows-id">
@for (
item of runtimeData | keyvalue: keyValueCompareFn;
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 ae8a6fc729..586ad1c080 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
@@ -33,10 +33,6 @@
z-index: 1000;
}
-.preview-table {
- font-size: 9pt;
-}
-
.preview-row,
.preview-table {
background: var(--color-bg-dialog);
diff --git
a/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.html
b/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.html
index aabb1197dc..996cd3958e 100644
---
a/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.html
+++
b/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.html
@@ -16,7 +16,7 @@
~
-->
-<div class="badge-outer">
+<div class="text-sm">
<span class="badge badge-key">{{ key }}</span>
<span class="badge badge-value">{{ value }}</span>
</div>
diff --git
a/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.scss
b/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.scss
index 305ea8b0d4..173cad6e14 100644
---
a/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics-badge/pipeline-element-statistics-badge.component.scss
@@ -18,7 +18,6 @@
.badge {
padding: 3px;
- font-size: 10pt;
}
.badge-key {
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.html
b/ui/src/app/editor/components/pipeline/pipeline.component.html
index 147733bcb8..aafd90553a 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.html
@@ -52,7 +52,7 @@
[matTooltipPosition]="'above'"
(click)="openTopicsDialog(pipelineElementConfig)"
>
- <i class="material-icons topics-icon-size">code</i>
+ <mat-icon class="topics-icon-size">code</mat-icon>
</button>
</div>
}
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.scss
b/ui/src/app/editor/components/pipeline/pipeline.component.scss
index 380f45e29a..c6b2283c70 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.scss
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.scss
@@ -38,6 +38,8 @@
}
.topics-icon-size {
- font-size: 16px;
+ font-size: var(--font-size-md);
+ width: var(--font-size-md);
+ height: var(--font-size-md);
color: white;
}
diff --git a/ui/src/app/home/components/status.component.html
b/ui/src/app/home/components/status.component.html
index a5e8d1c4a2..79879b43f6 100644
--- a/ui/src/app/home/components/status.component.html
+++ b/ui/src/app/home/components/status.component.html
@@ -24,14 +24,10 @@
<div fxLayout="row" fxFlex="100">
<div fxFlex fxLayout="column" fxLayoutAlign="start start">
<div fxFlex fxLayout="column">
- <div class="status-container-number">
+ <div class="status-container-number text-3xl">
<span>{{ resourceCount }}</span>
</div>
- <div
- class="status-container-text"
- fxFlex
- fxLayoutAlign="end end"
- >
+ <div class="text-xl" fxFlex fxLayoutAlign="end end">
<span>{{ statusBox.title }}</span>
</div>
</div>
@@ -41,7 +37,7 @@
<a
(click)="navigate(statusBox.createLink)"
fxLayoutAlign="start center"
- class="status-container-create-link"
+ class="status-container-create-link text-md"
>
<i class="material-icons">add_circle</i>
<span> {{ statusBox.createTitle }}</span>
@@ -52,6 +48,8 @@
</div>
</div>
<div fxLayoutAlign="start start">
- <i class="material-icons status-container-icon">{{ statusBox.icon
}}</i>
+ <i class="material-icons status-container-icon text-5xl">{{
+ statusBox.icon
+ }}</i>
</div>
</div>
diff --git a/ui/src/app/home/components/status.component.scss
b/ui/src/app/home/components/status.component.scss
index a256d2fe56..cb8de94ec8 100644
--- a/ui/src/app/home/components/status.component.scss
+++ b/ui/src/app/home/components/status.component.scss
@@ -27,7 +27,6 @@
}
.status-container-number {
- font-size: 36pt;
font-weight: bold;
}
@@ -36,12 +35,7 @@
opacity: 0.8;
}
-.status-container-text {
- font-size: 15pt;
-}
-
.status-container-create-link {
- font-size: 12pt;
color: var(--color-primary);
}
@@ -50,6 +44,5 @@
}
.status-container-icon {
- font-size: 50pt;
color: var(--mat-sys-outline-variant);
}
diff --git a/ui/src/app/home/home.component.html
b/ui/src/app/home/home.component.html
index 79ef640bc3..451496cfab 100644
--- a/ui/src/app/home/home.component.html
+++ b/ui/src/app/home/home.component.html
@@ -21,7 +21,9 @@
<div fxFlex="100">
<div fxFlex="100" fxLayout="column">
<div class="p-10 header-margin" fxLayoutAlign="center center">
- <div class="welcome-text">Welcome!</div>
+ <span class="text-3xl font-bold"
+ >{{ 'Welcome' | translate }}!</span
+ >
</div>
<div fxLayout="column" fxFlex="100" class="home-margin">
@if (showStatus) {
@@ -61,17 +63,14 @@
}}</mat-icon>
</div>
<span
+ class="text-md font-bold"
matListItemTitle
- style="
- font-weight: bold;
- font-size: 14pt;
- "
>
{{ link.name }}
</span>
<span
matListItemLine
- class="module-description"
+ class="text-sm font-medium"
>
{{ link.description }}
</span>
diff --git a/ui/src/app/home/home.component.scss
b/ui/src/app/home/home.component.scss
index 7a5b420823..9486e96739 100644
--- a/ui/src/app/home/home.component.scss
+++ b/ui/src/app/home/home.component.scss
@@ -16,14 +16,6 @@
*
*/
-.pageheadbar {
- padding: 0 0 0 10px;
- background-color: #f6f6f6;
- font-size: 14px;
- line-height: 24px;
- border-bottom: 1px solid #ccc;
-}
-
.mt-0 {
margin-top: 0;
}
@@ -33,11 +25,6 @@
border-top-right-radius: 5px;
}
-.welcome-text {
- font-size: 26pt;
- font-weight: bold;
-}
-
.header-margin {
margin-top: 20px;
}
diff --git a/ui/src/app/home/home.module.ts b/ui/src/app/home/home.module.ts
index 44cef5e0ba..9bfd0141f2 100644
--- a/ui/src/app/home/home.module.ts
+++ b/ui/src/app/home/home.module.ts
@@ -31,6 +31,7 @@ import { PlatformServicesModule } from
'@streampipes/platform-services';
import { WelcomeTourComponent } from
'./dialog/welcome-tour/welcome-tour.component';
import { SharedUiModule } from '@streampipes/shared-ui';
import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [
@@ -43,6 +44,7 @@ import { RouterModule } from '@angular/router';
MatListModule,
PlatformServicesModule,
SharedUiModule,
+ TranslateModule.forChild(),
RouterModule.forChild([
{
path: '',
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 3cf79dcd1d..d57a4b9d99 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
@@ -170,7 +170,9 @@
{{ 'Last modified' | translate }}
</th>
<td mat-cell *matCellDef="let pipeline">
- <h5>{{ pipeline.createdAt | date: 'dd.MM.yyyy HH:mm' }}</h5>
+ <span class="text-sm">{{
+ pipeline.createdAt | date: 'dd.MM.yyyy HH:mm'
+ }}</span>
</td>
</ng-container>
diff --git
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
index 1bf3b33a1a..ad095a0cb7 100644
---
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
+++
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
@@ -29,9 +29,10 @@
notification of pipeline.pipelineNotifications;
track notification
) {
- <span>
- <p>{{ notification }}</p>
+ <span class="text-xs">
+ {{ notification }}
</span>
+ <br />
}
</div>
</div>
diff --git
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss
index cf7f4ab20a..2f921f7e21 100644
---
a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss
+++
b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss
@@ -18,17 +18,15 @@
.log-message {
background-color: black;
- font:
- 11pt Inconsolata,
- monospace;
- text-shadow: 0 0 5px #c8c8c8;
+ font-family: Inconsolata, monospace;
color: white;
padding: 10px;
max-width: 100%;
+ margin-top: 10px;
}
.info-message {
- font-size: 12pt;
+ font-size: var(--font-size-md);
margin-top: 10px;
margin-bottom: 5px;
}
diff --git
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss
index cc1f87cf28..97a6f08c39 100644
---
a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss
+++
b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss
@@ -16,20 +16,16 @@
*
*/
-.success-text {
- font-size: 14pt;
-}
-
.success-message {
text-align: center;
- font-size: 14pt;
+ font-size: var(--font-size-lg);
margin-top: 20px;
margin-bottom: 20px;
}
.message-small {
text-align: center;
- font-size: 11pt;
+ font-size: var(--font-size-md);
margin-top: 10px;
margin-bottom: 10px;
}
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 132079f868..83cb8b66be 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -64,3 +64,4 @@
@use './sp/forms-mat3';
@use 'gridstack/dist/gridstack.min.css';
+@use './sp/_typography.scss';
diff --git a/ui/src/scss/sp/_typography.scss b/ui/src/scss/sp/_typography.scss
new file mode 100644
index 0000000000..44bf90d2db
--- /dev/null
+++ b/ui/src/scss/sp/_typography.scss
@@ -0,0 +1,171 @@
+/*!
+ * 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.
+ *
+ */
+
+:root {
+ --font-size-base: 1rem;
+ --font-default: Roboto-Regular, Arial, sans-serif;
+ --font-emphasized: Roboto, Arial, sans-serif;
+
+ /* Fluid font sizes using clamp(min, fluid, max) */
+ --font-size-2xs: clamp(0.65rem, 0.63rem + 0.08vw, 0.7rem); /* ~10–11px */
+ --font-size-xs: clamp(
+ 0.72rem,
+ 0.69rem + 0.08vw,
+ 0.78rem
+ ); /* ~11.5–12.5px */
+ --font-size-sm: clamp(0.83rem, 0.79rem + 0.12vw, 0.9rem); /* ~13–14.5px */
+ --font-size-md: clamp(0.96rem, 0.92rem + 0.16vw, 1.05rem); /* ~15–17px */
+ --font-size-lg: clamp(1.08rem, 1.02rem + 0.22vw, 1.2rem); /* ~17–19px */
+ --font-size-xl: clamp(1.22rem, 1.14rem + 0.3vw, 1.4rem); /* ~19–22px */
+ --font-size-2xl: clamp(1.35rem, 1.28rem + 0.38vw, 1.7rem); /* ~22–27px */
+ --font-size-3xl: clamp(1.7rem, 1.55rem + 0.55vw, 2.1rem); /* ~27–34px */
+ --font-size-4xl: clamp(2.05rem, 1.85rem + 0.75vw, 2.7rem); /* ~33–43px */
+ --font-size-5xl: clamp(2.5rem, 2.25rem + 0.95vw, 3.25rem); /* ~40–52px */
+
+ /**
+ Default Angular Material typography scale mapping:
+ (for reference only; not used directly)
+
+ mat-sys-body-large-size: 1rem; md
+ mat-sys-body-medium-size: 0.875rem; sm
+ mat-sys-body-small-size: 0.75rem; xs
+
+ mat-sys-label-large-size: 0.875rem; sm
+ mat-sys-label-medium-size: 0.75rem; xs
+ mat-sys-label-small-size: 0.688rem; <xs
+
+
+ mat-sys-title-large-size: 1.375rem; 2xl
+ mat-sys-title-medium-size: 1rem; md
+ mat-sys-title-small-size: 0.875rem; sm
+
+ */
+
+ --line-height-tight: 1.2;
+ --line-height-normal: 1.4;
+ --line-height-relaxed: 1.6;
+
+ --font-weight-regular: 400;
+ --font-weight-medium: 500;
+ --font-weight-semibold: 600;
+ --font-weight-bold: 700;
+}
+
+.text-xs {
+ font-size: var(--font-size-xs);
+ line-height: var(--line-height-normal);
+}
+
+.text-sm {
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-normal);
+}
+
+.text-md {
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-normal);
+}
+
+.text-lg {
+ font-size: var(--font-size-lg);
+ line-height: var(--line-height-normal);
+}
+
+.text-xl {
+ font-size: var(--font-size-xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-2xl {
+ font-size: var(--font-size-2xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-3xl {
+ font-size: var(--font-size-3xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-4xl {
+ font-size: var(--font-size-4xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-5xl {
+ font-size: var(--font-size-5xl);
+ line-height: var(--line-height-tight);
+}
+
+h1 {
+ font-size: var(--font-size-3xl);
+ line-height: var(--line-height-tight);
+ font-weight: var(--font-weight-bold);
+ margin: 0 0 0.5em 0;
+}
+
+h2 {
+ font-size: var(--font-size-2xl);
+ line-height: var(--line-height-tight);
+ font-weight: var(--font-weight-semibold);
+ margin: 0 0 0.5em 0;
+}
+
+h3 {
+ font-size: var(--font-size-xl);
+ line-height: var(--line-height-tight);
+ font-weight: var(--font-weight-semibold);
+ margin: 0 0 0.5em 0;
+}
+
+h4 {
+ font-size: var(--font-size-lg);
+ line-height: var(--line-height-normal);
+ font-weight: var(--font-weight-medium);
+ margin: 0 0 0.5em 0;
+}
+
+h5 {
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-normal);
+ font-weight: var(--font-weight-medium);
+}
+
+h6 {
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-normal);
+ font-weight: var(--font-weight-medium);
+}
+
+p {
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-relaxed);
+ margin: 0 0 1em 0;
+}
+
+.font-bold {
+ font-weight: var(--font-weight-bold);
+}
+
+.font-medium {
+ font-weight: var(--font-weight-medium);
+}
+
+.font-emphasized {
+ font-family: var(--font-emphasized) sans-serif;
+ font-weight: 700;
+}
diff --git a/ui/src/scss/sp/_variables.scss b/ui/src/scss/sp/_variables.scss
index d63946748e..63ab856c99 100644
--- a/ui/src/scss/sp/_variables.scss
+++ b/ui/src/scss/sp/_variables.scss
@@ -26,7 +26,18 @@ $sp-color-sink: #3f51b5;
$sp-color-error: #b71c1c;
:root {
- --mat-sys-body-medium-size: 10pt;
+ --mat-sys-body-large-size: var(--font-size-md);
+ --mat-sys-body-medium-size: var(--font-size-sm);
+ --mat-sys-body-small-size: var(--font-size-xs);
+
+ --mat-sys-label-large-size: var(--font-size-sm);
+ --mat-sys-label-medium-size: var(--font-size-xs);
+ --mat-sys-label-small-size: var(--font-size-2xs);
+
+ --mat-sys-title-large-size: var(--font-size-2xl);
+ --mat-sys-title-medium-size: var(--font-size-md);
+ --mat-sys-title-small-size: var(--font-size-sm);
+
--fg-muted: color-mix(in oklab, currentColor 60%, transparent);
--color-data-view: rgb(122, 206, 227);
diff --git a/ui/src/scss/sp/buttons-mat3.scss b/ui/src/scss/sp/buttons-mat3.scss
index f4aec978bc..eb1ad58f48 100644
--- a/ui/src/scss/sp/buttons-mat3.scss
+++ b/ui/src/scss/sp/buttons-mat3.scss
@@ -83,22 +83,22 @@
}
.mdc-button.small-button {
- padding: 0.25em 0.75em;
- font-size: 0.8em;
+ padding: 0.25rem 0.75rem;
+ font-size: var(--font-size-sm);
max-height: 20px;
line-height: 10px;
}
.mdc-button.small-button-add {
- padding: 0.25em 0.75em;
- font-size: 0.8em;
+ padding: 0.25rem 0.75rem;
+ font-size: var(--font-size-sm);
max-height: 75px;
line-height: 25px;
}
.mdc-raised-button.small-button-add-inverted {
padding: 0.25em 0.75em;
- font-size: 0.8em;
+ font-size: var(--font-size-sm);
max-height: 75px;
line-height: 25px;
background: white;
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index b2a9ee5b09..1f5391fa08 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -19,6 +19,10 @@
@use './variables' as spThemeVars;
@use '../custom-theme/custom-variables' as customThemeVars;
+html {
+ font-size: 90%;
+}
+
.truncate {
overflow: hidden;
text-overflow: ellipsis;
@@ -91,12 +95,6 @@ pre[class*='language-'] {
background-color: var(--color-primary);
}
-.opened-nav {
- /*border-radius: 50%;*/
- transform: scale(1);
- visibility: visible;
-}
-
md-toolbar:not(.md-menu-toolbar) {
background: var(--color-secondary);
}
@@ -147,21 +145,14 @@ md-content {
.page-container {
margin: 10px;
- min-height: calc(100% - 60px);
+ min-height: calc(100% - 40px);
background: var(--color-bg-page-container);
}
-.sp-full-height {
- min-height: calc(100% - 20px);
-}
-
.page-container-padding-inner {
margin: 10px;
}
-.page-container-subheader {
-}
-
.subsection-title {
font-size: var(--mat-sys-body-medium-size);
margin-bottom: 10px;
@@ -172,60 +163,6 @@ md-content {
min-height: calc(100% - 20px);
}
-.page-container-inner-border {
- border: 1px solid #cccccc;
- margin-bottom: 1%;
-}
-
-.page-container-padding {
- padding-bottom: 20px;
-}
-
-#ship {
- border: 1px solid;
- padding: 10px;
- background: #dddddd;
- border-bottom-left-radius: 20em;
- border-bottom-right-radius: 20em;
-}
-
-.angular-google-map-container {
- height: 400px;
-}
-
-.wizard-preview {
- height: 150px !important;
- width: 150px !important;
- box-shadow: 0 0 2px var(--color-primary);
- display: inline-block;
- vertical-align: middle;
- background-color: white;
- line-height: 90px;
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- display: block;
- font-size: 30px;
- font-family: Roboto;
- margin-top: 20px;
-}
-
-.wizard-preview-selected {
- border: 5px solid var(--color-primary);
-}
-
-.letter-circle {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #ffffff;
- text-align: center;
-
- font:
- 16px Arial,
- sans-serif;
-}
-
.tutorial-image {
float: left;
position: relative;
