From 5aaba85f679607b80fe7efa9c20d8e455afc2fe3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Sat, 21 Nov 2015 10:52:44 +0100
Subject: [PATCH] Site Settings: move primary button to <SectionHeader>.

And update to use <Button>.
---
 .../stylesheets/sections/_site-settings.scss  |  4 --
 .../my-sites/site-settings/form-general.jsx   | 67 ++++++++++++-------
 2 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/assets/stylesheets/sections/_site-settings.scss b/assets/stylesheets/sections/_site-settings.scss
index 54352762d00bd1..a424060de0d813 100644
--- a/assets/stylesheets/sections/_site-settings.scss
+++ b/assets/stylesheets/sections/_site-settings.scss
@@ -54,10 +54,6 @@
 
 	.is-primary {
 		float: right;
-
-		&:first-child {
-			margin-bottom: 20px;
-		}
 	}
 
     .empty-content {
diff --git a/client/my-sites/site-settings/form-general.jsx b/client/my-sites/site-settings/form-general.jsx
index b4fa8e99b35726..363a0926c43910 100644
--- a/client/my-sites/site-settings/form-general.jsx
+++ b/client/my-sites/site-settings/form-general.jsx
@@ -7,6 +7,7 @@ var React = require( 'react' );
  * Internal dependencies
  */
 var Card = require( 'components/card' ),
+	Button = require( 'components/button' ),
 	formBase = require( './form-base' ),
 	RelatedContentPreview = require( 'my-sites/site-settings/related-content-preview' ),
 	LanguageSelector = require( 'components/forms/language-selector' ),
@@ -397,44 +398,62 @@ module.exports = React.createClass( {
 
 		return (
 			<div>
-				<SectionHeader label={ this.translate( 'Site Profile' ) } />
+				<SectionHeader label={ this.translate( 'Site Profile' ) }>
+					<Button
+						compact={ true }
+						onClick={ this.submitForm }
+						primary={ true }
+						type="submit"
+						disabled={ this.state.fetchingSettings || this.state.submittingForm }>
+							{ this.state.submittingForm
+								? this.translate( 'Saving…' )
+								: this.translate( 'Save Settings' )
+							}
+					</Button>
+				</SectionHeader>
 				<Card>
-					<form onSubmit={ this.submitForm } onChange={ this.markChanged }>
+					<form onChange={ this.markChanged }>
 						{ this.siteOptions() }
 						{ this.languageOptions() }
-						<button
-							type="submit"
-							className="button is-primary"
-							disabled={ this.state.fetchingSettings || this.state.submittingForm }>
-								{ this.state.submittingForm ? this.translate( 'Saving…' ) : this.translate( 'Save Settings' ) }
-						</button>
 					</form>
 				</Card>
-				<SectionHeader label={ this.translate( 'Address and visibility' ) } />
+				<SectionHeader label={ this.translate( 'Address and visibility' ) }>
+					<Button
+						compact={ true }
+						onClick={ this.submitForm }
+						primary={ true }
+						type="submit"
+						disabled={ this.state.fetchingSettings || this.state.submittingForm }>
+							{ this.state.submittingForm
+								? this.translate( 'Saving…' )
+								: this.translate( 'Save Settings' )
+							}
+					</Button>
+				</SectionHeader>
 				<Card>
-					<form onSubmit={ this.submitForm } onChange={ this.markChanged }>
+					<form onChange={ this.markChanged }>
 						{ this.blogAddress() }
 						{ this.visibilityOptions() }
-						<button
-							type="submit"
-							className="button is-primary"
-							disabled={ this.state.fetchingSettings || this.state.submittingForm }>
-								{ this.state.submittingForm ? this.translate( 'Saving…' ) : this.translate( 'Save Settings' ) }
-						</button>
 					</form>
 				</Card>
-				<SectionHeader label={ this.translate( 'Other' ) } />
+				<SectionHeader label={ this.translate( 'Other' ) }>
+					<Button
+						compact={ true }
+						onClick={ this.submitForm }
+						primary={ true }
+						type="submit"
+						disabled={ this.state.fetchingSettings || this.state.submittingForm }>
+							{ this.state.submittingForm
+								? this.translate( 'Saving…' )
+								: this.translate( 'Save Settings' )
+							}
+					</Button>
+				</SectionHeader>
 				<Card>
-					<form onSubmit={ this.submitForm } onChange={ this.markChanged }>
+					<form onChange={ this.markChanged }>
 						{ this.jetpackOptions() }
 						{ this.jetpackDisconnectOption() }
 						{ this.relatedPostsOptions() }
-						<button
-							type="submit"
-							className="button is-primary"
-							disabled={ this.state.fetchingSettings || this.state.submittingForm }>
-								{ this.state.submittingForm ? this.translate( 'Saving…' ) : this.translate( 'Save Settings' ) }
-						</button>
 					</form>
 				</Card>
 			</div>