From 969674a5ce99260a1fa0b749611845153c105bc4 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 16:26:42 +0100 Subject: Add container and button --- packages/website/ts/@next/components/button.tsx | 10 +++++++++- packages/website/ts/@next/components/container.tsx | 21 +++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/@next/components/container.tsx (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 48be7659c..bbb6b7935 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -1,21 +1,29 @@ import * as React from 'react'; import styled from 'styled-components'; +import { colors } from 'ts/style/colors'; + export interface ButtonInterface { text: string; } const StyledButton = styled.button` + appearance: none; + border: 0; + background-color: ${colors.brandLight}; + color: ${colors.white}; text-align: center; + padding: 13px 22px 14px; `; const Text = styled.span` font-size: 1rem; + font-weight: 500; line-height: 1.375rem; `; export const Button: React.StatelessComponent = ({ text }) => ( - Get Started + {text} ); diff --git a/packages/website/ts/@next/components/container.tsx b/packages/website/ts/@next/components/container.tsx new file mode 100644 index 000000000..a4da10cfd --- /dev/null +++ b/packages/website/ts/@next/components/container.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface ContainerProps { +} + +const StyledContainer = styled.div` + max-width: 117rem; // 2000px + margin: 0 auto; + padding: 0 1.764705882rem; // 30px +`; + +export const Container: React.StatelessComponent = props => { + const { children } = props; + + return ( + + {children} + + ); +}; -- cgit