1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

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

This commit is contained in:
Brad Decker 2020-06-15 12:02:38 -05:00 committed by GitHub
parent 6ca18c3573
commit 955625278b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 71 additions and 15 deletions

View File

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

View File

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

View File

@ -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;
width: 100px;
&:not(:last-child) {
margin-right: 12px;
}
@extend %asset-buttons;
}
}
@ -110,11 +116,6 @@
}
&__button {
min-width: initial;
width: 100px;
&:not(:last-child) {
margin-right: 12px;
}
@extend %asset-buttons;
}
}

View File

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

View File

@ -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 = {

View File

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

View File

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

View File

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