diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap
new file mode 100644
index 00000000..f336feca
--- /dev/null
+++ b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap
@@ -0,0 +1,395 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without throwing 1`] = `
+.c5 {
+ padding-top: 0.6875rem;
+}
+
+.c0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-align-items: stretch;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ background-color: rgb(30,49,59);
+ max-height: 3.3125rem;
+ min-height: 3.3125rem;
+ line-height: 1.5625rem;
+}
+
+.c1 {
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-align-items: stretch;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ max-height: 3.3125rem;
+ min-height: 3.3125rem;
+}
+
+.c2 {
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ width: 9.375rem;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c2:hover,
+.c2.active {
+ background: rgba(255,255,255,0.15);
+}
+
+.c3 {
+ margin: 0;
+ font-weight: 400;
+ line-height: 1.875rem;
+ font-size: 1.5rem;
+ text-transform: uppercase;
+ color: rgb(255,255,255);
+ font-size: 1.8125rem;
+ margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+ margin-top: 1.5rem;
+}
+
+.c4 {
+ padding: 0.9375rem;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ color: rgb(255,255,255);
+ text-decoration: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-transition: all 200ms ease;
+ transition: all 200ms ease;
+ max-height: 3.3125rem;
+ min-height: 3.3125rem;
+ box-sizing: border-box;
+}
+
+.c6 {
+ padding: 0;
+ margin: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ list-style: none;
+}
+
+.c6 a {
+ padding: 0.9375rem;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ color: rgb(255,255,255);
+ text-decoration: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-transition: all 200ms ease;
+ transition: all 200ms ease;
+ max-height: 3.3125rem;
+ min-height: 3.3125rem;
+ box-sizing: border-box;
+}
+
+.c6 a:hover,
+.c6 a.active {
+ background: rgba(255,255,255,0.15);
+}
+
+.c7 {
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-align-self: auto;
+ -ms-flex-item-align: auto;
+ align-self: auto;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 1.125rem;
+}
+
+.c7 svg {
+ margin-right: 0.375rem;
+}
+
+.c7:not(:last-of-type) {
+ border-right: 0.0625rem solid rgba(255,255,255,0.15);
+}
+
+.c7:first-of-type {
+ margin-left: auto;
+}
+
+.c7:hover,
+.c7.active {
+ background: rgba(255,255,255,0.15);
+}
+
+.c8 {
+ font-weight: 400;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ margin: 0;
+ text-align: center;
+ color: rgb(255,255,255);
+ margin: 0;
+}
+
+.c8 + p,
+.c8 + small,
+.c8 + h1,
+.c8 + h2,
+.c8 + label,
+.c8 + h3,
+.c8 + h4,
+.c8 + h5,
+.c8 + div,
+.c8 + span {
+ padding-bottom: 2.25rem;
+}
+
+.c9 {
+ background-color: transparent;
+ text-decoration-skip: objects;
+ padding: 0.9375rem;
+ line-height: 1.5rem;
+ font-size: 0.9375rem;
+ color: rgb(255,255,255);
+ text-decoration: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-transition: all 200ms ease;
+ transition: all 200ms ease;
+ max-height: 3.3125rem;
+ min-height: 3.3125rem;
+ box-sizing: border-box;
+}
+
+
+`;
diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js b/packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js
new file mode 100644
index 00000000..4b28e59a
--- /dev/null
+++ b/packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Theme from '@mocks/theme';
+import Router from '@mocks/router';
+import 'jest-styled-components';
+
+import Header from '../header';
+
+it('renders without throwing', () => {
+ const tree = renderer
+ .create(
+
+
+
+
+
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+});
diff --git a/packages/my-joy-beta/src/components/navigation/header.js b/packages/my-joy-beta/src/components/navigation/header.js
index 3d224860..ea83a8af 100644
--- a/packages/my-joy-beta/src/components/navigation/header.js
+++ b/packages/my-joy-beta/src/components/navigation/header.js
@@ -18,7 +18,7 @@ const Logo = styled(TritonBetaIcon)`
`;
export default () => (
-
+
diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js
index 997ebda1..4cd2e83c 100644
--- a/packages/ui-toolkit/src/header/brand.js
+++ b/packages/ui-toolkit/src/header/brand.js
@@ -18,10 +18,10 @@ const Box = styled.div`
width: ${remcalc(150)};
display: flex;
- ${is('beta')`
- align-items: center;
- margin-top: ${remcalc(6)}
- `}
+ &:hover,
+ &.active {
+ background: rgba(255, 255, 255, 0.15);
+ }
`;
export default ({ children, ...rest }) => (
diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js
index d6f554e5..d25e419a 100644
--- a/packages/ui-toolkit/src/header/index.js
+++ b/packages/ui-toolkit/src/header/index.js
@@ -28,9 +28,9 @@ const Header = styled.div`
/**
* @example ./usage.md
*/
-export default ({ children, ...rest }) => (
+export default ({ children, fluid, ...rest }) => (
- {children}
+ {children}
);
diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js
index 5333bdc1..c9e7bf7b 100644
--- a/packages/ui-toolkit/src/header/item.js
+++ b/packages/ui-toolkit/src/header/item.js
@@ -19,11 +19,6 @@ const style = css`
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
box-sizing: border-box;
-
- &:hover,
- &.active {
- background: rgba(255, 255, 255, 0.15);
- }
`;
const Text = P.extend`
@@ -51,6 +46,11 @@ const Box = styled.section`
&:first-of-type {
margin-left: auto;
}
+
+ &:hover,
+ &.active {
+ background: rgba(255, 255, 255, 0.15);
+ }
`;
const StyledAnchor = A.extend`
diff --git a/packages/ui-toolkit/src/layout/view-container.js b/packages/ui-toolkit/src/layout/view-container.js
index e2d467af..7373baa9 100644
--- a/packages/ui-toolkit/src/layout/view-container.js
+++ b/packages/ui-toolkit/src/layout/view-container.js
@@ -1,15 +1,27 @@
-import is from 'styled-is';
+import styled, { css } from 'styled-components';
import { Grid } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc';
+import is, { isNot } from 'styled-is';
import { styled as breakpoints } from '../breakpoints';
-export default Grid.extend`
- max-width: ${remcalc(1000)};
+const Base = css`
+ margin-right: auto;
+ margin-left: auto;
- ${breakpoints.smallOnly`
- padding-left: ${remcalc(6)};
- padding-right: ${remcalc(6)};
+ ${is('fluid')`
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ `};
+
+ ${isNot('fluid')`
+ max-width: ${remcalc(1000)};
+
+ ${breakpoints.smallOnly`
+ padding-left: ${remcalc(6)};
+ padding-right: ${remcalc(6)};
+ `};
`};
${is('main')`
@@ -25,3 +37,37 @@ export default Grid.extend`
align-items: center;
`};
`;
+
+export default Grid.extend`
+ ${is('fluid')`
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ `};
+
+ ${isNot('fluid')`
+ max-width: ${remcalc(1000)};
+
+ ${breakpoints.smallOnly`
+ padding-left: ${remcalc(6)};
+ padding-right: ${remcalc(6)};
+ `};
+ `};
+
+ ${is('main')`
+ padding-bottom: ${remcalc(18)};
+ `};
+
+ ${is('center')`
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+ `};
+`;
+//
+//
+// const View
+//