lots of frontend improvements

frontend/src/components/basic/dialog/AddProjectMemberDialog.tsx

@@ -53,7 +53,7 @@ const AddProjectMemberDialog = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform rounded-md border border-gray-700 bg-bunker-800 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-left align-middle shadow-xl transition-all">
                   {data?.length > 0 ? (
                     <Dialog.Title
                       as="h3"
@@ -64,7 +64,7 @@ const AddProjectMemberDialog = ({
                   ) : (
                     <Dialog.Title
                       as="h3"
-                      className="z-50 text-lg font-medium leading-6 text-gray-400"
+                      className="z-50 text-lg font-medium text-mineshaft-300 mb-4"
                     >
                       {t('section.members.add-dialog.already-all-invited')}
                     </Dialog.Title>

frontend/src/components/basic/table/ProjectUsersTable.tsx

@@ -25,6 +25,7 @@ type Props = {
   changeData: (users: any[]) => void;
   myUser: string;
   filter: string;
+  isUserListLoading: boolean;
 };
 
 type EnvironmentProps = {
@@ -38,7 +39,7 @@ type EnvironmentProps = {
  * @param {*} props
  * @returns
  */
-const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
+const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoading }: Props) => {
   const [roleSelected, setRoleSelected] = useState(
     Array(userData?.length).fill(userData.map((user) => user.role))
   );
@@ -205,7 +206,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
   };
 
   return (
-    <div className="table-container relative mb-6 mt-1 min-w-max rounded-md border border-mineshaft-700 bg-bunker">
+    <div className="table-container relative mb-6 mt-1 min-w-max rounded-md border border-mineshaft-600 bg-bunker">
       <div className="absolute h-[3.1rem] w-full rounded-t-md bg-white/5" />
       <UpgradePlanModal
         isOpen={isUpgradeModalOpen}
@@ -213,7 +214,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
         text="You can change user permissions if you switch to Infisical's Professional plan."
       />
       <table className="my-0.5 w-full">
-        <thead className="text-xs font-light text-gray-400">
+        <thead className="text-xs font-light text-gray-400 bg-mineshaft-800">
           <tr>
             <th className="py-3.5 pl-4 text-left">NAME</th>
             <th className="py-3.5 pl-4 text-left">EMAIL</th>
@@ -231,7 +232,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
           </tr>
         </thead>
         <tbody>
-          {userData?.filter(
+          {!isUserListLoading && userData?.filter(
             (user) =>
               user.firstName?.toLowerCase().includes(filter) ||
               user.lastName?.toLowerCase().includes(filter) ||
@@ -245,14 +246,14 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
                   user.email?.toLowerCase().includes(filter)
               )
               .map((row, index) => (
-                <tr key={guidGenerator()} className="bg-bunker-600 text-sm hover:bg-bunker-500">
-                  <td className="border-t border-mineshaft-700 py-2 pl-4 text-gray-300">
+                <tr key={guidGenerator()} className="bg-mineshaft-800 text-sm">
+                  <td className="border-t border-mineshaft-600 py-2 pl-4 text-gray-300">
                     {row.firstName} {row.lastName}
                   </td>
-                  <td className="border-t border-mineshaft-700 py-2 pl-4 text-gray-300">
+                  <td className="border-t border-mineshaft-600 py-2 pl-4 text-gray-300">
                     {row.email}
                   </td>
-                  <td className="border-t border-mineshaft-700 py-2 pl-6 pr-10 text-gray-300">
+                  <td className="border-t border-mineshaft-600 py-2 pl-6 pr-10 text-gray-300">
                     <div className="flex h-full flex-row items-center justify-start">
                       <Select
                         className="w-36 bg-mineshaft-700"
@@ -391,6 +392,10 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
                   </td>
                 </tr>
               ))}
+              {isUserListLoading && <>
+                <tr key={guidGenerator()} className="bg-mineshaft-800 text-sm animate-pulse h-14 w-full"/>
+                <tr key={guidGenerator()} className="bg-mineshaft-800 text-sm animate-pulse h-14 w-full"/>
+              </>}
         </tbody>
       </table>
     </div>

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">