From 31d07fdac80a2a546646b1eb232fa7dd6319ce83 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 17:27:00 +0100
Subject: rename all files and directories to lowercase

---
 packages/dev-tools-pages/ts/components/header.tsx | 76 +++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 packages/dev-tools-pages/ts/components/header.tsx

(limited to 'packages/dev-tools-pages/ts/components/header.tsx')

diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx
new file mode 100644
index 000000000..94714c0af
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/header.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ContextInterface, ThemeContext } from 'ts/context';
+import { media } from 'ts/variables';
+
+import { Container } from './Container';
+import { Small } from './Typography';
+
+const Header: React.StatelessComponent<{}> = () => (
+    <ThemeContext.Consumer>
+        {({ icon, title }: ContextInterface) => (
+            <StyledHeader>
+                <Container>
+                    <LogoMark>
+                        <Logo as={icon as 'svg'} />
+                        <Title>{title}</Title>
+                    </LogoMark>
+
+                    <Link as="a" href="https://0xproject.com/">
+                        Built by 0x
+                    </Link>
+                </Container>
+            </StyledHeader>
+        )}
+    </ThemeContext.Consumer>
+);
+
+const StyledHeader = styled.header`
+    padding-top: 3.75rem;
+    padding-bottom: 0.875rem;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    ${Container} {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    ${media.small`padding-top: 2.125rem;`};
+`;
+
+const LogoMark = styled.div`
+    position: relative;
+    height: 1.75rem;
+    display: flex;
+    align-items: center;
+`;
+
+const Logo = styled.div`
+    color: ${props => props.theme.colors.main};
+    width: 1.75rem;
+    height: 100%;
+`;
+
+const Title = styled.h1`
+    font-size: 1.5rem;
+    line-height: 1;
+    white-space: nowrap;
+    margin-top: 2px;
+    margin-bottom: 0;
+    margin-left: 0.8125rem;
+
+    ${media.small`font-size: 1.25rem;`};
+`;
+
+const Link = styled(Small)`
+    :hover {
+        text-decoration: underline;
+    }
+`;
+
+export { Header };
-- 
cgit v1.2.3


From 117726c6d80dd20e8b9409cec23b0c062690b0df Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 17:35:22 +0100
Subject: fix imports after renaming

---
 packages/dev-tools-pages/ts/components/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts/components/header.tsx')

diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx
index 94714c0af..2787692c1 100644
--- a/packages/dev-tools-pages/ts/components/header.tsx
+++ b/packages/dev-tools-pages/ts/components/header.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { ContextInterface, ThemeContext } from 'ts/context';
 import { media } from 'ts/variables';
 
-import { Container } from './Container';
-import { Small } from './Typography';
+import { Container } from './container';
+import { Small } from './typography';
 
 const Header: React.StatelessComponent<{}> = () => (
     <ThemeContext.Consumer>
-- 
cgit v1.2.3