lots of frontend improvements

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -21,7 +21,7 @@ export const EmptyState = ({
 }: Props) => (
   <div
     className={twMerge(
-      'flex w-full flex-col items-center bg-bunker-700 px-2 pt-6 text-bunker-300',
+      'flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-6 text-bunker-300',
       className
     )}
   >

frontend/src/components/v2/Table/Table.tsx

@@ -16,8 +16,8 @@ export const TableContainer = ({
 }: TableContainerProps): JSX.Element => (
   <div
     className={twMerge(
-      'relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter shadow-md',
-      isRounded && 'rounded-md',
+      'relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter',
+      isRounded && 'rounded-lg',
       className
     )}
   >
@@ -34,7 +34,7 @@ export type TableProps = {
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
     className={twMerge(
-      'w-full rounded-md  bg-bunker-800 p-2 text-left text-sm text-gray-300',
+      'w-full bg-mineshaft-800 p-2 text-left text-sm text-gray-300',
       className
     )}
   >
@@ -49,7 +49,7 @@ export type THeadProps = {
 };
 
 export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge('bg-bunker text-xs uppercase text-bunker-300', className)}>
+  <thead className={twMerge('bg-mineshaft-800 text-xs uppercase text-bunker-300', className)}>
     {children}
   </thead>
 );
@@ -62,7 +62,7 @@ export type TrProps = {
 
 export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
   <tr
-    className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)}
+    className={twMerge('border border-solid border-mineshaft-700 cursor-default', className)}
     {...props}
   >
     {children}
@@ -76,7 +76,7 @@ export type ThProps = {
 };
 
 export const Th = ({ children, className }: ThProps): JSX.Element => (
-  <th className={twMerge('bg-bunker-500 px-5 pt-4 pb-3.5 font-semibold', className)}>{children}</th>
+  <th className={twMerge('bg-mineshaft-800 px-5 pt-4 pb-3.5 font-semibold border-b-2 border-mineshaft-600', className)}>{children}</th>
 );
 
 // table body

frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx

@@ -18,7 +18,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
           href={`/settings/billing/${localStorage.getItem('projectData.id') as string}`}
           key="upgrade-plan"
         >
-          <Button className="mr-4 ml-2">Upgrade Plan</Button>
+          <Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>
         </Link>,
         <ModalClose asChild key="upgrade-plan-cancel">
           <Button colorSchema="secondary" variant="plain">