Visual fixes on paohvis

fix hover, icons, and background rectangles

libs/shared/lib/components/icon/index.tsx

@@ -2,7 +2,9 @@ import React, { ReactElement, ReactNode } from 'react';
 import { SVGProps } from 'react';
 
 // Define Sizes and IconProps types
-export type Sizes = 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40;
+export type Sizes = 8 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40;
+export const sizesArray: Sizes[] = [8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40];
+
 export type IconProps = SVGProps<SVGSVGElement> & {
   component?: ReactNode | ReactElement<any> | string;
   size?: Sizes;
@@ -31,7 +33,7 @@ export const Icon = ({ component, size = 24, color, ...props }: IconProps) => {
       ...props,
     });
   }
-
+  /*
   // Check if component is a function (assume it's a custom SVG component)
   if (typeof component === 'function') {
     // Render the custom SVG component directly
@@ -41,7 +43,7 @@ export const Icon = ({ component, size = 24, color, ...props }: IconProps) => {
       </svg>
     );
   }
-
+  */
   // Default case: render null or fallback
   console.error('Unsupported icon type');
   return null;