update button styling on home/asset page (#8800)

app/_locales/en/messages.json

@@ -1308,6 +1308,9 @@
   "selectType": {
     "message": "Select Type"
   },
+  "buy": {
+    "message": "Buy"
+  },
   "send": {
     "message": "Send"
   },

ui/app/components/app/wallet-overview/eth-overview.js

@@ -15,6 +15,7 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
 import { showModal } from '../../../store/actions'
 import { isBalanceCached, getSelectedAccount, getShouldShowFiat } from '../../../selectors/selectors'
+import PaperAirplane from '../../ui/icon/paper-airplane-icon'
 
 const EthOverview = ({ className }) => {
   const dispatch = useDispatch()
@@ -78,18 +79,21 @@ const EthOverview = ({ className }) => {
       buttons={(
         <>
           <Button
-            type="secondary"
+            type="primary"
             className="eth-overview__button"
+            rounded
             onClick={() => {
               depositEvent()
               dispatch(showModal({ name: 'DEPOSIT_ETHER' }))
             }}
           >
-            { t('deposit') }
+            { t('buy') }
           </Button>
           <Button
             type="secondary"
             className="eth-overview__button"
+            rounded
+            icon={<PaperAirplane color="#037DD6" size={20} />}
             onClick={() => {
               sendEvent()
               history.push(SEND_ROUTE)

ui/app/components/app/wallet-overview/index.scss

@@ -27,6 +27,17 @@
   }
 }
 
+%asset-buttons {
+  min-width: initial;
+  width: 100px;
+
+  &:not(:last-child) {
+    margin-right: 12px;
+  }
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
 .eth-overview {
   &__balance {
     display: flex;
@@ -73,12 +84,7 @@
   }
 
   &__button {
-    min-width: initial;
+    @extend %asset-buttons;
-    width: 100px;
-
-    &:not(:last-child) {
-      margin-right: 12px;
-    }
   }
 }
 
@@ -110,11 +116,6 @@
   }
 
   &__button {
-    min-width: initial;
+    @extend %asset-buttons;
-    width: 100px;
-
-    &:not(:last-child) {
-      margin-right: 12px;
-    }
   }
 }

ui/app/components/app/wallet-overview/token-overview.js

@@ -14,6 +14,7 @@ import { useTokenTracker } from '../../../hooks/useTokenTracker'
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'
 import { getAssetImages } from '../../../selectors/selectors'
 import { updateSendToken } from '../../../store/actions'
+import PaperAirplane from '../../ui/icon/paper-airplane-icon'
 
 const TokenOverview = ({ className, token }) => {
   const dispatch = useDispatch()
@@ -57,6 +58,8 @@ const TokenOverview = ({ className, token }) => {
         <Button
           type="secondary"
           className="token-overview__button"
+          rounded
+          icon={<PaperAirplane color="#037DD6" size={20} />}
           onClick={() => {
             sendTokenEvent()
             dispatch(updateSendToken(token))

ui/app/components/ui/button/button.component.js

@@ -25,7 +25,7 @@ const typeHash = {
   'first-time': CLASSNAME_FIRST_TIME,
 }
 
-const Button = ({ type, submit, large, children, rounded, className, ...buttonProps }) => (
+const Button = ({ type, submit, large, children, icon, rounded, className, ...buttonProps }) => (
   <button
     type={submit ? 'submit' : undefined}
     className={classnames(
@@ -37,6 +37,7 @@ const Button = ({ type, submit, large, children, rounded, className, ...buttonPr
     )}
     { ...buttonProps }
   >
+    {icon && <span className="button__icon">{icon}</span>}
     { children }
   </button>
 )
@@ -48,6 +49,7 @@ Button.propTypes = {
   rounded: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node,
+  icon: PropTypes.node,
 }
 
 Button.defaultProps = {

ui/app/components/ui/button/buttons.scss

@@ -66,6 +66,12 @@ $warning-light-orange: #F8B588;
 
 .button {
   @extend %button;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: 4px;
+  }
 }
 
 .btn-secondary {

ui/app/components/ui/icon/icon.stories.js

@@ -51,3 +51,7 @@ export const preloader = () => (
     size={number('size', 40)}
   />
 )
+
+export const PaperAirplane = () => (
+  <PaperAirplane color={color('color', '#2F80ED')} size={number('size', 40)} />
+)

ui/app/components/ui/icon/paper-airplane-icon.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function PaperAirplane ({ size, className, color }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.6001 0.0846465C22.9027 -0.0485745 23.2611 -0.0263377 23.5508 0.164104C23.9463 0.424137 24.1048 0.926235 23.9302 1.36621L15.1985 23.3701C15.0453 23.7562 14.6689 24.0071 14.2535 23.9999C13.8381 23.9926 13.4707 23.7289 13.3309 23.3376L9.99771 14.0046L0.662377 10.6706C0.271138 10.5308 0.00736766 10.1634 0.000151723 9.74798C-0.00706558 9.3326 0.24378 8.95619 0.629931 8.80296L22.6001 0.0846465ZM11.9306 13.4818L20.2936 5.11878L14.32 20.1722L11.9306 13.4818ZM18.8812 3.70792L3.82785 9.68148L10.5182 12.0709L18.8812 3.70792Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+PaperAirplane.defaultProps = {
+  color: '#FFFFFF',
+}
+
+PaperAirplane.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+}
+