diff --git a/client/app/scripts/components/details.js b/client/app/scripts/components/details.js
index 9bd1b9c8c..da74daaf3 100644
--- a/client/app/scripts/components/details.js
+++ b/client/app/scripts/components/details.js
@@ -1,15 +1,26 @@
const React = require('react');
+const AppActions = require('../actions/app-actions');
const NodeDetails = require('./node-details');
const Details = React.createClass({
+ handleClickClose: function(ev) {
+ ev.preventDefault();
+ AppActions.clickCloseDetails();
+ },
+
render: function() {
return (
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index d174c4f89..c76ab2034 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -316,6 +316,33 @@ h2 {
top: 24px;
bottom: 48px;
width: 420px;
+
+ .details-tools-wrapper {
+ position: relative;
+ }
+
+ .details-tools {
+ position: absolute;
+ top: 16px;
+ right: 24px;
+
+ span {
+ .palable;
+ padding: 4px;
+ margin-left: 2px;
+ font-size: 110%;
+ color: @white;
+ cursor: pointer;
+ opacity: 0.7;
+ border: 1px solid rgba(255, 255, 255, 0);
+ border-radius: 10%;
+
+ &:hover {
+ opacity: 1;
+ border-color: rgba(255, 255, 255, 0.6);
+ }
+ }
+ }
}
.node-details {
@@ -327,7 +354,7 @@ h2 {
&-header {
- padding: 24px 36px 16px 36px;
+ padding: 36px 36px 16px 36px;
&-row {
display: flex;