aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/buy_button.tsx19
-rw-r--r--packages/instant/src/components/instant_heading.tsx46
-rw-r--r--packages/instant/src/components/order_details.tsx62
-rw-r--r--packages/instant/src/components/ui/button.tsx26
-rw-r--r--packages/instant/src/components/ui/container.tsx2
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx2
6 files changed, 140 insertions, 17 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
new file mode 100644
index 000000000..9a70d127f
--- /dev/null
+++ b/packages/instant/src/components/buy_button.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button, Container, Text } from './ui';
+
+export interface BuyButtonProps {}
+
+export const BuyButton: React.StatelessComponent<BuyButtonProps> = props => (
+ <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+ <Button width="100%">
+ <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+ Buy
+ </Text>
+ </Button>
+ </Container>
+);
+
+BuyButton.displayName = 'BuyButton';
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
new file mode 100644
index 000000000..5aa82bcda
--- /dev/null
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface InstantHeadingProps {}
+
+export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
+ <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
+ <Container marginBottom="5px">
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.white}
+ opacity={0.7}
+ fontWeight={500}
+ textTransform="uppercase"
+ fontSize="12px"
+ >
+ I want to buy
+ </Text>
+ </Container>
+ <Flex direction="row" justify="space-between">
+ <Container>
+ <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase">
+ 0.00
+ </Text>
+ <Container display="inline-block" marginLeft="10px">
+ <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
+ rep
+ </Text>
+ </Container>
+ </Container>
+ <Flex direction="column" justify="space-between">
+ <Container marginBottom="5px">
+ <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+ 0 ETH
+ </Text>
+ </Container>
+ <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
+ $0.00
+ </Text>
+ </Flex>
+ </Flex>
+ </Container>
+);
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
new file mode 100644
index 000000000..f90ee9f6f
--- /dev/null
+++ b/packages/instant/src/components/order_details.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface OrderDetailsProps {}
+
+export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => (
+ <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+ <Container marginBottom="10px">
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.primaryColor}
+ fontWeight={600}
+ textTransform="uppercase"
+ fontSize="14px"
+ >
+ Order Details
+ </Text>
+ </Container>
+ <OrderDetailsRow name="Token Price" primaryValue=".013 ETH" secondaryValue="$24.32" />
+ <OrderDetailsRow name="Fee" primaryValue=".005 ETH" secondaryValue="$1.04" />
+ <OrderDetailsRow name="Total Cost" primaryValue="1.66 ETH" secondaryValue="$589.56" shouldEmphasize={true} />
+ </Container>
+);
+
+OrderDetails.displayName = 'OrderDetails';
+
+export interface OrderDetailsRowProps {
+ name: string;
+ primaryValue: string;
+ secondaryValue: string;
+ shouldEmphasize?: boolean;
+}
+
+export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => {
+ const fontWeight = props.shouldEmphasize ? 700 : 400;
+ return (
+ <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
+ <Flex justify="space-between">
+ <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
+ {props.name}
+ </Text>
+ <Container>
+ <Container marginRight="3px" display="inline-block">
+ <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text>
+ </Container>
+ <Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
+ {props.primaryValue}
+ </Text>
+ </Container>
+ </Flex>
+ </Container>
+ );
+};
+
+OrderDetailsRow.defaultProps = {
+ shouldEmphasize: false,
+};
+
+OrderDetailsRow.displayName = 'OrderDetailsRow';
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index ec0a87345..1fcb2591c 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -4,11 +4,8 @@ import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
export interface ButtonProps {
- fontColor: ColorOption;
- backgroundColor: ColorOption;
+ backgroundColor?: ColorOption;
borderColor?: ColorOption;
- fontSize?: string;
- fontFamily?: string;
width?: string;
padding?: string;
type?: string;
@@ -28,41 +25,36 @@ const darkenOnActiveAmount = 0.2;
const saturateOnFocusAmount = 0.2;
export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
- font-size: ${props => props.fontSize};
- color: ${props => props.fontColor};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
- border-radius: 6px;
- font-weight: 500;
+ border-radius: 3px;
outline: none;
- font-family: ${props => props.fontFamily};
width: ${props => props.width};
- background-color: ${props => props.backgroundColor};
+ background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
&:hover {
background-color: ${props =>
- !props.isDisabled ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor]) : ''} !important;
+ !props.isDisabled
+ ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
+ : ''} !important;
}
&:active {
background-color: ${props =>
- !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor]) : ''};
+ !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
}
&:disabled {
opacity: 0.5;
}
&:focus {
- background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor])};
+ background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
`;
Button.defaultProps = {
- fontSize: '12px',
- fontColor: ColorOption.white,
backgroundColor: ColorOption.primaryColor,
width: 'auto',
- fontFamily: 'Inter UI',
isDisabled: false,
- padding: '0.8em 2.2em',
+ padding: '1em 2.2em',
};
Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 4ebaf2af3..bc47ba0aa 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -25,6 +25,7 @@ export interface ContainerProps {
borderTop?: string;
className?: string;
backgroundColor?: ColorOption;
+ hasBoxShadow?: boolean;
}
const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
@@ -50,6 +51,7 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'border-radius')}
${props => cssRuleIfExists(props, 'border')}
${props => cssRuleIfExists(props, 'border-top')}
+ ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
`;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index efda6ecaf..d6df3ccc0 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { BuyButton } from './buy_button';
import { InstantHeading } from './instant_heading';
import { OrderDetails } from './order_details';
import { Container, Flex, Text } from './ui';
@@ -12,5 +13,6 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
<Flex direction="column" width="350px" justify="flex-start">
<InstantHeading />
<OrderDetails />
+ <BuyButton />
</Flex>
);