MM-58849 - Fixing upload button in bot screen (#27674)

* MM-58849 - Fixing upload button in bot screen

* Updating fixes

* updating tests

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"
             />

webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx

@@ -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}

webapp/channels/src/sass/components/_forms.scss

@@ -99,6 +99,7 @@
 }
 
 .has-error {
+
     .help-block,
     .radio,
     .checkbox,
@@ -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;
+    }
+}