equinor / equinor/fusion-framework
Improve UI/UX of app-react-bookmark-advanced cookbook
- Dominant language
- TypeScript
- Stars
- 10
- Forks
- 10
- Avg merge
- 19h 40m
- Merged PRs (30d)
- 150
Description
**As a** developer learning how to implement bookmark functionality in Fusion Framework applications
**I want** the `app-react-bookmark-advanced` cookbook to demonstrate modern UI/UX best practices
**So that** I can use it as a reference implementation when building bookmark features in my own applications
## Current State
The cookbook currently has several UI/UX issues that make it unsuitable as a reference:
- Extensive use of inline styles instead of CSS modules or styled components
- Hardcoded positioning values (e.g., `top: '58px'`, `width: '250px'`)
- Poor visual hierarchy and typography
- Basic HTML buttons without proper styling or accessibility
- Emojis in headings (e.g., "🚀 Create Fusion Bookmark😎")
- Cryptic button labels ("x" for delete, "u" for update)
- No proper color scheme or design tokens
- Fixed positioning sidebar that may not work well on different screen sizes
- Poor form validation feedback
- No responsive design considerations
- Inconsistent spacing and layout
## Acceptance Criteria
- [ ] Replace inline styles with modern CSS approach (CSS modules, styled-components, or Tailwind)
- [ ] Implement proper design system integration (if available)
- [ ] Add accessible form controls and buttons with proper ARIA labels
- [ ] Improve visual hierarchy and typography
- [ ] Create responsive layout that works on different screen sizes
- [ ] Enhance UX for bookmark creation, editing, and deletion
- [ ] Add proper error states and validation feedback
- [ ] Remove emojis from headings and use professional typography
- [ ] Replace cryptic button labels with clear, descriptive text
- [ ] Ensure consistent spacing and layout throughout
## Technical Details
The cookbook is located at `cookbooks/app-react-bookmark-advanced/`. Key files that need UI improvements:
- `src/Create.tsx` - Bookmark creation form and list
- `src/Root.tsx` - Main layout
- `src/Selected.tsx` - Current bookmark display
- `src/Page1.tsx` and `src/Page2.tsx` - Example pages
Contributor guide
Assessment
This issue has not been assessed yet.