Modifying The Record/Stop Button Styles and Location

[unpredict2ble]

I was reading some of the previous issues and I saw one where someone asked about how to change the big red record button, etc. You provided a link to Customizing UI in the ReadMe

After scrolling down, I see the renderActions with a link to the default implementation render actions implementation

My question is....How exactly do I modify the RecordButton and StopButton color, as well as the position using that information?

[STU-DESIGNER]

I am using MUI for any SVG

renderActions={(r) => {
          console.log(r);
          const renderContent = (r) => {
            const shouldUseVideoInput =
              !r.isInlineRecordingSupported && r.isVideoInputSupported;
  
            if (
              (!r.isInlineRecordingSupported && !r.isVideoInputSupported) ||
              r.thereWasAnError ||
              r.isConnecting ||
              r.isRunningCountdown
            ) {
              return null;
            }
  
            if (r.isReplayingVideo) {
              return (
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center"
                  }}
                >
                  <button
                    style={{
                      borderRadius: "50%",
                      height: "75px",
                      width: "75px",
                      border: "none",
                      backgroundColor: red[500],
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                      marginRight: "10px"
                    }}
                    type="button"
                    onClick={r.onStopReplaying}
                    data-qa="start-replaying"
                  >
                    <RedoRoundedIcon sx={{ color: red[100], fontSize: 50 }} />
                  </button>
                  <button
                    style={{
                      borderRadius: "50%",
                      height: "75px",
                      width: "75px",
                      border: "none",
                      backgroundColor: green[500],
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center"
                    }}
                    type="button"
                    onClick={(e) => {
                      console.log('Attempting Upload..')
                    }}
                  >
                    <UploadRoundedIcon sx={{ color: green[100], fontSize: 50 }} />
                  </button>
                </div>
              );
            }
  
            if (r.isRecording) {
              return (
                <button
                  style={{
                    borderRadius: "50%",
                    height: "75px",
                    width: "75px",
                    border: "none",
                    backgroundColor: red[500],
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center"
                  }}
                  type="button"
                  onClick={r.onStopRecording}
                  data-qa="stop-recording"
                >
                  <StopRoundedIcon sx={{ color: red[100], fontSize: 50 }} />
                </button>
              );
            }
  
            if (r.isCameraOn && r.streamIsReady) {
              return (
                <button
                  style={{
                    borderRadius: "50%",
                    height: "75px",
                    width: "75px",
                    border: "none",
                    backgroundColor: red[500],
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center"
                  }}
                  type="button"
                  onClick={r.onStartRecording}
                  data-qa="start-recording"
                >
                  <CircleRoundedIcon sx={{ color: red[400], fontSize: 70 }} />
                </button>
              );
            }
  
            if (r.useVideoInput) {
              return (
                <button
                  type="button"
                  onClick={r.onOpenVideoInput}
                  data-qa="open-input"
                >
                  upload
                </button>
              );
            }
  
            return shouldUseVideoInput ? (
              <button
                type="button"
                onClick={r.onOpenVideoInput}
                data-qa="open-input"
              >
                record a video
              </button>
            ) : (
              <button
                type="button"
                onClick={r.onTurnOnCamera}
                data-qa="turn-on-camera"
              >
                turn on my camera
              </button>
            );
          };
  
          return (
            <div>
              {r.isRecording && <Timer timeLimit={r.timeLimit} />}
              {r.isRunningCountdown && (
                <Countdown countdownTime={r.countdownTime} />
              )}
              <ActionsWrapper>{renderContent(r)}</ActionsWrapper>
            </div>
          );
        }}