Bug/typo/style fixes and some minor improvements

frontend/src/components/navigation/NavHeader.tsx

@@ -1,7 +1,7 @@
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { useOrgnization, useWorkspace } from '@app/context';
+import { useOrganization, useWorkspace } from '@app/context';
 
 /**
  * This is the component at the top of almost every page.
@@ -20,7 +20,7 @@ export default function NavHeader({
   isProjectRelated?: boolean;
 }): JSX.Element {
   const { currentWorkspace } = useWorkspace();
-  const { currentOrg } = useOrgnization();
+  const { currentOrg } = useOrganization();
 
   return (
     <div className="ml-6 flex flex-row items-center pt-8">

frontend/src/components/v2/Button/Button.tsx

@@ -24,7 +24,7 @@ const buttonVariants = cva(
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
+        primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-80 hover:bg-opacity-100'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
         danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
       },

frontend/src/components/v2/Card/Card.tsx

@@ -8,9 +8,9 @@ export type CardTitleProps = {
 };
 
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
-  <div className={twMerge('px-6 py-4 font-sans text-xl font-medium', className)}>
+  <div className={twMerge('px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600', className)}>
     {children}
-    {subTitle && <p className="py-1 text-sm font-normal text-gray-400">{subTitle}</p>}
+    {subTitle && <p className="pt-0.5 text-sm font-normal text-gray-400">{subTitle}</p>}
   </div>
 );
 

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -28,8 +28,9 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
+          'flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600',
           isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+          isChecked && 'bg-primary hover:bg-primary',
           className
         )}
         required={isRequired}

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

@@ -24,7 +24,7 @@ export const HoverObject = ({
       </a>
     </HoverCard.Trigger>
     <HoverCard.Portal>
-      <HoverCard.Content className="HoverCardContent z-[50]" sideOffset={5}>
+      <HoverCard.Content className="HoverCardContent z-[300]" 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>

frontend/src/components/v2/Menu/Menu.tsx

@@ -36,14 +36,15 @@ export const MenuItem = <T extends ElementType = 'button'>({
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
   <li
     className={twMerge(
-      'px-3 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
-      isSelected && 'text-primary bg-gray-700',
-      isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
+      'px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-600 duration-50',
+      isSelected && 'bg-mineshaft-500',
+      isDisabled && 'hover:bg-transparent cursor-not-allowed',
       className
     )}
   >
-    <Item type="button" role="menuitem" className="flex items-center" ref={inputRef} {...props}>
-      {icon && <span className="mr-3">{icon}</span>}
+    <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+      <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
+      {icon && <span className="mr-3 ml-4 w-5">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
     </Item>
     {description && <span className="mt-2 text-xs">{description}</span>}

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

@@ -25,7 +25,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <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-[90]',
+            'fixed top-1/2 left-1/2 max-w-lg border border-mineshaft-600 -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
             className
           )}
         >
@@ -36,7 +36,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-3 right-3 rounded text-white hover:bg-gray-600"
+              className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
             >
               <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>

frontend/src/components/v2/Select/Select.tsx

@@ -51,7 +51,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             <SelectPrimitive.ScrollUpButton>
               <FontAwesomeIcon icon={faChevronUp} size="sm" />
             </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className="p-1.5">
+            <SelectPrimitive.Viewport className="p-1">
               {isLoading ? (
                 <div className="flex items-center justify-center">
                   <Spinner size="xs" />
@@ -85,7 +85,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         {...props}
         className={twMerge(
           `relative flex cursor-pointer
-          select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
+          select-none items-center rounded-md py-2 pl-10 pr-4 mb-0.5 text-sm
           outline-none transition-all hover:bg-mineshaft-500`,
           isSelected && 'bg-primary',
           isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-gray-600',
@@ -93,8 +93,8 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         )}
         ref={forwardedRef}
       >
-        <SelectPrimitive.ItemIndicator className="absolute left-3.5">
-          <FontAwesomeIcon icon={faCheck} size="sm" />
+        <SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
+          <FontAwesomeIcon icon={faCheck} />
         </SelectPrimitive.ItemIndicator>
         <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
       </SelectPrimitive.Item>