update coming soon component to new layout to pass test

src/app/pages/settings/comingSoon.js

@@ -10,17 +10,18 @@ import { SectionSettings } from "../../components/section";
 import { useNotification } from '../../components/notifications/feed';
 
 const ComingSoon = () => {
-	const { store, setStore } = useContext( AppStore );
-	const [ comingSoon, setComingSoon ] = useState( store.comingSoon );
-	const [ isError, setError ] = useState( false );
-	
+	const { store, setStore } = useContext(AppStore);
+	const [comingSoon, setComingSoon] = useState(store.comingSoon);
+	const [isError, setError] = useState(false);
+
 	let notify = useNotification();
 
 	const getComingSoonNoticeTitle = () => {
 		return comingSoon
-			? __( 'Coming soon activated.', 'wp-plugin-mojo' )
-			: __( 'Coming soon deactivated.', 'wp-plugin-mojo' );
+			? __('Coming soon activated', 'wp-plugin-mojo')
+			: __('Coming soon deactivated', 'wp-plugin-mojo');
 	};
+
 	const getComingSoonNoticeText = () => {
 		return comingSoon
 			? __(
@@ -32,6 +33,20 @@ const ComingSoon = () => {
 				'wp-plugin-mojo'
 			);
 	};
+
+	const getComingSoonSectionTitle = () => {
+		const getStatus = () => {
+			return (
+				comingSoon 
+				? <span className="nfd-text-[#e10001]">{__('Coming Soon', 'wp-plugin-mojo')}</span>
+				: <span className="nfd-text-[#008112]">{__('Live', 'wp-plugin-mojo')}</span>
+			);
+		};
+
+		return (
+			<span>{__('Site Status', 'wp-plugin-mojo')}: {getStatus()}</span>
+		)
+	};
 
 	const toggleComingSoon = () => {
 		mojoSettingsApiFetch({ comingSoon: !comingSoon }, setError, (response) => {
@@ -52,27 +67,27 @@ const ComingSoon = () => {
 		});
 	};
 
-	useUpdateEffect( () => {
+	useUpdateEffect(() => {
 		setStore({
 			...store,
 			comingSoon,
 		});
 
 		notifySuccess();
 		comingSoonAdminbarToggle(comingSoon);
-	}, [ comingSoon ] );
+	}, [comingSoon]);
 
 	return (
 		<SectionSettings
-			title={__('Maintenance Mode', 'wp-plugin-mojo')}
+			title={getComingSoonSectionTitle()}
 			description={__('Still building your site? Need to make a big change?', 'wp-plugin-mojo')}
 		>
 			<div className="nfd-flex nfd-flex-col nfd-gap-6">
 				<ToggleField
 					id="coming-soon-toggle"
-					label="Coming soon page"
+					label={__('Coming soon page', 'wp-plugin-mojo')}
 					description={__(
-						'Your MOJO Coming Soon page lets you hide your site from visitors while you make the magic happen.',
+						'Your Hostgator Coming Soon page lets you hide your site from visitors while you make the magic happen.',
 						'wp-plugin-mojo'
 					)}
 					checked={comingSoon}
@@ -95,6 +110,6 @@ const ComingSoon = () => {
 			</div>
 		</SectionSettings>
 	);
-};
+}
 
-export default ComingSoon;
+export default ComingSoon;