From 004b31b5e728074ea6a4a4386a8e6f94b67888c2 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Mon, 26 Apr 2021 13:38:30 +0200
Subject: [PATCH] style cleanup + tweaks

Title <> Subtitle relationships
Animat ein
---
 .../src/common/components/views/TitleCard.jsx | 14 ++++
 .../components/views/TitleCard.module.css     | 41 ++++++++++
 .../src/common/components/views/TitleSide.jsx | 18 +++++
 .../components/views/TitleSide.module.css     | 54 +++++++++++++
 client/src/common/state/Empty.module.css      | 11 +--
 client/src/features/editors/Editor.jsx        | 66 ++--------------
 client/src/features/editors/Editor.module.css |  4 +
 .../features/editors/list/ActionButtons.jsx   | 48 ++++++------
 .../src/features/editors/list/EventBlock.jsx  | 10 ++-
 .../src/features/editors/list/EventList.jsx   | 43 ++++++++++-
 .../editors/list/EventListWrapper.jsx         |  6 +-
 .../src/features/editors/list/List.module.css |  2 +
 .../src/features/viewers/PreviewContainer.jsx |  9 ++-
 .../viewers/backstage/StageManager.jsx        | 75 +++++++++++++++----
 .../viewers/backstage/StageManager.module.css | 41 ----------
 client/src/features/viewers/foh/Public.jsx    | 75 +++++++++++++++----
 .../features/viewers/foh/Public.module.css    | 41 ----------
 .../viewers/presenter/PresenterView.jsx       | 72 ++++++++++++++----
 .../presenter/PresenterView.module.css        | 28 +------
 19 files changed, 404 insertions(+), 254 deletions(-)
 create mode 100644 client/src/common/components/views/TitleCard.jsx
 create mode 100644 client/src/common/components/views/TitleCard.module.css
 create mode 100644 client/src/common/components/views/TitleSide.jsx
 create mode 100644 client/src/common/components/views/TitleSide.module.css

diff --git a/client/src/common/components/views/TitleCard.jsx b/client/src/common/components/views/TitleCard.jsx
new file mode 100644
index 000000000..e6f7787e6
--- /dev/null
+++ b/client/src/common/components/views/TitleCard.jsx
@@ -0,0 +1,14 @@
+import style from './TitleCard.module.css';
+
+export default function TitleCard(props) {
+  const { label, title, subtitle, presenter } = props;
+
+  return (
+    <>
+      <div className={style.label}>{label}</div>
+      <div className={style.title}>{title}</div>
+      <div className={style.presenter}>{presenter}</div>
+      <div className={style.subtitle}>{subtitle}</div>
+    </>
+  );
+}
diff --git a/client/src/common/components/views/TitleCard.module.css b/client/src/common/components/views/TitleCard.module.css
new file mode 100644
index 000000000..9df583803
--- /dev/null
+++ b/client/src/common/components/views/TitleCard.module.css
@@ -0,0 +1,41 @@
+.label {
+  font-size: 1.3vw;
+  color: #ff7597;
+}
+
+.title,
+.subtitle,
+.presenter {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title {
+  color: #ddd;
+  font-size: 2.5vw;
+  flex: 1;
+  font-weight: 600;
+
+}
+
+.subtitle,
+.presenter {
+  color: #aaa;
+}
+
+.subtitle {
+  font-size: 1.5vw;
+  font-weight: 200;
+  margin-top: -0.8vh;
+}
+
+.presenter {
+  font-size: 2vw;
+}
+
+.title:after,
+.presenter:after,
+.subtitle:after {
+  content: '\200b';
+}
diff --git a/client/src/common/components/views/TitleSide.jsx b/client/src/common/components/views/TitleSide.jsx
new file mode 100644
index 000000000..26d360ce6
--- /dev/null
+++ b/client/src/common/components/views/TitleSide.jsx
@@ -0,0 +1,18 @@
+import style from './TitleSide.module.css';
+
+export default function TitleSide(props) {
+  const { type, label, title, subtitle, presenter } = props;
+
+  const titleStyle = type === 'next' ? style.nextTitle : style.nowTitle;
+  const subStyle = type === 'next' ? style.nextSubtitle : style.nowSubtitle;
+  const presStyle = type === 'next' ? style.nextPresenter : style.nowPresenter;
+
+  return (
+    <>
+      <div className={style.label}>{label}</div>
+      <div className={titleStyle}>{title}</div>
+      <div className={presStyle}>{presenter}</div>
+      <div className={subStyle}>{subtitle}</div>
+    </>
+  );
+}
diff --git a/client/src/common/components/views/TitleSide.module.css b/client/src/common/components/views/TitleSide.module.css
new file mode 100644
index 000000000..56049fdc9
--- /dev/null
+++ b/client/src/common/components/views/TitleSide.module.css
@@ -0,0 +1,54 @@
+.label {
+  font-size: 1.3vw;
+  color: #ff7597;
+}
+
+.nowTitle,
+.nextTitle {
+  color: #ddd;
+  font-weight: 600;
+}
+
+.nowSubtitle,
+.nowPresenter,
+.nextSubtitle,
+.nextPresenter {
+  color: #aaa;
+}
+
+.nowTitle {
+  font-size: 2.5vw;
+}
+
+.nowPresenter {
+  font-size: 2vw;
+  font-weight: 400;
+}
+
+.nowSubtitle {
+  font-size: 1.2vw;
+  margin-top: -1vh;
+}
+
+.nextTitle {
+  font-size: 2vw;
+}
+
+.nextSubtitle {
+  margin-top: -0.8vh;
+  font-size: 1.1vw;
+}
+
+.nextPresenter {
+  font-weight: 400;
+  font-size: 1.5vw;
+}
+
+.nowTitle:after,
+.nowSubtitle:after,
+.nowPresenter:after,
+.nextTitle:after,
+.nextSubtitle:after,
+.nextPresenter:after {
+  content: '\200b';
+}
diff --git a/client/src/common/state/Empty.module.css b/client/src/common/state/Empty.module.css
index 1d66c890a..6a1ceafed 100644
--- a/client/src/common/state/Empty.module.css
+++ b/client/src/common/state/Empty.module.css
@@ -1,16 +1,17 @@
 .emptyContainer {
-  text-align: center;
-  color: rgba(0, 0, 0, 0.17);
-  font-weight: 600;
-  font-size: 2em;
   width: 100%;
+  text-align: center;
 }
+
 .empty {
   width: 100%;
   margin: auto 0;
+  margin-top: 10vh;
   opacity: 0.3;
 }
 
 .text {
-  text-align: center;
+  color: rgba(0, 0, 0, 0.17);
+  font-weight: 600;
+  font-size: 2em;
 }
diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx
index 543eb49a9..8d4f55c87 100644
--- a/client/src/features/editors/Editor.jsx
+++ b/client/src/features/editors/Editor.jsx
@@ -19,7 +19,7 @@ export default function Editor() {
 
       <div className={styles.mainContainer}>
         <Box className={styles.editor}>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Event List
           </Heading>
           <NumberedText number={1} text={'Manage and select event to run'} />
@@ -29,7 +29,7 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.preview} borderRadius='0.5em' overflowX='auto'>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Preview Displays
           </Heading>
           <NumberedText number={4} text={'Realtime screen preview'} />
@@ -39,7 +39,7 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.messages}>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Display Messages
           </Heading>
           <NumberedText
@@ -52,7 +52,7 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.playback}>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Time Control
           </Heading>
           <NumberedText number={3} text={'Control Timer'} />
@@ -62,64 +62,8 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.settings}>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              gap: '2em',
-              paddingTop: '3em',
-            }}
-          >
+          <div className={styles.content}>
             <SettingsIconBtn size='md' clickhandler={onOpen} />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#3b8cd8',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#3182ce',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#2778c4',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#1d6eba',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#1364b0',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#095aa6',
-                borderRadius: '50%',
-              }}
-            />
           </div>
         </Box>
       </div>
diff --git a/client/src/features/editors/Editor.module.css b/client/src/features/editors/Editor.module.css
index 78d8275e3..3cdbd0ada 100644
--- a/client/src/features/editors/Editor.module.css
+++ b/client/src/features/editors/Editor.module.css
@@ -92,6 +92,10 @@
 
 .settings {
   grid-area: sett;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.6em;
 }
 
 .content {
diff --git a/client/src/features/editors/list/ActionButtons.jsx b/client/src/features/editors/list/ActionButtons.jsx
index 0c458113b..410e70646 100644
--- a/client/src/features/editors/list/ActionButtons.jsx
+++ b/client/src/features/editors/list/ActionButtons.jsx
@@ -1,13 +1,13 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import { FiZap, FiPlus, FiMinus, FiMinusCircle, FiClock } from 'react-icons/fi';
+import { FiZap, FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
 
 export default function ActionButtons(props) {
-  const { showDel, showAdd, showDelay, showBlock } = props;
+  const { showAdd, showDelay, showBlock } = props;
 
   const menuStyle = {
     color: '#000000',
-    backgroundColor: 'rgba(255,255,255,0.67)',
+    backgroundColor: 'rgba(255,255,255,1)',
   };
 
   return (
@@ -23,26 +23,28 @@ export default function ActionButtons(props) {
         color={'orange.500'}
       />
       <MenuList style={menuStyle}>
-        {showDel && (
-          <MenuItem icon={<FiMinus />} onClick={props.deleteHandler}>
-            Delete
-          </MenuItem>
-        )}
-        {showAdd && (
-          <MenuItem icon={<FiPlus />} onClick={props.addHandler}>
-            Event next
-          </MenuItem>
-        )}
-        {showDelay && (
-          <MenuItem icon={<FiClock />} onClick={props.delayHandler}>
-            Delay next
-          </MenuItem>
-        )}
-        {showBlock && (
-          <MenuItem icon={<FiMinusCircle />} onClick={props.blockHandler}>
-            Block next
-          </MenuItem>
-        )}
+        <MenuItem
+          icon={<FiPlus />}
+          onClick={props.addHandler}
+          isDisabled={!showAdd}
+        >
+          Event next
+        </MenuItem>
+
+        <MenuItem
+          icon={<FiClock />}
+          onClick={props.delayHandler}
+          isDisabled={!showDelay}
+        >
+          Delay next
+        </MenuItem>
+        <MenuItem
+          icon={<FiMinusCircle />}
+          onClick={props.blockHandler}
+          isDisabled={!showBlock}
+        >
+          Block next
+        </MenuItem>
       </MenuList>
     </Menu>
   );
diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/list/EventBlock.jsx
index 9f7c0e8ae..872005e0f 100644
--- a/client/src/features/editors/list/EventBlock.jsx
+++ b/client/src/features/editors/list/EventBlock.jsx
@@ -11,7 +11,6 @@ import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
 export default function EventBlock(props) {
   const { data, selected, next, delay, index, eventsHandler } = props;
-  const [visible, setVisible] = useState(false);
 
   const [more, setMore] = useState(false);
 
@@ -53,6 +52,11 @@ export default function EventBlock(props) {
     updateValues('presenter', v);
   };
 
+  const handleVisibleToggle = (v) => {
+    // setVisible(previousState => !previousState);
+    updateValues('isPublic', !data.isPublic);
+  };
+
   return (
     <div className={selected ? style.eventRowActive : style.eventRow}>
       <span className={style.drag}>
@@ -110,8 +114,8 @@ export default function EventBlock(props) {
       </div>
       <div className={style.actionOverlay}>
         <VisibleIconBtn
-          clickhandler={() => setVisible(!visible)}
-          active={visible || undefined}
+          clickhandler={handleVisibleToggle}
+          active={data.isPublic}
         />
         <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons
diff --git a/client/src/features/editors/list/EventList.jsx b/client/src/features/editors/list/EventList.jsx
index 898891b0c..b30853fb9 100644
--- a/client/src/features/editors/list/EventList.jsx
+++ b/client/src/features/editors/list/EventList.jsx
@@ -5,6 +5,7 @@ import { useSocket } from '../../../app/context/socketContext';
 import tinykeys from 'tinykeys';
 import Empty from '../../../common/state/Empty';
 import EventListItem from './EventListItem';
+import { AnimatePresence, motion } from 'framer-motion';
 
 export default function EventList(props) {
   const { events, eventsHandler } = props;
@@ -78,14 +79,38 @@ export default function EventList(props) {
     return <Empty text='No Events' />;
   }
 
+  // motion
+  const cursorVariants = {
+    hidden: {
+      scale: 0,
+    },
+    visible: {
+      scale: 1,
+      transition: {
+        duration: 0.3,
+      },
+    },
+    exit: {
+      scale: 0,
+    },
+  };
+
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
 
-  console.log('debug next id', next)
-
   return (
     <div className={style.eventContainer}>
-      {cursor === -1 && <div className={style.cursor} />}
+      <AnimatePresence>
+        {cursor === -1 && (
+          <motion.div
+            className={style.cursor}
+            variants={cursorVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          />
+        )}
+      </AnimatePresence>
 
       {events.map((e, index) => {
         if (e.type === 'delay') cumulativeDelay += e.duration;
@@ -101,7 +126,17 @@ export default function EventList(props) {
               eventsHandler={eventsHandler}
               delay={cumulativeDelay}
             />
-            {cursor === index && <div className={style.cursor} />}
+            <AnimatePresence>
+              {cursor === index && (
+                <motion.div
+                  className={style.cursor}
+                  variants={cursorVariants}
+                  initial='hidden'
+                  animate='visible'
+                  exit='exit'
+                />
+              )}
+            </AnimatePresence>
           </div>
         );
       })}
diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx
index 944163c86..57457da65 100644
--- a/client/src/features/editors/list/EventListWrapper.jsx
+++ b/client/src/features/editors/list/EventListWrapper.jsx
@@ -21,6 +21,7 @@ export default function EventListWrapper() {
     eventsNamespace,
     fetchAllEvents
   );
+
   const addEvent = useMutation(requestPost, {
     // we optimistically update here
     onMutate: async (newEvent) => {
@@ -29,10 +30,13 @@ export default function EventListWrapper() {
 
       // Snapshot the previous value
       let previousEvents = queryClient.getQueryData(eventsNamespace);
+      console.log('debug', previousEvents)
       if (previousEvents == null) {
-        await queryClient.refetchQueries();
+        refetch();
         previousEvents = queryClient.getQueryData(eventsNamespace);
       }
+      console.log('debug 2', previousEvents)
+
       // optimistically update object, temp ID until refetch
       let optimistic = [...previousEvents];
       optimistic.splice(newEvent.order, 0, {
diff --git a/client/src/features/editors/list/List.module.css b/client/src/features/editors/list/List.module.css
index 9ffb1357b..779cd3d62 100644
--- a/client/src/features/editors/list/List.module.css
+++ b/client/src/features/editors/list/List.module.css
@@ -22,4 +22,6 @@
   background-color: #ff7597;
   border-radius: 2px;
   margin: 0 auto;
+  /* transition: 1s;
+  transition-property: all; */
 }
diff --git a/client/src/features/viewers/PreviewContainer.jsx b/client/src/features/viewers/PreviewContainer.jsx
index 8e0b2132f..d682bac2e 100644
--- a/client/src/features/viewers/PreviewContainer.jsx
+++ b/client/src/features/viewers/PreviewContainer.jsx
@@ -21,7 +21,14 @@ export default function PreviewContainer() {
 
       <div className={styles.previewItem}>
         <IFrameLoader title='Audience' src={`${serverURL}/public`} />
-        <div className={styles.label}>Audience</div>
+        <a
+          href={`${serverURL}/public`}
+          target='_blank'
+          rel='noreferrer'
+          className={styles.label}
+        >
+          Audience
+        </a>
       </div>
 
       <div className={styles.previewItem}>
diff --git a/client/src/features/viewers/backstage/StageManager.jsx b/client/src/features/viewers/backstage/StageManager.jsx
index c7ab9501a..6e837aa42 100644
--- a/client/src/features/viewers/backstage/StageManager.jsx
+++ b/client/src/features/viewers/backstage/StageManager.jsx
@@ -4,6 +4,8 @@ import style from './StageManager.module.css';
 import Paginator from '../../../common/components/views/Paginator';
 import NavLogo from '../../../common/components/nav/NavLogo';
 import { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import TitleSide from '../../../common/components/views/TitleSide';
 
 export default function StageManager(props) {
   const { publ, title, time, backstageEvents, selectedId, general } = props;
@@ -39,28 +41,69 @@ export default function StageManager(props) {
       ? formatDisplay(time.currentSeconds, true)
       : '';
 
+  // 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>
diff --git a/client/src/features/viewers/backstage/StageManager.module.css b/client/src/features/viewers/backstage/StageManager.module.css
index f836c4b3b..5e4f911c1 100644
--- a/client/src/features/viewers/backstage/StageManager.module.css
+++ b/client/src/features/viewers/backstage/StageManager.module.css
@@ -113,47 +113,6 @@
   border-radius: 0 2vw 2vw 0;
 }
 
-.nowTitle,
-.nextTitle {
-  color: #ddd;
-  font-weight: 400;
-}
-
-.nowSubtitle,
-.nowPresenter,
-.nextSubtitle,
-.nextPresenter {
-  color: #aaa;
-}
-
-.nowTitle {
-  font-size: 2.5vw;
-}
-
-.nowSubtitle,
-.nowPresenter {
-  font-size: 2vw;
-}
-
-.nextTitle {
-  font-size: 2vw;
-}
-
-.nextSubtitle,
-.nextPresenter {
-  color: #aaa;
-  font-size: 1.5vw;
-}
-
-.nowTitle:after,
-.nowSubtitle:after,
-.nowPresenter:after,
-.nextTitle:after,
-.nextSubtitle:after,
-.nextPresenter:after {
-  content: '\200b';
-}
-
 /* =================== SCHEDULE ===================*/
 
 .todayContainer {
diff --git a/client/src/features/viewers/foh/Public.jsx b/client/src/features/viewers/foh/Public.jsx
index d4ddd5fa5..916cd4a68 100644
--- a/client/src/features/viewers/foh/Public.jsx
+++ b/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>
diff --git a/client/src/features/viewers/foh/Public.module.css b/client/src/features/viewers/foh/Public.module.css
index 3ca997d69..97518aca7 100644
--- a/client/src/features/viewers/foh/Public.module.css
+++ b/client/src/features/viewers/foh/Public.module.css
@@ -112,47 +112,6 @@
   border-radius: 0 2vw 2vw 0;
 }
 
-.nowTitle,
-.nextTitle {
-  color: #ddd;
-  font-weight: 400;
-}
-
-.nowSubtitle,
-.nowPresenter,
-.nextSubtitle,
-.nextPresenter {
-  color: #aaa;
-}
-
-.nowTitle {
-  font-size: 2.5vw;
-}
-
-.nowSubtitle,
-.nowPresenter {
-  font-size: 2vw;
-}
-
-.nextTitle {
-  font-size: 2vw;
-}
-
-.nextSubtitle,
-.nextPresenter {
-  color: #aaa;
-  font-size: 1.5vw;
-}
-
-.nowTitle:after,
-.nowSubtitle:after,
-.nowPresenter:after,
-.nextTitle:after,
-.nextSubtitle:after,
-.nextPresenter:after {
-  content: '\200b';
-}
-
 /* =================== SCHEDULE ===================*/
 
 .todayContainer {
diff --git a/client/src/features/viewers/presenter/PresenterView.jsx b/client/src/features/viewers/presenter/PresenterView.jsx
index c7b8aea07..406fb322d 100644
--- a/client/src/features/viewers/presenter/PresenterView.jsx
+++ b/client/src/features/viewers/presenter/PresenterView.jsx
@@ -1,6 +1,8 @@
+import { AnimatePresence, motion } from 'framer-motion';
 import Countdown from '../../../common/components/countdown/Countdown';
 import MyProgressBar from '../../../common/components/myProgressBar/MyProgressBar';
 import NavLogo from '../../../common/components/nav/NavLogo';
+import TitleCard from '../../../common/components/views/TitleCard';
 import style from './PresenterView.module.css';
 
 export default function PresenterView(props) {
@@ -9,6 +11,22 @@ export default function PresenterView(props) {
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playstate === 'start';
 
+  // motion
+  const titleVariants = {
+    hidden: {
+      y: 500,
+    },
+    visible: {
+      y: 0,
+      transition: {
+        duration: 1,
+      },
+    },
+    exit: {
+      y: 500,
+    },
+  };
+
   return (
     <div
       className={
@@ -54,23 +72,45 @@ export default function PresenterView(props) {
         </div>
       )}
 
-      {title.showNow && (
-        <div className={style.nowContainer}>
-          <div className={style.label}>Now</div>
-          <div className={style.title}>{title.titleNow}</div>
-          <div className={style.subtitle}>{title.subtitleNow}</div>
-          <div className={style.presenter}>{title.presenterNow}</div>
-        </div>
-      )}
+      <AnimatePresence>
+        {title.showNow && (
+          <motion.div
+            className={style.nowContainer}
+            key='now'
+            variants={titleVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          >
+            <TitleCard
+              label='Now'
+              title={title.titleNow}
+              subtitle={title.subtitleNow}
+              presenter={title.presenterNow}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
 
-      {title.showNext && (
-        <div className={style.nextContainer}>
-          <div className={style.label}>Next</div>
-          <div className={style.title}>{title.titleNext}</div>
-          <div className={style.subtitle}>{title.subtitleNext}</div>
-          <div className={style.presenter}>{title.presenterNext}</div>
-        </div>
-      )}
+      <AnimatePresence>
+        {title.showNext && (
+          <motion.div
+            className={style.nextContainer}
+            key='next'
+            variants={titleVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          >
+            <TitleCard
+              label='Next'
+              title={title.titleNext}
+              subtitle={title.subtitleNext}
+              presenter={title.presenterNext}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/client/src/features/viewers/presenter/PresenterView.module.css b/client/src/features/viewers/presenter/PresenterView.module.css
index ffc353d1f..2f4be9bae 100644
--- a/client/src/features/viewers/presenter/PresenterView.module.css
+++ b/client/src/features/viewers/presenter/PresenterView.module.css
@@ -57,32 +57,6 @@
   grid-area: next;
 }
 
-.title,
-.subtitle,
-.presenter {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.title {
-  color: #ddd;
-  font-size: 2.5vw;
-  flex: 1;
-}
-
-.subtitle,
-.presenter {
-  color: #aaa;
-  font-size: 2vw;
-}
-
-.title:after,
-.presenter:after,
-.subtitle:after {
-  content: '\200b';
-}
-
 /* =================== MAIN ===================*/
 
 .timerContainer,
@@ -111,11 +85,13 @@
   width: 80%;
   margin: 0 auto;
   opacity: 1;
+  transition: 0.5s;
 }
 
 .countdownPaused,
 .progressContainerPaused {
   opacity: 0.6;
+  transition: 0.5s;
 }
 
 .container__grayFinished {