aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-11-29 20:31:04 +0800
committerFred Carlsen <fred@sjelfull.no>2018-11-29 20:31:04 +0800
commitd0fa615f32ae4214c49d883078b6b532d28d0163 (patch)
tree5fe5025988e16210eed22ee15aaa0ba60fc5e846 /packages/website/ts/@next
parentef6cffd9d9d4dc97a29ce7fe10fd57b220f3a199 (diff)
downloaddexon-sol-tools-d0fa615f32ae4214c49d883078b6b532d28d0163.tar
dexon-sol-tools-d0fa615f32ae4214c49d883078b6b532d28d0163.tar.gz
dexon-sol-tools-d0fa615f32ae4214c49d883078b6b532d28d0163.tar.bz2
dexon-sol-tools-d0fa615f32ae4214c49d883078b6b532d28d0163.tar.lz
dexon-sol-tools-d0fa615f32ae4214c49d883078b6b532d28d0163.tar.xz
dexon-sol-tools-d0fa615f32ae4214c49d883078b6b532d28d0163.tar.zst
dexon-sol-tools-d0fa615f32ae4214c49d883078b6b532d28d0163.zip
Add transparent button
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/button.tsx27
-rw-r--r--packages/website/ts/@next/pages/landing.tsx8
2 files changed, 25 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index e67f8a8e1..df784b8ef 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -3,12 +3,13 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
-export interface ButtonInterface {
+export interface Props extends ButtonInterface {
text: string;
- transparent?: any;
+ transparent?: boolean;
+ inline?: boolean;
}
-const StyledButton = styled.button<ButtonInterface>`
+const StyledButton = styled.button<Props>`
appearance: none;
border: 0;
background-color: ${colors.brandLight};
@@ -17,8 +18,16 @@ const StyledButton = styled.button<ButtonInterface>`
padding: 13px 22px 14px;
${props => props.transparent && `
+ background-color: transparent;
border: 1px solid #6A6A6A;
`}
+
+ ${props => props.inline && `
+ display: inline-block;
+ & + & {
+ margin-left: 10px;
+ }
+ `}
`;
const Text = styled.span`
@@ -27,9 +36,15 @@ const Text = styled.span`
line-height: 1.375rem;
`;
-export const Button: React.StatelessComponent<ButtonInterface> = ({ text, transparent }) => (
- <StyledButton transparent>
- <Text>{text}</Text>
+export const Button: React.StatelessComponent<Props> = ({ ...props }) => (
+ <StyledButton {...props}>
+ <Text>{props.text}</Text>
+ </StyledButton>
+);
+
+export const ButtonTransparent: React.StatelessComponent<Props> = ({ ...props }) => (
+ <StyledButton transparent={true} {...props}>
+ <Text>{props.text}</Text>
</StyledButton>
);
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index abb01e11a..19eed5acf 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -19,10 +19,10 @@ export const NextLanding = () => (
<Column colWidth="2/3">
<Heading>Powering Decentralized Exchange</Heading>
<Intro>0x is the best solution for adding exchange functionality to your business.</Intro>
- <Icon>
- <Button text="Get Started" />
- <Button text="Learn More" transparent />
- </Icon>
+ <div>
+ <Button text="Get Started" inline={true} />
+ <Button text="Learn More" transparent={true} inline={true} />
+ </div>
</Column>
<Column colWidth="1/3">