diff --git a/assets/images/ipad-lock-preview.png b/assets/images/ipad-lock-preview.png new file mode 100644 index 0000000000..d06146b19b Binary files /dev/null and b/assets/images/ipad-lock-preview.png differ diff --git a/changes/38473-add-ipad-screenshot-in-lock-modal b/changes/38473-add-ipad-screenshot-in-lock-modal new file mode 100644 index 0000000000..bb2ad7e761 --- /dev/null +++ b/changes/38473-add-ipad-screenshot-in-lock-modal @@ -0,0 +1 @@ +Updated lock modal for iPad hosts to display iPad screenshot in the end user experience section diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx index 4ef4adb55b..22f6d4e348 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx +++ b/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx @@ -14,10 +14,17 @@ import CustomLink from "components/CustomLink"; import Card from "components/Card"; import IphoneLockPreview from "../../../../../../../assets/images/iphone-lock-preview.png"; +import IpadLockPreview from "../../../../../../../assets/images/ipad-lock-preview.png"; const baseClass = "lock-modal"; -const IosOrIpadLockPreview = () => { +const IosOrIpadLockPreview = ({ platform }: { platform: string }) => { + const isIPad = platform === "ipados"; + const previewImage = isIPad ? IpadLockPreview : IphoneLockPreview; + const altText = isIPad + ? "iPad with a lock screen message" + : "iPhone with a lock screen message"; + return ( { /> .

- iPhone with a lock screen message + {altText}
); }; @@ -118,7 +125,9 @@ const LockModal = ({ - {isIPadOrIPhone(platform) && } + {isIPadOrIPhone(platform) && ( + + )}