From c4e77b61f76530ca6df63bbcaa26cba6a592fc80 Mon Sep 17 00:00:00 2001
From: Dhruvik Neharia <dhruvik@appsmith.com>
Date: Fri, 7 Oct 2022 00:37:19 +0530
Subject: [PATCH] feat: Audio Recorder Reskinning (#17295)

* feat: Update spacing, font-size, font-weight, permission denied know more link for audio recorder

* feat: Change audio recorder default height from 8 to 7
---
 .../AudioRecorderWidget/component/index.tsx      | 16 +++++++++++++---
 .../src/widgets/AudioRecorderWidget/index.ts     |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/client/src/widgets/AudioRecorderWidget/component/index.tsx b/app/client/src/widgets/AudioRecorderWidget/component/index.tsx
index 52230a66d8..69e796b76c 100644
--- a/app/client/src/widgets/AudioRecorderWidget/component/index.tsx
+++ b/app/client/src/widgets/AudioRecorderWidget/component/index.tsx
@@ -49,7 +49,12 @@ const RightContainer = styled.div`
   flex-direction: column;
   justify-content: space-around;
   height: 100%;
-  padding-left: 8%;
+  padding-left: 16px;
+
+  .status {
+    font-size: 16px;
+    font-weight: bold;
+  }
 
   & > .controls {
     display: flex;
@@ -58,6 +63,10 @@ const RightContainer = styled.div`
       margin-left: 5%;
       border: none;
     }
+
+    button.close-button {
+      margin-left: auto;
+    }
   }
 `;
 
@@ -264,7 +273,8 @@ function PlayerButton(props: PlayerButtonProps) {
     default:
       return (
         <Button
-          icon={<Icon color="#F22B2B" icon="small-cross" iconSize={20} />}
+          className="close-button"
+          icon={<Icon color="#858282" icon="small-cross" iconSize={20} />}
           minimal
           onClick={onClick}
           outlined
@@ -492,7 +502,7 @@ function RecorderRight(props: RecorderRightProps) {
       <div className="status">{statusMessage}</div>
       {recorderStatus === RecorderStatusTypes.PERMISSION_DENIED ? (
         <a
-          href="https://help.sprucehealth.com/article/386-changing-permissions-for-video-and-audio-on-your-internet-browser"
+          href="https://support.google.com/chrome/answer/2693767"
           rel="noreferrer"
           target="_blank"
         >
diff --git a/app/client/src/widgets/AudioRecorderWidget/index.ts b/app/client/src/widgets/AudioRecorderWidget/index.ts
index b5b0c3bc5d..72364c3b84 100644
--- a/app/client/src/widgets/AudioRecorderWidget/index.ts
+++ b/app/client/src/widgets/AudioRecorderWidget/index.ts
@@ -11,7 +11,7 @@ export const CONFIG = {
     iconColor: "white",
     isDisabled: false,
     isVisible: true,
-    rows: 8,
+    rows: 7,
     columns: 16,
     widgetName: "AudioRecorder",
     version: 1,