aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-16 04:17:02 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-16 04:24:59 +0800
commit54f79c2798c095344b003139144b77fc1024d8c3 (patch)
tree079217538d8a7330cbdf90d1e0b04eb956a51e97 /packages/website/ts/components/ui
parentd0a3779091661cfa099ec84f12e5d944287d1e3f (diff)
downloaddexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar.gz
dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar.zst
dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.zip
Improve styles of onboarding tooltip
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r--packages/website/ts/components/ui/button.tsx17
-rw-r--r--packages/website/ts/components/ui/container.tsx5
-rw-r--r--packages/website/ts/components/ui/pointer.tsx3
-rw-r--r--packages/website/ts/components/ui/text.tsx28
4 files changed, 40 insertions, 13 deletions
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 1f88297de..cb542a386 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -1,5 +1,5 @@
import { colors } from '@0xproject/react-shared';
-import { darken } from 'polished';
+import { darken, grayscale } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@@ -12,32 +12,34 @@ export interface ButtonProps {
borderColor?: string;
width?: string;
type?: string;
+ isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => (
- <button type={type} className={className} onClick={onClick}>
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+ <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
{children}
</button>
);
export const Button = styled(PlainButton)`
- cursor: pointer;
+ cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
font-size: ${props => props.fontSize};
color: ${props => props.fontColor};
+ transition: background-color 0.5s ease;
padding: 0.8em 2.2em;
border-radius: 6px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
font-weight: 500;
font-family: ${props => props.fontFamily};
width: ${props => props.width};
- background-color: ${props => props.backgroundColor};
+ background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
&:hover {
- background-color: ${props => darken(0.1, props.backgroundColor)};
+ background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
}
&:active {
- background-color: ${props => darken(0.2, props.backgroundColor)};
+ background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
}
`;
@@ -46,6 +48,7 @@ Button.defaultProps = {
backgroundColor: colors.white,
width: 'auto',
fontFamily: 'Roboto',
+ isDisabled: false,
};
Button.displayName = 'Button';
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index c6a78e181..3b55a18ce 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -16,6 +16,11 @@ export interface ContainerProps {
maxWidth?: StringOrNum;
isHidden?: boolean;
className?: string;
+ position?: 'absolute' | 'fixed' | 'relative' | 'unset';
+ top?: string;
+ left?: string;
+ right?: string;
+ bottom?: string;
}
export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx
index dcd1b8e54..448786bb4 100644
--- a/packages/website/ts/components/ui/pointer.tsx
+++ b/packages/website/ts/components/ui/pointer.tsx
@@ -1,5 +1,4 @@
import { colors } from '@0xproject/react-shared';
-import { Island } from 'ts/components/ui/island';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@@ -12,7 +11,7 @@ export interface PointerProps {
direction: PointerDirection;
}
-const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props}/>;
+const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props} />;
const positionToCss = (props: PointerProps) => {
const position = {
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 7e47f1d09..073bfc2d2 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -1,8 +1,9 @@
import { colors } from '@0xproject/react-shared';
+import { darken } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
-export type TextTag = 'p' | 'div' | 'span' | 'label';
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4';
export interface TextProps {
className?: string;
@@ -14,10 +15,13 @@ export interface TextProps {
minHeight?: string;
center?: boolean;
fontWeight?: number | string;
+ onClick?: () => void;
}
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => (
- <Tag className={className}>{children}</Tag>
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
+ <Tag className={className} onClick={onClick}>
+ {children}
+ </Tag>
);
export const Text = styled(PlainText)`
@@ -28,14 +32,30 @@ export const Text = styled(PlainText)`
${props => (props.center ? 'text-align: center' : '')};
color: ${props => props.fontColor};
${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
+ ${props => (props.onClick ? 'cursor: pointer' : '')};
+ transition: color 0.5s ease;
+ &:hover {
+ ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')};
+ }
`;
Text.defaultProps = {
fontFamily: 'Roboto',
fontWeight: 400,
- fontColor: colors.white,
+ fontColor: colors.black,
fontSize: '14px',
Tag: 'div',
};
Text.displayName = 'Text';
+
+export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
+
+Title.defaultProps = {
+ Tag: 'h2',
+ fontSize: '20px',
+ fontWeight: 600,
+ fontColor: colors.black,
+};
+
+Title.displayName = 'Title';