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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user