From 12f92786ae54ba426a0a9ba5ad440765b1c8f1e5 Mon Sep 17 00:00:00 2001
From: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
Date: Wed, 22 Mar 2017 17:25:50 +0100
Subject: [PATCH] issue #25 edit buttons position

---
 src/containers/visualization.js | 35 ++++++++++++++++++++-------------
 src/styles/app.css              | 31 +++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/src/containers/visualization.js b/src/containers/visualization.js
index b4228b1..18e75bc 100644
--- a/src/containers/visualization.js
+++ b/src/containers/visualization.js
@@ -261,21 +261,28 @@ class Visualization extends Component {
 
     return (
       <div>
-        <div>
-          <h1>
-            {this.state.visualization.name}
-          </h1>
-
-          <div>
-            {this.state.editing ? (
-              <div>
-                <Button bsStyle="link" onClick={() => this.saveChanges()}>Save</Button>
-                <Button bsStyle="link" onClick={() => this.discardChanges()}>Cancel</Button>
-              </div>
-            ) : (
-              <Button bsStyle="link" onClick={() => this.setState({ editing: true })}>Edit</Button>
-            )}
+        <div className='section-header'>
+          <div className="section-title">
+            <span>
+              {this.state.visualization.name}
+            </span>
           </div>
+          {this.state.editing ? (
+            <div className='section-buttons-group'>
+              <Button bsStyle="link" onClick={() => this.saveChanges()}>
+                <span className="glyphicon glyphicon-floppy-disk"></span> Save
+              </Button>
+              <Button bsStyle="link" onClick={() => this.discardChanges()}>
+                <span className="glyphicon glyphicon-remove"></span> Cancel
+              </Button>
+            </div>
+          ) : (
+            <div className='section-buttons-group'>
+              <Button bsStyle="link" onClick={() => this.setState({ editing: true })}>
+                <span className="glyphicon glyphicon-pencil"></span> Edit
+              </Button>
+            </div>
+          )}
         </div>
 
         <div>
diff --git a/src/styles/app.css b/src/styles/app.css
index 6c7ad7a..a806c08 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -174,3 +174,34 @@ body {
 
   cursor: default !important;
 }
+
+/**
+ *  Sections
+ */
+.section-header div {
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
+}
+
+.section-title {
+  font-size: 1.5em;
+}
+
+.section-header .section-buttons-group {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.section-header button {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
+.section-header .btn-link:hover, .section-header .btn-link:focus {
+  text-decoration: none;
+}
+
+.section-header .glyphicon {
+  font-size: 0.8em;
+}