From e5cbf7e782c0e049ef456b43b56ae9ad3042254f Mon Sep 17 00:00:00 2001
From: alternatekev <alternatekev@me.com>
Date: Tue, 15 Dec 2015 15:49:58 -0700
Subject: [PATCH] cleaned up modules for jetpack and site profile

removed redundant headers

tidies up the form a bit

removes the is-magic classname to show save buttons by default again

removed extraneous is-magic class from css
---
 .../my-sites/site-settings/form-general.jsx   | 90 ++++++++++---------
 client/my-sites/site-settings/style.scss      | 11 ++-
 2 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/client/my-sites/site-settings/form-general.jsx b/client/my-sites/site-settings/form-general.jsx
index d580fe387eac0b..f6d95e5e43012a 100644
--- a/client/my-sites/site-settings/form-general.jsx
+++ b/client/my-sites/site-settings/form-general.jsx
@@ -17,7 +17,10 @@ var Card = require( 'components/card' ),
 	protectForm = require( 'lib/mixins/protect-form' ),
 	notices = require( 'notices' ),
 	analytics = require( 'analytics' ),
-	dirtyLinkedState = require( 'lib/mixins/dirty-linked-state' );
+	dirtyLinkedState = require( 'lib/mixins/dirty-linked-state' ),
+	Button = require( 'components/button' ),
+	Gridicon = require( 'components/gridicon' ),
+	FormInput = require( 'components/forms/form-text-input' );
 
 module.exports = React.createClass( {
 
@@ -82,30 +85,33 @@ module.exports = React.createClass( {
 
 	siteOptions: function() {
 		return (
-			<fieldset>
-				<label htmlFor="blogname">{ this.translate( 'Site Title' ) }</label>
-				<input
-					name="blogname"
-					id="blogname"
-					type="text"
-					valueLink={ this.linkState( 'blogname' ) }
-					disabled={ this.state.fetchingSettings }
-					onClick={ this.recordEvent.bind( this, 'Clicked Site Title Field' ) }
-					onKeyPress={ this.recordEventOnce.bind( this, 'typedTitle', 'Typed in Site Title Field' ) }
-				/>
-				<p className="settings-explanation">{ this.translate( 'In a few words, explain what this site is about.' ) }</p>
-
-				<label htmlFor="blogdescription">{ this.translate( 'Site Tagline' ) }</label>
-				<input
-					name="blogdescription"
-					type="text"
-					id="blogdescription"
-					valueLink={ this.linkState( 'blogdescription' ) }
-					disabled={ this.state.fetchingSettings }
-					onClick={ this.recordEvent.bind( this, 'Clicked Site Site Tagline Field' ) }
-					onKeyPress={ this.recordEventOnce.bind( this, 'typedTagline', 'Typed in Site Site Tagline Field' ) }
-				/>
-			</fieldset>
+			<div>
+				<fieldset>
+					<label htmlFor="blogname">{ this.translate( 'Site Title' ) }</label>
+					<FormInput
+						name="blogname"
+						id="blogname"
+						type="text"
+						valueLink={ this.linkState( 'blogname' ) }
+						disabled={ this.state.fetchingSettings }
+						onClick={ this.recordEvent.bind( this, 'Clicked Site Title Field' ) }
+						onKeyPress={ this.recordEventOnce.bind( this, 'typedTitle', 'Typed in Site Title Field' ) }
+					/>
+				</fieldset>
+				<fieldset>
+					<label htmlFor="blogdescription">{ this.translate( 'Site Tagline' ) }</label>
+					<FormInput
+						name="blogdescription"
+						type="text"
+						id="blogdescription"
+						valueLink={ this.linkState( 'blogdescription' ) }
+						disabled={ this.state.fetchingSettings }
+						onClick={ this.recordEvent.bind( this, 'Clicked Site Site Tagline Field' ) }
+						onKeyPress={ this.recordEventOnce.bind( this, 'typedTagline', 'Typed in Site Site Tagline Field' ) }
+					/>
+					<p className="settings-explanation">{ this.translate( 'In a few words, explain what this site is about.' ) }</p>
+				</fieldset>
+			</div>
 		);
 	},
 
@@ -120,13 +126,13 @@ module.exports = React.createClass( {
 
 		if ( config.isEnabled( 'upgrades/domain-search' ) ) {
 			customAddress = (
-				<a
+				<Button
 					href={ '/domains/add/' + site.slug }
-					className="button"
 					onClick={ this.trackUpgradeClick }
+					
 				>
-					{ this.translate( 'Add a custom address', { context: 'Site address, domain' } ) }
-				</a>
+					<Gridicon icon="plus" /> { this.translate( 'Add a Custom Address', { context: 'Site address, domain' } ) }
+				</Button>
 			);
 
 			addressDescription =
@@ -144,7 +150,7 @@ module.exports = React.createClass( {
 		}
 
 		return (
-			<fieldset>
+			<fieldset className="site-settings__blog-address-container">
 				<label htmlFor="blogaddress">{ this.translate( 'Site Address' ) }</label>
 
 				<div className="blogaddress-settings">
@@ -198,9 +204,6 @@ module.exports = React.createClass( {
 
 		return (
 			<fieldset>
-
-				<legend>{ this.translate( 'Site Visibility' ) }</legend>
-
 				<label>
 					<input
 						type="radio"
@@ -256,7 +259,6 @@ module.exports = React.createClass( {
 
 		return (
 			<fieldset>
-				<legend>{ this.translate( 'Related Posts' ) }</legend>
 				<ul id="settings-reading-relatedposts">
 					<li>
 						<label>
@@ -323,7 +325,7 @@ module.exports = React.createClass( {
 						</li>
 					</ul>
 				</form>
-			</Card>	
+			</Card>
 		);
 	},
 
@@ -389,6 +391,7 @@ module.exports = React.createClass( {
 						compact={ true }
 						onClick={ this.submitForm }
 						primary={ true }
+
 						type="submit"
 						disabled={ this.state.fetchingSettings || this.state.submittingForm }>
 							{ this.state.submittingForm
@@ -400,15 +403,17 @@ module.exports = React.createClass( {
 				<Card>
 					<form onChange={ this.markChanged }>
 						{ this.siteOptions() }
+						{ this.blogAddress() }
 						{ this.languageOptions() }
 						{ this.holidaySnowOption() }
 					</form>
 				</Card>
-				<SectionHeader label={ this.translate( 'Address and visibility' ) }>
+				<SectionHeader label={ this.translate( 'Visibility' ) }>
 					<Button
 						compact={ true }
 						onClick={ this.submitForm }
 						primary={ true }
+
 						type="submit"
 						disabled={ this.state.fetchingSettings || this.state.submittingForm }>
 							{ this.state.submittingForm
@@ -419,7 +424,7 @@ module.exports = React.createClass( {
 				</SectionHeader>
 				<Card>
 					<form onChange={ this.markChanged }>
-						{ this.blogAddress() }
+
 						{ this.visibilityOptions() }
 					</form>
 				</Card>
@@ -427,17 +432,21 @@ module.exports = React.createClass( {
 					? <div>
 						<SectionHeader label={ this.translate( 'Jetpack' ) }>
 							{ this.jetpackDisconnectOption() }
-							<Button
-								compact={ true }
+							{ config.isEnabled( 'manage/option_sync_non_public_post_stati' )
+							  ? <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>
+								</Button>
+						 	 : null
+						 	}
 						</SectionHeader>
 
 						{ this.syncNonPublicPostTypes() }
@@ -455,6 +464,7 @@ module.exports = React.createClass( {
 						compact={ true }
 						onClick={ this.submitForm }
 						primary={ true }
+
 						type="submit"
 						disabled={ this.state.fetchingSettings || this.state.submittingForm }>
 							{ this.state.submittingForm
diff --git a/client/my-sites/site-settings/style.scss b/client/my-sites/site-settings/style.scss
index 4ad3f6b643a1e4..0053753d2d4003 100644
--- a/client/my-sites/site-settings/style.scss
+++ b/client/my-sites/site-settings/style.scss
@@ -94,12 +94,10 @@
 		}
 
 		.button {
-			margin: 8px 0 0 0;
-			text-align: center;
 			width: 100%;
+			margin-left: 16px;
 
 			@include breakpoint( ">660px" ) {
-				margin: 0 0 0 16px;
 				width: 45%;
 			}
 		}
@@ -218,3 +216,10 @@
 	}
 
 }
+
+.site-settings__blog-address-container {
+	margin: 0 -24px;
+	padding: 24px 24px 16px 24px;
+	border: 1px lighten( $gray, 30% ) solid;
+	border-width: 1px 0;
+}