aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-07-01 04:23:13 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-07-02 05:50:55 +0800
commit3031598843080ff4fabb7bfb0ba823be6d545285 (patch)
tree0993608a301b6754adae1d31ac095554fbb343e3
parentb9b00e10d39c3c84bc72892ef37f1313e904414d (diff)
downloaddexon-sol-tools-3031598843080ff4fabb7bfb0ba823be6d545285.tar
dexon-sol-tools-3031598843080ff4fabb7bfb0ba823be6d545285.tar.gz
dexon-sol-tools-3031598843080ff4fabb7bfb0ba823be6d545285.tar.bz2
dexon-sol-tools-3031598843080ff4fabb7bfb0ba823be6d545285.tar.lz
dexon-sol-tools-3031598843080ff4fabb7bfb0ba823be6d545285.tar.xz
dexon-sol-tools-3031598843080ff4fabb7bfb0ba823be6d545285.tar.zst
dexon-sol-tools-3031598843080ff4fabb7bfb0ba823be6d545285.zip
Implement icon button
-rw-r--r--packages/website/ts/components/ui/text.tsx5
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx15
2 files changed, 18 insertions, 2 deletions
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index c1cb2ade4..315f72854 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -3,7 +3,7 @@ import { darken } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4';
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
export interface TextProps {
className?: string;
@@ -17,6 +17,7 @@ export interface TextProps {
fontWeight?: number | string;
textDecorationLine?: string;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+ hoverColor?: string;
}
const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -37,7 +38,7 @@ export const Text = styled(PlainText)`
${props => (props.onClick ? 'cursor: pointer' : '')};
transition: color 0.5s ease;
&:hover {
- ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')};
+ ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
}
`;
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1f1e3598a..899f8e3a3 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -199,11 +199,26 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
<AccountConnection accountState={accountState} injectedProviderName={this.props.injectedProviderName} />
</div>
);
+ const onClick = _.noop;
+ const accessory = (
+ <Container marginRight="15px">
+ <Text
+ className="zmdi zmdi-more-horiz"
+ Tag="i"
+ fontSize="32px"
+ fontFamily="Material-Design-Iconic-Font"
+ fontColor={colors.darkGrey}
+ onClick={onClick}
+ hoverColor={colors.mediumBlue}
+ />
+ </Container>
+ );
return (
<Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
<StandardIconRow
icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
main={main}
+ accessory={accessory}
minHeight="60px"
backgroundColor={colors.white}
/>