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 @@
-
-
\ 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 @@
-
-
\ 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 {