Move countodnw outside of button

LinuzJ · Nov 12, 2023 · 8f73f99 · 8f73f99
1 parent 4948e79
commit 8f73f99
Showing 1 changed file with 14 additions and 13 deletions.
diff --git 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">