build/img/Close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+  <path fill="#fff" d="m 17.402,14.33 4.023,-4.022 C 21.117,9.142 20.695,8.076 20.185,7.132 L 14.515,12.8 8.83,7.115 C 8.32,8.057 7.895,9.121 7.586,10.285 l 4.044,4.046 c 0.006,0.01 0.015,0.02 0.02,0.02 0.33,0.33 0.34,0.86 0.033,1.2 l 0.003,0.01 -4.1,4.1 c 0.31,1.166 0.734,2.228 1.244,3.168 l 5.686,-5.685 5.668,5.668 c 0.51,-0.94 0.933,-2.004 1.24,-3.17 l -4.08,-4.076 0.005,-0.004 c -0.31,-0.343 -0.3,-0.87 0.03,-1.2 l 0.02,-0.017 z"/>
+</svg>

build/main.js

@@ -30812,7 +30812,7 @@ var Header = (function (_Component) {
         ),
         _react2['default'].createElement(
           'h1',
-          { className: 'regular-medium' },
+          null,
           'Hawk'
         ),
         i

build/style.css

@@ -57,13 +57,9 @@
 }
 .icon-cross {
   display: block;
-  background: url(/img/Plus.svg) no-repeat;
-  width: 24px;
-  height: 24px;
-  transform: rotate(45deg);
-}
-.icon-cross svg * {
-  fill: white;
+  background: url(/img/Close.svg) no-repeat;
+  width: 30px;
+  height: 30px;
 }
 .icon-back {
   display: block;
@@ -369,6 +365,7 @@ header {
 header h1 {
   font-size: 2.3rem;
   font-style: italic;
+  font-weight: 300;
   text-align: center;
   flex: 1;
 }
@@ -381,7 +378,6 @@ header button {
   margin-top: -1rem;
 }
 header button i {
-  padding: 2rem;
   background-position: center;
 }
 .menu {

src/img/Close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+  <path fill="#fff" d="m 17.402,14.33 4.023,-4.022 C 21.117,9.142 20.695,8.076 20.185,7.132 L 14.515,12.8 8.83,7.115 C 8.32,8.057 7.895,9.121 7.586,10.285 l 4.044,4.046 c 0.006,0.01 0.015,0.02 0.02,0.02 0.33,0.33 0.34,0.86 0.033,1.2 l 0.003,0.01 -4.1,4.1 c 0.31,1.166 0.734,2.228 1.244,3.168 l 5.686,-5.685 5.668,5.668 c 0.51,-0.94 0.933,-2.004 1.24,-3.17 l -4.08,-4.076 0.005,-0.004 c -0.31,-0.343 -0.3,-0.87 0.03,-1.2 l 0.02,-0.017 z"/>
+</svg>

src/js/components/header.js

@@ -21,7 +21,7 @@ export default class Header extends Component {
         <button className='drawer tour-item' onTouchStart={bind(toggle())}>
           <i className='icon-menu'></i>
         </button>
-        <h1 className='regular-medium'>Hawk</h1>
+        <h1>Hawk</h1>
 
         {i}
       </header>

src/less/components/header.less

@@ -16,6 +16,7 @@ header {
   h1 {
     font-size: 2.3rem;
     font-style: italic;
+    font-weight: 300;
     text-align: center;
 
     flex: 1;
@@ -31,7 +32,6 @@ header {
     margin-top: -1rem;
 
     i {
-      padding: 2rem;
       background-position: center;
     }
   }

src/less/icons.less

@@ -65,11 +65,10 @@
 }
 
 .icon-cross {
-  .icon-plus;
-  transform: rotate(45deg);
-  svg * {
-    fill: white;
-  }
+  .icon;
+  background: url(/img/Close.svg) no-repeat;
+  width: 30px;
+  height: 30px;
 }
 
 .icon-back {