From 02f7615c103a0b1f8f94f50b312eb6493dc57cdf Mon Sep 17 00:00:00 2001
From: Nishant Mittal <mittalnishant14@outlook.com>
Date: Wed, 3 Nov 2021 21:33:18 +0530
Subject: [PATCH] [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>
---
 .../__snapshots__/welcomePage.test.tsx.snap    |  5 ++++-
 webapp/src/pages/welcome/welcomePage.tsx       | 18 +++++++++++-------
 webapp/src/widgets/buttons/button.tsx          |  4 +++-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap b/webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap
index bffc88d07..cf01a17e9 100644
--- a/webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap
+++ b/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"
         />
diff --git a/webapp/src/pages/welcome/welcomePage.tsx b/webapp/src/pages/welcome/welcomePage.tsx
index f51871bdc..5309ff557 100644
--- a/webapp/src/pages/welcome/welcomePage.tsx
+++ b/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>
     )
diff --git a/webapp/src/widgets/buttons/button.tsx b/webapp/src/widgets/buttons/button.tsx
index 5efc21b26..e85d275e6 100644
--- a/webapp/src/widgets/buttons/button.tsx
+++ b/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>)
 }