Skip to content

Conversation

@cybervoid0
Copy link
Owner

New UI: Complete Design System Migration

Why

  • Poor Performance: Mantine was adding unnecessary bundle size and complexity
  • Limited Customization: Existing UI components lacked flexibility for design requirements
  • Accessibility Issues: Need for better ARIA support and keyboard navigation
  • Inconsistent UX: Mixed icon libraries and inconsistent design patterns
  • Form Handling Problems: Basic form validation and poor error handling

What

Dependencies

  • ❌ Removed Mantine (@mantine/core, @mantine/form, @mantine/hooks, @mantine/notifications)
  • ❌ Removed Tabler icons
  • ✅ Added shadcn/ui + Radix UI components
  • ✅ Added Lucide icons
  • ✅ Added react-hook-form + yup validation
  • ✅ Added dark/light theme support

UI Components

  • Navigation: New responsive header with mobile hamburger menu
  • Forms: Enhanced edit components with proper validation
  • Cards: Redesigned category and barometer cards
  • Modals: Improved dialog and lightbox components
  • Tables: Better data display with sorting and pagination

Features

  • Theme Switching: Dark/light mode with next-themes
  • Better Search: Enhanced filtering and validation
  • Admin Panel: Cleaner layouts and improved workflows
  • Mobile UX: Responsive design improvements

Impact

  • 124 files changed (7,939 additions, 4,581 deletions)
  • Reduced bundle size
  • Better accessibility and performance
  • Modern, maintainable codebase

- Added `react-hook-form` and `@hookform/resolvers` for form handling and validation.
- Implemented `yup` for schema validation in the search field.
- Replaced Mantine's `Notifications` with `sonner` for toast notifications.
- Updated search field component to utilize new form handling and validation logic.
- Integrated `@radix-ui/react-select` for improved selection UI.
- Updated global typography styles for headers and sections.
- Enhanced layout responsiveness in various components.
- Refactored pagination component for better navigation handling.
- Removed unused components and optimized existing ones for cleaner code.
- Updated global CSS for improved typography and spacing in headers.
- Refactored item detail page to utilize new card components for better structure.
- Replaced unused components and optimized the layout for responsiveness.
- Integrated new separator component for better visual separation of sections.
- Improved image carousel implementation for better performance and usability.
- Replaced `FooterVideo` component with a new structure in the `footer` component.
- Updated the footer styles for consistent gradient application.
- Removed the `FooterVideo` component and its index file.
- Enhanced the favicon SVG with updated metadata and structure.
- Modified the secondary color in global CSS for improved visual consistency.
- Changed the logo source in the header component from a PNG to an SVG for better scalability and quality.
- Adjusted grid layout in the HomePage for better spacing and alignment of NewArrivals and SearchField components.
- Simplified NewArrivals text display for consistent visibility across screen sizes.
- Enhanced header component with additional padding for better alignment.
- Updated SearchField button styles for improved usability.
…cy report components

- Introduced `@radix-ui/react-label` for improved form accessibility.
- Refactored `BreadcrumbsComponent` to utilize new UI components for better structure and styling.
- Updated `InaccuracyReport` component to use `react-hook-form` for form handling and improved UI with custom dialog components.
- Enhanced button and tooltip interactions for better user experience.
- Introduced `@tailwindcss/container-queries` for improved responsive design capabilities.
- Updated layout components to utilize new font styles, including `Cinzel` for enhanced typography.
- Added a custom utility class for text-shadow effects in global CSS.
- Refactored `CategoryCard` component for better responsiveness and visual appeal.
- Adjusted mobile menu spacing for improved usability.
- Replaced Mantine components with custom UI components for improved styling and structure.
- Changed title elements to semantic HTML tags for better accessibility.
- Enhanced layout with a responsive card component and separator for visual clarity.
- Updated text styles for consistency and improved readability.
- Updated layout structure in RootLayout to use a semantic <main> tag for improved accessibility.
- Refactored HomePage and NewArrivals components for better spacing and alignment, utilizing custom Card components.
- Adjusted Manufacturers and Collection pages to streamline layout and improve visual consistency.
- Enhanced BarometerCard components with additional styling for better presentation.
- Removed unnecessary container classes for a cleaner design.
- Updated the Figure component to accept additional className and props for better customization.
- Refactored the History section layout for improved spacing and readability.
- Adjusted paragraph styles for consistency and better text alignment.
- Enhanced ShowMore component usage for better content management and user experience.
- Simplified section padding for a cleaner design.
- Added 'server-only' import to enhance server-side rendering capabilities.
- Adjusted padding and margin in layout components for better spacing and alignment.
- Updated grid and gap settings in various components for improved visual consistency.
- Enhanced the About page content structure and styling for better readability and user engagement.
- Refactored the History page to streamline content presentation and improve user experience.
- Replaced Mantine components with semantic HTML elements for improved accessibility.
- Enhanced section styling and spacing for better readability and visual consistency.
- Converted text elements to paragraphs and lists for clearer content structure.
- Added additional sections to clarify prohibited activities and liability disclaimers.
- Adjusted heading styles in global CSS for improved typography and consistency.
- Enhanced About page layout by adding margin to headings for better spacing.
- Refactored Manufacturer page to use semantic HTML elements and improved layout structure.
- Replaced ZoomModal with Dialog components in ImageLightbox for better user experience.
- Removed unused ZoomModal component to streamline the codebase.
- Deleted the ShowError component to streamline the codebase.
- Refactored the Search page layout for improved structure and styling, replacing Mantine components with custom UI elements.
- Enhanced SearchInfo and SearchItem components for better visual consistency and responsiveness.
- Replaced Mantine components with custom UI elements for improved styling and structure in the admin layout.
- Enhanced logout functionality with a button and tooltip for better user experience.
- Updated the admin page layout to use flexbox for improved spacing and alignment of links.
- Incorporated icons from Lucide for better visual representation of actions.
- Added `@radix-ui/react-popover`, `cmdk`, and `zod` to dependencies for enhanced UI functionality and validation.
- Refactored the `AddManufacturer` component to utilize `react-hook-form` and `yup` for improved form handling and validation.
- Updated the layout and styling of the form elements for better user experience and consistency across the application.
- Replaced Mantine components with custom UI elements for improved styling and consistency in the ReportList component.
- Updated link elements to use semantic HTML for better accessibility and user experience.
- Enhanced table structure by integrating custom table components for better visual presentation.
- Adjusted heading styles and layout for improved readability and spacing.
…cation

- Removed Mantine components in favor of custom UI elements for improved consistency and styling.
- Updated the registration and sign-in forms to utilize `react-hook-form` and `yup` for enhanced validation and user experience.
- Refactored error and loading components for better layout and visual presentation.
- Adjusted global CSS for improved typography and added animation delays for loading indicators.
- Enhanced the condition component with a more accessible popover implementation.
- Updated Tailwind configuration to reflect new font usage and improved breakpoint management.
- Removed unnecessary class from h4 elements in global CSS for cleaner styling.
- Added Mantine core styles import to providers for consistent theming.
- Enhanced list item styling in the collection page for improved readability.
- Adjusted padding in PropertyCard component for better layout and spacing.
…d improved functionality

- Replaced Mantine components with custom UI elements for better consistency and styling.
- Integrated dialog for delete confirmation, enhancing user experience.
- Updated notification handling to use toast notifications for success and error messages.
- Improved state management for delete operation feedback.
- Updated DeleteBarometer and ManufacturerEdit components to utilize custom UI elements and improved dialog handling.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience across multiple components.
- Refactored ManufacturerImageEdit and TextFieldEdit components for better state management and streamlined image handling.
- Improved layout and styling of form elements for consistency and better user interaction.
- Replaced Mantine components with custom UI elements for improved consistency and styling in DateEdit and TextFieldEdit components.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience.
- Updated notification handling to use toast notifications for success and error messages.
- Improved dialog handling and form structure for better user interaction and state management.
- Added autoFocus to the input field for better accessibility and user interaction.
- Changed the button variant from "ghost" to "outline" for enhanced visibility during form submission.
… and UI

- Replaced Mantine components with custom UI elements for better consistency and styling.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience.
- Updated dialog handling for editing conditions, improving accessibility and user interaction.
- Enhanced notification handling with toast messages for success and error feedback.
…ng and UI

- Replaced Mantine components with custom UI elements for better consistency and styling.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience.
- Updated dialog handling for editing subcategories, improving accessibility and user interaction.
- Enhanced notification handling with toast messages for success and error feedback.
…dling and UI

- Replaced Mantine components with custom UI elements for better consistency and styling.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience.
- Updated dialog handling for editing estimated prices, improving accessibility and user interaction.
- Enhanced notification handling with toast messages for success and error feedback.
…proved form handling and UI

- Replaced Mantine components with custom UI elements for better consistency and styling.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience.
- Updated dialog handling for editing dimensions and materials, improving accessibility and user interaction.
- Enhanced notification handling with toast messages for success and error feedback.
…and UI

- Replaced Mantine components with custom UI elements for better consistency and styling.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience.
- Updated dialog handling for editing text areas, improving accessibility and user interaction.
- Enhanced notification handling with toast messages for success and error feedback.
- Removed the useEditField hook as its functionality has been integrated directly into the TextAreaEdit component.
…d UI

- Replaced Mantine components with custom UI elements for better consistency and styling.
- Integrated `react-hook-form` and `yup` for enhanced form validation and user experience.
- Updated dialog handling for editing images, improving accessibility and user interaction.
- Enhanced notification handling with toast messages for success and error feedback.
- Improved image upload and management functionality with drag-and-drop support.
- Removed Mantine components and configurations from ESLint and Prettier settings.
- Eliminated Mantine-related packages from package.json and bun.lock.
- Updated notification handling to use `sonner` for toast messages instead of Mantine notifications.
- Refactored components to remove MantineProvider and related imports, enhancing consistency with custom UI elements.
- Removed Tabler icons from various components and replaced them with Lucide icons for improved consistency and styling.
- Updated icon imports in the footer, header, search field, and property card components.
- Enhanced form handling in the InaccuracyReport component by integrating `yup` for validation and removing deprecated validation logic.
- Streamlined the package dependencies by removing unused packages from package.json and bun.lock.
- Eliminated `zod` and `postcss-simple-vars` from both package.json and bun.lock to streamline dependencies.
- Updated postcss.config.mjs by removing the configuration for `postcss-simple-vars` to enhance clarity and maintainability.
- Adjusted heading styles in globals.css for improved readability.
- Modified layout of NewArrivals and SearchField components for better responsiveness.
- Updated Sort component width in category page for consistent design.
- Enhanced header structure by adding a Subheader component for additional context.
- Refined mobile menu width for better usability.
- Improved text size in NewArrivals button for better visibility.
…of Prisma client

- Wrapped the function call in a try-finally block to ensure that the Prisma client disconnects after execution, preventing potential connection leaks.
- Replaced Clock with CalendarRange, FolderOpen with Wrench, and Euro with BadgeEuro in the PropertyCard components to enhance visual representation and consistency.
- Adjusted header layout by increasing the gap between elements for better spacing and readability.
- Added a comment to the Header component to clarify the visibility of the Subheader on the landing page.
- Updated padding and styling in the WideScreenTabs component for better visual consistency and user experience.
@cybervoid0 cybervoid0 merged commit da08be8 into master Aug 10, 2025
1 check failed
@cybervoid0 cybervoid0 deleted the new-ui branch September 14, 2025 05:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants