From a9c601bd4b0587134ba74c116d7c0bf9d0cb5227 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 17 Feb 2017 16:04:39 +0000
Subject: [PATCH] Update custom formats style

---
 .../date-time-format-options.jsx              | 20 ++++++++++++-------
 .../site-settings/date-time-format/style.scss |  4 ----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/my-sites/site-settings/date-time-format/date-time-format-options.jsx b/client/my-sites/site-settings/date-time-format/date-time-format-options.jsx
index 896e304068c75b..e60ea72c436a97 100644
--- a/client/my-sites/site-settings/date-time-format/date-time-format-options.jsx
+++ b/client/my-sites/site-settings/date-time-format/date-time-format-options.jsx
@@ -137,13 +137,16 @@ export class DateTimeFormatOptions extends Component {
 							type="text"
 							value={ dateFormat || '' }
 						/>
-						<span className="date-time-format__custom-preview">
+						<FormSettingExplanation>
 							{ isCustomFormat && dateFormat
-								? today.format( phpToMomentDatetimeFormat( dateFormat ) )
+								? translate( 'Preview: %s', {
+									args: today.format( phpToMomentDatetimeFormat( dateFormat ) ),
+									comment: 'Date/time format preview'
+								} )
 								: ''
 							}
-						</span>
-				</span>
+						</FormSettingExplanation>
+					</span>
 				</FormLabel>
 			</FormFieldset>
 		);
@@ -199,12 +202,15 @@ export class DateTimeFormatOptions extends Component {
 							type="text"
 							value={ timeFormat || '' }
 						/>
-						<span className="date-time-format__custom-preview">
+						<FormSettingExplanation>
 							{ isCustomFormat && timeFormat
-								? today.format( phpToMomentDatetimeFormat( timeFormat ) )
+								? translate( 'Preview: %s', {
+									args: today.format( phpToMomentDatetimeFormat( timeFormat ) ),
+									comment: 'Date/time format preview'
+								} )
 								: ''
 							}
-						</span>
+						</FormSettingExplanation>
 					</span>
 					<FormSettingExplanation>
 						<ExternalLink
diff --git a/client/my-sites/site-settings/date-time-format/style.scss b/client/my-sites/site-settings/date-time-format/style.scss
index dd547d1af80d88..6fe39bfe816a04 100644
--- a/client/my-sites/site-settings/date-time-format/style.scss
+++ b/client/my-sites/site-settings/date-time-format/style.scss
@@ -7,8 +7,4 @@
 		margin: 0 12px;
 		width: 100px;
 	}
-
-	.date-time-format__custom-preview {
-		white-space: nowrap;
-	}
 }