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

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

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;
+    }
+}