[GH-1432]: Use Button component on welcomePage.tsx (#1734)

* feat: use Button component on welcomePage.tsx

* update snapshots and fix lint errors

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap

@@ -28,8 +28,11 @@ exports[`pages/welcome Welcome Page shows Explore Page 1`] = `
       />
       <button
         class="Button filled size--large"
+        type="button"
       >
-        Explore
+        <span>
+          Explore
+        </span>
         <i
           class="CompassIcon icon-chevron-right Icon Icon--right"
         />

webapp/src/pages/welcome/welcomePage.tsx

@@ -8,6 +8,7 @@ import {useLocation, useHistory} from 'react-router-dom'
 import BoardWelcomePNG from '../../../static/boards-welcome.png'
 import BoardWelcomeSmallPNG from '../../../static/boards-welcome-small.png'
 
+import Button from '../../widgets/buttons/button'
 import CompassIcon from '../../widgets/icons/compassIcon'
 import {UserSettings} from '../../userSettings'
 
@@ -63,19 +64,22 @@ const WelcomePage = React.memo(() => {
                     alt='Boards Welcome Image'
                 />
 
-                <button
+                <Button
                     onClick={goForward}
-                    className='Button filled size--large'
+                    filled={true}
+                    size='large'
+                    icon={
+                        <CompassIcon
+                            icon='chevron-right'
+                            className='Icon Icon--right'
+                        />}
+                    rightIcon={true}
                 >
                     <FormattedMessage
                         id='WelcomePage.Explore.Button'
                         defaultMessage='Explore'
                     />
-                    <CompassIcon
-                        icon='chevron-right'
-                        className='Icon Icon--right'
-                    />
-                </button>
+                </Button>
             </div>
         </div>
     )

webapp/src/widgets/buttons/button.tsx

@@ -18,6 +18,7 @@ type Props = {
     size?: string
     danger?: boolean
     className?: string
+    rightIcon?: boolean
 }
 
 function Button(props: Props): JSX.Element {
@@ -39,8 +40,9 @@ function Button(props: Props): JSX.Element {
             title={props.title}
             onBlur={props.onBlur}
         >
-            {props.icon}
+            {!props.rightIcon && props.icon}
             <span>{props.children}</span>
+            {props.rightIcon && props.icon}
         </button>)
 }