From 88f8909fccfa0d60d63a5f08655106bd93b3007d Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sat, 3 Oct 2015 18:34:45 +0200 Subject: [PATCH 1/3] 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 { -- 2.34.1 From 5c5305d24340d4735e0f7aa545b032ef010d1480 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sat, 3 Oct 2015 18:41:25 +0200 Subject: [PATCH 2/3] Ignore DS_Store --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 123ae94..828c66c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +# DS_Store +.DS_Store + # Logs logs *.log -- 2.34.1 From be8ae4f0b9f764589b080301c4c76f6fd99447ff Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sat, 3 Oct 2015 18:58:44 +0200 Subject: [PATCH 3/3] Tweaks to the header changes --- build/img/Close.svg | 3 +++ build/main.js | 2 +- build/style.css | 12 ++++-------- src/img/Close.svg | 3 +++ src/js/components/header.js | 2 +- src/less/components/header.less | 2 +- src/less/icons.less | 9 ++++----- 7 files changed, 17 insertions(+), 16 deletions(-) create mode 100644 build/img/Close.svg create mode 100644 src/img/Close.svg diff --git a/build/img/Close.svg b/build/img/Close.svg new file mode 100644 index 0000000..5fcc2d4 --- /dev/null +++ b/build/img/Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/build/main.js b/build/main.js index 5f14a0b..a525cce 100644 --- a/build/main.js +++ b/build/main.js @@ -30812,7 +30812,7 @@ var Header = (function (_Component) { ), _react2['default'].createElement( 'h1', - { className: 'regular-medium' }, + null, 'Hawk' ), i diff --git a/build/style.css b/build/style.css index 2fa5f8a..b9602aa 100644 --- a/build/style.css +++ b/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 { diff --git a/src/img/Close.svg b/src/img/Close.svg new file mode 100644 index 0000000..5fcc2d4 --- /dev/null +++ b/src/img/Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/js/components/header.js b/src/js/components/header.js index 23549fe..7ab073f 100644 --- a/src/js/components/header.js +++ b/src/js/components/header.js @@ -21,7 +21,7 @@ export default class Header extends Component { -

Hawk

+

Hawk

{i}
diff --git a/src/less/components/header.less b/src/less/components/header.less index d09f0f2..071a2af 100644 --- a/src/less/components/header.less +++ b/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; } } diff --git a/src/less/icons.less b/src/less/icons.less index b7f2e9c..eb60ce9 100644 --- a/src/less/icons.less +++ b/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 { -- 2.34.1