Add iconColor and iconColorHover to Button component, fixes #116

parent ed54ef2a
......@@ -26,6 +26,8 @@ export default class Button extends PureComponent {
icon: PropTypes.string,
iconWidth: PropTypes.string,
iconHeight: PropTypes.string,
iconColor: PropTypes.string,
iconColorHover: PropTypes.string,
iconClassName: PropTypes.string,
color: PropTypes.string,
backgroundColor: PropTypes.string,
......@@ -70,6 +72,8 @@ export default class Button extends PureComponent {
icon,
iconWidth,
iconHeight,
iconColor,
iconColorHover,
iconClassName,
children,
href,
......@@ -114,6 +118,18 @@ export default class Button extends PureComponent {
colorWhite: color === COLORS.white,
colorBrand: color === COLORS.brand,
iconColorPrimary: iconColor === COLORS.primary,
iconColorSecondary: iconColor === COLORS.secondary,
iconColorTertiary: iconColor === COLORS.tertiary,
iconColorWhite: iconColor === COLORS.white,
iconColorBrand: iconColor === COLORS.brand,
iconColorPrimary_onHover: iconColorHover === COLORS.primary,
iconColorSecondary_onHover: iconColorHover === COLORS.secondary,
iconColorTertiary_onHover: iconColorHover === COLORS.tertiary,
iconColorWhite_onHover: iconColorHover === COLORS.white,
iconColorBrand_onHover: iconColorHover === COLORS.brand,
borderColorBrand: color === COLORS.brand && outline,
border1PX: outline,
......
......@@ -72,7 +72,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}));
}
},
onRepostToggle (account) {
if (account.getIn(['relationship', 'showing_reblogs'])) {
dispatch(followAccount(account.get('id'), false));
......@@ -108,11 +108,11 @@ class ProfileHeader extends ImmutablePureComponent {
handleStartChat = () => {
}
handleFollow = () => {
}
makeInfo() {
const { account, intl } = this.props;
......@@ -197,7 +197,7 @@ class ProfileHeader extends ImmutablePureComponent {
return (
<div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
{
!headerMissing &&
<div className={[_s.default, _s.height350PX, _s.width100PC, _s.radiusSmall, _s.overflowHidden].join(' ')}>
......@@ -232,7 +232,8 @@ class ProfileHeader extends ImmutablePureComponent {
icon='ellipsis'
iconWidth='18px'
iconHeight='18px'
iconClassName={_s.fillColorBrand}
iconColor='brand'
iconColorHover='white'
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
......@@ -245,7 +246,8 @@ class ProfileHeader extends ImmutablePureComponent {
icon='chat'
iconWidth='18px'
iconHeight='18px'
iconClassName={_s.fillColorBrand}
iconColor='brand'
iconColorHover='white'
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
......@@ -275,4 +277,4 @@ class ProfileHeader extends ImmutablePureComponent {
)
}
}
\ No newline at end of file
}
......@@ -360,6 +360,30 @@ body {
fill: #666;
}
.iconColorPrimary > svg {
fill: #000;
}
.iconColorWhite > svg {
fill: #fff;
}
.iconColorWhite_onHover:hover > svg {
fill: #fff;
}
.iconColorTertiary > svg {
fill: #777;
}
.iconColorSecondary > svg {
fill: #4B4F55;
}
.iconColorBrand > svg {
fill: #21cf7a
}
.bottom0 {
bottom: 0;
}
......@@ -932,4 +956,4 @@ body {
content: '';
display: block;
position: absolute;
} */
\ No newline at end of file
} */
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment