[APP-2179] add image to infotip, text changes (#425)

Author: DinetsV

modules/scanner/assets/js/components/alt-text-form/index.js

@@ -229,9 +229,7 @@ export const AltTextForm = ({ item, current, setCurrent, setIsEdit }) => {
 						}
 						sx={{ mt: isManage ? 0 : 1.5 }}
 					>
-						{isGlobal
-							? __('Apply everywhere', 'pojo-accessibility')
-							: applyBtnText}
+						{isGlobal ? __('Apply to all', 'pojo-accessibility') : applyBtnText}
 					</Button>
 				</Box>
 			</Box>

modules/scanner/assets/js/components/color-contrast-form/index.js

@@ -173,9 +173,7 @@ export const ColorContrastForm = ({ item, current, setCurrent, setIsEdit }) => {
 						sx={{ mt: isManage ? 0 : 1.5 }}
 						fullWidth={!isManage}
 					>
-						{isGlobal
-							? __('Apply everywhere', 'pojo-accessibility')
-							: applyBtnText}
+						{isGlobal ? __('Apply to all', 'pojo-accessibility') : applyBtnText}
 					</Button>
 				</Box>
 			</Box>

modules/scanner/assets/js/components/manage-footer-actions/page/set-global-remediation-modal.js

@@ -15,7 +15,7 @@ export const SetGlobalRemediationModal = ({
 			onCancel={hideConfirmation}
 			logo={false}
 			title={__('Apply fix across scans?', 'pojo-accessibility')}
-			approveText={__('Apply everywhere', 'pojo-accessibility')}
+			approveText={__('Apply to all', 'pojo-accessibility')}
 			cancelText={__('Cancel', 'pojo-accessibility')}
 			approveButtonColor="info"
 			onApprove={onApprove}

modules/scanner/assets/js/components/manage-footer-actions/page/set-global.js

@@ -13,8 +13,12 @@ import { SetGlobalRemediationModal } from '@ea11y-apps/scanner/components/manage
 import { IS_PRO_PLAN, UPGRADE_URL } from '@ea11y-apps/scanner/constants';
 import { useScannerWizardContext } from '@ea11y-apps/scanner/context/scanner-wizard-context';
 import { useGlobalManageActions } from '@ea11y-apps/scanner/hooks/use-global-manage-actions';
+import infotipImageSrc from '@ea11y-apps/scanner/static/global-infotip-image.png';
 import { StyledProChip } from '@ea11y-apps/scanner/styles/app.styles';
-import { InfotipBox } from '@ea11y-apps/scanner/styles/manual-fixes.styles';
+import {
+	InfotipBox,
+	InfotipImage,
+} from '@ea11y-apps/scanner/styles/manual-fixes.styles';
 import { remediationItem } from '@ea11y-apps/scanner/types/remediation-item';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -91,17 +95,20 @@ export const SetGlobal = ({
 						disablePortal: true,
 					}}
 					content={
-						<InfotipBox sx={{ maxWidth: '260px' }}>
-							<Typography variant="subtitle2" sx={{ mb: 1 }}>
-								{__('Remember this fix across scans', 'pojo-accessibility')}
-							</Typography>
-							<Typography variant="body2" color="text.secondary">
-								{__(
-									'Apply this fix automatically to pages already scanned and to future scans.',
-									'pojo-accessibility',
-								)}
-							</Typography>
-						</InfotipBox>
+						<>
+							<InfotipImage src={infotipImageSrc} role="presentation" />
+							<InfotipBox sx={{ maxWidth: '260px' }}>
+								<Typography variant="subtitle2" sx={{ mb: 1 }}>
+									{__('Fix once, apply everywhere', 'pojo-accessibility')}
+								</Typography>
+								<Typography variant="body2" color="text.secondary">
+									{__(
+										'Apply this fix automatically to pages already scanned and to future scans.',
+										'pojo-accessibility',
+									)}
+								</Typography>
+							</InfotipBox>
+						</>
 					}
 				>
 					<InfoCircleIcon color="action" fontSize="tiny" />

modules/scanner/assets/js/components/manual-fix-form/resolve-with-ai.js

@@ -263,7 +263,7 @@ export const ResolveWithAi = ({ item, current }) => {
 							onClick={onResolve}
 						>
 							{isGlobal
-								? __('Apply everywhere', 'pojo-accessibility')
+								? __('Apply to all', 'pojo-accessibility')
 								: __('Apply fix', 'pojo-accessibility')}
 						</Button>
 					)}

modules/scanner/assets/js/static/global-infotip-image.png

@@ -46,6 +46,11 @@ export const InfotipBox = styled(Box)`
 	white-space: normal;
 `;
 
+export const InfotipImage = styled('img')`
+	max-width: 304px;
+	height: auto;
+`;
+
 export const InfotipFooter = styled(Box)`
 	display: flex;
 	justify-content: flex-end;