Make record button a bit more readable

LinuzJ · Nov 11, 2023 · 9b8c905 · 9b8c905
1 parent d0f0af5
commit 9b8c905
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/dance-app/src/Recording.css b/dance-app/src/Recording.css
@@ -43,15 +43,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 128px;
   margin: auto;
   margin-top: 100px;
-  border-radius: 100px;
   z-index: 5;
 } 
 
-.record-button span {
-  padding: 50px;
+.App-header > .record-button h2 {
+  font-weight: 500;
 }
 
 .container {

diff --git a/dance-app/src/sections/recording.tsx b/dance-app/src/sections/recording.tsx
@@ -7,14 +7,17 @@ import "../Recording.css";
 import { RefVideo, Tier } from "./landing";
 import Pocketbase from "pocketbase";
 import { PageContext } from "../context/PageContext";
-import { Button, useTheme } from "@mui/material";
+import { Button, Typography, useTheme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles(() => ({
   backButton: {
     marginTop: "10px!important",
     zIndex: "10",
   },
+  recordButton: {
+    borderRadius: "150px!important",
+  },
 }));
 
 enum VideoState {
@@ -89,12 +92,18 @@ const RecordingPage = ({ refVideo, pb, goBack }: RecordingPageProps) => {
           <Button className={classes.backButton} onClick={() => goBack(null)}>
             Back
           </Button>
-          <button
-            className="record-button"
-            onClick={recordingRef.current ? record : initCamera}
+          <div className="record-button"
           >
-            <span>{recordingRef.current ? "Record" : "Start"}</span>
-          </button>
+            <Button
+              onClick={recordingRef.current ? record : initCamera}
+              variant="outlined"
+              className={classes.recordButton}
+            >
+              <Typography variant="h2">
+                {recordingRef.current ? "Record" : "Start"}
+              </Typography>
+            </Button>
+          </div>
         </header>
         <div className="container">
           {activeRecordings.map((recording) => (