feat: Redesign bakery and user settings pages with improved UX

Implemented a comprehensive redesign of the settings pages using Jobs To Be Done (JTBD) methodology to improve user experience, visual appeal, and discoverability.

## New Components

- **SettingRow**: Reusable component for consistent setting layouts with support for toggles, inputs, selects, and custom content
- **SettingSection**: Collapsible section component for grouping related settings with consistent styling

## Page Redesigns

### BakerySettingsPage
- Redesigned information tab with better visual hierarchy using SettingSection components
- Improved business hours UI with clearer day-by-day layout
- Enhanced header with gradient bakery icon and status indicators
- Consistent spacing and responsive design improvements
- Better visual feedback for unsaved changes

### NewProfileSettingsPage
- Unified design with bakery settings page
- Improved personal information section with SettingSection
- Better security section layout with collapsible password change form
- Enhanced privacy & data management UI
- Consistent icon usage and visual hierarchy

### InventorySettingsCard
- Replaced checkbox with toggle switch for temperature monitoring
- Progressive disclosure: temperature settings only shown when enabled
- Better visual separation between setting groups
- Improved responsive grid layouts
- Added helpful descriptions and tooltips

## Key Improvements

1. **Visual Consistency**: Both bakery and user settings now use the same design patterns and components
2. **Scannability**: Icons, badges, and clear visual hierarchy make settings easier to scan
3. **Progressive Disclosure**: Complex settings (like temperature monitoring) only show when relevant
4. **Toggle Switches**: Binary settings use toggles instead of checkboxes for better visual feedback
5. **Responsive Design**: Improved mobile and desktop layouts with better touch targets
6. **Accessibility**: Proper ARIA labels, help text, and keyboard navigation support

## JTBD Analysis Applied

- Main job: "Quickly find, understand, and change settings without mistakes"
- Sub-jobs addressed:
  - Discovery & navigation (visual grouping, icons, clear labels)
  - Configuration & adjustment (toggles, inline editing, validation)
  - Validation & confidence (help text, descriptions, visual feedback)

This redesign maintains backward compatibility while significantly improving the user experience for managing bakery and personal settings.
This commit is contained in:
Claude
2025-11-14 06:34:23 +00:00
parent 9bc048d360
commit a5200bbc94
8 changed files with 868 additions and 571 deletions

View File

@@ -40,6 +40,8 @@ export { TableOfContents } from './TableOfContents';
export { SavingsCalculator } from './SavingsCalculator';
export { StepTimeline } from './StepTimeline';
export { FAQAccordion } from './FAQAccordion';
export { SettingRow } from './SettingRow';
export { SettingSection } from './SettingSection';
// Export types
export type { ButtonProps } from './Button';
@@ -77,4 +79,6 @@ export type { FloatingCTAProps } from './FloatingCTA';
export type { TableOfContentsProps, TOCSection } from './TableOfContents';
export type { SavingsCalculatorProps } from './SavingsCalculator';
export type { StepTimelineProps, TimelineStep } from './StepTimeline';
export type { FAQAccordionProps, FAQItem } from './FAQAccordion';
export type { FAQAccordionProps, FAQItem } from './FAQAccordion';
export type { SettingRowProps } from './SettingRow';
export type { SettingSectionProps } from './SettingSection';