ts fixes from reorg + unit test work

src/components/WhatsNewModal.test.tsx

@@ -41,9 +41,7 @@ describe('WhatsNewModal', () => {
   it('should call onClose when the close icon button is clicked', () => {
     render(<WhatsNewModal {...defaultProps} />);
     // The close button is an SVG icon inside a button, best queried by its aria-label.
-    // Assuming the XCircleIcon doesn't have a specific label, we can find the button containing it.
+    const closeButton = screen.getByRole('button', { name: /close/i });
-    // Let's assume the button has a label for accessibility.
-    const closeButton = screen.getByRole('button', { name: '' }); // Adjust if it has a label
     fireEvent.click(closeButton);
     expect(mockOnClose).toHaveBeenCalledTimes(1);
   });

src/components/WhatsNewModal.tsx

@@ -16,6 +16,9 @@ export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({ isOpen, onClose, v
   return (
     <div className="fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-center items-center p-4" onClick={onClose}>
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="whats-new-title"      
         className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md m-4 transform transition-all"
         onClick={(e) => e.stopPropagation()}
       >
@@ -25,7 +28,7 @@ export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({ isOpen, onClose, v
               <GiftIcon className="w-6 h-6 text-brand-primary" />
             </div>
             <div>
-              <h2 className="text-xl font-bold text-gray-900 dark:text-white">What's New?</h2>
+              <h2 id="whats-new-title" className="text-xl font-bold text-gray-900 dark:text-white">What's New?</h2>
               <p className="text-xs text-gray-500 dark:text-gray-400">Version: {version}</p>
             </div>
           </div>
@@ -43,7 +46,11 @@ export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({ isOpen, onClose, v
             </button>
           </div>
         </div>
-        <button onClick={onClose} className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+        <button
+          onClick={onClose}
+          className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          aria-label="Close"
+        >
           <XCircleIcon className="w-6 h-6" />
         </button>
       </div>

src/features/charts/PriceChart.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { DealItem, User } from '../../types';
 import { TagIcon } from '../../components/icons/TagIcon';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { formatUnitPrice } from '../../utils/formatters';
+import { formatUnitPrice } from '../../utils/unitConverter';
 import { UserIcon } from '../../components/icons/UserIcon';
 
 interface PriceChartProps {

src/utils/unitConverter.ts

@@ -43,13 +43,13 @@ export const formatUnitPrice = (unitPrice: UnitPrice | null | undefined, system:
     if (system === 'imperial' && isMetric) {
         const conversion = CONVERSIONS[unit];
         if (conversion) {
-            displayValue = value * conversion.factor;
+            displayValue = value / conversion.factor; // Corrected: Divide price by factor
             displayUnit = conversion.to;
         }
     } else if (system === 'metric' && isImperial) {
         const conversion = CONVERSIONS[unit];
         if (conversion) {
-            displayValue = value * conversion.factor;
+            displayValue = value / conversion.factor; // Corrected: Divide price by factor
             displayUnit = conversion.to;
         }
     }