feat: reorder the sidebar settings (#56)

* feat: reorder the sidebar settings * feat: update cancel button
Automattic · Apr 17, 2020 · e9c4630 · e9c4630
1 parent 424b550
commit e9c4630
Showing 1 changed file with 31 additions and 31 deletions.
diff --git a/src/editor/sidebar/index.js b/src/editor/sidebar/index.js
@@ -147,31 +147,13 @@ class Sidebar extends Component {
 		}
 		return (
 			<Fragment>
-				<strong>{ __( 'From', 'newspack-newsletters' ) }</strong>
 				<TextControl
-					label={ __( 'Name', 'newspack-newsletters' ) }
-					className="newspack-newsletters__name-textcontrol"
-					value={ senderName }
-					disabled={ inFlight }
-					onChange={ value => this.setState( { senderName: value, senderDirty: true } ) }
-				/>
-				<TextControl
-					label={ __( 'Email', 'newspack-newsletters' ) }
-					className="newspack-newsletters__email-textcontrol"
-					value={ senderEmail }
-					type="email"
+					label={ __( 'Subject', 'newspack-newsletters' ) }
+					className="newspack-newsletters__subject-textcontrol"
+					value={ title }
 					disabled={ inFlight }
-					onChange={ value => this.setState( { senderEmail: value, senderDirty: true } ) }
+					onChange={ value => editPost( { title: value } ) }
 				/>
-				{ senderDirty && (
-					<Button
-						isLink
-						onClick={ () => this.updateSender( senderName, senderEmail ) }
-						disabled={ inFlight }
-					>
-						{ __( 'Update Sender', 'newspack-newsletters' ) }
-					</Button>
-				) }
 				<hr />
 				<SelectControl
 					label={ __( 'To', 'newspack-newsletters' ) }
@@ -191,29 +173,47 @@ class Sidebar extends Component {
 					disabled={ inFlight }
 				/>
 				<hr />
+				<strong>{ __( 'From', 'newspack-newsletters' ) }</strong>
 				<TextControl
-					label={ __( 'Subject', 'newspack-newsletters' ) }
-					className="newspack-newsletters__subject-textcontrol"
-					value={ title }
+					label={ __( 'Name', 'newspack-newsletters' ) }
+					className="newspack-newsletters__name-textcontrol"
+					value={ senderName }
 					disabled={ inFlight }
-					onChange={ value => editPost( { title: value } ) }
+					onChange={ value => this.setState( { senderName: value, senderDirty: true } ) }
+				/>
+				<TextControl
+					label={ __( 'Email', 'newspack-newsletters' ) }
+					className="newspack-newsletters__email-textcontrol"
+					value={ senderEmail }
+					type="email"
+					disabled={ inFlight }
+					onChange={ value => this.setState( { senderEmail: value, senderDirty: true } ) }
 				/>
+				{ senderDirty && (
+					<Button
+						isLink
+						onClick={ () => this.updateSender( senderName, senderEmail ) }
+						disabled={ inFlight }
+					>
+						{ __( 'Update Sender', 'newspack-newsletters' ) }
+					</Button>
+				) }
 				<hr />
 				<Button
-					isPrimary
+					isSecondary
 					onClick={ () => this.setState( { showTestModal: true } ) }
 					disabled={ inFlight }
 				>
-					{ __( 'Send Test', 'newspack-newsletters' ) }
+					{ __( 'Send a Test Email', 'newspack-newsletters' ) }
 				</Button>
 				{ showTestModal && (
 					<Modal
-						title={ __( 'Send Test Email', 'newspack-newsletters' ) }
+						title={ __( 'Send a Test Email', 'newspack-newsletters' ) }
 						onRequestClose={ () => this.setState( { showTestModal: false } ) }
 						className="newspack-newsletters__send-test"
 					>
 						<TextControl
-							label={ __( 'Send to this email', 'newspack-newsletters' ) }
+							label={ __( 'Send a test to', 'newspack-newsletters' ) }
 							value={ testEmail }
 							type="email"
 							onChange={ value => this.setState( { testEmail: value } ) }
@@ -226,7 +226,7 @@ class Sidebar extends Component {
 						>
 							{ __( 'Send Test', 'newspack-newsletters' ) }
 						</Button>
-						<Button isTertiary onClick={ () => this.setState( { showTestModal: false } ) }>
+						<Button isSecondary onClick={ () => this.setState( { showTestModal: false } ) }>
 							{ __( 'Cancel', 'newspack-newsletters' ) }
 						</Button>
 					</Modal>