diff --git a/apps/client/src/common/utils/offset.ts b/apps/client/src/common/utils/offset.ts index ecaf6f774..0551b967a 100644 --- a/apps/client/src/common/utils/offset.ts +++ b/apps/client/src/common/utils/offset.ts @@ -1,5 +1,5 @@ import { MaybeNumber } from 'ontime-types'; -import { millisToString } from 'ontime-utils'; +import { millisToString, removeLeadingZero } from 'ontime-utils'; import { enDash } from './styleUtils'; @@ -14,7 +14,7 @@ export function getOffsetText(offset: MaybeNumber): string { let offsetText = ''; if (offset < 0) offsetText += '-'; if (offset > 0) offsetText += '+'; - offsetText += millisToString(Math.abs(offset)); + offsetText += removeLeadingZero(millisToString(Math.abs(offset))); return offsetText; } diff --git a/apps/client/src/features/overview/composite/TimeElements.module.scss b/apps/client/src/features/overview/composite/TimeElements.module.scss index f939e18e4..b926ec007 100644 --- a/apps/client/src/features/overview/composite/TimeElements.module.scss +++ b/apps/client/src/features/overview/composite/TimeElements.module.scss @@ -9,7 +9,7 @@ .row { display: grid; - grid-template-columns: 3rem 10rem 8rem; + grid-template-columns: 3rem 9rem 9rem; align-items: center; gap: 0.5rem; } @@ -29,7 +29,8 @@ .icon { font-size: 1rem; - color: $label-gray; + color: $secondary-text-gray; + flex-shrink: 0; } .label { @@ -40,18 +41,24 @@ .time { font-size: 1.25rem; - letter-spacing: 0.5px; + letter-spacing: 0.25px; font-variant-numeric: tabular-nums; line-height: 1.1; } .daySpan { + display: inline-flex; + align-items: center; + margin-left: 0.25rem; + &::after { - content: "+"attr(data-day-offset); - vertical-align: super; - font-size: 0.6em; - letter-spacing: 0; - color: $info-blue; + content: "+" attr(data-day-offset); + font-size: 0.75rem; + font-weight: 400; + color: $ui-white; + background: $gray-900; // same as the tag component + padding: 0.125rem 0.25rem; + border-radius: $component-border-radius-sm; } } @@ -74,4 +81,7 @@ font-size: 1rem; letter-spacing: 0; color: $playback-over; + border-left: 3px solid $playback-over; + padding-left: 0.375rem; + display: inline-block; } diff --git a/apps/client/src/features/overview/composite/TimeLayout.module.scss b/apps/client/src/features/overview/composite/TimeLayout.module.scss index 97027489a..0562ae2ef 100644 --- a/apps/client/src/features/overview/composite/TimeLayout.module.scss +++ b/apps/client/src/features/overview/composite/TimeLayout.module.scss @@ -1,6 +1,6 @@ .label { color: $label-gray; - font-size: calc(1rem - 2px); + font-size: calc(1rem - 3px); } .clock { @@ -29,14 +29,21 @@ gap: 0.25rem; } + .over, + .under { + transition: color 0.2s ease; + } + &[data-state='waiting'] { .label { color: $ontime-roll; } } + &[data-state='over'] { .label .over { color: $playback-over; + font-weight: 600; } .clock { color: $playback-over; @@ -46,6 +53,7 @@ &[data-state='under'] { .label .under { color: $playback-under; + font-weight: 600; } .clock { color: $playback-under; diff --git a/apps/client/src/features/overview/composite/TitleOverview.module.scss b/apps/client/src/features/overview/composite/TitleOverview.module.scss index ffe5f0277..e8f839fc4 100644 --- a/apps/client/src/features/overview/composite/TitleOverview.module.scss +++ b/apps/client/src/features/overview/composite/TitleOverview.module.scss @@ -1,10 +1,14 @@ .title { - font-size: 1.5rem; + font-size: 1.75rem; + font-weight: 600; + color: $ui-white; + line-height: 1; @include ellipsis-overflow; } .description { font-size: 1rem; - color: $label-gray; + color: $secondary-text-gray; + font-weight: 400; @include ellipsis-overflow; } diff --git a/apps/client/src/theme/_ontimeColours.scss b/apps/client/src/theme/_ontimeColours.scss index 0d962d528..97775c9f7 100644 --- a/apps/client/src/theme/_ontimeColours.scss +++ b/apps/client/src/theme/_ontimeColours.scss @@ -1,6 +1,7 @@ // from https://www.genomecolor.space/ $white-1: rgba(255, 255, 255, 0.01); +$white-2: rgba(255, 255, 255, 0.02); $white-3: rgba(255, 255, 255, 0.03); $white-7: rgba(255, 255, 255, 0.07); $white-9: rgba(255, 255, 255, 0.09); diff --git a/apps/client/src/theme/_ontimeStyles.scss b/apps/client/src/theme/_ontimeStyles.scss index 9818e75ce..b4e3fbea9 100644 --- a/apps/client/src/theme/_ontimeStyles.scss +++ b/apps/client/src/theme/_ontimeStyles.scss @@ -35,7 +35,7 @@ $ontime-paused: #c05621; $ontime-stop: #E4281E; $playback-negative: $red-500; $playback-ahead: $green-500; -$active-indicator: #8bb33d; +$active-indicator: $green-400; $text-black: $gray-1350; $playback-over: #F57C13; @@ -65,7 +65,7 @@ $main-spacing: 2rem; // interface text $ontime-font-family: "Open Sans", "Segoe UI", sans-serif; $title-gray: $gray-200; -$label-gray: $gray-400; +$label-gray: $gray-600; $secondary-text-gray: $gray-400; $muted-gray: $gray-600; $section-white: $ui-white; diff --git a/e2e/tests/features/212-time-until.spec.ts b/e2e/tests/features/212-time-until.spec.ts index 8f55b5f80..14fac50eb 100644 --- a/e2e/tests/features/212-time-until.spec.ts +++ b/e2e/tests/features/212-time-until.spec.ts @@ -55,7 +55,7 @@ test('time until absolute', async ({ context }) => { await editor.getByRole('button', { name: 'Absolute' }).click(); await editor.getByTestId('entry-1').getByLabel('Start event').click(); - await expect(editor.getByTestId('offset')).not.toContainText('00:00:00'); // This might be a bad test requires that the test is not run at 0h + await expect(editor.getByTestId('offset')).not.toContainText('0:00'); // This might be a bad test requires that the test is not run at 0h await editor.getByLabel('Pause event').click(); // 1. initial check @@ -139,7 +139,7 @@ test('time until relative', async ({ context }) => { await editor.getByRole('button', { name: 'Relative' }).click(); await editor.getByTestId('entry-1').getByLabel('Start event').click(); - await expect(editor.getByTestId('offset')).toContainText('00:00:00'); // This might be a bad test as it ruires the evaluation to happen within 1s + await expect(editor.getByTestId('offset')).toContainText('0:00'); // This might be a bad test as it ruires the evaluation to happen within 1s await editor.getByLabel('Pause event').click(); await expect(editor.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('9m');