diff --git a/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss b/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss index c4c61201..ce211d29 100644 --- a/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss +++ b/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss @@ -1,11 +1,14 @@ .board-details-header { + // Mirrors Angular's board-details-header host styling: + // padding: $space-l $space-xl (15px 20px), align-items: start, + // gap: $space-m (10px). Border-radius stays off — the wrapping + // `.frame` handles rounding. display: grid; grid-template-columns: auto 1fr; - align-items: center; - gap: 8px 16px; - padding: 24px 24px 12px; + align-items: start; + gap: 10px 16px; + padding: 15px 20px; background: #fff; - border-radius: 8px; &__badge { grid-column: 1; grid-row: 1; } diff --git a/src/ui/flights/StationDisplay.scss b/src/ui/flights/StationDisplay.scss index 929469a4..c2bbda7b 100644 --- a/src/ui/flights/StationDisplay.scss +++ b/src/ui/flights/StationDisplay.scss @@ -1,3 +1,4 @@ +@use "../../styles/colors" as colors; @use "../../styles/screen" as screen; .station { @@ -16,11 +17,14 @@ } } + // Matches Angular's terminal-link: $font-size-s (12px), $light-gray + // (#657282), 16px line-height, underline. Previous #8a8a8a was a + // shade too pale and read as disabled text. &__terminal { font-size: 12px; - color: #8a8a8a; + color: colors.$light-gray; text-decoration: underline; - line-height: 1.25; + line-height: 16px; } &--city-first {