From 3411372b1b9a57e301c952b7eeaa4435f7b6eca2 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Tue, 23 Mar 2021 22:53:23 +0100
Subject: [PATCH] cleanup + small styling

---
 src/app/sampleData.js                          | 15 +++++----------
 .../components/countdown/Countdown.module.css  |  4 +++-
 .../myProgressBar/MyProgressBar.module.css     | 10 ++++++----
 src/common/input/ChakraInput.jsx               |  2 +-
 src/features/editors/Editor.jsx                |  2 +-
 src/features/form/EventForm.jsx                |  5 -----
 .../viewers/PreviewContainer.module.css        | 18 +++++++++++-------
 7 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/app/sampleData.js b/src/app/sampleData.js
index 61b7fc228..03a0e1b39 100644
--- a/src/app/sampleData.js
+++ b/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,
-      },
     },
   ],
 };
diff --git a/src/common/components/countdown/Countdown.module.css b/src/common/components/countdown/Countdown.module.css
index 135e195d7..ae4f59410 100644
--- a/src/common/components/countdown/Countdown.module.css
+++ b/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;
diff --git a/src/common/components/myProgressBar/MyProgressBar.module.css b/src/common/components/myProgressBar/MyProgressBar.module.css
index db4cd7479..0fbab629f 100644
--- a/src/common/components/myProgressBar/MyProgressBar.module.css
+++ b/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%,
-    rgba(255, 149, 0, 1) 20%,
-    rgba(255, 244, 0, 0.8287037037037037) 50%,
-    rgba(0, 255, 156, 0.7083333333333333) 100%
+    rgb(145, 255, 191, 1) 0%,
+    rgba(145, 255, 191, 0.8) 20%,
+    rgba(145, 255, 191, 0.5) 50%,
+    rgba(145, 255, 191, 0.2) 100%
   );
   border-radius: 4px;
   transition: 0.4s linear;
diff --git a/src/common/input/ChakraInput.jsx b/src/common/input/ChakraInput.jsx
index c282b2f65..9fec5bccf 100644
--- a/src/common/input/ChakraInput.jsx
+++ b/src/common/input/ChakraInput.jsx
@@ -19,4 +19,4 @@ export default function ChakraInput(props) {
       }}
     </Field>
   );
-}
+}
\ No newline at end of file
diff --git a/src/features/editors/Editor.jsx b/src/features/editors/Editor.jsx
index e99f64dfa..60c924eac 100644
--- a/src/features/editors/Editor.jsx
+++ b/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}>
diff --git a/src/features/form/EventForm.jsx b/src/features/form/EventForm.jsx
index 0a5ffb14b..02c855be0 100644
--- a/src/features/form/EventForm.jsx
+++ b/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({
diff --git a/src/features/viewers/PreviewContainer.module.css b/src/features/viewers/PreviewContainer.module.css
index ca7bf45ff..7ff416608 100644
--- a/src/features/viewers/PreviewContainer.module.css
+++ b/src/features/viewers/PreviewContainer.module.css
@@ -1,17 +1,21 @@
 .previewContainer {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  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;
-  align-self: flex-end;
+  padding: 0.1em;
 }