Backstage review

apps/client/src/AppRouter.tsx

@@ -27,9 +27,9 @@ const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-tim
 const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
 const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
 
-const Backstage = React.lazy(() => import('./features/viewers/backstage/Backstage'));
+const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
 const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
-const Public = React.lazy(() => import('./features/viewers/public/Public'));
+const Public = React.lazy(() => import('./views/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
 const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));

apps/client/src/common/components/progress-bar/ProgressBar.scss

@@ -9,10 +9,6 @@ $progress-bar-br: 3px;
   border-radius: $progress-bar-br;
   background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
   overflow: clip;
-
-  &--hidden {
-    display: none;
-  }
 }
 
 .progress-bar__indicator {

apps/client/src/common/components/progress-bar/ProgressBar.tsx

@@ -7,16 +7,15 @@ import './ProgressBar.scss';
 interface ProgressBarProps {
   current: MaybeNumber;
   duration: MaybeNumber;
-  hidden?: boolean;
   className?: string;
 }
 
 export default function ProgressBar(props: ProgressBarProps) {
-  const { current, duration, hidden, className = '' } = props;
+  const { current, duration, className } = props;
   const progress = getProgress(current, duration);
 
   return (
-    <div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
+    <div className={`progress-bar__bg ${className}`}>
       <div className='progress-bar__indicator' style={{ width: `${progress}%` }} />
     </div>
   );

apps/client/src/common/components/state/Empty.module.scss

@@ -5,7 +5,7 @@
 
   .empty {
     width: 100%;
-    opacity: 0.6;
+    opacity: 0.8;
   }
 
   .text {

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>