Update custom formats style

Automattic · Feb 20, 2017 · a9c601b · a9c601b
1 parent ce7b56b
commit a9c601b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 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
@@ -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
@@ -7,8 +7,4 @@
 		margin: 0 12px;
 		width: 100px;
 	}
-
-	.date-time-format__custom-preview {
-		white-space: nowrap;
-	}
 }