From 55f77dd3533f0cbb48dc5375cfa3475777f377a7 Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Thu, 11 May 2023 14:50:09 +0200 Subject: [PATCH] vmui: increase font-size and fix the text display (#4273) vmui: change default font size to 14px for better readability vmui: fix bug with missing text on buttons in safari --------- Co-authored-by: Roman Khavronenko --- .../vmui/src/components/Chart/GraphTips/style.scss | 2 +- .../components/Chart/Line/ChartTooltip/style.scss | 2 +- .../Chart/Line/Legend/LegendItem/style.scss | 1 + .../Configurators/AdditionalSettings/style.scss | 2 +- .../Configurators/StepConfigurator/style.scss | 5 ++--- .../components/Layout/Header/HeaderNav/style.scss | 12 +++++------- .../vmui/src/components/Layout/Header/style.scss | 5 ----- .../vmui/src/components/Main/Alert/style.scss | 4 ++-- .../vmui/src/components/Main/Button/style.scss | 5 +++-- .../vmui/src/components/Main/Select/style.scss | 8 +++----- .../vmui/src/components/Main/Switch/style.scss | 6 +++++- .../vmui/src/components/Main/Tabs/style.scss | 4 ++-- .../vmui/src/components/Main/TextField/style.scss | 4 ++-- .../components/TraceQuery/NestedNav/NestedNav.tsx | 5 +++-- .../CardinalityPanel/CardinalityTips/style.scss | 9 --------- .../CardinalityPanel/CardinalityTotals/style.scss | 2 -- .../pages/CardinalityPanel/MetricsContent/style.scss | 2 -- .../CardinalityPanel/Table/TableSettings/style.scss | 2 +- .../PredefinedPanels/PredefinedDashboard/style.scss | 2 +- .../packages/vmui/src/pages/TracePage/style.scss | 2 +- .../WithTemplate/WithTemplateTutorial/style.scss | 4 ++-- .../packages/vmui/src/styles/components/table.scss | 4 ++-- app/vmui/packages/vmui/src/styles/variables.scss | 8 ++++---- docs/CHANGELOG.md | 2 ++ 24 files changed, 44 insertions(+), 58 deletions(-) diff --git a/app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss b/app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss index d6cb69dce7..f71eea29a7 100644 --- a/app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss +++ b/app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss @@ -19,7 +19,7 @@ &__description { display: inline-block; - line-height: 20px; + line-height: 1.5; svg, code { diff --git a/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss b/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss index e924130d5c..63df621bfc 100644 --- a/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss +++ b/app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss @@ -66,7 +66,7 @@ $chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon); gap: $padding-small; align-items: flex-start; word-break: break-all; - line-height: 12px; + line-height: $font-size; &__marker { width: 12px; diff --git a/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss index 7c5e2ed1bc..3376268489 100644 --- a/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss +++ b/app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss @@ -11,6 +11,7 @@ cursor: pointer; transition: 0.2s ease; margin-bottom: $padding-small; + font-size: $font-size-small; &:hover { background-color: rgba(0, 0, 0, 0.1); diff --git a/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/style.scss b/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/style.scss index 82433db551..6c2e6cd84a 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/style.scss +++ b/app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/style.scss @@ -5,7 +5,7 @@ align-items: center; justify-content: flex-start; flex-wrap: wrap; - gap: $padding-global; + gap: $padding-medium; &__input { flex-basis: 160px; diff --git a/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/style.scss b/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/style.scss index adc887af25..62e67058e7 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/style.scss +++ b/app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/style.scss @@ -34,16 +34,15 @@ &-info { font-size: $font-size-small; - line-height: 1.6; + line-height: 1.8; a { - margin: 0 0.2em; + margin: 0 0.4em; } code { padding: 0.2em 0.4em; margin: 0 0.2em; - font-size: 85%; background-color: $color-hover-black; border-radius: 6px; } diff --git a/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/style.scss b/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/style.scss index 267befe4a4..ee338f0814 100644 --- a/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/style.scss +++ b/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/style.scss @@ -5,8 +5,6 @@ align-items: center; justify-content: flex-start; gap: $padding-global; - font-size: $font-size-small; - font-weight: bold; &_column { flex-direction: column; @@ -25,10 +23,12 @@ &-item { position: relative; padding: $padding-global $padding-small; - opacity: 0.5; + opacity: 0.7; cursor: pointer; transition: opacity 200ms ease-in; - text-transform: uppercase; + text-transform: capitalize; + font-size: $font-size; + font-weight: normal; &_sub { display: grid; @@ -63,11 +63,9 @@ white-space: nowrap; padding: $padding-small; color: $color-white; - border-radius: 2px; + border-radius: $border-radius-small; opacity: 1; transform-origin: top center; - font-size: $font-size-small; - font-weight: bold; &-item { cursor: pointer; diff --git a/app/vmui/packages/vmui/src/components/Layout/Header/style.scss b/app/vmui/packages/vmui/src/components/Layout/Header/style.scss index 361cfff764..6f27b92a2e 100644 --- a/app/vmui/packages/vmui/src/components/Layout/Header/style.scss +++ b/app/vmui/packages/vmui/src/components/Layout/Header/style.scss @@ -63,9 +63,4 @@ margin: 0 auto; } } - - &-nav { - font-size: $font-size-small; - font-weight: bold; - } } diff --git a/app/vmui/packages/vmui/src/components/Main/Alert/style.scss b/app/vmui/packages/vmui/src/components/Main/Alert/style.scss index 74e4c4e9e4..29c9587567 100644 --- a/app/vmui/packages/vmui/src/components/Main/Alert/style.scss +++ b/app/vmui/packages/vmui/src/components/Main/Alert/style.scss @@ -10,10 +10,10 @@ background-color: $color-background-block; border-radius: $border-radius-medium; box-shadow: $box-shadow; - font-size: $font-size-medium; + font-size: $font-size; font-weight: normal; color: $color-text; - line-height: 20px; + line-height: 1.5; &_mobile { align-items: flex-start; diff --git a/app/vmui/packages/vmui/src/components/Main/Button/style.scss b/app/vmui/packages/vmui/src/components/Main/Button/style.scss index 3f36b51527..0a0bc1e2b4 100644 --- a/app/vmui/packages/vmui/src/components/Main/Button/style.scss +++ b/app/vmui/packages/vmui/src/components/Main/Button/style.scss @@ -9,7 +9,7 @@ $button-radius: 6px; justify-content: center; padding: 6px 14px; font-size: $font-size-small; - line-height: 15px; + line-height: 1.3; font-weight: normal; min-height: 31px; border-radius: $button-radius; @@ -49,6 +49,7 @@ $button-radius: 6px; display: grid; align-items: center; justify-content: center; + transform: translateZ(1px); svg { width: 15px; @@ -79,7 +80,7 @@ $button-radius: 6px; /* size SMALL */ &_small { - padding: 4px 6px; + padding: 4px 8px; min-height: 25px; span { diff --git a/app/vmui/packages/vmui/src/components/Main/Select/style.scss b/app/vmui/packages/vmui/src/components/Main/Select/style.scss index 0c6219a807..8456007759 100644 --- a/app/vmui/packages/vmui/src/components/Main/Select/style.scss +++ b/app/vmui/packages/vmui/src/components/Main/Select/style.scss @@ -5,12 +5,11 @@ position: relative; display: flex; align-items: center; - justify-content: space-between; - padding: 5px 0 5px $padding-global; + padding: 8px 0 8px $padding-global; cursor: pointer; border: $border-divider; border-radius: $border-radius-small; - min-height: 36px; + min-height: 40px; &-content { display: flex; @@ -18,8 +17,7 @@ justify-content: flex-start; flex-wrap: wrap; gap: $padding-small; - width: 100%; - max-width: calc(100% - ($padding-global + 61px)); + flex-grow: 1; &_mobile { flex-wrap: nowrap; diff --git a/app/vmui/packages/vmui/src/components/Main/Switch/style.scss b/app/vmui/packages/vmui/src/components/Main/Switch/style.scss index b83863be49..b212cfa898 100644 --- a/app/vmui/packages/vmui/src/components/Main/Switch/style.scss +++ b/app/vmui/packages/vmui/src/components/Main/Switch/style.scss @@ -73,8 +73,12 @@ $switch-border-radius: $switch-handle-size + ($switch-padding * 2); &__label { white-space: nowrap; font-size: inherit; - color: inherit; margin-left: $padding-small; transition: color 200ms ease; + color: $color-text-secondary; + } + + &_active &__label { + color: $color-text; } } diff --git a/app/vmui/packages/vmui/src/components/Main/Tabs/style.scss b/app/vmui/packages/vmui/src/components/Main/Tabs/style.scss index 5089e322b3..220d70d0a1 100644 --- a/app/vmui/packages/vmui/src/components/Main/Tabs/style.scss +++ b/app/vmui/packages/vmui/src/components/Main/Tabs/style.scss @@ -16,7 +16,7 @@ padding: $padding-global $padding-small; color: inherit; text-decoration: none; - text-transform: uppercase; + text-transform: capitalize; font-size: inherit; font-weight: inherit; opacity: 0.6; @@ -33,7 +33,7 @@ &__icon { display: grid; - width: 15px; + width: 16px; margin-right: $padding-small; &_single { diff --git a/app/vmui/packages/vmui/src/components/Main/TextField/style.scss b/app/vmui/packages/vmui/src/components/Main/TextField/style.scss index ec6942caad..fe686e0152 100644 --- a/app/vmui/packages/vmui/src/components/Main/TextField/style.scss +++ b/app/vmui/packages/vmui/src/components/Main/TextField/style.scss @@ -18,7 +18,7 @@ padding: $padding-small $padding-global; border: $border-divider; background-color: transparent; - font-size: 12px; + font-size: $font-size; line-height: 18px; grid-area: 1 / 1 / 2 / 2; overflow: hidden; @@ -71,7 +71,7 @@ display: block; border-radius: $border-radius-small; transition: border 200ms ease; - min-height: 34px; + min-height: 40px; resize: none; overflow: hidden; background-color: transparent; diff --git a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx index 89528fcb38..02699336e0 100644 --- a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx +++ b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx @@ -88,11 +88,12 @@ const NestedNav: FC = ({ trace, totalMsec }) => { {(isExpanded || showFullMessage) && ( )} diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/style.scss b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/style.scss index bd96b7bd30..7ad431eb0f 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/style.scss +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/style.scss @@ -67,15 +67,6 @@ } } - h5 { - font-size: $font-size-medium; - margin-bottom: $padding-small; - } - - h6 { - margin-bottom: $padding-small; - } - ul, ol { list-style-position: inside; diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/style.scss b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/style.scss index 128db7519c..2a0db42926 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/style.scss +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/style.scss @@ -41,8 +41,6 @@ max-width: 280px; white-space: normal; padding: $padding-small; - line-height: $font-size; - font-size: $font-size; } &__value { diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/MetricsContent/style.scss b/app/vmui/packages/vmui/src/pages/CardinalityPanel/MetricsContent/style.scss index 42a27aaeb3..6a49460009 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/MetricsContent/style.scss +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/MetricsContent/style.scss @@ -14,8 +14,6 @@ max-width: 300px; white-space: normal; padding: $padding-small; - line-height: 130%; - font-size: $font-size; p { margin-bottom: $padding-small; diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/Table/TableSettings/style.scss b/app/vmui/packages/vmui/src/pages/CardinalityPanel/Table/TableSettings/style.scss index 1b5cbbd2a5..f03e48005b 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/Table/TableSettings/style.scss +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/Table/TableSettings/style.scss @@ -14,7 +14,7 @@ &-list { display: grid; - gap: $padding-small; + gap: 12px; padding: $padding-global; max-height: 350px; overflow: auto; diff --git a/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/style.scss b/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/style.scss index ec24972708..ee042864de 100644 --- a/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/style.scss +++ b/app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/style.scss @@ -14,7 +14,7 @@ font-weight: bold; transform-style: preserve-3d; overflow: hidden; - line-height: 14px; + line-height: 1; box-shadow: $box-shadow; transition: box-shadow 200ms ease-in-out; diff --git a/app/vmui/packages/vmui/src/pages/TracePage/style.scss b/app/vmui/packages/vmui/src/pages/TracePage/style.scss index 33e8eba090..a89c1879e4 100644 --- a/app/vmui/packages/vmui/src/pages/TracePage/style.scss +++ b/app/vmui/packages/vmui/src/pages/TracePage/style.scss @@ -69,7 +69,7 @@ &__text { margin-bottom: $padding-global; - font-size: $font-size-medium; + font-size: $font-size; white-space: pre-line; text-align: center; line-height: 1.8; diff --git a/app/vmui/packages/vmui/src/pages/WithTemplate/WithTemplateTutorial/style.scss b/app/vmui/packages/vmui/src/pages/WithTemplate/WithTemplateTutorial/style.scss index 7933bfffbf..6ba1afa8af 100644 --- a/app/vmui/packages/vmui/src/pages/WithTemplate/WithTemplateTutorial/style.scss +++ b/app/vmui/packages/vmui/src/pages/WithTemplate/WithTemplateTutorial/style.scss @@ -5,7 +5,7 @@ gap: $padding-large; &__title { - font-size: $font-size-large; + font-size: $font-size-medium; font-weight: bold; } @@ -14,7 +14,7 @@ gap: $padding-global; &__text { - font-size: $font-size-medium; + font-size: $font-size; line-height: 130%; max-width: 720px; } diff --git a/app/vmui/packages/vmui/src/styles/components/table.scss b/app/vmui/packages/vmui/src/styles/components/table.scss index b52d76178d..b9bbedd2af 100644 --- a/app/vmui/packages/vmui/src/styles/components/table.scss +++ b/app/vmui/packages/vmui/src/styles/components/table.scss @@ -26,11 +26,11 @@ } &-cell { - padding: $padding-small; + padding: 12px; border-bottom: $border-divider; height: 40px; vertical-align: top; - line-height: 25px; + line-height: 1.5; &__content { display: flex; diff --git a/app/vmui/packages/vmui/src/styles/variables.scss b/app/vmui/packages/vmui/src/styles/variables.scss index 67f5df6fdd..bd488fe6f2 100644 --- a/app/vmui/packages/vmui/src/styles/variables.scss +++ b/app/vmui/packages/vmui/src/styles/variables.scss @@ -40,10 +40,10 @@ $padding-small: 8px; /************* fonts *************/ $font-family-global: 'Lato', sans-serif; $font-family-monospace: monospace; -$font-size-large: 16px; -$font-size-medium: 14px; -$font-size: 12px; -$font-size-small: 10px; +$font-size-large: 18px; +$font-size-medium: 16px; +$font-size: 14px; +$font-size-small: 12px; /************* border *************/ diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 5a35d51f64..c2403cecd5 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -44,6 +44,7 @@ The following tip changes can be tested by building VictoriaMetrics components f * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): display histograms as heatmaps in [Metrics explorer](https://docs.victoriametrics.com/#metrics-explorer). See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4111). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add `WITH template` playground. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3811). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to debug relabeling. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3807). +* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): increase default font size to `14px` for better usability. * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): add `-s3StorageClass` command-line flag for setting the storage class for AWS S3 backups. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4164). Thanks to @justcompile for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4166). * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): store backup creation and completion time in `backup_complete.ignore` file of backup contents. This allows determining the exact timestamp when the backup was created and completed. * FEATURE: [vmbackupmanager](https://docs.victoriametrics.com/vmbackupmanager.html): add `created_at` field to the output of `/api/v1/backups` API and `vmbackupmanager backup list` command. See this [doc](https://docs.victoriametrics.com/vmbackupmanager.html#api-methods) for data format details. @@ -65,6 +66,7 @@ The following tip changes can be tested by building VictoriaMetrics components f * BUGFIX: [vmalert](https://docs.victoriametrics.com/vmalert.html): properly return empty slices instead of nil for `/api/v1/rules` and `/api/v1/alerts` API handlers. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4221). * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the display of the tenant selector. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4160). * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix UI freeze when the query returns non-histogram series alongside histogram series. +* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the text display on buttons in Safari 16.4. * BUGFIX: [alerts-health](https://github.com/VictoriaMetrics/VictoriaMetrics/blob/master/deployment/docker/alerts-health.yml): update threshold for `TooHighMemoryUsage` alert from 90% to 80%, since 90% is too high for production environments. * BUGFIX: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): fix compatibility with Windows OS. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/70). * BUGFIX: [vmctl](https://docs.victoriametrics.com/vmctl.html): fix performance issue when migrating data from VictoriaMetrics according to [these docs](https://docs.victoriametrics.com/vmctl.html#migrating-data-from-victoriametrics). Add the ability to speed up the data migration via `--vm-native-disable-retries` command-line flag. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4092).