43 lines
1.6 KiB
Plaintext
43 lines
1.6 KiB
Plaintext
frontend\src\pages\bellcloud\devices\notes
|
|
frontend\src\pages\bellcloud\devices\DeviceForm.jsx
|
|
frontend\src\pages\bellcloud\mqtt
|
|
|
|
|
|
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
|
|
|
|
Read CLAUDE.md and DESIGN.md and use your /frontend-design for this task !
|
|
|
|
Build PAGE at PAGEURL
|
|
|
|
REFERENCE (logic only — do not copy styling):
|
|
- Archive: ARCHIVEPAGEURL
|
|
- Use this ONLY to understand: API endpoints, data fields, user actions
|
|
|
|
DESIGN REFERENCE:
|
|
- Style guide: frontend/src/pages/dev/StyleGuide.jsx
|
|
- Match components, spacing, and patterns exactly as shown there
|
|
- Use only components from frontend/src/components/ui/
|
|
- Use only CSS token variables — no hardcoded values
|
|
|
|
When done, replace the <ComingSoon /> for this route in frontend/src/router/index.jsx
|
|
|
|
|
|
STITCH REFERENCE:
|
|
- frontend/src/_archive/stitch-references/PageName.html
|
|
- Use this as visual/layout inspiration for this specific page
|
|
- Translate the layout and visual structure into React using our design system
|
|
- Do not copy Stitch's inline styles — use our tokens instead
|
|
|
|
|
|
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
|
|
|
|
Apply the same glass effect as the DataTable and Card components to [component/page name].
|
|
|
|
Replace any solid background: var(--color-bg-*) with rgba(28, 32, 38, 0.30) (or 0.40 for elevated/nested surfaces)
|
|
Add backdrop-filter: var(--blur-modal) and -webkit-backdrop-filter: var(--blur-modal)
|
|
Replace any solid hover/active/selected background colors with their semi-transparent equivalents (rgba(49, 53, 60, 0.50))
|
|
Keep borders and shadows unchanged
|
|
|