feat: update debug mode notice style and position (#1605)

Automattic · Apr 14, 2022 · b28075c · b28075c
1 parent 3106f18
commit b28075c
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 32 deletions.
diff --git a/assets/components/src/notice/index.js b/assets/components/src/notice/index.js
@@ -7,6 +7,7 @@
  */
 import { Component, RawHTML } from '@wordpress/element';
 import { Icon, check, help, info } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
@@ -25,6 +26,7 @@ class Notice extends Component {
 	render() {
 		const {
 			className,
+			debugMode,
 			isError,
 			isHelp,
 			isSuccess,
@@ -37,6 +39,7 @@ class Notice extends Component {
 		const classes = classnames(
 			'newspack-notice',
 			className,
+			debugMode && 'newspack-notice__is-debug',
 			isError && 'newspack-notice__is-error',
 			isHelp && 'newspack-notice__is-help',
 			isSuccess && 'newspack-notice__is-success',
@@ -55,6 +58,7 @@ class Notice extends Component {
 				{ <Icon icon={ noticeIcon } /> }
 				<div className="newspack-notice__content">
 					{ rawHTML ? <RawHTML>{ noticeText }</RawHTML> : noticeText }
+					{ debugMode && __( 'Debug Mode', 'newspack' ) }
 					{ children || null }
 				</div>
 			</div>

diff --git a/assets/components/src/notice/style.scss b/assets/components/src/notice/style.scss
@@ -24,6 +24,22 @@
 		margin-right: 4px;
 	}
 
+	&__is-debug {
+		background: $primary-700;
+		bottom: 16px;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		color: white;
+		font-weight: bold;
+		margin: 0 16px;
+		position: fixed;
+		text-transform: uppercase;
+		z-index: 9997;
+
+		> svg {
+			fill: white;
+		}
+	}
+
 	&__is-error {
 		background: lighten( $alert-red, 51% );
 

diff --git a/assets/components/src/with-wizard-screen/index.js b/assets/components/src/with-wizard-screen/index.js
@@ -58,13 +58,7 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 			);
 		return (
 			<>
-				{ newspack_aux_data.is_debug_mode && (
-					<Notice
-						isWarning
-						className="newspack-wizard__above-header"
-						noticeText={ __( 'Newspack is in debug mode.', 'newspack' ) }
-					/>
-				) }
+				{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
 				<div className="newspack-wizard__header">
 					<div className="newspack-wizard__header__inner">
 						<div className="newspack-wizard__title">

diff --git a/assets/components/src/wizard/index.js b/assets/components/src/wizard/index.js
@@ -76,13 +76,7 @@ const Wizard = ( {
 				) }
 			>
 				<HashRouter hashType="slash">
-					{ newspack_aux_data.is_debug_mode && (
-						<Notice
-							isWarning
-							className="newspack-wizard__above-header"
-							noticeText={ __( 'Newspack is in debug mode.', 'newspack' ) }
-						/>
-					) }
+					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
 					<div className="bg-white">
 						<div className="newspack-wizard__header__inner">
 							<div className="newspack-wizard__title">

diff --git a/assets/wizards/componentsDemo/index.js b/assets/wizards/componentsDemo/index.js
@@ -86,13 +86,7 @@ class ComponentsDemo extends Component {
 
 		return (
 			<Fragment>
-				{ newspack_aux_data.is_debug_mode && (
-					<Notice
-						isWarning
-						className="newspack-wizard__above-header"
-						noticeText={ __( 'Newspack is in debug mode.', 'newspack' ) }
-					/>
-				) }
+				{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
 				<div className="newspack-wizard__header">
 					<div className="newspack-wizard__header__inner">
 						<div className="newspack-wizard__title">

diff --git a/assets/wizards/dashboard/index.js b/assets/wizards/dashboard/index.js
@@ -19,13 +19,7 @@ const Dashboard = ( { items } ) => {
 	return (
 		<Fragment>
 			<GlobalNotices />
-			{ newspack_aux_data.is_debug_mode && (
-				<Notice
-					isWarning
-					className="newspack-wizard__above-header"
-					noticeText={ __( 'Newspack is in debug mode.', 'newspack' ) }
-				/>
-			) }
+			{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
 			<div className="newspack-wizard__header">
 				<div className="newspack-wizard__header__inner">
 					<div className="newspack-wizard__title">

diff --git a/assets/wizards/dashboard/style.scss b/assets/wizards/dashboard/style.scss
@@ -23,7 +23,3 @@
 		fill: $primary-500;
 	}
 }
-
-.newspack-notice {
-	margin: 0;
-}