feat: upgraded to tw v4

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -54,7 +54,7 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
     <>
       <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
         <div className="flex-col">
-          <h3 className="text-xl font-semibold">{name}</h3>
+          <h3 className="text-xl font-medium">{name}</h3>
           <h2 className="text-sm text-mineshaft-400">
             {`${getProjectTitle(type)} - `}
             {description || "Project Template"}

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -93,7 +93,7 @@ export const ProjectTemplateEditRoleForm = ({
         <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <Button
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-base font-semibold text-mineshaft-200"
+            className="text-base font-medium text-mineshaft-200"
             variant="link"
             onClick={onGoBack}
           >
@@ -134,7 +134,7 @@ export const ProjectTemplateEditRoleForm = ({
         <div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
           {isDisabled ? (
             <div className="flex flex-col">
-              <span className="text-lg font-semibold">{role?.name}</span>
+              <span className="text-lg font-medium">{role?.name}</span>
               <span className="text-mineshaft-400">{role?.slug}</span>
             </div>
           ) : (

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -102,7 +102,7 @@ export const ProjectTemplateEnvironmentsForm = ({
     >
       <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <div>
-          <h2 className="text-lg font-semibold">Project Environments</h2>
+          <h2 className="text-lg font-medium">Project Environments</h2>
           {!isInfisicalTemplate && (
             <p className="text-sm text-mineshaft-400">
               Add, rename, remove and reorder environments for this project template
@@ -185,7 +185,7 @@ export const ProjectTemplateEnvironmentsForm = ({
                             <FormControl
                               isError={Boolean(error?.message)}
                               errorText={error?.message}
-                              className="mb-0 flex-grow"
+                              className="mb-0 grow"
                             >
                               <Input isDisabled={!isAllowed} {...field} placeholder="Name..." />
                             </FormControl>
@@ -211,7 +211,7 @@ export const ProjectTemplateEnvironmentsForm = ({
                             <FormControl
                               isError={Boolean(error?.message)}
                               errorText={error?.message}
-                              className="mb-0 flex-grow"
+                              className="mb-0 grow"
                             >
                               <Input isDisabled={!isAllowed} {...field} placeholder="Slug..." />
                             </FormControl>

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx

@@ -78,7 +78,7 @@ export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTempla
             initial={{ opacity: 0, translateX: 30 }}
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
+            className="absolute min-h-40 w-full"
           >
             <ProjectTemplateEditRoleForm
               onGoBack={() => handlePopUpClose("editRole")}
@@ -106,7 +106,7 @@ export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTempla
             <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
               <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
                 <div>
-                  <h2 className="text-lg font-semibold">Project Roles</h2>
+                  <h2 className="text-lg font-medium">Project Roles</h2>
                   <p className="text-sm text-mineshaft-400">
                     {isInfisicalTemplate
                       ? "Click a role to view the associated permissions"

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx

@@ -140,7 +140,7 @@ const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
                 <div
                   key={el.value}
                   className={twMerge(
-                    "flex cursor-pointer flex-col items-center gap-2 rounded border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
+                    "flex cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
                     field.value === el.value && "border-primary-400 bg-mineshaft-600 opacity-100"
                   )}
                   onClick={() => field.onChange(el.value)}
@@ -166,7 +166,7 @@ const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
         isError={Boolean(errors.description?.message)}
       >
         <TextArea
-          className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+          className="max-h-80 min-h-40 max-w-full min-w-full"
           {...register("description")}
         />
       </FormControl>

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx

@@ -33,7 +33,7 @@ export const ProjectTemplatesSection = () => {
             initial={{ opacity: 0, translateX: 30 }}
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
+            className="absolute min-h-40 w-full"
           >
             <EditProjectTemplateSection
               template={editTemplate}
@@ -47,7 +47,7 @@ export const ProjectTemplatesSection = () => {
             initial={{ opacity: 0, translateX: 30 }}
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
+            className="absolute min-h-40 w-full"
           >
             <div>
               <p className="mb-6 font-inter text-bunker-300">
@@ -56,13 +56,13 @@ export const ProjectTemplatesSection = () => {
               </p>
               <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
                 <div className="mb-4 flex items-start">
-                  <p className="text-xl font-semibold text-mineshaft-100">Project Templates</p>
+                  <p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
                     href="https://infisical.com/docs/documentation/platform/project-templates"
                   >
-                    <div className="ml-2 mt-[0.32rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                    <div className="mt-[0.32rem] ml-2 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
                       <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                       <span>Docs</span>
                       <FontAwesomeIcon