feat: upgraded to tw v4

frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx

@@ -94,7 +94,7 @@ const Page = () => {
               <div className="flex flex-col">
                 <div>
                   <span>{data.name}</span>
-                  <p className="text-sm font-[400] normal-case leading-3 text-mineshaft-400">
+                  <p className="text-sm leading-3 font-normal text-mineshaft-400 normal-case">
                     {data.slug} {data.description && `- ${data.description}`}
                   </p>
                 </div>

frontend/src/pages/project/RoleDetailsBySlugPage/components/ConditionsFields.tsx

@@ -144,7 +144,7 @@ export const ConditionsFields = ({
                       <FormControl
                         isError={Boolean(error?.message)}
                         errorText={error?.message}
-                        className="mb-0 flex-grow"
+                        className="mb-0 grow"
                       >
                         <Select
                           position="popper"
@@ -170,7 +170,7 @@ export const ConditionsFields = ({
                     </Tooltip>
                   </div>
                 </div>
-                <div className="flex-grow">
+                <div className="grow">
                   <Controller
                     control={control}
                     name={`permissions.${subject}.${position}.conditions.${index}.rhs` as const}
@@ -178,7 +178,7 @@ export const ConditionsFields = ({
                       <FormControl
                         isError={Boolean(error?.message)}
                         errorText={error?.message}
-                        className="mb-0 flex-grow"
+                        className="mb-0 grow"
                       >
                         <Input {...field} />
                       </FormControl>

frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx

@@ -138,7 +138,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
       >
         <FontAwesomeIcon className="mr-6 w-4" icon={isOpen ? faChevronDown : faChevronRight} />
 
-        <div className="flex-grow select-none text-base">{title}</div>
+        <div className="grow text-base select-none">{title}</div>
         {fields.length > 1 && (
           <div>
             <Tag size="xs" className="mr-2 px-2">
@@ -247,7 +247,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                             colorSchema="danger"
                             variant="plain"
                             size="xs"
-                            className="ml-auto mr-3 rounded"
+                            className="mr-3 ml-auto rounded-sm"
                             onClick={() => remove(rootIndex)}
                             isDisabled={isDisabled}
                           >
@@ -280,7 +280,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                           colorSchema="danger"
                           variant="plain"
                           size="xs"
-                          className="ml-auto rounded"
+                          className="ml-auto rounded-sm"
                           onClick={() => remove(rootIndex)}
                           isDisabled={isDisabled}
                         >
@@ -289,7 +289,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                       </Tooltip>
                     )}
                   </div>
-                  <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
+                  <div className="flex grow flex-wrap justify-start gap-x-8 gap-y-4">
                     {actions.map(({ label, value }, index) => {
                       if (typeof value !== "string") return undefined;
 

frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicySelectionModal.tsx

@@ -119,8 +119,8 @@ const Content = ({ onClose, type: projectType }: ContentProps) => {
           ) : null
         }
       />
-      <TableContainer className="thin-scrollbar mt-4 max-h-[28rem]">
-        <div className="sticky top-0 z-30 flex justify-between border-b border-b-mineshaft-600 bg-mineshaft-800 py-3 pl-5 pr-4 font-inter text-sm font-medium text-bunker-300">
+      <TableContainer className="mt-4 max-h-112 thin-scrollbar">
+        <div className="sticky top-0 z-30 flex justify-between border-b border-b-mineshaft-600 bg-mineshaft-800 py-3 pr-4 pl-5 font-inter text-sm font-medium text-bunker-300">
           <span>Resource</span>
           <div className="flex gap-2">
             <Button
@@ -182,7 +182,7 @@ const Content = ({ onClose, type: projectType }: ContentProps) => {
           <EmptyState
             iconSize="2x"
             icon={faSearch}
-            className="!pb-4 !pt-8"
+            className="pt-8! pb-4!"
             title="No policies match search"
           />
         )}

frontend/src/pages/project/RoleDetailsBySlugPage/components/PolicyTemplateModal.tsx

@@ -137,14 +137,14 @@ const Content = ({ onClose, type: projectType }: ContentProps) => {
             value={id}
             className="m-0 border border-mineshaft-600 first:rounded-t last:rounded-b data-[state=open]:border-primary/40 data-[state=open]:bg-mineshaft-600/30"
           >
-            <AccordionTrigger className="w-full justify-start p-4 py-8 text-mineshaft-100 hover:bg-mineshaft-700 hover:text-mineshaft-100 data-[state=open]:bg-primary/[3%] data-[state=open]:text-mineshaft-100">
+            <AccordionTrigger className="w-full justify-start p-4 py-8 text-mineshaft-100 hover:bg-mineshaft-700 hover:text-mineshaft-100 data-[state=open]:bg-primary/3 data-[state=open]:text-mineshaft-100">
               <div className="mr-auto flex flex-col py-2 text-left">
                 <span>{name}</span>
                 <span className="text-sm leading-3 text-mineshaft-400">{description}</span>
               </div>
             </AccordionTrigger>
             <AccordionContent className="border-t border-mineshaft-600">
-              <div className="thin-scrollbar max-h-[20rem] overflow-y-auto">
+              <div className="max-h-80 thin-scrollbar overflow-y-auto">
                 <span className="text-mineshaft-300">Grants the following permissions:</span>
                 <div className="grid grid-cols-2 gap-4 py-2">
                   {permissions

frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx

@@ -1298,8 +1298,8 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
                   This is a legacy action and will be removed in the future.
                   <br />
                   <br /> You should instead use the{" "}
-                  <strong className="font-semibold">Describe Secret</strong> and{" "}
-                  <strong className="font-semibold">Read Value</strong> actions.
+                  <strong className="font-medium">Describe Secret</strong> and{" "}
+                  <strong className="font-medium">Read Value</strong> actions.
                 </div>
               }
             >

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -164,7 +164,7 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
         <FormProvider {...form}>
           <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
             <div>
-              <h3 className="text-lg font-semibold text-mineshaft-100">Policies</h3>
+              <h3 className="text-lg font-medium text-mineshaft-100">Policies</h3>
               <p className="text-sm leading-3 text-mineshaft-400">
                 Configure granular access policies
               </p>
@@ -198,7 +198,7 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
               </div>
             )}
           </div>
-          <div className="flex flex-1 flex-col overflow-hidden pl-4 pr-1">
+          <div className="flex flex-1 flex-col overflow-hidden pr-1 pl-4">
             <div className="thin-scrollbar flex-1 overflow-y-scroll py-4">
               {!isPending && <PermissionEmptyState />}
               {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[])