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:
parent
6ca18c3573
commit
955625278b
@ -1308,6 +1308,9 @@
|
||||
"selectType": {
|
||||
"message": "Select Type"
|
||||
},
|
||||
"buy": {
|
||||
"message": "Buy"
|
||||
},
|
||||
"send": {
|
||||
"message": "Send"
|
||||
},
|
||||
|
@ -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)
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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))
|
||||
|
@ -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 = {
|
||||
|
@ -66,6 +66,12 @@ $warning-light-orange: #F8B588;
|
||||
|
||||
.button {
|
||||
@extend %button;
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
|
@ -51,3 +51,7 @@ export const preloader = () => (
|
||||
size={number('size', 40)}
|
||||
/>
|
||||
)
|
||||
|
||||
export const PaperAirplane = () => (
|
||||
<PaperAirplane color={color('color', '#2F80ED')} size={number('size', 40)} />
|
||||
)
|
||||
|
33
ui/app/components/ui/icon/paper-airplane-icon.js
Normal file
33
ui/app/components/ui/icon/paper-airplane-icon.js
Normal 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,
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user