style: alpha4 style tweaks (#299)

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -152,9 +152,7 @@ export default function Backstage(props) {
       </div>
 
       <div className='info'>
-        <div className='qr'>
-          {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' />}
-        </div>
+        {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' className='qr' />}
         {general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
       </div>
     </div>

apps/client/src/features/viewers/public/Public.scss

@@ -99,6 +99,7 @@
     grid-area: info;
     display: flex;
     gap: max(1vw, 16px);
+    min-height: max(calc(100vh / 15), 128px);
 
     &__message {
       font-size: clamp(16px, 1.5vw, 24px);

apps/client/src/features/viewers/public/Public.tsx

@@ -116,7 +116,7 @@ export default function Public(props) {
       </div>
 
       <div className='info'>
-        <div className='qr'>{general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' />}</div>
+        {general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' className='qr' />}
         {general.publicInfo && <div className='info__message'>{general.publicInfo}</div>}
       </div>
     </div>

apps/client/src/features/viewers/timer/Timer.scss

@@ -75,7 +75,7 @@
 
     .end-message {
       text-align: center;
-      font-size: 12vw;
+      font-size: 11.5vw;
       line-height: 0.9em;
       font-weight: 600;
       color: $timer-finished-color;

apps/client/src/features/viewers/timer/Timer.tsx

@@ -65,14 +65,10 @@ export default function Timer(props) {
   const showProgress = time.playback !== 'stop';
   const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''}`;
 
- return (
-    <div
-      className={time.finished ? `${baseClasses} stage-timer--finished` : baseClasses}
-      data-testid='timer-view'
-    >
+  return (
+    <div className={time.finished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
       <NavigationMenu />
-      <div
-        className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
+      <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
         <div className='message'>{pres.text}</div>
       </div>
 
@@ -84,31 +80,22 @@ export default function Timer(props) {
       <div className='timer-container'>
         {time.finished ? (
           <div className='end-message'>
-            {!general.endMessage ? (
-              <TimerDisplay time={time.current} hideZeroHours />
-            ) : (
-              general.endMessage
-            )}
+            {!general.endMessage ? <TimerDisplay time={time.current} hideZeroHours /> : general.endMessage}
           </div>
         ) : (
-          <TimerDisplay
-            time={normalisedTime}
-            hideZeroHours
-            className={isPlaying ? 'timer' : 'timer--paused'} />
+          <TimerDisplay time={normalisedTime} hideZeroHours className={isPlaying ? 'timer' : 'timer--paused'} />
         )}
       </div>
 
       <ProgressBar
-        className={
-          isPlaying ? 'progress-container' : 'progress-container progress-container--paused'
-        }
+        className={isPlaying ? 'progress-container' : 'progress-container progress-container--paused'}
         now={time.current}
         complete={time.duration}
         hidden={!showProgress}
       />
 
       <AnimatePresence>
-        {title.showNow && (
+        {title.showNow && !time.finished && (
           <motion.div
             className='event now'
             key='now'
@@ -117,12 +104,7 @@ export default function Timer(props) {
             animate='visible'
             exit='exit'
           >
-            <TitleCard
-              label='now'
-              title={title.titleNow}
-              subtitle={title.subtitleNow}
-              presenter={title.presenterNow}
-            />
+            <TitleCard label='now' title={title.titleNow} subtitle={title.subtitleNow} presenter={title.presenterNow} />
           </motion.div>
         )}
       </AnimatePresence>