cleanup + small styling

src/app/sampleData.js

@@ -1,6 +1,11 @@
 const dummy = new Date();
 
 export const sampleData = {
+  message: {
+    text: 'Hurry Up!',
+    color: '#F00',
+    active: false,
+  },
   events: [
     {
       id: '1',
@@ -11,11 +16,6 @@ export const sampleData = {
       timeEnd: dummy,
       clockStarted: dummy,
       timerDuration: 10,
-      message: {
-        text: 'Hurry Up!',
-        color: '#F00',
-        active: false,
-      },
     },
     {
       id: '2',
@@ -26,11 +26,6 @@ export const sampleData = {
       timeEnd: dummy,
       clockStarted: dummy,
       timerDuration: 10,
-      message: {
-        text: 'Hurry Up!',
-        color: '#F00',
-        active: false,
-      },
     },
   ],
 };

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

@@ -2,7 +2,9 @@
 
 .countdownClock {
   font-family: 'Open Sans', sans-serif;
-  font-size: 25vw;
+  font-size: 18vw;
+  margin-top: 6vh;
+  margin-bottom: 5vh;
   text-align: center;
   letter-spacing: 0.125em;
   line-height: 0.9;

src/common/components/myProgressBar/MyProgressBar.module.css

@@ -1,5 +1,7 @@
 .progress {
   padding: 6px;
+  width: 90%;
+  margin: 0 auto;
   background: rgba(0, 0, 0, 0.25);
   border-radius: 6px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
@@ -9,10 +11,10 @@
   height: 18px;
   background: linear-gradient(
     90deg,
-    rgba(255, 0, 0, 1) 0%,
+    rgb(145, 255, 191, 1) 0%,
-    rgba(255, 149, 0, 1) 20%,
+    rgba(145, 255, 191, 0.8) 20%,
-    rgba(255, 244, 0, 0.8287037037037037) 50%,
+    rgba(145, 255, 191, 0.5) 50%,
-    rgba(0, 255, 156, 0.7083333333333333) 100%
+    rgba(145, 255, 191, 0.2) 100%
   );
   border-radius: 4px;
   transition: 0.4s linear;

src/common/input/ChakraInput.jsx

@@ -19,4 +19,4 @@ export default function ChakraInput(props) {
       }}
     </Field>
   );
-}
+}

src/features/editors/Editor.jsx

@@ -74,7 +74,7 @@ export default function Editor() {
         </div>
       </Box>
 
-      <Box className={styles.editor} borderRadius='0.5em'>
+      <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
         <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
         <NumberedText number={3} text={'Preview layout'} />
         <div className={styles.content}>

src/features/form/EventForm.jsx

@@ -19,11 +19,6 @@ export default function EventForm(props) {
     timeStart: today,
     timeEnd: today,
     timerDuration: 30,
-    message: {
-      text: '',
-      color: '',
-      active: false,
-    },
   };
 
   const validationSchema = Yup.object({

src/features/viewers/PreviewContainer.module.css

@@ -1,17 +1,21 @@
 .previewContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1em;
+}
+
+.previewItem {
+  width: 47%;
 }
 
 .preview {
-  margin-top: 2em;
-  width: 95%;
   aspect-ratio: 16 / 9;
-  background-color: #222;
+  border-color: #222;
+  background-color: #888;
 }
 
 .label {
-  padding: 1em;
+  padding: 0.1em;
-  align-self: flex-end;
 }