fix: phase style overrides in timer

apps/client/src/common/models/View.types.ts

@@ -1,19 +0,0 @@
-export type OverridableOptions = {
-  keyColour?: string;
-  textColour?: string;
-  textBackground?: string;
-  font?: string;
-  size?: number;
-  justifyContent?: 'start' | 'center' | 'end';
-  alignItems?: 'start' | 'center' | 'end';
-  left?: string;
-  top?: string;
-  hideNav?: boolean;
-  hideOvertime?: boolean;
-  hideMessagesOverlay?: boolean;
-  hideEndMessage?: boolean;
-  language?: string;
-  showProgressBar?: boolean;
-  hideTimerSeconds?: boolean;
-  removeLeadingZeros?: boolean;
-};

apps/client/src/views/timer/Timer.tsx

@@ -68,7 +68,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
     hidePhase,
     font,
     keyColour,
-    textColour,
+    timerColour,
   } = useTimerOptions();
 
   const { getLocalizedString } = useTranslation();
@@ -131,11 +131,11 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
   );
 
   // gather presentation styles
-  const timerColour = getTimerColour(viewSettings, textColour, showWarning, showDanger);
+  const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger);
   const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(keyColour && { '--timer-bg': keyColour }),
-    ...(textColour && { '--timer-colour': timerColour }),
+    ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
     ...(font && { '--timer-font': font }),
   };
 

apps/client/src/views/timer/timer.options.ts

@@ -163,9 +163,9 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           defaultValue: '101010',
         },
         {
-          id: 'textColour',
+          id: 'timerColour',
-          title: 'Text Colour',
+          title: 'Timer Colour',
-          description: 'Text colour. Default: #f6f6f6',
+          description: 'Timer colour. Default: #f6f6f6',
           type: 'colour',
           defaultValue: 'f6f6f6',
         },
@@ -191,7 +191,7 @@ type TimerOptions = {
   hidePhase: boolean;
   font?: string;
   keyColour?: string;
-  textColour?: string;
+  timerColour?: string;
 };
 
 /**
@@ -226,7 +226,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),
-    textColour: makeColourString(getValue('textColour')),
+    timerColour: makeColourString(getValue('timerColour')),
   };
 }
 

apps/server/src/models/demoProject.ts

@@ -337,7 +337,7 @@ export const demoDb: DatabaseModel = {
       alias: 'minimal',
       target: OntimeView.Timer,
       search:
-        'hideclock=true&hidecards=true&hideprogress=true&hidemessage=true&hidesecondary=true&hidelogo=true&font=arial+black&keycolour=00ff00&textcolour=ffffff',
+        'hideclock=true&hidecards=true&hideprogress=true&hidemessage=true&hidesecondary=true&hidelogo=true&font=arial+black&keycolour=00ff00&timerColour=ffffff',
     },
   ],
   customFields: {