style changes

client/package.json

@@ -14,6 +14,7 @@
     "framer-motion": "^4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

client/src/common/components/countdown/Countdown.jsx

@@ -5,14 +5,13 @@ function display(seconds) {
   const hours = seconds / 3600;
   const minutes = (seconds % 3600) / 60;
 
-  if (hours < 1) return [minutes, seconds % 60].map(format).join(':');
-  else return [hours, minutes, seconds % 60].map(format).join(':');
+  return [hours, minutes, seconds % 60].map(format).join(':');
 }
 
 export default function Countdown({ time, small }) {
   return (
     <div className={small ? styles.countdownClockSmall : styles.countdownClock}>
-      {time === null ? '- -:- -' : display(time * 60)}
+      {time === null ? '-- : -- : --' : display(time)}
     </div>
   );
 }

client/src/common/components/countdown/Countdown.module.css

@@ -1,21 +1,26 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
 
-.countdownClock {
+/* Common */
+.countdownClock,
+.countdownClockSmall {
   font-family: 'Open Sans', sans-serif;
+  line-height: 0.9;
+}
+
+/* Viewers */
+.countdownClock {
   font-size: 18vw;
   margin-top: 6vh;
   margin-bottom: 5vh;
   text-align: center;
   letter-spacing: 0.125em;
-  line-height: 0.9;
 }
 
+/* Editor */
 .countdownClockSmall {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 6em;
+  font-size: 4em;
   text-align: center;
   letter-spacing: 0.1em;
-  line-height: 0.9;
   font-weight: 600;
   color: #333;
 }

client/src/features/control/PlaybackControl.jsx

@@ -1,7 +1,13 @@
-import { Button } from '@chakra-ui/button';
+import { IconButton } from '@chakra-ui/button';
 import style from './PlaybackControl.module.css';
 import Countdown from '../../common/components/countdown/Countdown';
-import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
+import {
+  FiPlay,
+  FiPause,
+  FiSkipBack,
+  FiSkipForward,
+  FiClock,
+} from 'react-icons/fi';
 
 // BUTTON DEFINITION
 const defProps = {
@@ -9,8 +15,9 @@ const defProps = {
   variant: 'outline',
 };
 
-const bigSize = 120;
-
+const size = {
+  width: 90,
+};
 export default function PlaybackControl(props) {
   const { time, roll } = props;
 
@@ -20,57 +27,47 @@ export default function PlaybackControl(props) {
         <div className={style.timer}>
           <Countdown time={time} small />
         </div>
+        <div className={style.start}>
+          <span className={style.tag}>Started at </span>
+          <span className={style.time}>12:01</span>
+        </div>
+        <div className={style.finish}>
+          <span className={style.tag}>Finish at </span>
+          <span className={style.time}>13:01</span>
+        </div>
       </div>
+
       <div className={style.playbackContainer}>
-        <Button
-          width={bigSize}
+        <IconButton
+          {...size}
+          icon={<FiPlay />}
           colorScheme='green'
-          className={style.start}
-          disabled={roll}
           onClick={() => props.playbackControl('play')}
-        >
-          Start
-        </Button>
-        <Button
-          width={bigSize}
+        />
+        <IconButton
+          {...size}
+          icon={<FiPause />}
           colorScheme='orange'
-          className={style.pause}
-          disabled={roll}
           onClick={() => props.playbackControl('pause')}
-        >
-          Pause
-        </Button>
-      </div>
-      <div className={style.trackContainer}>
-        <Button
-          width={bigSize}
+        />
+        <IconButton
+          {...size}
           {...defProps}
-          leftIcon={<ArrowBackIcon />}
-          className={style.prev}
-          disabled={roll}
+          icon={<FiSkipBack />}
           onClick={() => props.playbackControl('previous')}
-        >
-          Prev
-        </Button>
-        <Button
-          width={bigSize}
+        />
+        <IconButton
+          {...size}
           {...defProps}
-          rightIcon={<ArrowForwardIcon />}
-          className={style.next}
-          disabled={roll}
+          icon={<FiSkipForward />}
           onClick={() => props.playbackControl('next')}
-        >
-          Next
-        </Button>
-        <Button
-          width={bigSize}
+        />
+        <IconButton
+          {...size}
+          icon={<FiClock />}
           colorScheme='blue'
-          className={style.reset}
           onClick={() => props.playbackControl('roll')}
-          disabled
-        >
-          Roll
-        </Button>
+        />
       </div>
     </div>
   );

client/src/features/control/PlaybackControl.module.css

@@ -1,43 +1,54 @@
 .mainContainer {
-  width: 90%;
+  width: 100%;
   display: flex;
   margin: 0 auto;
   flex-direction: column;
   gap: 5px;
 }
 
+.timeContainer,
+.playbackContainer {
+  border: 1px solid rgb(226, 232, 240);
+  border-radius: 8px;
+  padding: 0.5em;
+}
+
 .timeContainer {
   display: grid;
-  gap: 5px;
   grid-template-areas:
-    'timer plus1 plus5'
-    'timer minu1 minu5';
-  grid-template-columns: auto 50px 50px;
+    'clk clk ...'
+    'sta fin ...';
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 1fr 1fr 80px;
+  gap: 5px;
+  justify-items: start;
 }
 
 .timer {
-  grid-area: timer;
+  grid-area: clk;
 }
 
-.plus1 {
-  grid-area: plus1;
+.start {
+  grid-area: sta;
 }
 
-.plus5 {
-  grid-area: plus5;
+.finish {
+  grid-area: fin;
 }
 
-.minu1 {
-  grid-area: minu1;
+.time {
+  color: #333;
+  font-size: 1.1em;
 }
 
-.minu5 {
-  grid-area: minu5;
+.tag {
+  color: #666;
+  font-size: 0.9em;
 }
 
-.playbackContainer,
-.trackContainer {
+.playbackContainer {
   display: flex;
   justify-content: space-evenly;
   padding-top: 0.5em;
+  gap: 10px;
 }

client/yarn.lock

@@ -9944,6 +9944,11 @@ react-focus-lock@2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"