From 8f73f9947135bcf31753927287dbcd3dac9c4cb5 Mon Sep 17 00:00:00 2001
From: Tobias Jern <tobias.jern@aalto.fi>
Date: Sun, 12 Nov 2023 03:17:51 +0200
Subject: [PATCH] Move countodnw outside of button

---
 dance-app/src/sections/recording.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/dance-app/src/sections/recording.tsx b/dance-app/src/sections/recording.tsx
index b856815..8d4c9a4 100644
--- a/dance-app/src/sections/recording.tsx
+++ b/dance-app/src/sections/recording.tsx
@@ -114,19 +114,20 @@ const RecordingPage = ({
             Back
           </Button>
           <div className="record-button">
-            <Button
-              onClick={recordingRef.current ? countDown : initCamera}
-              variant="outlined"
-              className={classes.recordButton}
-            >
-              {showCountDown ? (
-                <span className="countdown" />
-              ) : (
-                <Typography variant="h2">
-                  {recordingRef.current ? "Record" : "Start"}
-                </Typography>
-              )}
-            </Button>
+            {showCountDown ? (
+              <div className="countdown" />
+            ) : (
+              <Button
+                onClick={recordingRef.current ? countDown : initCamera}
+                variant="outlined"
+                className={classes.recordButton}
+                sx={{ backgroundColor: "rgba(1, 191, 200, 0.1)" }}
+              >
+                  <Typography variant="h2">
+                    {recordingRef.current ? "Start" : "Get ready"}
+                  </Typography>
+              </Button>
+            )}
           </div>
         </header>
         <div className="container">