Removed MUI buttons from VoiceRecorder component (#4712)

* removed MUI buttons * added care icons * remove classnames from ButtonV2 --------- Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
coronasafe · Feb 6, 2023 · 82caf64 · 82caf64
1 parent ad20bc0
commit 82caf64
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 33 deletions.
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
@@ -1,6 +1,5 @@
 import axios from "axios";
-import { Button, CircularProgress, InputLabel } from "@material-ui/core";
-import CloudUploadOutlineIcon from "@material-ui/icons/CloudUpload";
+import { CircularProgress, InputLabel } from "@material-ui/core";
 import loadable from "@loadable/component";
 import React, { useCallback, useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -1294,20 +1293,14 @@ export const FileUpload = (props: FileUploadProps) => {
                 <>
                   <VoiceRecorder createAudioBlob={createAudioBlob} />
                   {audioBlob && (
-                    <Button
-                      color="primary"
-                      variant="contained"
-                      type="submit"
-                      style={{ marginLeft: "auto" }}
-                      startIcon={
-                        <CloudUploadOutlineIcon>save</CloudUploadOutlineIcon>
-                      }
+                    <ButtonV2
                       onClick={() => {
                         handleAudioUpload();
                       }}
                     >
+                      <CareIcon className={"care-l-cloud-upload text-xl"} />
                       Save Recording
-                    </Button>
+                    </ButtonV2>
                   )}
                 </>
               )}

diff --git a/src/Utils/VoiceRecorder.tsx b/src/Utils/VoiceRecorder.tsx
@@ -1,9 +1,8 @@
 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";
+import ButtonV2 from "../Components/Common/components/ButtonV2";
+import CareIcon from "../CAREUI/icons/CareIcon";
 export const VoiceRecorder = (props: any) => {
   const { createAudioBlob } = props;
   const [audioURL, isRecording, startRecording, stopRecording, newBlob] =
@@ -28,41 +27,29 @@ 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"
-                style={{ marginLeft: "auto" }}
-                startIcon={<MicOffIcon />}
-                onClick={stopRecording}
-                disabled={!isRecording}
-              >
+              <ButtonV2 onClick={stopRecording}>
+                <CareIcon className={"care-l-microphone-slash text-lg"} />
                 Stop
-              </Button>
+              </ButtonV2>
             </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 />}
-            onClick={startRecording}
-            disabled={isRecording}
-          >
+          <ButtonV2 onClick={startRecording}>
+            <CareIcon className={"care-l-microphone text-lg"} />
             {audioURL ? "Re-Record" : "Record"}
-          </Button>
+          </ButtonV2>
         )}
       </div>
       {audioURL && (