feat: upgraded to tw v4

frontend/src/pages/public/ErrorPage/ErrorPage.tsx

@@ -50,7 +50,7 @@ export const ErrorPage = ({ error }: ErrorComponentProps) => {
         {error?.message && (
           <>
             <div className="my-4 h-px w-full bg-mineshaft-600" />
-            <p className="thin-scrollbar max-h-44 w-full overflow-auto text-ellipsis rounded-md bg-mineshaft-700 p-2">
+            <p className="max-h-44 thin-scrollbar w-full overflow-auto rounded-md bg-mineshaft-700 p-2 text-ellipsis">
               <code className="text-xs">
                 {window.location.pathname}
                 <br />

frontend/src/pages/public/NotFoundPage/NotFoundPage.tsx

@@ -9,7 +9,7 @@ export const NotFoundPage = () => {
       </Helmet>
       <div className="flex h-screen w-screen flex-col items-center justify-center text-gray-200">
         <p className="mt-32 text-4xl">Oops, something went wrong</p>
-        <p className="mb-1 mt-2 text-lg">
+        <p className="mt-2 mb-1 text-lg">
           Think this is a mistake? Email{" "}
           <a className="text-primary underline underline-offset-4" href="mailto:[email protected]">
             team@infisical.com
@@ -17,7 +17,7 @@ export const NotFoundPage = () => {
           and we`ll fix it!{" "}
         </p>
         <Link to="/organization/projects">
-          <div className="diration-200 mt-8 cursor-default rounded-md bg-mineshaft-500 px-4 py-2 font-semibold hover:bg-primary hover:text-black">
+          <div className="diration-200 mt-8 cursor-default rounded-md bg-mineshaft-500 px-4 py-2 font-medium hover:bg-primary hover:text-black">
             Go to Dashboard
           </div>
         </Link>

frontend/src/pages/public/ShareSecretPage/ShareSecretPage.tsx

@@ -15,7 +15,7 @@ export const ShareSecretPage = () => {
         <meta name="og:description" content="" />
       </Helmet>
       <div className="dark h-full">
-        <div className="flex h-screen flex-col justify-between overflow-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:[color-scheme:dark]">
+        <div className="flex h-screen flex-col justify-between overflow-auto bg-linear-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:scheme-dark">
           <div />
           <div className="mx-auto w-full max-w-xl px-4 py-4 md:px-0">
             <div className="mb-8 text-center">
@@ -30,7 +30,7 @@ export const ShareSecretPage = () => {
                   />
                 </a>
               </div>
-              <h1 className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
                 Share a secret
               </h1>
               <p className="text-md">
@@ -39,7 +39,7 @@ export const ShareSecretPage = () => {
                   href="https://github.com/infisical/infisical"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
                 >
                   Infisical &rarr;
                 </a>
@@ -52,9 +52,9 @@ export const ShareSecretPage = () => {
               <div className="w-full border-t border-mineshaft-600" />
             </div>
             <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
-              <p className="w-full pb-2 text-lg font-semibold text-mineshaft-100 md:pb-3 md:text-xl">
+              <p className="w-full pb-2 text-lg font-medium text-mineshaft-100 md:pb-3 md:text-xl">
                 Open source{" "}
-                <span className="bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+                <span className="bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
                   secret management
                 </span>{" "}
                 for developers
@@ -65,7 +65,7 @@ export const ShareSecretPage = () => {
                     href="https://github.com/infisical/infisical"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                    className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
                   >
                     Infisical
                   </a>{" "}

frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx

@@ -211,7 +211,7 @@ export const ShareSecretForm = ({
               <textarea
                 placeholder="Enter sensitive data to share via an encrypted link..."
                 {...field}
-                className="h-40 min-h-[70px] w-full rounded-md border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5 text-bunker-300 outline-none transition-all placeholder:text-mineshaft-400 hover:border-primary-400/30 focus:border-primary-400/50 group-hover:mr-2"
+                className="h-40 min-h-[70px] w-full rounded-md border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5 text-bunker-300 outline-hidden transition-all group-hover:mr-2 placeholder:text-mineshaft-400 hover:border-primary-400/30 focus:border-primary-400/50"
                 disabled={value !== undefined}
               />
             </FormControl>
@@ -257,7 +257,7 @@ export const ShareSecretForm = ({
                 isError={Boolean(error)}
               >
                 <Switch
-                  className={`ml-0 mr-2 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-primary ${!allowSecretSharingOutsideOrganization ? "opacity-50" : ""}`}
+                  className={`mr-2 ml-0 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-primary ${!allowSecretSharingOutsideOrganization ? "opacity-50" : ""}`}
                   thumbClassName="bg-mineshaft-800"
                   containerClassName="flex-row-reverse w-fit"
                   isChecked={
@@ -450,7 +450,7 @@ export const ShareSecretForm = ({
 
   return (
     <>
-      <div className="mr-2 flex items-center justify-end rounded-md bg-white/[0.05] p-2 text-base text-gray-400">
+      <div className="mr-2 flex items-center justify-end rounded-md bg-white/5 p-2 text-base text-gray-400">
         <p className="mr-4 break-all">{secretLink}</p>
         <IconButton
           ariaLabel="copy icon"

frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx

@@ -143,7 +143,7 @@ export const UpgradePathPage = () => {
         />
       </Helmet>
       <div className="dark h-full">
-        <div className="flex h-screen flex-col justify-between overflow-auto bg-mineshaft-900 text-bunker-200 dark:[color-scheme:dark]">
+        <div className="flex h-screen flex-col justify-between overflow-auto bg-mineshaft-900 text-bunker-200 dark:scheme-dark">
           <div />
           <div className="mx-auto w-full max-w-4xl px-4 py-4 md:px-0">
             {/* Header */}
@@ -159,14 +159,14 @@ export const UpgradePathPage = () => {
                   />
                 </a>
               </div>
-              <h1 className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+              <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
                 Upgrade your Infisical Version
               </h1>
             </div>
 
             {/* Calculator Card */}
             <div className="mb-8 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-6">
-              <h2 className="mb-6 text-xl font-semibold text-bunker-200">Calculate Upgrade Path</h2>
+              <h2 className="mb-6 text-xl font-medium text-bunker-200">Calculate Upgrade Path</h2>
               <div className="space-y-6">
                 <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                   {/* From Version Selector */}
@@ -262,7 +262,7 @@ export const UpgradePathPage = () => {
                       }`}
                     >
                       <div className="flex items-center space-x-3">
-                        <div className="flex-shrink-0">
+                        <div className="shrink-0">
                           {hasIssues ? (
                             <svg
                               className="h-5 w-5 text-yellow-400"
@@ -324,7 +324,7 @@ export const UpgradePathPage = () => {
                         d="M13 7l5 5m0 0l-5 5m5-5H6"
                       />
                     </svg>
-                    <h2 className="text-xl font-semibold text-bunker-200">Upgrade Steps</h2>
+                    <h2 className="text-xl font-medium text-bunker-200">Upgrade Steps</h2>
                   </div>
 
                   <div className="space-y-6">
@@ -417,7 +417,7 @@ export const UpgradePathPage = () => {
 
                             {/* Timeline Line */}
                             {!isLast && (
-                              <div className="-mb-4 -mt-4 h-full w-px flex-1 bg-mineshaft-500" />
+                              <div className="-mt-4 -mb-4 h-full w-px flex-1 bg-mineshaft-500" />
                             )}
                           </div>
 
@@ -427,12 +427,12 @@ export const UpgradePathPage = () => {
                             <div className="flex items-center space-x-3">
                               <h3 className="font-medium text-bunker-200">{step.version}</h3>
                               {isFirst && (
-                                <span className="rounded border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
+                                <span className="rounded-sm border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
                                   Starting Version
                                 </span>
                               )}
                               {isLast && (
-                                <span className="rounded border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
+                                <span className="rounded-sm border border-primary/30 bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
                                   Target Version
                                 </span>
                               )}
@@ -464,7 +464,7 @@ export const UpgradePathPage = () => {
                               if (!notes) return null;
 
                               return (
-                                <div className="mt-3 rounded border border-bunker-500/20 bg-bunker-700/20 p-3">
+                                <div className="mt-3 rounded-sm border border-bunker-500/20 bg-bunker-700/20 p-3">
                                   <div className="text-sm text-bunker-300">{notes}</div>
                                 </div>
                               );
@@ -472,7 +472,7 @@ export const UpgradePathPage = () => {
 
                             {/* Database Schema Changes */}
                             {hasDbMigration && (
-                              <div className="mt-3 rounded border border-yellow-500/20 bg-yellow-500/10 p-3">
+                              <div className="mt-3 rounded-sm border border-yellow-500/20 bg-yellow-500/10 p-3">
                                 <div className="mb-1 text-sm font-medium text-yellow-400">
                                   Database Schema Changes Required
                                 </div>
@@ -512,7 +512,7 @@ export const UpgradePathPage = () => {
                                 {versionChanges.changes.map((change) => (
                                   <div
                                     key={`${step.version}-${change.title}`}
-                                    className="rounded border border-red-500/20 bg-red-500/10 p-3"
+                                    className="rounded-sm border border-red-500/20 bg-red-500/10 p-3"
                                   >
                                     <div className="mb-1 text-sm font-medium text-red-400">
                                       {change.title}

frontend/src/pages/public/ViewSecretRequestByIDPage/ViewSecretRequestByIDPage.tsx

@@ -79,7 +79,7 @@ export const ViewSecretRequestByIDPage = () => {
         <meta property="og:title" content="" />
         <meta name="og:description" content="" />
       </Helmet>
-      <div className="flex h-screen flex-col justify-between overflow-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:[color-scheme:dark]">
+      <div className="flex h-screen flex-col justify-between overflow-auto bg-linear-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:scheme-dark">
         <div />
         <div className="mx-auto w-full max-w-xl px-4 py-4 md:px-0">
           <div className="mb-8 text-center">
@@ -94,7 +94,7 @@ export const ViewSecretRequestByIDPage = () => {
                 />
               </a>
             </div>
-            <h1 className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+            <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
               {step === "set-value" ? "Secret Request" : "Secret request shared"}
             </h1>
             <p className="text-sm text-mineshaft-300">
@@ -107,7 +107,7 @@ export const ViewSecretRequestByIDPage = () => {
                 href="https://github.com/infisical/infisical"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
               >
                 Infisical &rarr;
               </a>
@@ -137,9 +137,9 @@ export const ViewSecretRequestByIDPage = () => {
             <div className="w-full border-t border-mineshaft-600" />
           </div>
           <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
-            <p className="w-full pb-2 text-lg font-semibold text-mineshaft-100 md:pb-3 md:text-xl">
+            <p className="w-full pb-2 text-lg font-medium text-mineshaft-100 md:pb-3 md:text-xl">
               Open source{" "}
-              <span className="bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+              <span className="bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
                 secret management
               </span>{" "}
               for developers
@@ -150,7 +150,7 @@ export const ViewSecretRequestByIDPage = () => {
                   href="https://github.com/infisical/infisical"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
                 >
                   Infisical
                 </a>{" "}

frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestContainer.tsx

@@ -45,7 +45,7 @@ export const SecretRequestContainer = ({ onSuccess, secretRequestId }: Props) =>
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
-          <div className="flex items-center justify-between rounded-md bg-white/[0.05] p-2 text-base text-gray-400">
+          <div className="flex items-center justify-between rounded-md bg-white/5 p-2 text-base text-gray-400">
             <div className="w-full">
               <Controller
                 control={form.control}

frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretRequestSuccessContainer.tsx

@@ -12,7 +12,7 @@ export const SecretRequestSuccessContainer = ({ requesterUsername }: Props) => {
         <div className="mx-auto w-min rounded-md border border-mineshaft-800 bg-mineshaft-600 p-3">
           <FontAwesomeIcon icon={faCheck} size="2x" className="text-primary-500" />
         </div>
-        <p className="text-md mt-2 font-semibold">Secret Shared</p>
+        <p className="text-md mt-2 font-medium">Secret Shared</p>
         <p className="mt-2 text-sm text-mineshaft-300">
           <strong>{requesterUsername}</strong> has now been notified of your shared secret, and will
           be able to access it shortly.

frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretValueAlreadySharedContainer.tsx

@@ -8,7 +8,7 @@ export const SecretValueAlreadySharedContainer = () => {
         <div className="mx-auto w-min rounded-md border border-mineshaft-800 bg-mineshaft-600 p-3">
           <FontAwesomeIcon icon={faKey} size="2x" className="text-primary-500" />
         </div>
-        <p className="text-md mt-2 font-semibold">Secret Already Shared</p>
+        <p className="text-md mt-2 font-medium">Secret Already Shared</p>
         <p className="mt-2 text-sm text-mineshaft-300">
           A secret value has already been shared for this secret request.
         </p>

frontend/src/pages/public/ViewSharedSecretByIDPage/ViewSharedSecretByIDPage.tsx

@@ -109,7 +109,7 @@ export const ViewSharedSecretByIDPage = () => {
         <meta property="og:title" content="" />
         <meta name="og:description" content="" />
       </Helmet>
-      <div className="flex h-screen flex-col justify-between overflow-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:[color-scheme:dark]">
+      <div className="flex h-screen flex-col justify-between overflow-auto bg-linear-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:scheme-dark">
         <div />
         <div className="mx-auto w-full max-w-xl px-4 py-4 md:px-0">
           <div className="mb-8 text-center">
@@ -124,7 +124,7 @@ export const ViewSharedSecretByIDPage = () => {
                 />
               </a>
             </div>
-            <h1 className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
+            <h1 className="bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
               View shared secret
             </h1>
             <p className="text-md">
@@ -133,7 +133,7 @@ export const ViewSharedSecretByIDPage = () => {
                 href="https://github.com/infisical/infisical"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
               >
                 Infisical &rarr;
               </a>
@@ -160,9 +160,9 @@ export const ViewSharedSecretByIDPage = () => {
             <div className="w-full border-t border-mineshaft-600" />
           </div>
           <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
-            <p className="w-full pb-2 text-lg font-semibold text-mineshaft-100 md:pb-3 md:text-xl">
+            <p className="w-full pb-2 text-lg font-medium text-mineshaft-100 md:pb-3 md:text-xl">
               Open source{" "}
-              <span className="bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+              <span className="bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
                 secret management
               </span>{" "}
               for developers
@@ -173,7 +173,7 @@ export const ViewSharedSecretByIDPage = () => {
                   href="https://github.com/infisical/infisical"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                  className="text-bold bg-linear-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
                 >
                   Infisical
                 </a>{" "}

frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx

@@ -45,8 +45,8 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
 
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
-      <div className="flex items-center justify-between rounded-md bg-white/[0.05] p-2 text-base text-gray-400">
-        <p className="whitespace-pre-wrap break-all">
+      <div className="flex items-center justify-between rounded-md bg-white/5 p-2 text-base text-gray-400">
+        <p className="break-all whitespace-pre-wrap">
           {isVisible ? decryptedSecret : hiddenSecret}
         </p>
         <div className="flex">