refactor: backstage design review

refactor: improve empty state

refactor: review schedule design

- fit as many elements as possible
- expose cycle interval as an option
- stabilise rundown reference
- style tweaks

apps/client/src/common/components/state/Empty.tsx

@@ -1,18 +1,20 @@
 import { CSSProperties } from 'react';
 
 import EmptyImage from '../../../assets/images/empty.svg?react';
+import { cx } from '../../utils/styleUtils';
 
 import style from './Empty.module.scss';
 
 interface EmptyProps {
   text?: string;
   style?: CSSProperties;
+  className?: string;
 }
 
 export default function Empty(props: EmptyProps) {
-  const { text, ...rest } = props;
+  const { text, className, ...rest } = props;
   return (
-    <div className={style.emptyContainer} {...rest}>
+    <div className={cx([style.emptyContainer, className])} {...rest}>
       <EmptyImage className={style.empty} />
       {text && <span className={style.text}>{text}</span>}
     </div>

apps/client/src/common/components/title-card/TitleCard.scss

@@ -1,8 +1,5 @@
 @use '../../../theme/viewerDefs' as *;
 
-$title-primary-size: clamp(1.5rem, 3vw, 3rem);
-$title-secondary-size: clamp(1rem, 2vw, 2.25rem);
-
 .title-card {
   position: relative;
   display: flex;
@@ -10,21 +7,23 @@ $title-secondary-size: clamp(1rem, 2vw, 2.25rem);
 }
 
 .title-card__title,
-.title-card__secondary {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.title-card__title {
+.title-card__placeholder {
   font-weight: 600;
-  font-size: $title-primary-size;
-  color: var(--color-override, $viewer-color);
+  font-size: $title-font-size;
   line-height: 1.2em;
 }
 
+.title-card__title {
+  color: var(--color-override, $viewer-color);
+  padding-right: 1em;
+}
+
+.title-card__placeholder {
+  color: var(--label-color-override, $viewer-label-color);
+}
+
 .title-card__secondary {
-  font-size: $title-secondary-size;
+  font-size: $base-font-size;
   color: var(--secondary-color-override, $viewer-secondary-color);
   line-height: 1.2em;
 }
@@ -35,7 +34,6 @@ $title-secondary-size: clamp(1rem, 2vw, 2.25rem);
   top: 0.5rem;
   font-size: $timer-label-size;
   color: var(--secondary-color-override, $viewer-secondary-color);
-  margin-left: auto;
   text-transform: uppercase;
 
   &--accent {

apps/client/src/common/components/title-card/TitleCard.tsx

@@ -1,6 +1,7 @@
 import { ForwardedRef, forwardRef } from 'react';
 
 import { useTranslation } from '../../../translation/TranslationProvider';
+import { cx } from '../../utils/styleUtils';
 
 import './TitleCard.scss';
 
@@ -18,9 +19,9 @@ const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivEl
   const accent = label === 'now';
 
   return (
-    <div className={`title-card ${className}`} ref={ref}>
+    <div className={cx(['title-card', className])} ref={ref}>
       <span className='title-card__title'>{title}</span>
-      <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
+      <span className={cx(['title-card__label', accent && 'title-card__label--accent'])}>
         {label && getLocalizedString(`common.${label}`)}
       </span>
       <div className='title-card__secondary'>{secondary}</div>

apps/client/src/common/components/view-logo/ViewLogo.tsx

@@ -7,5 +7,5 @@ interface ViewLogoProps {
 
 export default function ViewLogo(props: ViewLogoProps) {
   const { name, className } = props;
-  return <img src={`${projectLogoPath}/${name}`} className={className} />;
+  return <img alt='' src={`${projectLogoPath}/${name}`} className={className} />;
 }