banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
chenhang
2026-06-11 11:29:52 +08:00
parent 39ef78e9ea
commit 72941d9c9f
5 changed files with 67 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/chat/components/pwa-install-dialog.module.css
+34 -32
View File
@@ -1,4 +1,7 @@
/* PwaInstallDialog PWA 安装弹窗样式 */
/* PwaInstallDialog PWA 安装弹窗样式
* 原始 Dart: lib/ui/chat/widgets/pwa_install_dialog.dart
* 视觉规格：白底 + 大圆角 + 渐变按钮 + 86×86 图标
*/
.overlay {
position: fixed;
@@ -12,67 +15,66 @@
.dialog {
width: calc(100% - 40px);
max-width: 360px;
background: var(--color-surface, #1f1a2e);
border-radius: var(--radius-lg, 12px);
padding: var(--spacing-5, 20px);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
text-align: center;
max-width: var(--pwa-install-dialog-max-width, 360px);
background: var(--color-page-background, #ffffff);
border-radius: 40px;
padding: 20px 16px 16px 16px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(248, 77, 150, 0.2);
color: var(--color-accent, #f84d96);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: var(--spacing-4, 16px);
width: var(--icon-size-86, 86px);
height: var(--icon-size-86, 86px);
margin-bottom: var(--spacing-lg, 16px);
object-fit: contain;
}
.title {
font-size: var(--font-size-lg, 18px);
font-weight: 600;
margin: 0 0 var(--spacing-2, 8px);
color: var(--color-text-primary, #fff);
font-size: var(--font-size-22, 22px);
font-weight: 700;
margin: 0 0 var(--spacing-sm, 8px);
color: var(--color-text-foreground, #171717);
line-height: 1.2;
}
.content {
font-size: var(--font-size-sm, 14px);
font-size: var(--font-size-lg, 16px);
line-height: 1.5;
color: var(--color-text-secondary, #9e9e9e);
margin: 0 0 var(--spacing-5, 20px);
margin: 0 0 var(--spacing-xxl, 24px);
}
.actions {
display: flex;
gap: var(--spacing-3, 12px);
gap: var(--spacing-md, 12px);
width: 100%;
}
.btn {
flex: 1 1 auto;
height: 40px;
height: var(--pwa-button-height, 44px);
border: 0;
border-radius: var(--radius-md, 8px);
font-size: var(--font-size-base, 14px);
border-radius: var(--radius-bottom-sheet, 28px);
font-size: var(--font-size-lg, 16px);
font-weight: 600;
cursor: pointer;
color: var(--color-page-background, #ffffff);
display: flex;
align-items: center;
justify-content: center;
}
.btnSecondary {
background: transparent;
color: var(--color-text-primary, #fff);
border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--color-text-secondary, #9e9e9e);
}
.btnPrimary {
background: var(--color-accent, #f84d96);
color: #fff;
background: linear-gradient(
var(--color-button-gradient-start, #ff67e0),
var(--color-button-gradient-end, #ff52a2)
);
}