From d8c16cdfd5a953ce640563a84bc19996bc841c13 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 23 Jul 2024 20:06:13 +0500
Subject: [PATCH] MM-58849 - Fixing upload button in bot screen (#27674)

* MM-58849 - Fixing upload button in bot screen

* Updating fixes

* updating tests
---
 .../__snapshots__/add_bot.test.tsx.snap       |  3 ++-
 .../integrations/bots/add_bot/add_bot.tsx     |  5 +++--
 .../channels/src/sass/components/_forms.scss  | 19 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap b/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
index c1df0f6e0b..a4083dbbdc 100644
--- a/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`components/integrations/bots/AddBot blank 1`] = `
             />
           </div>
           <div
-            className="btn btn-sm btn-primary btn-file"
+            className="btn btn-primary btn-file"
           >
             <MemoizedFormattedMessage
               defaultMessage="Upload Image"
@@ -97,6 +97,7 @@ exports[`components/integrations/bots/AddBot blank 1`] = `
             />
             <input
               accept=".jpeg,.jpg,.png,.bmp"
+              className="btn-file__input"
               onChange={[Function]}
               type="file"
             />
diff --git a/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx b/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
index e29053ae51..384889d006 100644
--- a/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
+++ b/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
@@ -108,7 +108,7 @@ export type State = {
     error: JSX.Element | string;
     adding: boolean;
     image: string;
-    orientationStyles: {transform: string; transformOrigin: string};
+    orientationStyles: { transform: string; transformOrigin: string };
     pictureFile: File | null | string;
 };
 
@@ -519,13 +519,14 @@ export default class AddBot extends React.PureComponent<Props, State> {
                                     {removeImageIcon}
                                 </div>
                                 <div
-                                    className='btn btn-sm btn-primary btn-file'
+                                    className='btn btn-primary btn-file'
                                 >
                                     <FormattedMessage
                                         id='bots.image.upload'
                                         defaultMessage='Upload Image'
                                     />
                                     <input
+                                        className='btn-file__input'
                                         accept={Constants.ACCEPT_STATIC_IMAGE}
                                         type='file'
                                         onChange={this.updatePicture}
diff --git a/webapp/channels/src/sass/components/_forms.scss b/webapp/channels/src/sass/components/_forms.scss
index 70227e3967..fdb0740c9b 100644
--- a/webapp/channels/src/sass/components/_forms.scss
+++ b/webapp/channels/src/sass/components/_forms.scss
@@ -99,6 +99,7 @@
 }
 
 .has-error {
+
     .help-block,
     .radio,
     .checkbox,
@@ -148,7 +149,7 @@
         padding-right: 1px;
         margin-right: 6px;
 
-        & + span {
+        &+span {
             margin-right: 4px;
             font-weight: 600;
         }
@@ -204,3 +205,19 @@ input[type="radio"]:focus,
 input[type="checkbox"]:focus {
     outline: none;
 }
+
+.btn-file {
+    position: relative;
+    overflow: hidden;
+
+    .btn-file__input {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        filter: alpha(opacity=0);
+        opacity: 0;
+    }
+}