aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-10 07:26:57 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-10 07:26:57 +0800
commit433fb3597dc19cb223a2b8d0e373502042241abb (patch)
treedc9cccf7b1cc0d1c3d2d30986961e288fba4341e /packages
parent7460f2796a2a549eaed15051009e35229fb1280f (diff)
downloaddexon-sol-tools-433fb3597dc19cb223a2b8d0e373502042241abb.tar
dexon-sol-tools-433fb3597dc19cb223a2b8d0e373502042241abb.tar.gz
dexon-sol-tools-433fb3597dc19cb223a2b8d0e373502042241abb.tar.bz2
dexon-sol-tools-433fb3597dc19cb223a2b8d0e373502042241abb.tar.lz
dexon-sol-tools-433fb3597dc19cb223a2b8d0e373502042241abb.tar.xz
dexon-sol-tools-433fb3597dc19cb223a2b8d0e373502042241abb.tar.zst
dexon-sol-tools-433fb3597dc19cb223a2b8d0e373502042241abb.zip
feat: refactor button styles and add href to Text
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/buy_button.tsx2
-rw-r--r--packages/instant/src/components/standard_panel_content.tsx21
-rw-r--r--packages/instant/src/components/ui/button.tsx11
-rw-r--r--packages/instant/src/components/ui/text.tsx9
-rw-r--r--packages/instant/src/util/util.ts1
5 files changed, 24 insertions, 20 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 877ab275c..c10e07b83 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -43,7 +43,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
onClick={this._handleClick}
isDisabled={shouldDisableButton}
fontColor={ColorOption.white}
- fontSize="20px"
+ fontSize="16px"
>
Buy
</Button>
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
index fca5383ea..95a79bd55 100644
--- a/packages/instant/src/components/standard_panel_content.tsx
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -29,7 +29,7 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
action,
}) => (
<Container height="100%">
- <Flex direction="column" height="calc(100% - 55px)">
+ <Flex direction="column" height="calc(100% - 58px)">
<Container marginBottom={spacingBetweenPx}>{image}</Container>
<Container marginBottom={spacingBetweenPx}>
<Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}>
@@ -43,16 +43,15 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
</Container>
<Container marginBottom={spacingBetweenPx}>
{moreInfoSettings && (
- <a href={moreInfoSettings.href} target="_blank">
- <Text
- center={true}
- fontSize="13px"
- textDecorationLine="underline"
- fontColor={ColorOption.lightGrey}
- >
- {moreInfoSettings.text}
- </Text>
- </a>
+ <Text
+ center={true}
+ fontSize="13px"
+ textDecorationLine="underline"
+ fontColor={ColorOption.lightGrey}
+ href={moreInfoSettings.href}
+ >
+ {moreInfoSettings.text}
+ </Text>
)}
</Container>
</Flex>
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 479ef6c77..fbc5bcad4 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -2,6 +2,7 @@ import { darken, saturate } from 'polished';
import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
@@ -19,10 +20,6 @@ export interface ButtonProps {
className?: string;
}
-const createHrefOnClick = (href: string) => () => {
- window.open(href, '_blank');
-};
-
const PlainButton: React.StatelessComponent<ButtonProps> = ({
children,
isDisabled,
@@ -31,7 +28,7 @@ const PlainButton: React.StatelessComponent<ButtonProps> = ({
type,
className,
}) => {
- const computedOnClick = isDisabled ? undefined : href ? createHrefOnClick(href) : onClick;
+ const computedOnClick = isDisabled ? undefined : href ? util.createHrefOnClick(href) : onClick;
return (
<button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}>
{children}
@@ -48,7 +45,7 @@ export const Button = styled(PlainButton)`
box-sizing: border-box;
font-size: ${props => props.fontSize};
font-family: 'Inter UI', sans-serif;
- font-weight: 600;
+ font-weight: 500;
color: ${props => props.fontColor && props.theme[props.fontColor]};
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
transition: background-color, opacity 0.5s ease;
@@ -83,7 +80,7 @@ Button.defaultProps = {
backgroundColor: ColorOption.primaryColor,
width: 'auto',
isDisabled: false,
- padding: '.6em 1.2em',
+ padding: '.82em 1.2em',
fontSize: '15px',
};
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 4fe429d25..3dba11c74 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -2,6 +2,7 @@ import { darken } from 'polished';
import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
export interface TextProps {
fontColor?: ColorOption;
@@ -20,10 +21,16 @@ export interface TextProps {
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
noWrap?: boolean;
display?: string;
+ href?: string;
}
+export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => {
+ const computedOnClick = href ? util.createHrefOnClick(href) : onClick;
+ return <StyledText {...rest} onClick={computedOnClick} />;
+};
+
const darkenOnHoverAmount = 0.3;
-export const Text =
+export const StyledText =
styled.div <
TextProps >
`
diff --git a/packages/instant/src/util/util.ts b/packages/instant/src/util/util.ts
index 232a86850..aeb68956b 100644
--- a/packages/instant/src/util/util.ts
+++ b/packages/instant/src/util/util.ts
@@ -2,4 +2,5 @@ import * as _ from 'lodash';
export const util = {
boundNoop: _.noop.bind(_),
+ createHrefOnClick: (href: string) => () => window.open(href, '_blank'),
};