Revamped the dashabord look

frontend/src/components/v2/HoverCard/HoverCard.tsx

@@ -0,0 +1,42 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as HoverCard from '@radix-ui/react-hover-card';
+
+type Props = {
+  text: string;
+  icon: IconProp;
+  color: string;
+};
+
+export type HoverCardProps = Props;
+
+export const HoverObject = ({
+    text,
+    icon,
+    color
+  }: Props): JSX.Element => (
+  <HoverCard.Root openDelay={50}>
+    <HoverCard.Trigger asChild>
+      <a
+        className="ImageTrigger z-20"
+      >
+        <FontAwesomeIcon icon={icon} className={`text-${color}`} />
+      </a>
+    </HoverCard.Trigger>
+    <HoverCard.Portal>
+      <HoverCard.Content className="HoverCardContent z-[50]" sideOffset={5}>
+        <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
+            <div>
+              <div className="Text bold">{text}</div>
+            </div>
+          </div>
+        </div>
+
+        <HoverCard.Arrow className="border-mineshaft-600" />
+      </HoverCard.Content>
+    </HoverCard.Portal>
+  </HoverCard.Root>
+);
+
+HoverObject.displayName = 'HoverCard';

frontend/src/components/v2/HoverCard/index.tsx

@@ -0,0 +1,2 @@
+export type { HoverCardProps } from './HoverCard';
+export { HoverObject } from './HoverCard';

frontend/src/components/v2/IconButton/IconButton.tsx

@@ -80,7 +80,7 @@ const iconButtonVariants = cva(
       {
         colorSchema: ['danger', 'primary', 'secondary'],
         variant: ['plain'],
-        className: 'bg-transparent py-1 px-1'
+        className: 'bg-transparent py-1 px-1 text-bunker-300'
       }
     ]
   }

frontend/src/components/v2/Modal/Modal.tsx

@@ -18,14 +18,14 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
   ({ children, title, subTitle, className, footerContent, onClose, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className="fixed inset-0 h-full w-full animate-fadeIn"
+        className="fixed inset-0 h-full w-full animate-fadeIn z-[70]"
         style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
       />
       <DialogPrimitive.Content {...props} ref={forwardedRef}>
         <Card
           isRounded
           className={twMerge(
-            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-50',
+            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
             className
           )}
         >