From 88f8909fccfa0d60d63a5f08655106bd93b3007d Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sat, 3 Oct 2015 18:34:45 +0200 Subject: [PATCH] Header style changes --- build/img/Menu.svg | 3 +++ build/img/Search.svg | 17 +++------------- build/index.html | 6 +++--- build/main.js | 18 ++++++++++++++--- build/style.css | 33 ++++++++++++++++---------------- design/.DS_Store | Bin 0 -> 6148 bytes src/img/Menu.svg | 3 +++ src/img/Search.svg | 17 +++------------- src/index.html | 6 +++--- src/js/components/header.js | 8 +++++--- src/less/components/header.less | 30 ++++++++--------------------- src/less/icons.less | 10 ++++++++-- 12 files changed, 70 insertions(+), 81 deletions(-) create mode 100644 build/img/Menu.svg create mode 100644 design/.DS_Store create mode 100644 src/img/Menu.svg 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 0000000000000000000000000000000000000000..62541642bd7411da3bcab3ee2e2663c1481040af GIT binary patch literal 6148 zcmeHKF-`+P44j1sMWRVTLAfOr5$SaiQ=E4Jl}Y%Z6pcD`KA2hraDnGLQ`X zLk8HhCF4WKw8=m+kPLh>p#MXq3Y);r(S98?I=*XtB$RM$cL`#Rc@x+8}yj1a^*|j$%8rPV8LbhEi;I`m2SbG>&PLfn=c1z`jo>>i_4|AMXGCq?{!K z$-tjtpp0f$vnf9*dh6ih)N3pCn))G(wQ!o=A%GLL;^UpTsxjl5z|PUq>9=%Z9t6Zo KN;2>p47>vX^(}1x literal 0 HcmV?d00001 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 {