This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch 4020-harmonize-font-sizes in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit fe2bbf9150a469fe91607df2e15af5d350d4dd8d Author: Dominik Riemer <[email protected]> AuthorDate: Fri Dec 5 13:55:33 2025 +0100 style: Harmonize font sizes --- .../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 +- .../email-configuration.component.html | 2 +- .../export/data-export-import.component.html | 3 +- .../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 +- .../label-configuration.component.html | 2 +- .../messaging-configuration.component.html | 5 +- .../security-configuration.component.html | 8 +-- .../sites-configuration.component.html | 26 ++++---- .../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 | 4 -- .../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 +- .../pipeline-notifications.component.html | 5 +- .../pipeline-notifications.component.scss | 8 +-- .../pipeline-status-dialog.component.scss | 8 +-- ui/src/scss/sp/_typography.scss | 9 ++- ui/src/scss/sp/buttons-mat3.scss | 10 ++-- ui/src/scss/sp/main.scss | 69 +--------------------- 80 files changed, 215 insertions(+), 446 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/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-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/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 a9d36c528c..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" @@ -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/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/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 bc7e599468..d11249a954 100644 --- a/ui/src/app/core/components/toolbar/toolbar.component.scss +++ b/ui/src/app/core/components/toolbar/toolbar.component.scss @@ -59,10 +59,6 @@ width: 100%; } -.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/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/sp/_typography.scss b/ui/src/scss/sp/_typography.scss index b9f576c9e7..44bf90d2db 100644 --- a/ui/src/scss/sp/_typography.scss +++ b/ui/src/scss/sp/_typography.scss @@ -18,6 +18,8 @@ :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 */ @@ -141,14 +143,12 @@ h5 { font-size: var(--font-size-md); line-height: var(--line-height-normal); font-weight: var(--font-weight-medium); - margin: 0 0 0.5em 0; } h6 { font-size: var(--font-size-sm); line-height: var(--line-height-normal); font-weight: var(--font-weight-medium); - margin: 0 0 0.5em 0; } p { @@ -164,3 +164,8 @@ p { .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/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 8eb99f6b10..1f5391fa08 100644 --- a/ui/src/scss/sp/main.scss +++ b/ui/src/scss/sp/main.scss @@ -95,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); } @@ -151,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; @@ -176,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;
