refactor: review overview styles

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;
 }
 

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;
 }

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;

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;
 }

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);

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;

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');