styling for the new save current button done

client/homebrew/pages/homePage/homePage.jsx

@@ -1,70 +1,74 @@
-var React = require('react');
-var _ = require('lodash');
-var cx = require('classnames');
-
-var Nav = require('naturalcrit/nav/nav.jsx');
-var Navbar = require('../../navbar/navbar.jsx');
-var PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
-
-
-var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-var Editor = require('../../editor/editor.jsx');
-var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
-
-
-
-var HomePage = React.createClass({
-	getDefaultProps: function() {
-		return {
-			welcomeText : ""
-		};
-	},
-	getInitialState: function() {
-		return {
-			text: this.props.welcomeText
-		};
-	},
-	handleSplitMove : function(){
-		this.refs.editor.update();
-	},
-	handleTextChange : function(text){
-		this.setState({
-			text : text
-		});
-	},
-	renderNavbar : function(){
-		return <Navbar>
-			<Nav.section>
-				<PatreonNavItem />
-				<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
-					report issue
-				</Nav.item>
-				<Nav.item newTab={true} href='/homebrew/changelog' color='purple' icon='fa-file-text-o'>
-					Changelog
-				</Nav.item>
-				<Nav.item href='/homebrew/new' color='green' icon='fa-external-link'>
-					New Brew
-				</Nav.item>
-			</Nav.section>
-		</Navbar>
-	},
-
-	render : function(){
-		return <div className='homePage page'>
-			{this.renderNavbar()}
-
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
-					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-					<BrewRenderer text={this.state.text} />
-				</SplitPane>
-			</div>
-
-			<a href='/homebrew/new' className='floatingNewButton'>
-				Create your own <i className='fa fa-magic' />
-			</a>
-		</div>
-	}
-});
-
-module.exports = HomePage;
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+var Navbar = require('../../navbar/navbar.jsx');
+var PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
+
+
+var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+var Editor = require('../../editor/editor.jsx');
+var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+
+
+
+var HomePage = React.createClass({
+	getDefaultProps: function() {
+		return {
+			welcomeText : ""
+		};
+	},
+	getInitialState: function() {
+		return {
+			text: this.props.welcomeText
+		};
+	},
+	handleSplitMove : function(){
+		this.refs.editor.update();
+	},
+	handleTextChange : function(text){
+		this.setState({
+			text : text
+		});
+	},
+	renderNavbar : function(){
+		return <Navbar>
+			<Nav.section>
+				<PatreonNavItem />
+				<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
+					report issue
+				</Nav.item>
+				<Nav.item newTab={true} href='/homebrew/changelog' color='purple' icon='fa-file-text-o'>
+					Changelog
+				</Nav.item>
+				<Nav.item href='/homebrew/new' color='green' icon='fa-external-link'>
+					New Brew
+				</Nav.item>
+			</Nav.section>
+		</Navbar>
+	},
+
+	render : function(){
+		return <div className='homePage page'>
+			{this.renderNavbar()}
+
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
+					<BrewRenderer text={this.state.text} />
+				</SplitPane>
+			</div>
+
+			<div className={cx('floatingSaveButton', {show : this.props.welcomeText != this.state.text})}>
+				Save current <i className='fa fa-save' />
+			</div>
+
+			<a href='/homebrew/new' className='floatingNewButton'>
+				Create your own <i className='fa fa-magic' />
+			</a>
+		</div>
+	}
+});
+
+module.exports = HomePage;

client/homebrew/pages/homePage/homePage.less

@@ -1,21 +1,43 @@
-
-.homePage{
-	position : relative;
-	a.floatingNewButton{
-		.animate(background-color);
-		position         : absolute;
-		display          : block;
-		right            : 70px;
-		bottom           : 70px;
-		z-index          : 100;
-		padding          : 1em;
-		background-color : @orange;
-		font-size        : 1.5em;
-		color            : white;
-		text-decoration  : none;
-		box-shadow       : 3px 3px 15px black;
-		&:hover{
-			background-color : darken(@orange, 20%);
-		}
-	}
+.homePage{
+	position : relative;
+	a.floatingNewButton{
+		.animate(background-color);
+		position         : absolute;
+		display          : block;
+		right            : 70px;
+		bottom           : 70px;
+		z-index          : 100;
+		z-index          : 5001;
+		padding          : 1em;
+		background-color : @orange;
+		font-size        : 1.5em;
+		color            : white;
+		text-decoration  : none;
+		box-shadow       : 3px 3px 15px black;
+		&:hover{
+			background-color : darken(@orange, 20%);
+		}
+	}
+	.floatingSaveButton{
+		.animateAll();
+		position         : absolute;
+		display          : block;
+		right            : 200px;
+		bottom           : 90px;
+		z-index          : 100;
+		z-index          : 5000;
+		padding          : 0.8em;
+		cursor           : pointer;
+		background-color : @blue;
+		font-size        : 0.8em;
+		color            : white;
+		text-decoration  : none;
+		box-shadow       : 3px 3px 15px black;
+		&:hover{
+			background-color : darken(@blue, 20%);
+		}
+		&.show{
+			right : 350px;
+		}
+	}
 }