From 8e80ccfe4a8cc62e9ac68fdee4a8b7912d2aa04b Mon Sep 17 00:00:00 2001 From: kev1n77 Date: Fri, 11 Sep 2026 16:05:34 +0800 Subject: [PATCH] fix(ui): align announcement close control and blur voice call backdrop --- .../VoiceCallPanel/VoiceCallPanel.module.css | 24 +++++++- .../components/AnnouncementToastItem.tsx | 24 ++++---- .../styles/AnnouncementToast.scss | 58 ++++++------------- 3 files changed, 52 insertions(+), 54 deletions(-) diff --git a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css index 4fa97ebfd4..beb91adfb5 100644 --- a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css +++ b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css @@ -11,7 +11,7 @@ min-block-size: 0; overflow: hidden; border-radius: calc(var(--openbitfun-space-8) + var(--openbitfun-space-1)); - background: color-mix(in srgb, var(--openbitfun-color-content-on-light) 80%, transparent); + background: var(--openbitfun-color-content-on-light); color: var(--openbitfun-color-content-on-dark); font-family: var(--openbitfun-type-body-lg-font-family); font-size: var(--openbitfun-type-body-lg-font-size); @@ -20,6 +20,15 @@ letter-spacing: var(--openbitfun-type-body-lg-letter-spacing); } + @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { + .root { + /* Figma live-call surface: 80% dark fill over a 10px backdrop blur. */ + background: color-mix(in srgb, var(--openbitfun-color-content-on-light) 80%, transparent); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + } + } + .header { display: flex; flex: 0 0 auto; @@ -142,11 +151,20 @@ } @media (prefers-reduced-transparency: reduce) { - .root { background: var(--openbitfun-color-content-on-light); } + .root { + background: var(--openbitfun-color-content-on-light); + -webkit-backdrop-filter: none; + backdrop-filter: none; + } } @media (forced-colors: active) { - .root { background: Canvas; color: CanvasText; } + .root { + background: Canvas; + color: CanvasText; + -webkit-backdrop-filter: none; + backdrop-filter: none; + } .user { border: 1px solid CanvasText; } .root :is(.control, .back, .close) { border: 1px solid ButtonText; color: ButtonText; opacity: 1; } } diff --git a/src/web-ui/src/shared/announcement-system/components/AnnouncementToastItem.tsx b/src/web-ui/src/shared/announcement-system/components/AnnouncementToastItem.tsx index d752a145b6..30c8843eab 100644 --- a/src/web-ui/src/shared/announcement-system/components/AnnouncementToastItem.tsx +++ b/src/web-ui/src/shared/announcement-system/components/AnnouncementToastItem.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Button, Icon, OverflowText } from '@openbitfun/ui'; +import { Button, Icon, IconButton, OverflowText } from '@openbitfun/ui'; import type { AnnouncementCard } from '../types'; import { useAnnouncementStore } from '../store/announcementStore'; import { useAnnouncementI18n } from '../hooks/useAnnouncementI18n'; @@ -69,32 +69,34 @@ const AnnouncementToastItem: React.FC = ({ card }) => { aria-hidden={exiting} {...(exiting ? { inert: '' } : {})} > - {/* Row 1: title + close (with optional countdown ring) */} + {/* Row 1: title + close with optional countdown ring */}
{resolve(toast.title)} {toast.dismissible && (
- {autoDismissMs && ( + {autoDismissMs != null && autoDismissMs > 0 && ( - - )} - + />
)}
diff --git a/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss b/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss index d97e962f1a..b662f7d09c 100644 --- a/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss +++ b/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss @@ -122,9 +122,12 @@ $toast-width: 320px; overflow: hidden; } - // ── Close button + countdown ring ──────────────────────────────────────── + // The transparent close control and countdown share one circular footprint. &__close-wrap { position: relative; + display: inline-flex; + align-items: center; + justify-content: center; flex-shrink: 0; width: 28px; height: 28px; @@ -133,63 +136,38 @@ $toast-width: 320px; &__ring { position: absolute; + z-index: 1; inset: 0; width: 100%; height: 100%; - // Start arc from 12 o'clock transform: rotate(-90deg); pointer-events: none; } - // Circumference = 2π × 11.5 ≈ 72.26 - $ring-circumference: 72.26px; + &__ring-track, + &__ring-fill { + fill: none; + stroke-width: 1.5; + } &__ring-track { - fill: none; stroke: var(--openbitfun-color-border-default); - stroke-width: 1.5; } &__ring-fill { - fill: none; stroke: var(--openbitfun-color-accent-default); - stroke-width: 1.5; stroke-linecap: round; - stroke-dasharray: $ring-circumference; + stroke-dasharray: 100; stroke-dashoffset: 0; animation: openbitfun-announcement-ring-countdown linear both; - // Smooth opacity fade at the very end - transition: opacity 0.3s ease; } + // Match the ring's hit area while retaining the shared small close glyph. &__close { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - display: inline-flex; - align-items: center; - justify-content: center; - background: transparent; - border: none; - border-radius: 50%; + inline-size: 100%; + block-size: 100%; + flex-shrink: 0; color: var(--openbitfun-color-content-muted); - cursor: pointer; - transition: - background-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard), - color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard); - - svg { - width: 13px; - height: 13px; - } - - @media (hover: hover) and (pointer: fine) { - &:hover { - background: var(--openbitfun-color-surface-panel); - color: var(--openbitfun-color-content-primary); - } - } } // ── Description ────────────────────────────────────────────────────────── @@ -221,11 +199,11 @@ $toast-width: 320px; @keyframes openbitfun-announcement-toast-in { from { opacity: 0; - transform: translateX(-12px) scale(0.985); + transform: translateX(-12px); } to { opacity: 1; - transform: translateX(0) scale(1); + transform: translateX(0); } } @@ -242,7 +220,7 @@ $toast-width: 320px; @keyframes openbitfun-announcement-ring-countdown { from { stroke-dashoffset: 0; } - to { stroke-dashoffset: 72.26px; } + to { stroke-dashoffset: 100; } } @media (prefers-reduced-motion: reduce) {