style(pwa-install-dialog): redesign dialog to match Dart spec

Update the PWA install dialog styling and content to align with the
original Dart design, including a white background with large 40px
radius, 86x86 PNG icon, gradient primary button, and dynamic app title
sourced from AppConstants.
This commit is contained in:
2026-06-11 11:29:52 +08:00
parent 39ef78e9ea
commit 72941d9c9f
5 changed files with 67 additions and 53 deletions
+16 -8
View File
@@ -7,6 +7,10 @@
* 用途:引导用户将 Web App 安装到桌面
* 触发:由 PwaInstallOverlay 在延迟 3.5s 后自动显示
*/
import Image from "next/image";
import { AppConstants } from "@/core/constants/app_constants";
import styles from "./pwa-install-dialog.module.css";
export interface PwaInstallDialogProps {
@@ -35,15 +39,19 @@ export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps)
aria-labelledby="pwa-dialog-title"
>
<div className={styles.dialog}>
<div className={styles.icon} aria-hidden="true">
📱
</div>
<Image
className={styles.icon}
src="/images/icons/icon-add-to-home.png"
alt=""
width={86}
height={86}
priority
/>
<h2 id="pwa-dialog-title" className={styles.title}>
Install cozsweet
Install {AppConstants.appTitle}
</h2>
<p className={styles.content}>
Add to your home screen for the best experience. Faster loading,
full-screen mode, and offline support.
{AppConstants.appTitle} can be installed on your device for a faster, full-screen experience.
</p>
<div className={styles.actions}>
<button
@@ -51,14 +59,14 @@ export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps)
className={`${styles.btn} ${styles.btnSecondary}`}
onClick={onClose}
>
Not now
Cancel
</button>
<button
type="button"
className={`${styles.btn} ${styles.btnPrimary}`}
onClick={handleInstall}
>
Install
OK
</button>
</div>
</div>