diff --git a/build/img/Menu.svg b/build/img/Menu.svg new file mode 100644 index 0000000..5744a1f --- /dev/null +++ b/build/img/Menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/build/img/Search.svg b/build/img/Search.svg index 6a72cd3..c4f91e8 100644 --- a/build/img/Search.svg +++ b/build/img/Search.svg @@ -1,14 +1,3 @@ - - - - Search - Created with Sketch. - - - - - - - - - \ No newline at end of file + + + diff --git a/build/index.html b/build/index.html index ee1b5af..40af8c0 100644 --- a/build/index.html +++ b/build/index.html @@ -3,9 +3,9 @@ Hawk - - - + + + diff --git a/build/main.js b/build/main.js index 9e8770f..7d189f0 100644 --- a/build/main.js +++ b/build/main.js @@ -30781,15 +30781,27 @@ var Header = (function (_Component) { var i = undefined; if (this.props.search) { - i = _react2['default'].createElement('i', { className: 'icon-cross', onClick: (0, _store.bind)((0, _actionsFilesView.search)()) }); + i = _react2['default'].createElement( + 'button', + { onClick: (0, _store.bind)((0, _actionsFilesView.search)()) }, + _react2['default'].createElement('i', { className: 'icon-cross' }) + ); } else { - i = _react2['default'].createElement('i', { className: 'icon-search tour-item', onClick: (0, _store.bind)((0, _actionsDialog.show)('searchDialog')) }); + i = _react2['default'].createElement( + 'button', + { onClick: (0, _store.bind)((0, _actionsDialog.show)('searchDialog')) }, + _react2['default'].createElement('i', { className: 'icon-search tour-item' }) + ); } return _react2['default'].createElement( 'header', null, - _react2['default'].createElement('button', { className: 'drawer tour-item', onTouchStart: (0, _store.bind)((0, _actionsNavigation.toggle)()) }), + _react2['default'].createElement( + 'button', + { className: 'drawer tour-item', onTouchStart: (0, _store.bind)((0, _actionsNavigation.toggle)()) }, + _react2['default'].createElement('i', { className: 'icon-menu' }) + ), _react2['default'].createElement( 'h1', { className: 'regular-medium' }, diff --git a/build/style.css b/build/style.css index 20584e9..a3b42f1 100644 --- a/build/style.css +++ b/build/style.css @@ -1,6 +1,12 @@ .icon { display: block; } +.icon-menu { + display: block; + background: url(/img/Menu.svg) no-repeat; + width: 30px; + height: 30px; +} .icon-directory { display: block; background: url(/img/Directory.svg) no-repeat; @@ -46,8 +52,8 @@ .icon-search { display: block; background: url(/img/Search.svg) no-repeat; - width: 19px; - height: 27px; + width: 30px; + height: 30px; } .icon-cross { display: block; @@ -368,29 +374,22 @@ header { box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } header h1 { - margin-left: -3rem; + font-size: 2.3rem; + font-style: italic; + text-align: center; flex: 1; } -header i { - margin-right: 16px; -} header button { background: none; border: none; - width: 8rem; - height: 3rem; + width: 5rem; + height: 5rem; padding-top: 1rem; margin-top: -1rem; } -header button::before { - content: ''; - display: block; - width: 2rem; - height: 4px; - margin-top: -9px; - border-radius: 4px; - background: #9b9b93; - box-shadow: 0 7px 0 #9b9b93, 0 14px 0 #9b9b93; +header button i { + padding: 2rem; + background-position: center; } .menu { width: 24.5rem; diff --git a/design/.DS_Store b/design/.DS_Store new file mode 100644 index 0000000..6254164 Binary files /dev/null and b/design/.DS_Store differ diff --git a/src/img/Menu.svg b/src/img/Menu.svg new file mode 100644 index 0000000..5744a1f --- /dev/null +++ b/src/img/Menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/Search.svg b/src/img/Search.svg index 6a72cd3..c4f91e8 100644 --- a/src/img/Search.svg +++ b/src/img/Search.svg @@ -1,14 +1,3 @@ - - - - Search - Created with Sketch. - - - - - - - - - \ No newline at end of file + + + diff --git a/src/index.html b/src/index.html index ee1b5af..40af8c0 100644 --- a/src/index.html +++ b/src/index.html @@ -3,9 +3,9 @@ Hawk - - - + + + diff --git a/src/js/components/header.js b/src/js/components/header.js index dc6b61b..23549fe 100644 --- a/src/js/components/header.js +++ b/src/js/components/header.js @@ -11,14 +11,16 @@ export default class Header extends Component { let i; if (this.props.search) { - i = + i = } else { - i = + i = } return (
-

Hawk

{i} diff --git a/src/less/components/header.less b/src/less/components/header.less index f0a3d3a..d09f0f2 100644 --- a/src/less/components/header.less +++ b/src/less/components/header.less @@ -14,39 +14,25 @@ header { .shadow; h1 { - margin-left: -3rem; + font-size: 2.3rem; + font-style: italic; + text-align: center; flex: 1; } - i { - margin-right: 16px; - } - button { background: none; border: none; - width: 8rem; - height: 3rem; + width: 5rem; + height: 5rem; padding-top: 1rem; margin-top: -1rem; - &::before { - content: ''; - display: block; - - width: 2rem; - height: 4px; - - margin-top: -9px; - - border-radius: 4px; - - background: @overlay; - - box-shadow: 0 7px 0 @overlay, - 0 14px 0 @overlay; + i { + padding: 2rem; + background-position: center; } } } diff --git a/src/less/icons.less b/src/less/icons.less index 97f68a9..48b7151 100644 --- a/src/less/icons.less +++ b/src/less/icons.less @@ -2,6 +2,12 @@ display: block; } +.icon-menu { + .icon; + background: url(/img/Menu.svg) no-repeat; + width: 30px; + height: 30px; +} .icon-directory { .icon; background: url(/img/Directory.svg) no-repeat; @@ -54,8 +60,8 @@ .icon-search { .icon; background: url(/img/Search.svg) no-repeat; - width: 19px; - height: 27px; + width: 30px; + height: 30px; } .icon-cross {