fix(ui): standardize sidebar menu styling with global CSS classes (#471)

* feat(ui): complete migration from neumorphic to corporate theme

## Summary
- Migrate entire frontend from neumorphic (soft UI) to minimal corporate theme
- Update SCSS variables, mixins, and component styles
- Update Tailwind CSS custom properties
- Clean up unused migration wrapper components

## Changes

### Core Style Files
- `_variables.scss`: Complete rewrite with corporate colors (#ffffff, #f8f9fa),
  borders (#e5e7eb), and subtle shadows
- `_mixins.scss`: Update mixins to corporate styling with legacy aliases
- `_neumorphic-components.scss`: Update component classes (dual naming for compatibility)
- `style.scss`: Update all Bootstrap overrides (cards, buttons, forms, tables, modals)
- `tailwind.css`: Update CSS custom properties with corporate values

### Component Updates
- `dropdown-menu.jsx`: Remove inline neumorphic styles
- `neumorphic-pagination.jsx`: Update to corporate theme
- `social-login-buttons.jsx`: Replace shadow classes with borders
- `step-wizard.jsx`: Update step circles and connectors

### Screen Updates
- Chart of accounts, contacts, employees, products, currency screens
- Dashboard sections (bank_account, cash_flow)
- Theme reference page with updated examples

### Cleanup
- Remove unused Neu* wrapper components (NeuButton, NeuCard, etc.)
- Simplify migration/index.js to re-export reactstrap components

## Theme Changes
| Element | Old | New |
|---------|-----|-----|
| Background | #e8eef5 | #ffffff / #f8f9fa |
| Borders | None (shadows) | 1px solid #e5e7eb |
| Shadows | Multi-directional | Subtle bottom shadows |
| Text Primary | #1e3a5f | #111827 |

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: restore migration neu components

The migration folder contains custom shadcn/ui-based components that provide
reactstrap-compatible APIs. These were incorrectly removed - reactstrap is not
installed in this project.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat(ui): add dual theme support (light/dark mode)

- Add comprehensive dark mode CSS variables to tailwind.css
- Add dark mode SCSS variables to _variables.scss
- Add dark mode component overrides to global.scss and _neumorphic-components.scss
- Update react-select styles to use CSS variables for theme switching
- Fix Company/Business Type dropdown visibility in dark mode
- Update selectStyles in utils/index.js, register, profile, and currency screens
- Enhance theme-toggle component with next-themes integration
- Enable system theme detection in ThemeProvider
- Add THEME-GUIDELINES.md with comprehensive dark mode documentation
- Add screenshot test for register page in light/dark modes
- Update dashboard bank_account with Tailwind dark mode classes

Dark mode color palette:
- Backgrounds: Slate family (#0f172a, #1e293b, #334155)
- Text: Light colors (#f8fafc, #e2e8f0, #cbd5e1)
- Primary: Blue 500 (#3b82f6) for better contrast
- Semantic colors adjusted for dark backgrounds

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat(ui): unify sidebar menu styling with global css classes

- Add global CSS classes for consistent menu styling (.corp-menu-item, .corp-submenu-item)
- Standardize border-radius to rounded-md (0.375rem) across all menu items
- Remove inline styles and use CSS variables for colors
- Add text-decoration: none to prevent underlines on all menu states
- Ensure consistent highlight colors and hover states
- Move theme-level styling to index.css for better maintainability

All menu items now follow corporate design system with uniform appearance.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* test(ui): update sidebar test to match new css class structure

* chore: add visual regression snapshots and update package-lock

- Add baseline snapshots for visual regression tests (e2e)
- Update package-lock.json (remove typescript peer dependency)
- Snapshots cover dashboard, invoices, reports, and login screens
- Includes light/dark mode and responsive variants

* fix(ui): remove unused variables from theme toggle components

---------

Co-authored-by: Developer <developer@simpleaccounts.io>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Mohsin Hashmi <mhashmi@wiser.com>

Author: 4 people

CLAUDE.md

@@ -17,12 +17,19 @@ This project uses a **Minimal Corporate Design System** inspired by modern SaaS
 
 ### Design Documentation
 
-**📖 See [DESIGN-GUIDE.md](./DESIGN-GUIDE.md) for complete design system documentation**, including:
+**📖 See the following guides for complete design system documentation:**
+
+- **[docs/THEME-GUIDELINES.md](./docs/THEME-GUIDELINES.md)** - Comprehensive theme reference (START HERE)
+- **[DESIGN-GUIDE.md](./DESIGN-GUIDE.md)** - Design system overview with examples
+- **[MIGRATION-TO-CORPORATE.md](./MIGRATION-TO-CORPORATE.md)** - Migration guide from legacy styles
+
+These guides include:
 
 - Color palette and usage guidelines
 - Typography and spacing rules
 - Component examples and code snippets
-- Migration guide from neumorphic to corporate theme
+- CSS variables and Tailwind classes reference
+- Do's and Don'ts
 
 ### Design Principles
 

apps/frontend/README.md

@@ -1,5 +1,22 @@
 # SimpleAccounts Frontend Admin Website
 
+## Design System
+
+This project uses a **Corporate Design System**. All UI development must follow the theme guidelines.
+
+**📖 Documentation:**
+
+- [Theme Guidelines](../../docs/THEME-GUIDELINES.md) - Comprehensive theme reference
+- [Design Guide](../../DESIGN-GUIDE.md) - Design system overview
+- [Migration Guide](../../MIGRATION-TO-CORPORATE.md) - Legacy style migration
+
+**Quick Reference:**
+
+- Primary color: `#2064d8`
+- Background: `#ffffff` (content), `#f8f9fa` (page)
+- Text: `#111827` (primary), `#4b5563` (secondary)
+- Borders: `#e5e7eb`
+
 ## Project Folder Structure
 
 ### assets

apps/frontend/e2e/screenshot-register.spec.ts

@@ -0,0 +1,95 @@
+import { test, expect } from '@playwright/test';
+
+test('screenshot register page light mode', async ({ page }) => {
+  // Go to register page
+  await page.goto('http://localhost:3000/register');
+
+  // Wait for page to load
+  await page.waitForTimeout(2000);
+
+  // Take screenshot of register page
+  await page.screenshot({
+    path: 'test-results/register-page.png',
+    fullPage: true,
+  });
+
+  // Check if Company Type select exists
+  const companyTypeSelect = page.locator('#companyTypeCode');
+  const isVisible = await companyTypeSelect.isVisible({ timeout: 5000 }).catch(() => false);
+  console.log(`Company Type select visible: ${isVisible}`);
+
+  // Click on the select to open dropdown
+  if (isVisible) {
+    await companyTypeSelect.click();
+    await page.waitForTimeout(500);
+
+    // Take screenshot with dropdown open
+    await page.screenshot({
+      path: 'test-results/register-dropdown-open.png',
+      fullPage: true,
+    });
+
+    // Press escape to close
+    await page.keyboard.press('Escape');
+  }
+
+  // Verify page loaded correctly
+  await expect(page.locator('body')).toBeVisible();
+  console.log('Register page loaded successfully');
+});
+
+test('screenshot register page dark mode', async ({ page }) => {
+  // Go to register page
+  await page.goto('http://localhost:3000/register');
+
+  // Wait for page to load
+  await page.waitForTimeout(2000);
+
+  // Click theme toggle button (moon/sun icon in top right)
+  const themeToggle = page
+    .locator('button[aria-label*="theme"], button[aria-label*="mode"]')
+    .first();
+  const toggleVisible = await themeToggle.isVisible({ timeout: 3000 }).catch(() => false);
+
+  if (toggleVisible) {
+    await themeToggle.click();
+    await page.waitForTimeout(1000);
+    console.log('Switched to dark mode');
+  } else {
+    console.log('Theme toggle not found, trying alternative selector');
+    // Try clicking by position (top right area)
+    const altToggle = page.locator('header button').last();
+    if (await altToggle.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await altToggle.click();
+      await page.waitForTimeout(1000);
+    }
+  }
+
+  // Take screenshot of dark mode
+  await page.screenshot({
+    path: 'test-results/register-dark-mode.png',
+    fullPage: true,
+  });
+
+  // Check if Company Type select exists in dark mode
+  const companyTypeSelect = page.locator('#companyTypeCode');
+  const isVisible = await companyTypeSelect.isVisible({ timeout: 5000 }).catch(() => false);
+  console.log(`Company Type select visible in dark mode: ${isVisible}`);
+
+  // Click on the select to open dropdown
+  if (isVisible) {
+    await companyTypeSelect.click();
+    await page.waitForTimeout(500);
+
+    // Take screenshot with dropdown open in dark mode
+    await page.screenshot({
+      path: 'test-results/register-dark-dropdown-open.png',
+      fullPage: true,
+    });
+
+    // Press escape to close
+    await page.keyboard.press('Escape');
+  }
+
+  console.log('Dark mode test completed');
+});