Merge branch 'development' into feature/instant/tell-amount-available

1 files changed, 55 insertions, 0 deletions

diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx
new file mode 100644
index 000000000..d3b36ebfd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/button.tsx
@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+interface ButtonProps {
+    large?: boolean;
+}
+
+const Button =
+    styled.button <
+    ButtonProps >
+    `
+  font-family: inherit;
+  line-height: 1;
+  font-weight: 500;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: ${props => props.theme.colors.secondary};
+  color: ${colors.black};
+  border: 0;
+  border-radius: 5rem;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${props =>
+      props.large
+          ? `
+      font-size: 1rem;
+      padding: 1.1875rem 2.375rem 1.0625rem;
+  `
+          : `
+      font-size: .875rem;
+      padding: .5625rem 1.25rem;
+  `}
+
+  :hover, :focus {
+    background-color: ${props => props.theme.colors.secondary_alt};
+    outline: 0;
+  }
+
+  ${media.small`
+  font-size: .875rem;
+  padding: .5625rem 1.25rem;
+  `}
+
+    ${props =>
+        props.large &&
+        media.small`
+        font-size: 1rem;
+        padding: 1rem 1.5rem .75rem;
+    `}
+`;
+
+export { Button };