Relocate scan and firewall footers

projects/plugins/protect/src/js/components/firewall-footer/index.jsx → projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx

@@ -2,10 +2,10 @@ import { AdminSectionHero, Title, Text, Button } from '@automattic/jetpack-compo
 import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useCallback } from 'react';
+import SeventyFiveLayout from '../../components/seventy-five-layout';
 import useModal from '../../hooks/use-modal';
 import useNotices from '../../hooks/use-notices';
 import useWafData from '../../hooks/use-waf-data';
-import SeventyFiveLayout from '../seventy-five-layout';
 import styles from './styles.module.scss';
 
 const StandaloneMode = () => {

projects/plugins/protect/src/js/routes/firewall/index.jsx

@@ -14,17 +14,17 @@ import { Icon, closeSmall } from '@wordpress/icons';
 import moment from 'moment';
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import AdminPage from '../../components/admin-page';
-import FirewallFooter from '../../components/firewall-footer';
 import FormToggle from '../../components/form-toggle';
-import ScanFooter from '../../components/scan-footer';
 import Textarea from '../../components/textarea';
 import { FREE_PLUGIN_SUPPORT_URL, PAID_PLUGIN_SUPPORT_URL } from '../../constants';
 import useWafSeenMutation from '../../data/waf/use-waf-seen-mutation';
 import useWafUpgradeSeenMutation from '../../data/waf/use-waf-upgrade-seen-mutation';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
+import ScanFooter from '../scan/scan-footer';
 import FirewallAdminSectionHero from './firewall-admin-section-hero';
+import FirewallFooter from './firewall-footer';
 import styles from './styles.module.scss';
 
 const ADMIN_URL = window?.jetpackProtectInitialState?.adminUrl;

projects/plugins/protect/src/js/routes/firewall/styles.module.scss

@@ -189,4 +189,35 @@
     .stat-card-icon {
         margin-bottom: 0;
     }
-}
+}
+
+.footer-checkbox {
+    display: flex;
+    align-items: center;
+
+    & input[type=checkbox]:checked {
+        background: var( --jp-green-40 );
+        border-color: var( --jp-green-40 );
+    }
+
+    & input[type=checkbox]:indeterminate {
+        background: var( --jp-green-40 );
+        border-color: var( --jp-green-40 );
+    }
+
+    & input[type=checkbox]:focus {
+        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --jp-green-40 );
+    } 
+}
+
+.standalone-mode-section, .share-data-section {
+	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
+    margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}
+
+@media ( max-width: 599px ) {
+
+    .share-data-section {
+        margin-top: 0;
+    }
+}

projects/plugins/protect/src/js/routes/scan/history/index.jsx

@@ -4,13 +4,13 @@ import { useCallback } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import AdminPage from '../../../components/admin-page';
 import ProtectCheck from '../../../components/protect-check-icon';
-import ScanFooter from '../../../components/scan-footer';
 import ThreatsNavigation from '../../../components/threats-list/navigation';
 import PaidList from '../../../components/threats-list/paid-list';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useAnalyticsTracks from '../../../hooks/use-analytics-tracks';
 import usePlan from '../../../hooks/use-plan';
 import useProtectData from '../../../hooks/use-protect-data';
+import ScanFooter from '../scan-footer';
 import HistoryAdminSectionHero from './history-admin-section-hero';
 import StatusFilters from './status-filters';
 import styles from './styles.module.scss';

projects/plugins/protect/src/js/routes/scan/index.jsx

@@ -1,6 +1,5 @@
 import { AdminSection, Container, Col } from '@automattic/jetpack-components';
 import AdminPage from '../../components/admin-page';
-import ScanFooter from '../../components/scan-footer';
 import ThreatsList from '../../components/threats-list';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
@@ -9,6 +8,7 @@ import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import onboardingSteps from './onboarding-steps';
 import ScanAdminSectionHero from './scan-admin-section-hero';
+import ScanFooter from './scan-footer';
 
 /**
  * Scan Page

projects/plugins/protect/src/js/components/scan-footer/index.jsx → projects/plugins/protect/src/js/routes/scan/scan-footer.jsx

@@ -10,10 +10,10 @@ import {
 } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useCallback } from 'react';
+import SeventyFiveLayout from '../../components/seventy-five-layout';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
-import SeventyFiveLayout from '../seventy-five-layout';
 import styles from './styles.module.scss';
 
 const ProductPromotion = () => {

projects/plugins/protect/src/js/routes/scan/styles.module.scss

@@ -11,4 +11,9 @@
 		object-fit: cover;
 		width: 100%;
 	}
-}
+}
+
+.product-section, .info-section {
+	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
+	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}