Removed MUI buttons from VoiceRecorder component

src/Components/Patient/FileUpload.tsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Button, CircularProgress, InputLabel } from "@material-ui/core";
+import { CircularProgress, InputLabel } from "@material-ui/core";
 import CloudUploadOutlineIcon from "@material-ui/icons/CloudUpload";
 import loadable from "@loadable/component";
 import React, { useCallback, useState, useEffect } from "react";
@@ -1294,20 +1294,15 @@ export const FileUpload = (props: FileUploadProps) => {
                 <>
                   <VoiceRecorder createAudioBlob={createAudioBlob} />
                   {audioBlob && (
-                    <Button
-                      color="primary"
-                      variant="contained"
-                      type="submit"
-                      style={{ marginLeft: "auto" }}
-                      startIcon={
-                        <CloudUploadOutlineIcon>save</CloudUploadOutlineIcon>
-                      }
+                    <button
+                      className="btn btn-primary flex gap-2"
                       onClick={() => {
                         handleAudioUpload();
                       }}
                     >
-                      Save Recording
-                    </Button>
+                      <CloudUploadOutlineIcon>save</CloudUploadOutlineIcon> Save
+                      Recording
+                    </button>
                   )}
                 </>
               )}

src/Utils/VoiceRecorder.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import useRecorder from "./useRecorder";
-import { Button } from "@material-ui/core";
 import MicIcon from "@material-ui/icons/Mic";
 import MicOffIcon from "@material-ui/icons/MicOff";
 import { useEffect, useState } from "react";
@@ -28,41 +27,35 @@ export const VoiceRecorder = (props: any) => {
       <div className="text-xs">
         Please allow browser permission before you start speaking
       </div>
-      <div className="mt-2">
+      <div>
         {isRecording ? (
           <>
             <div className="space-x-2 flex">
               <div className="bg-gray-100 p-2 text-primary-700">
                 <i className="fas fa-microphone-alt animate-pulse mr-2"></i>
                 Recording...
               </div>
-              <Button
-                color="primary"
-                variant="contained"
+              <button
+                className="btn btn-primary"
                 style={{ marginLeft: "auto" }}
-                startIcon={<MicOffIcon />}
                 onClick={stopRecording}
-                disabled={!isRecording}
               >
-                Stop
-              </Button>
+                <MicOffIcon /> Stop
+              </button>
             </div>
             <div className="mx-3">
               <span>{("0" + Math.floor((time / 60000) % 60)).slice(-2)}:</span>
               <span>{("0" + Math.floor((time / 1000) % 60)).slice(-2)}</span>
             </div>
           </>
         ) : (
-          <Button
-            color="primary"
-            variant="contained"
-            style={{ marginLeft: "auto" }}
-            startIcon={<MicIcon />}
+          <button
+            className="btn btn-primary"
+            // style={{ marginLeft: "auto" }}
             onClick={startRecording}
-            disabled={isRecording}
           >
-            {audioURL ? "Re-Record" : "Record"}
-          </Button>
+            <MicIcon /> {audioURL ? "Re-Record" : "Record"}
+          </button>
         )}
       </div>
       {audioURL && (