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

1 files changed, 41 insertions, 0 deletions

diff --git a/packages/website/ts/components/logo.tsx b/packages/website/ts/components/logo.tsx
new file mode 100644
index 000000000..19aeb901e
--- /dev/null
+++ b/packages/website/ts/components/logo.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ThemeInterface } from 'ts/components/siteWrap';
+import LogoIcon from 'ts/icons/logo-with-type.svg';
+
+interface LogoInterface {
+    theme?: ThemeInterface;
+}
+
+// Note let's refactor this
+// is it absolutely necessary to have a stateless component
+// to pass props down into the styled icon?
+const StyledLogo = styled.div`
+    text-align: left;
+    position: relative;
+    z-index: 25;
+
+    @media (max-width: 800px) {
+        svg {
+            width: 60px;
+        }
+    }
+`;
+
+const Icon =
+    styled(LogoIcon) <
+    LogoInterface >
+    `
+    flex-shrink: 0;
+
+    path {
+        fill: ${props => props.theme.textColor};
+    }
+`;
+
+export const Logo: React.StatelessComponent<LogoInterface> = (props: LogoInterface) => (
+    <StyledLogo>
+        <Icon {...props} />
+    </StyledLogo>
+);