style cleanup + tweaks

Title <> Subtitle relationships
Animat ein

client/src/features/viewers/foh/Public.jsx

@@ -2,6 +2,8 @@ import QRCode from 'react-qr-code';
 import style from './Public.module.css';
 import Paginator from '../../../common/components/views/Paginator';
 import NavLogo from '../../../common/components/nav/NavLogo';
+import { AnimatePresence, motion } from 'framer-motion';
+import TitleSide from '../../../common/components/views/TitleSide';
 
 export default function StageManager(props) {
   const { publ, title, time, events, selectedId, general } = props;
@@ -9,28 +11,69 @@ export default function StageManager(props) {
   // Format messages
   const showPubl = publ.text !== '' && publ.visible;
 
+  // motion
+  const titleVariants = {
+    hidden: {
+      x: -1500,
+    },
+    visible: {
+      x: 0,
+      transition: {
+        duration: 1,
+      },
+    },
+    exit: {
+      x: -1500,
+    },
+  };
+
   return (
     <div className={style.container__gray}>
       <NavLogo />
 
       <div className={style.eventTitle}>{general.title}</div>
-      {title.showNow && (
-        <div className={style.nowContainer}>
-          <div className={style.label}>Now</div>
-          <div className={style.nowTitle}>{title.titleNow}</div>
-          <div className={style.nowSubtitle}>{title.subtitleNow}</div>
-          <div className={style.nowPresenter}>{title.presenterNow}</div>
-        </div>
-      )}
 
-      {title.showNext && (
-        <div className={style.nextContainer}>
-          <div className={style.label}>Next</div>
-          <div className={style.nextTitle}>{title.titleNext}</div>
-          <div className={style.nextSubtitle}>{title.subtitleNext}</div>
-          <div className={style.nextPresenter}>{title.presenterNext}</div>
-        </div>
-      )}
+      <AnimatePresence>
+        {title.showNow && (
+          <motion.div
+            className={style.nowContainer}
+            key='now'
+            variants={titleVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          >
+            <TitleSide
+              label='Now'
+              type='now'
+              title={title.titleNow}
+              subtitle={title.subtitleNow}
+              presenter={title.presenterNow}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {title.showNext && (
+          <motion.div
+            className={style.nextContainer}
+            key='next'
+            variants={titleVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          >
+            <TitleSide
+              label='Next'
+              type='next'
+              title={title.titleNext}
+              subtitle={title.subtitleNext}
+              presenter={title.presenterNext}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       <div className={style.todayContainer}>
         <div className={style.label}>Today</div>