tcjlj/flvx

mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-04 09:06:38 +08:00

Files

T

sagit 7668e24f4b feat(ui): redesign with transparent liquid glass (#414 )

* docs: add design spec for iOS 26 Liquid Glass UI redesign

* docs: add implementation plan for iOS 26 Liquid Glass UI redesign

* feat(ui): add liquid glass CSS variables and update root layouts

* feat(ui): update Card and Modal components to iOS 26 Liquid Glass style

* feat(ui): redesign dashboard page to Liquid Glass style

* feat(ui): redesign node management page cards and charts

* feat(ui): redesign monitor page to Liquid Glass style

* feat(ui): redesign group and panel-sharing cards to Liquid Glass

* feat(ui): redesign settings and user components to Liquid Glass

* feat(ui): redesign profile and auth pages to Liquid Glass

* fix(ui): revert to LineChart to fix compilation issues

* refactor(ui): extract dashboard user header and cleanup admin layout

* feat(ui): refine monitor page hero metrics and fix build

* fix(ui): real data for monitor hero metrics and card padding adjustments

* fix(ui): apply global card padding and fix index layouts

* feat(ui): implement liquid-glass-react for all Card components

* fix(ui): resolve liquid-glass-react rendering issues causing invisible text and broken layout

* fix(ui): native CSS liquid-glass effect replacing NPM package

* fix(ui): cleanup duplicate closing tags and complete liquid glass tables

* fix(ui): apply perfect rounded corners to list views and table headers in non-compact mode

* fix(ui): apply liquid glass styling to grouped rules view in forward page

* fix(ui): re-implement liquid-glass natively to prevent text distortion and remove package dependency

* fix(ui): remove mouse distortion and preserve proper liquid glass texture

* fix(ui): remove svg filter causing text distortion and replace with pure css liquid glass

* fix(ui): apply properly scoped border radius to table headers

* fix(ui): remove hardcoded bg-default-50/60 from TableHeader

* fix(ui): apply global liquid glass styling and transparent overlays to all modals and dialogs

* fix(ui): remove absolute/relative class conflicts hiding Dialog modales and implement pure transparent layout

* feat(ui): apply global liquid glass styling to cards, buttons, and diagnosis modals

2026-04-21 09:19:02 +08:00

3.7 KiB

Raw Blame History

Flvx iOS 26 Liquid Glass UI Redesign Spec

1. Overview

This document specifies the comprehensive UI/UX redesign of the Flvx frontend using an "Apple iOS 26 Liquid Glass" design language. The goal is to elevate the visual quality of the entire application, making it modern, spatially aware, and highly legible through extensive use of blur, translucency, squircle borders, and semantic contrast.

2. Scope

The redesign covers 100% of the frontend routing pages and overlay components under vite-frontend/src/pages/ and global UI modules:

Dashboard (dashboard.tsx)
Node Management (node.tsx)
Tunnel & Rule Configurations (tunnel.tsx, forward.tsx)
System Monitor (monitor.tsx)
User Management (user.tsx)
Speed Limit Management (limit.tsx)
Group Management (group.tsx)
Panel Sharing (panel-sharing.tsx)
Global Settings & Config (config.tsx, settings.tsx)
Profile & Change Password (profile.tsx, change-password.tsx)
All related Modals, Drawers, and floating UI (e.g., "Create Node", "Add Rule" forms).

3. Design System & Tokens

The new UI replaces traditional solid-color borders and flat surfaces with the following spatial design tokens:

3.1. Corner Radii (Squircles)

Outer Shell / Viewports: 32px (rounded-3xl equivalent)
Cards / Containers: 24px (rounded-2xl)
Buttons / Inputs: 16px (rounded-xl or rounded-full)
Badges / Tags: 6px or fully rounded.

3.2. Backgrounds & Blurs

Global Background: A mesh gradient blending soft pinks and blues (#ff9a9e, #fecfef, #a1c4fd, #c2e9fb).
Glass Base (Primary Containers): backdrop-blur-3xl with an ultra-thin white overlay (rgba(255, 255, 255, 0.6) or #ffffff99).
Glass Inner Glow (Borders): 1px solid rgba(255, 255, 255, 0.8) (#ffffffcc).
Modals Background Overlay: 30% black overlay (#0000004d).

3.3. Semantic Colors

Brand / Active / Primary / TCP: Blue #007aff
Healthy / Success / Online: Green #34c759
Warning / Wait / UDP: Orange #ff9500
Danger / Offline / Delete: Red #ff3b30
Secondary / Purple / Data: Purple #af52de
Text: Primary (#1d1d1f), Secondary (#86868b).

3.4. Elevation & Shadow

Soft, highly diffused drop shadows rather than sharp lines: e.g., box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1).

4. Implementation Strategy

We will implement the redesign systematically across the React + TailwindCSS + shadcn/HeroUI stack:

CSS Variables / Tailwind Config: Inject the new Liquid Glass design tokens (colors, extended radiuses, customized backdrop blurs, box shadows) into tailwind.config.js and globals.css.
Global App Shell: Update the root layout (index.tsx or main App layout) to host the dynamic mesh gradient background and the new translucent sidebar.
Component Re-styling:
- Override HeroUI default card, input, and modal styles using custom classNames.
- Update MetricCard, PageEmptyState, PageLoadingState, and other base components to support the glass_card spec.
Page-by-Page Integration: Rewrite the JSX of each page to utilize the new layout structure, ensuring all existing interactive state and API logic is seamlessly preserved.
Modal System Update: Apply the transparent #0000004d overlay and 480px width glassy card style to all global dialogs.

5. Success Criteria

No regression in business logic; all forms, interactions, and data rendering operate exactly as before.
The visual system consistently employs the glass_bg, glass_card, and corresponding squircle radiuses across 100% of the UI.
Modals and Overlays correctly blur the background mesh gradient.
All responsive layouts appropriately wrap the card components on smaller displays.

3.7 KiB Raw Blame History