fix: correct lint

.github/workflows/check-fe-ts-and-lint.yml

@@ -30,6 +30,6 @@ jobs:
       - name: 🏗️ Run Type check
         run: npm run type:check
         working-directory: frontend
-      - name: 🏗️ Run Link check
+      - name: 🏗️ Run Lint check
         run: npm run lint
         working-directory: frontend

frontend/src/components/app-connections/AppConnectionOption.tsx

@@ -17,7 +17,7 @@ export const AppConnectionOption = ({
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
         {isCreateOption ? (
-          <div className="text-mineshaft-400 flex items-center gap-x-1">
+          <div className="flex items-center gap-x-1 text-mineshaft-400">
             <FontAwesomeIcon icon={faPlus} size="sm" />
             <span className="mr-auto">Create New Connection</span>
           </div>
@@ -26,8 +26,8 @@ export const AppConnectionOption = ({
             <p className="truncate">{children}</p>
             {!props.data.projectId && (
               <Tooltip content="This connection belongs to your organization.">
-                <div className="ml-2 mr-auto">
+                <div className="mr-auto ml-2">
-                  <Badge className="bg-mineshaft-400/50 text-bunker-300 hover:text-bunker-300 flex h-5 w-min items-center gap-1 whitespace-nowrap">
+                  <Badge className="flex h-5 w-min items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300 hover:text-bunker-300">
                     <FontAwesomeIcon icon={faBuilding} size="sm" />
                     Organization
                   </Badge>
@@ -35,7 +35,7 @@ export const AppConnectionOption = ({
               </Tooltip>
             )}
             {isSelected && (
-              <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
+              <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
             )}
           </>
         )}

frontend/src/components/auth/CodeInputStep.tsx

@@ -90,8 +90,8 @@ export default function CodeInputStep({
 
   return (
     <div className="mx-auto h-full w-full pb-4 md:px-8">
-      <p className="text-md text-bunker-200 flex justify-center">{t("signup.step2-message")}</p>
+      <p className="text-md flex justify-center text-bunker-200">{t("signup.step2-message")}</p>
-      <p className="text-md text-bunker-200 my-1 flex justify-center font-medium">{email} </p>
+      <p className="text-md my-1 flex justify-center font-medium text-bunker-200">{email} </p>
       <div className="mx-auto hidden w-max min-w-[20rem] md:block">
         <ReactCodeInput
           name=""
@@ -100,7 +100,7 @@ export default function CodeInputStep({
           fields={6}
           onChange={setCode}
           {...props}
-          className="mb-2 mt-6"
+          className="mt-6 mb-2"
         />
       </div>
       <div className="mx-auto mt-4 block w-max md:hidden">
@@ -111,11 +111,11 @@ export default function CodeInputStep({
           fields={6}
           onChange={setCode}
           {...propsPhone}
-          className="mb-2 mt-2"
+          className="mt-2 mb-2"
         />
       </div>
       {codeError && <Error text={t("signup.step2-code-error")} />}
-      <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+      <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
         <div className="text-l w-full py-1 text-lg">
           <Button
             type="submit"
@@ -135,9 +135,9 @@ export default function CodeInputStep({
       <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
         <div className="flex flex-row items-baseline gap-1 text-sm">
           <span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
-          <div className="text-md text-bunker-400 mt-2 flex flex-row">
+          <div className="text-md mt-2 flex flex-row text-bunker-400">
             <button disabled={isLoading} onClick={resendVerificationEmail} type="button">
-              <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
                 {isResendingVerificationEmail
                   ? t("signup.step2-resend-progress")
                   : t("signup.step2-resend-submit")}
@@ -145,7 +145,7 @@ export default function CodeInputStep({
             </button>
           </div>
         </div>
-        <p className="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
+        <p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
       </div>
     </div>
   );

frontend/src/components/auth/EnterEmailStep.tsx

@@ -55,7 +55,7 @@ export default function EnterEmailStep({
   return (
     <div>
       <div className="mx-auto w-full md:px-6">
-        <p className="bg-linear-to-b to-bunker-200 flex justify-center from-white bg-clip-text text-xl font-medium text-transparent">
+        <p className="flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent">
           {t("signup.step1-start")}
         </p>
         <div className="m-auto mt-8 flex w-1/4 min-w-[20rem] flex-col items-center justify-center rounded-lg lg:w-1/6">
@@ -68,12 +68,12 @@ export default function EnterEmailStep({
             className="h-12"
           />
           {emailError && (
-            <p className="ml-1.5 mt-1.5 w-full text-left text-xs text-red-600">
+            <p className="mt-1.5 ml-1.5 w-full text-left text-xs text-red-600">
               Please enter a valid email.
             </p>
           )}
         </div>
-        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
+        <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
           <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"
@@ -92,10 +92,10 @@ export default function EnterEmailStep({
           </div>
         </div>
       </div>
-      <div className="mx-auto mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
+      <div className="mx-auto mt-2 mb-48 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
         <Link to="/login">
           <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
-            <span className="text-mineshaft-400 hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer text-sm duration-200 hover:underline hover:underline-offset-4">
+            <span className="cursor-pointer text-sm text-mineshaft-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
               {t("signup.already-have-account")}
             </span>
           </button>

frontend/src/components/auth/InitialSignupStep.tsx

@@ -23,7 +23,7 @@ export default function InitialSignupStep({
 
   return (
     <div className="mx-auto flex w-full flex-col items-center justify-center">
-      <h1 className="bg-linear-to-b to-bunker-200 mb-8 from-white bg-clip-text text-center text-xl font-medium text-transparent">
+      <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         {t("signup.initial-title")}
       </h1>
       <RegionSelect />
@@ -90,12 +90,12 @@ export default function InitialSignupStep({
           </Button>
         </div>
       )}
-      <div className="text-bunker-400 mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs lg:w-1/6">
+      <div className="mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs text-bunker-400 lg:w-1/6">
         {t("signup.create-policy")}
       </div>
-      <div className="text-bunker-400 mt-2 flex flex-row text-xs">
+      <div className="mt-2 flex flex-row text-xs text-bunker-400">
         <Link to="/login">
-          <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
             {t("signup.already-have-account")}
           </span>
         </Link>

frontend/src/components/auth/Mfa.tsx

@@ -159,7 +159,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         <div className="mb-6 text-center text-lg font-bold text-white">
           Your organization requires mobile authentication to be configured.
         </div>
-        <div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
+        <div className="mx-auto w-max pt-4 pb-4 md:mb-16 md:px-8">
           <TotpRegistration
             shouldCenterQr
             onComplete={async () => {
@@ -173,7 +173,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
   }
 
   return (
-    <div className="mx-auto w-max pb-6 pt-6 md:mb-16 md:px-8">
+    <div className="mx-auto w-max pt-6 pb-6 md:mb-16 md:px-8">
       {!hideLogo && (
         <Link to="/">
           <div className="mb-4 flex justify-center">
@@ -183,14 +183,14 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
       )}
       {method === MfaMethod.EMAIL && (
         <>
-          <p className="text-l text-bunker-300 flex justify-center">{t("mfa.step2-message")}</p>
+          <p className="text-l flex justify-center text-bunker-300">{t("mfa.step2-message")}</p>
-          <p className="text-l text-bunker-300 my-1 flex justify-center font-medium">{email}</p>
+          <p className="text-l my-1 flex justify-center font-medium text-bunker-300">{email}</p>
         </>
       )}
       {method === MfaMethod.TOTP && (
         <div className="mb-8 text-center">
-          <h2 className="text-bunker-100 mb-3 text-xl font-medium">Two-Factor Authentication</h2>
+          <h2 className="mb-3 text-xl font-medium text-bunker-100">Two-Factor Authentication</h2>
-          <p className="text-bunker-300 mx-auto max-w-md text-sm leading-relaxed">
+          <p className="mx-auto max-w-md text-sm leading-relaxed text-bunker-300">
             {showRecoveryCodeInput
               ? "Enter one of your backup recovery codes"
               : "Enter the verification code from your authenticator app"}
@@ -207,13 +207,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
                 type="text"
                 fields={6}
                 onChange={setMfaCode}
-                className="mb-2 mt-6"
+                className="mt-6 mb-2"
                 {...codeInputProps}
               />
             </div>
           )}
           {method === MfaMethod.TOTP && (
-            <div className="mb-6 mt-8 flex justify-center">
+            <div className="mt-8 mb-6 flex justify-center">
               <ReactCodeInput
                 key={showRecoveryCodeInput ? "recovery" : "totp"}
                 name=""
@@ -236,13 +236,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
                 type="text"
                 fields={6}
                 onChange={setMfaCode}
-                className="mb-2 mt-2"
+                className="mt-2 mb-2"
                 {...codeInputPropsPhone}
               />
             </div>
           )}
           {method === MfaMethod.TOTP && (
-            <div className="mb-6 mt-4 flex justify-center">
+            <div className="mt-4 mb-6 flex justify-center">
               <ReactCodeInput
                 key={showRecoveryCodeInput ? "recovery-mobile" : "totp-mobile"}
                 name=""
@@ -264,7 +264,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
             size="md"
             type="submit"
             isFullWidth
-            className="shadow-xs h-11 rounded-lg font-medium transition-all duration-200 hover:shadow-md"
+            className="h-11 rounded-lg font-medium shadow-xs transition-all duration-200 hover:shadow-md"
             colorSchema="primary"
             variant="outline_bg"
             isLoading={isLoading}
@@ -282,7 +282,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
               setShowRecoveryCodeInput(!showRecoveryCodeInput);
               setMfaCode("");
             }}
-            className="text-bunker-400 hover:text-bunker-200 hover:decoration-primary-700 transition-colors duration-200 hover:underline hover:underline-offset-4"
+            className="text-bunker-400 transition-colors duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
           >
             {showRecoveryCodeInput ? "Use authenticator code" : "Use a recovery code"}
           </button>
@@ -311,7 +311,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
                 </div>
               }
             >
-              <span className="text-bunker-400 hover:text-bunker-200 cursor-help transition-colors duration-200">
+              <span className="cursor-help text-bunker-400 transition-colors duration-200 hover:text-bunker-200">
                 Lost your recovery codes?
               </span>
             </Tooltip>
@@ -322,9 +322,9 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
           <div className="flex flex-row items-baseline gap-1 text-sm">
             <span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
-            <div className="text-md text-bunker-400 mt-2 flex flex-row">
+            <div className="text-md mt-2 flex flex-row text-bunker-400">
               <button disabled={isLoadingResend} onClick={handleResendMfaCode} type="button">
-                <span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
+                <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
                   {isLoadingResend
                     ? t("signup.step2-resend-progress")
                     : t("signup.step2-resend-submit")}
@@ -332,7 +332,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
               </button>
             </div>
           </div>
-          <p className="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
+          <p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
         </div>
       )}
     </div>

frontend/src/components/auth/TeamInviteStep.tsx

@@ -41,26 +41,26 @@ export default function TeamInviteStep(): JSX.Element {
   };
 
   return (
-    <div className="min-w-lg mx-auto mb-64 h-full w-max px-8 pb-4 md:mb-32">
+    <div className="mx-auto mb-64 h-full w-max min-w-lg px-8 pb-4 md:mb-32">
-      <p className="bg-linear-to-b to-bunker-200 flex justify-center from-white bg-clip-text text-2xl font-medium text-transparent">
+      <p className="flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-2xl font-medium text-transparent">
         {t("signup.step5-invite-team")}
       </p>
-      <p className="text-bunker-400 mb-6 mt-4 flex justify-center text-center md:mx-8">
+      <p className="mt-4 mb-6 flex justify-center text-center text-bunker-400 md:mx-8">
         {t("signup.step5-subtitle")}
       </p>
-      <div className="border-mineshaft-500 bg-mineshaft-800 mx-auto mb-6 w-max rounded-xl border px-8 pb-4 pt-6 drop-shadow-xl">
+      <div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pt-6 pb-4 drop-shadow-xl">
         <div>
-          <div className="text-bunker-300 pb-1 pl-1 text-sm font-medium">
+          <div className="pb-1 pl-1 text-sm font-medium text-bunker-300">
             <span>Emails</span>
           </div>
           <textarea
-            className="min-w-120 border-mineshaft-500 bg-mineshaft-900/70 text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 h-20 w-full rounded-md border px-2 py-1 text-sm ring-opacity-70 focus:ring-2"
+            className="ring-opacity-70 h-20 w-full min-w-120 rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 focus:ring-2"
             value={emails}
             onChange={(e) => setEmails(e.target.value)}
             placeholder="email@example.com, email2@example.com..."
           />
         </div>
-        <div className="md:min-w-120 mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mb-2 md:mt-4 md:max-w-md">
+        <div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:max-w-md md:min-w-120">
           <Button
             onClick={() => {
               if (serverDetails?.emailConfigured) {
@@ -84,7 +84,7 @@ export default function TeamInviteStep(): JSX.Element {
           onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
         />
       </div>
-      <div className="mx-auto mb-2 mt-4 flex max-h-24 min-w-[20rem] max-w-max flex-row items-center justify-center px-4 text-lg md:p-2">
+      <div className="mx-auto mt-4 mb-2 flex max-h-24 max-w-max min-w-[20rem] flex-row items-center justify-center px-4 text-lg md:p-2">
         <Button
           onClick={redirectToHome}
           size="sm"

frontend/src/components/auth/UserInfoStep.tsx

@@ -139,12 +139,12 @@ export default function UserInfoStep({
 
   return (
     <div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8">
-      <p className="text-medium bg-linear-to-b to-bunker-200 mx-8 mb-6 flex justify-center from-white bg-clip-text text-xl font-bold text-transparent md:mx-16">
+      <p className="text-medium mx-8 mb-6 flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
         {t("signup.step3-message")}
       </p>
-      <div className="md:border-mineshaft-600 md:bg-mineshaft-800 mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:px-8">
+      <div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
         <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-          <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Your Name
           </p>
           <Input
@@ -156,13 +156,13 @@ export default function UserInfoStep({
             className="h-12"
           />
           {nameError && (
-            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
+            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
               Please, specify your name
             </p>
           )}
         </div>
         <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-          <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Organization Name
           </p>
           <Input
@@ -174,13 +174,13 @@ export default function UserInfoStep({
             className="h-12"
           />
           {organizationNameError && (
-            <p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
+            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
               Please, specify your organization name
             </p>
           )}
         </div>
         <div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
-          <p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
             Where did you hear about us? <span className="font-light">(optional)</span>
           </p>
           <Input
@@ -219,7 +219,7 @@ export default function UserInfoStep({
                       <div>
                         <FontAwesomeIcon
                           icon={faXmark}
-                          className="text-md text-red ml-0.5 mr-2.5"
+                          className="text-md mr-2.5 ml-0.5 text-red"
                         />
                       </div>
                       <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
@@ -232,7 +232,7 @@ export default function UserInfoStep({
             </div>
           )}
         </div>
-        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+        <div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
           <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"

frontend/src/components/basic/Error.tsx

@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 const Error = ({ text }: { text: string }): JSX.Element => {
   return (
     <div className="relative m-auto flex w-fit flex-row items-center justify-center rounded-full">
-      <FontAwesomeIcon icon={faExclamationTriangle} className="text-red mx-2 mb-2 mt-1.5" />
+      <FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mt-1.5 mb-2 text-red" />
-      {text && <p className="text-red relative top-0 mr-2 py-1 text-sm">{text}</p>}
+      {text && <p className="relative top-0 mr-2 py-1 text-sm text-red">{text}</p>}
     </div>
   );
 };

frontend/src/components/basic/InputField.tsx

@@ -48,7 +48,7 @@ const InputField = ({
           placeholder={placeholder}
           value={value}
           required={isRequired}
-          className="text-md bg-bunker-800 outline-hidden w-full min-w-16 rounded-md border border-gray-600 p-2 text-gray-400"
+          className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-hidden"
           name={name}
           readOnly
           autoComplete={autoComplete}
@@ -59,7 +59,7 @@ const InputField = ({
   }
   return (
     <div className="w-full flex-col">
-      <div className="text-mineshaft-300 mb-0.5 flex flex-row items-center">
+      <div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
         <p className="mr-1 text-sm font-medium">{label}</p>
       </div>
       <div
@@ -75,11 +75,11 @@ const InputField = ({
           required={isRequired}
           className={`${
             blurred
-              ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
+              ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
               : ""
           } ${
             error ? "focus:ring-red/50" : "focus:ring-primary/50"
-          } text-md bg-mineshaft-900 outline-hidden peer relative w-full min-w-16 rounded-md p-2 text-gray-400 duration-200 focus:ring-4`}
+          } text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-hidden duration-200 focus:ring-4`}
           name={name}
           spellCheck="false"
           autoComplete={autoComplete}
@@ -101,7 +101,7 @@ const InputField = ({
           </button>
         )}
         {blurred && (
-          <div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden text-clip rounded-md text-gray-400/50 group-hover:!hidden peer-hover:hidden peer-focus:hidden peer-active:invisible">
+          <div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden rounded-md text-clip text-gray-400/50 group-hover:!hidden peer-hover:hidden peer-focus:hidden peer-active:invisible">
             <p className="ml-2" />
             {value
               .split("")
@@ -121,7 +121,7 @@ const InputField = ({
 						</div>
 					)} */}
       </div>
-      {error && <p className="text-red mx-0 mb-2 mt-0.5 max-w-xs text-xs">{errorText}</p>}
+      {error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
     </div>
   );
 };

frontend/src/components/features/TtlFormLabel.tsx

@@ -29,7 +29,7 @@ export const TtlFormLabel = ({ label }: { label: string }) => (
           <FontAwesomeIcon
             icon={faQuestionCircle}
             size="sm"
-            className="text-mineshaft-300 relative right-1 mt-0.5"
+            className="relative right-1 mt-0.5 text-mineshaft-300"
           />
         </Tooltip>
       }

frontend/src/components/features/WishForm.tsx

@@ -63,7 +63,7 @@ export const WishForm = () => {
       open={isOpen}
     >
       <PopoverTrigger asChild>
-        <div className="text-md hover:text-mineshaft-200 mb-3 w-full pl-5 duration-200">
+        <div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
           <FontAwesomeIcon icon={faRocketchat} className="mr-2" />
           Request a feature
         </div>
@@ -72,7 +72,7 @@ export const WishForm = () => {
         hideCloseBtn
         align="start"
         alignOffset={20}
-        className="border-mineshaft-600 bg-mineshaft-900 mb-1 w-auto border p-4 drop-shadow-2xl"
+        className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
         sticky="always"
       >
         <form onSubmit={handleSubmit(createWish)}>
@@ -82,7 +82,7 @@ export const WishForm = () => {
             errorText={errors?.text?.message}
           >
             <TextArea
-              className="border-mineshaft-600 border bg-black/10 text-sm focus:ring-0"
+              className="border border-mineshaft-600 bg-black/10 text-sm focus:ring-0"
               variant="outline"
               placeholder="Wish for anything! Help us improve the platform."
               reSize="none"

frontend/src/components/integrations/NoEnvironmentsBanner.tsx

@@ -10,7 +10,7 @@ export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
   const navigate = useNavigate();
 
   return (
-    <div className="border-primary-600/70 bg-primary/[.07] mt-4 flex w-full flex-row items-center rounded-md border p-4 text-base text-white">
+    <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
       <div className="flex w-full flex-col text-sm">
         <span className="mb-2 text-lg font-medium">No environments in your project was found</span>
         <p>

frontend/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx

@@ -44,7 +44,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent title="Unleash Infisical's Full Power">
-        <p className="text-bunker-300 mb-2">{text}</p>
+        <p className="mb-2 text-bunker-300">{text}</p>
         <p className="text-bunker-300">
           Upgrade and get access to this, as well as to other powerful enhancements.
         </p>

frontend/src/components/mfa/RecoveryCodesDownload.tsx

@@ -58,15 +58,15 @@ export const RecoveryCodesDownload = ({
     <Modal isOpen={isOpen} onOpenChange={hasDownloaded ? handleClose : () => {}}>
       <ModalContent title="Recovery Codes" className="max-w-md">
         <div className="space-y-4">
-          <div className="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
+          <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
             Save these codes securely. Each can only be used once.
           </div>
 
-          <div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
+          <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <div className="grid grid-cols-2 gap-x-6 gap-y-2 font-mono text-sm">
               {recoveryCodes.map((code, index) => (
-                <div key={code} className="text-mineshaft-200 flex items-center">
+                <div key={code} className="flex items-center text-mineshaft-200">
-                  <span className="text-mineshaft-400 w-8 text-right">{index + 1}.</span>
+                  <span className="w-8 text-right text-mineshaft-400">{index + 1}.</span>
                   <span className="pl-2">{code}</span>
                 </div>
               ))}
@@ -96,11 +96,11 @@ export const RecoveryCodesDownload = ({
           </div>
 
           {hasDownloaded ? (
-            <p className="text-mineshaft-400 text-center text-xs">
+            <p className="text-center text-xs text-mineshaft-400">
               Recovery codes downloaded. You can now close this modal.
             </p>
           ) : (
-            <p className="text-mineshaft-400 text-center text-xs">
+            <p className="text-center text-xs text-mineshaft-400">
               Download the recovery codes to continue.
             </p>
           )}

frontend/src/components/mfa/TotpRegistration.tsx

@@ -73,7 +73,7 @@ const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
 
   return (
     <>
-      <div className="text-bunker-200 flex max-w-lg flex-col">
+      <div className="flex max-w-lg flex-col text-bunker-200">
         <div className="mb-8">
           1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
           code.

frontend/src/components/navigation/NavHeader.tsx

@@ -66,33 +66,33 @@ export default function NavHeader({
 
   return (
     <div className="flex flex-row items-center pt-6">
-      <div className="bg-primary mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md text-sm text-black">
+      <div className="mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md bg-primary text-sm text-black">
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link
         to="/organization/projects"
-        className="text-primary/80 hover:text-primary truncate pl-0.5 text-sm font-medium"
+        className="truncate pl-0.5 text-sm font-medium text-primary/80 hover:text-primary"
       >
         {currentOrg?.name}
       </Link>
       {isProjectRelated && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
+          <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
-          <div className="text-bunker-300 truncate text-sm font-medium">{currentProject?.name}</div>
+          <div className="truncate text-sm font-medium text-bunker-300">{currentProject?.name}</div>
         </>
       )}
       {isOrganizationRelated && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
+          <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
-          <div className="text-bunker-300 text-sm font-medium">Organization Settings</div>
+          <div className="text-sm font-medium text-bunker-300">Organization Settings</div>
         </>
       )}
-      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+      <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-sm text-gray-400" />
       {pageName === "Secrets" ? (
         <Link
           to="/projects/secret-management/$projectId/overview"
           params={{ projectId: currentProject.id }}
-          className="text-primary/80 hover:text-primary text-sm font-medium"
+          className="text-sm font-medium text-primary/80 hover:text-primary"
         >
           {pageName}
         </Link>
@@ -101,15 +101,15 @@ export default function NavHeader({
       )}
       {currentEnv && secretPath === "/" && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+          <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
-          <div className="hover:bg-bunker-100/10 rounded-md pl-3">
+          <div className="rounded-md pl-3 hover:bg-bunker-100/10">
             <Tooltip content="Select environment">
               <Select
                 value={currentEnv}
                 onValueChange={(value) => {
                   if (value && onEnvChange) onEnvChange(value);
                 }}
-                className="text-primary/80 hover:text-primary border-none bg-transparent pl-0 text-sm font-medium"
+                className="border-none bg-transparent pl-0 text-sm font-medium text-primary/80 hover:text-primary"
                 dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
               >
                 {userAvailableEnvs?.map(({ name, slug }) => (
@@ -124,11 +124,11 @@ export default function NavHeader({
       )}
       {isFolderMode && routerEnvSlug && Boolean(secretPathSegments.length) && (
         <div className="flex items-center space-x-3">
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+          <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
           <Link
             to="/projects/secret-management/$projectId/secrets/$envSlug"
             params={{ projectId: currentProject.id, envSlug: routerEnvSlug }}
-            className="text-primary/80 hover:text-primary text-sm font-medium"
+            className="text-sm font-medium text-primary/80 hover:text-primary"
           >
             {userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
           </Link>
@@ -143,7 +143,7 @@ export default function NavHeader({
               className="flex items-center space-x-3"
               key={`breadcrumb-secret-path-${folderName}`}
             >
-              <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+              <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
               {index + 1 === secretPathSegments?.length ? (
                 <div className="flex items-center space-x-2">
                   <span
@@ -195,7 +195,7 @@ export default function NavHeader({
                   }}
                   search={(query) => ({ ...query, secretPath: newSecretPath })}
                   className={twMerge(
-                    "hover:text-primary text-sm transition-all",
+                    "text-sm transition-all hover:text-primary",
                     isHoveringCopyButton ? "text-primary" : "text-primary/80"
                   )}
                 >
@@ -207,7 +207,7 @@ export default function NavHeader({
         })}
       {isProtectedBranch && (
         <Tooltip content={`Protected by policy ${protectionPolicyName}`}>
-          <FontAwesomeIcon icon={faLock} className="text-primary ml-2" />
+          <FontAwesomeIcon icon={faLock} className="ml-2 text-primary" />
         </Tooltip>
       )}
     </div>

frontend/src/components/navigation/RegionSelect.tsx

@@ -108,7 +108,7 @@ export const RegionSelect = () => {
       </Select>
       <Modal>
         <ModalTrigger asChild>
-          <button type="button" className="text-mineshaft-400 mt-1 text-right text-xs underline">
+          <button type="button" className="mt-1 text-right text-xs text-mineshaft-400 underline">
             Help me pick a data region
           </button>
         </ModalTrigger>
@@ -122,17 +122,17 @@ export const RegionSelect = () => {
                 <span className="mr-2 inline-block w-4">{flag}</span>
                 {value.toUpperCase()} Region
               </p>
-              <ul className="ml-6 mt-2 flex flex-col gap-1">
+              <ul className="mt-2 ml-6 flex flex-col gap-1">
                 <li>
-                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Fastest
+                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Fastest
                   option if you are based in {value === Region.US ? "the" : ""} {label}
                 </li>
                 <li>
-                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Data
+                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Data
                   storage compliance for this region
                 </li>
                 <li>
-                  <FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Hosted
+                  <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Hosted
                   in {regionLocation}
                 </li>
               </ul>

frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx

@@ -57,7 +57,7 @@ export const SecretDashboardPathBreadcrumb = ({
                   type: "info"
                 });
               }}
-              className="hover:bg-bunker-100/10 opacity-0 transition duration-75 group-hover:opacity-100"
+              className="opacity-0 transition duration-75 group-hover:opacity-100 hover:bg-bunker-100/10"
             >
               <FontAwesomeIcon
                 icon={!isCopying ? faCopy : faCheck}
@@ -76,7 +76,7 @@ export const SecretDashboardPathBreadcrumb = ({
           }}
           search={(query) => ({ ...query, secretPath: newSecretPath })}
           className={twMerge(
-            "hover:text-primary text-sm transition-all",
+            "text-sm transition-all hover:text-primary",
             isCopying && "text-primary"
           )}
         >

frontend/src/components/notifications/Notifications.tsx

@@ -38,7 +38,7 @@ export const NotificationContent = ({
               {copyActions.map((action) => (
                 <div className="flex flex-row items-center gap-2" key={`copy-${action.name}`}>
                   {action.label && (
-                    <span className="text-mineshaft-400 ml-2 text-xs">{action.label}</span>
+                    <span className="ml-2 text-xs text-mineshaft-400">{action.label}</span>
                   )}
                   <CopyButton
                     value={action.value}

frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx

@@ -9,11 +9,11 @@ type Props = {
 
 export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props) => (
   <div>
-    <div className="border-mineshaft-600 mb-2 flex items-center gap-2 border-b pb-1">
+    <div className="mb-2 flex items-center gap-2 border-b border-mineshaft-600 pb-1">
       <div className="font-medium">Last Login</div>
     </div>
     <div className="mb-2 flex items-center gap-2 text-sm">
-      <div className="bg-mineshaft-700 flex items-center justify-center rounded-sm p-3">
+      <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
         <FontAwesomeIcon icon={faShield} className="h-4 w-4" />
       </div>
       <div className="flex flex-col">
@@ -22,7 +22,7 @@ export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props)
       </div>
     </div>
     <div className="flex items-center gap-2 text-sm">
-      <div className="bg-mineshaft-700 flex items-center justify-center rounded-sm p-3">
+      <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
         <FontAwesomeIcon icon={faClock} className="h-4 w-4" />
       </div>
       <div className="flex flex-col">

frontend/src/components/permissions/AccessTree/AccessTree.tsx

@@ -107,20 +107,20 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
         "mt-4 w-full",
         viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
         viewMode === ViewMode.Undocked &&
-          "min-w-lg fixed bottom-4 left-20 z-50 h-[40%] w-[38%] lg:w-[34%]"
+          "fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-lg lg:w-[34%]"
       )}
     >
       <div
         className={twMerge(
-          "border-mineshaft-600 bg-mineshaft-900 mb-4 h-full w-full rounded-lg border transition-transform duration-500",
+          "mb-4 h-full w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 transition-transform duration-500",
           viewMode === ViewMode.Docked ? "relative p-4" : "relative p-0"
         )}
       >
         {viewMode === ViewMode.Docked && (
-          <div className="border-mineshaft-400 mb-4 flex items-start justify-between border-b pb-4">
+          <div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
             <div>
-              <h3 className="text-mineshaft-100 text-lg font-medium">Access Tree</h3>
+              <h3 className="text-lg font-medium text-mineshaft-100">Access Tree</h3>
-              <p className="text-mineshaft-400 text-sm leading-3">
+              <p className="text-sm leading-3 text-mineshaft-400">
                 Visual access policies for the configured role.
               </p>
             </div>
@@ -129,7 +129,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                 variant="outline_bg"
                 colorSchema="secondary"
                 type="submit"
-                className="bg-mineshaft-700 h-10 rounded-r-none"
+                className="h-10 rounded-r-none bg-mineshaft-700"
                 leftIcon={<FontAwesomeIcon icon={faWindowRestore} />}
                 onClick={handleToggleView}
               >
@@ -139,7 +139,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                 variant="outline_bg"
                 colorSchema="secondary"
                 type="submit"
-                className="bg-mineshaft-600 h-10 rounded-l-none"
+                className="h-10 rounded-l-none bg-mineshaft-600"
                 leftIcon={<FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />}
                 onClick={handleToggleModalView}
               >
@@ -156,7 +156,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
         >
           <div className="h-full w-full">
             <ReactFlow
-              className="border-mineshaft rounded-md border"
+              className="rounded-md border border-mineshaft"
               nodes={nodes}
               edges={edges}
               edgeTypes={EdgeTypes}
@@ -191,7 +191,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
                       <SelectItem
                         key={env.slug}
                         value={env.slug}
-                        className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
+                        className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
                       >
                         <div className="ml-3 truncate font-medium">{env.name}</div>
                       </SelectItem>

frontend/src/components/permissions/AccessTree/components/AccessTreeErrorBoundary.tsx

@@ -39,12 +39,12 @@ const ErrorDisplay = ({
 
   return (
     <div className="flex h-full w-full flex-col gap-2">
-      <div className="text-mineshaft-100 flex items-center gap-2">
+      <div className="flex items-center gap-2 text-mineshaft-100">
         <FontAwesomeIcon icon={faExclamationTriangle} className="text-red" />
         <p>
           Error displaying access tree. Please contact{" "}
           <a
-            className="text-mineshaft-200 decoration-primary-500 hover:text-mineshaft-100 inline cursor-pointer underline underline-offset-4 duration-200"
+            className="inline cursor-pointer text-mineshaft-200 underline decoration-primary-500 underline-offset-4 duration-200 hover:text-mineshaft-100"
             target="_blank"
             rel="noopener noreferrer"
             href="mailto:support@infisical.com"
@@ -55,13 +55,13 @@ const ErrorDisplay = ({
         </p>
       </div>
       <div className="relative flex flex-1 flex-col overflow-hidden">
-        <pre className="thin-scrollbar bg-mineshaft-700 text-mineshaft-100 w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded-sm p-2 text-xs">
+        <pre className="thin-scrollbar w-full flex-1 overflow-y-auto rounded-sm bg-mineshaft-700 p-2 text-xs whitespace-pre-wrap text-mineshaft-100">
           {display}
         </pre>
         <IconButton
           variant="plain"
           colorSchema="secondary"
-          className="absolute right-4 top-2"
+          className="absolute top-2 right-4"
           ariaLabel="Copy secret value"
           onClick={copyToClipboard}
         >

frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx

@@ -51,7 +51,7 @@ export const PermissionSimulation = ({
           onClick={handlePermissionSimulation}
           rightIcon={
             <FontAwesomeIcon
-              className="text-bunker-300 hover:text-primary pl-1 text-sm hover:opacity-80"
+              className="pl-1 text-sm text-bunker-300 hover:text-primary hover:opacity-80"
               icon={faChevronDown}
             />
           }
@@ -65,9 +65,9 @@ export const PermissionSimulation = ({
     <Panel
       onClick={handlePermissionSimulation}
       position="top-left"
-      className={`group flex flex-col gap-2 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`}
+      className={`group flex flex-col gap-2 pr-4 pb-4 ${expand ? "" : "cursor-pointer"}`}
     >
-      <div className="border-mineshaft-600 bg-mineshaft-800 font-inter flex w-[20rem] flex-col gap-1.5 rounded-sm border p-2 text-gray-200">
+      <div className="flex w-[20rem] flex-col gap-1.5 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
         <div>
           <div className="flex w-full items-center justify-between">
             <span className="text-sm">Permission Simulation</span>
@@ -83,7 +83,7 @@ export const PermissionSimulation = ({
             </IconButton>
           </div>
           {expand && (
-            <p className="text-mineshaft-400 mb-2 mt-1 text-xs">
+            <p className="mt-1 mb-2 text-xs text-mineshaft-400">
               Evaluate conditional policies to see what permissions will be granted given a secret
               name or tags
             </p>
@@ -96,7 +96,7 @@ export const PermissionSimulation = ({
               <Select
                 value={subject}
                 onValueChange={(value) => setSubject(value as ProjectPermissionSub)}
-                className="border-mineshaft-500 w-full border capitalize"
+                className="w-full border border-mineshaft-500 capitalize"
                 position="popper"
                 dropdownContainerClassName="max-w-none"
               >
@@ -119,7 +119,7 @@ export const PermissionSimulation = ({
               <Select
                 value={environment}
                 onValueChange={setEnvironment}
-                className="border-mineshaft-500 w-full border capitalize"
+                className="w-full border border-mineshaft-500 capitalize"
                 position="popper"
                 dropdownContainerClassName="max-w-76"
               >

frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx

@@ -32,17 +32,17 @@ export const FolderNode = ({
     <>
       <Handle
         type="target"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Top}
       />
       <div
-        className={`flex ${hasMinimalAccess ? "" : "opacity-40"} border-mineshaft bg-mineshaft-800 font-inter h-full w-full flex-col items-center justify-center rounded-md border px-2 py-3 shadow-lg transition-opacity duration-500`}
+        className={`flex ${hasMinimalAccess ? "" : "opacity-40"} h-full w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500`}
       >
-        <div className="text-mineshaft-100 flex items-center space-x-2 text-xs">
+        <div className="flex items-center space-x-2 text-xs text-mineshaft-100">
-          <FontAwesomeIcon className="text-yellow mb-0.5 font-medium" icon={faFolder} />
+          <FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
           <span>{parentId ? `/${name}` : "/"}</span>
         </div>
-        <div className="bg-mineshaft-600 mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm px-2 py-1 text-xs">
+        <div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm bg-mineshaft-600 px-2 py-1 text-xs">
           {Object.entries(actions).map(([action, access]) => {
             const { className, icon } = AccessMap[access];
 
@@ -70,7 +70,7 @@ export const FolderNode = ({
       </div>
       <Handle
         type="source"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Bottom}
       />
     </>

frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx

@@ -68,7 +68,7 @@ export const AccessTreeSecretPathInput = ({
       >
         {isExpanded ? (
           <div
-            className="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
+            className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
             onClick={toggleSearch}
             role="button"
             tabIndex={0}
@@ -83,7 +83,7 @@ export const AccessTreeSecretPathInput = ({
         ) : (
           <Tooltip position="bottom" content="Search Paths">
             <div
-              className="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
+              className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
               onClick={toggleSearch}
               role="button"
               tabIndex={0}

frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx

@@ -26,11 +26,11 @@ type ConditionDisplayProps = {
 const ConditionDisplay = ({ _key: key, value, operator }: ConditionDisplayProps) => {
   return (
     <li>
-      <span className="text-mineshaft-100 font-medium capitalize">{camelCaseToSpaces(key)}</span>{" "}
+      <span className="font-medium text-mineshaft-100 capitalize">{camelCaseToSpaces(key)}</span>{" "}
       <span className="text-mineshaft-200">
         {formatedConditionsOperatorNames[operator as PermissionConditionOperators]}
       </span>{" "}
-      <span className="bg-mineshaft-600 rounded-sm p-0.5 font-mono">
+      <span className="rounded-sm bg-mineshaft-600 p-0.5 font-mono">
         {typeof value === "string" ? value : value.join(", ")}
       </span>
       .
@@ -45,13 +45,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
     case PermissionAccess.Full:
       component = (
         <>
-          <div className="text-green flex items-center gap-1.5 capitalize">
+          <div className="flex items-center gap-1.5 text-green capitalize">
             <FontAwesomeIcon icon={faCheckCircle} size="xs" />
             <span>Full {formatActionName(action)} Permissions</span>
           </div>
           <p className="text-mineshaft-200">
             Policy grants unconditional{" "}
-            <span className="text-mineshaft-100 font-medium">
+            <span className="font-medium text-mineshaft-100">
               {formatActionName(action).toLowerCase()}
             </span>{" "}
             permission for {subject.replaceAll("-", " ")} in this folder.
@@ -62,13 +62,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
     case PermissionAccess.Partial:
       component = (
         <>
-          <div className="text-yellow flex items-center gap-1.5 capitalize">
+          <div className="flex items-center gap-1.5 text-yellow capitalize">
             <FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
             <span>Conditional {formatActionName(action)} Permissions</span>
           </div>
-          <p className="text-mineshaft-200 mb-1">
+          <p className="mb-1 text-mineshaft-200">
             Policy conditionally allows{" "}
-            <span className="text-mineshaft-100 font-medium">
+            <span className="font-medium text-mineshaft-100">
               {formatActionName(action).toLowerCase()}
             </span>{" "}
             permission for {subject.replaceAll("-", " ")} in this folder.
@@ -137,13 +137,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
     case PermissionAccess.None:
       component = (
         <>
-          <div className="text-red flex items-center gap-1.5 capitalize">
+          <div className="flex items-center gap-1.5 text-red capitalize">
             <FontAwesomeIcon icon={faCircleXmark} size="xs" />
             <span>No {formatActionName(action)} Permissions</span>
           </div>
           <p className="text-mineshaft-200">
             Policy always forbids{" "}
-            <span className="text-mineshaft-100 font-medium">
+            <span className="font-medium text-mineshaft-100">
               {formatActionName(action).toLowerCase()}
             </span>{" "}
             permission for {subject.replaceAll("-", " ")} in this folder.
@@ -157,7 +157,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
 
   return (
     <NodeToolbar
-      className="border-mineshaft-600 bg-mineshaft-800 text-bunker-100 rounded-md border px-4 py-2 text-sm font-light"
+      className="rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-light text-bunker-100"
       isVisible
       position={Position.Bottom}
     >

frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx

@@ -11,7 +11,7 @@ import { createRoleNode } from "../utils";
 const getSubjectIcon = (subject: ProjectPermissionSub) => {
   switch (subject) {
     case ProjectPermissionSub.Secrets:
-      return <FontAwesomeIcon icon={faKey} className="text-bunker-300 h-4 w-4" />;
+      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
     case ProjectPermissionSub.SecretFolders:
       return <FontAwesomeIcon icon={faFolder} className="h-4 w-4 text-yellow-700" />;
     case ProjectPermissionSub.DynamicSecrets:
@@ -19,7 +19,7 @@ const getSubjectIcon = (subject: ProjectPermissionSub) => {
     case ProjectPermissionSub.SecretImports:
       return <FontAwesomeIcon icon={faFileImport} className="h-4 w-4 text-green-700" />;
     default:
-      return <FontAwesomeIcon icon={faKey} className="text-bunker-300 h-4 w-4" />;
+      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
   }
 };
 
@@ -40,18 +40,18 @@ export const RoleNode = ({
     <>
       <Handle
         type="target"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Top}
       />
-      <div className="border-mineshaft bg-mineshaft-800 font-inter flex h-14 w-full flex-col items-center justify-center rounded-md border px-2 py-3 shadow-lg transition-opacity duration-500">
+      <div className="flex h-14 w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500">
-        <div className="text-mineshaft-100 flex items-center space-x-2">
+        <div className="flex items-center space-x-2 text-mineshaft-100">
           {getSubjectIcon(subject)}
           <span className="text-sm">{formatLabel(subject)} Access</span>
         </div>
       </div>
       <Handle
         type="source"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Bottom}
       />
     </>

frontend/src/components/permissions/AccessTree/nodes/ShowMoreButtonNode.tsx

@@ -12,10 +12,10 @@ export const ShowMoreButtonNode = ({
   const tooltipText = `${remaining} ${remaining === 1 ? "folder is" : "folders are"} hidden. Click to show ${remaining > 10 ? "10 more" : ""}`;
 
   return (
-    <div className="border-mineshaft-600 bg-mineshaft-800 flex h-full w-full items-center justify-center rounded-md border p-2">
+    <div className="flex h-full w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-2">
       <Handle
         type="target"
-        className="cursor-pointer! pointer-events-none opacity-0"
+        className="pointer-events-none cursor-pointer! opacity-0"
         position={Position.Top}
       />
 

frontend/src/components/pki-syncs/PkiSyncImportCertificatesModal.tsx

@@ -51,11 +51,11 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
         handleTriggerImportCertificates();
       }}
     >
-      <p className="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         Are you sure you want to import certificates from this {destinationName} destination into
         Infisical?
       </p>
-      <p className="text-bunker-300 mb-6 text-xs">
+      <p className="mb-6 text-xs text-bunker-300">
         This operation will retrieve certificates from {destinationName} and make them available in
         your PKI subscriber. Only certificates that are not already imported will be processed.
       </p>

frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx

@@ -69,16 +69,16 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
       label = "Failed to Import Certificates";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <div className="text-red mb-2 flex self-start">
+              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Import Certificates" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>

frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx

@@ -17,10 +17,10 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
       <img
         alt={`${destinationDetails.name} logo`}
         src={`/images/integrations/${destinationDetails.image}`}
-        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {destinationDetails.name} Certificate Sync
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured
             ? `Edit ${destinationDetails.name} Certificate Sync`
             : `Sync certificates to ${destinationDetails.name}`}

frontend/src/components/pki-syncs/PkiSyncRemoveCertificatesModal.tsx

@@ -51,7 +51,7 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
         handleTriggerRemoveCertificates();
       }}
     >
-      <p className="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         Are you sure you want to remove certificates synced by Infisical from this {destinationName}{" "}
         destination?
       </p>

frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx

@@ -69,16 +69,16 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
       label = "Failed to Remove Certificates";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <div className="text-red mb-2 flex self-start">
+              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Remove Certificates" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>

frontend/src/components/pki-syncs/PkiSyncSelect.tsx

@@ -46,7 +46,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
@@ -60,7 +60,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
         placeholder="Search options..."
         className="bg-mineshaft-800 placeholder:text-mineshaft-400"
       />
-      <div className="h-118 grid grid-cols-4 content-start gap-2">
+      <div className="grid h-118 grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
           const { image, name } = PKI_SYNC_MAP[destination];
           return (
@@ -72,7 +72,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                   ? handlePopUpOpen("upgradePlan")
                   : onSelect(destination)
               }
-              className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border p-4 duration-200"
+              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
             >
               <img
                 src={`/images/integrations/${image}`}
@@ -109,7 +109,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -118,7 +118,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -129,7 +129,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
                 <span className="text-xs">
                   Don&#39;t see the third-party service you&#39;re looking for?
                 </span>

frontend/src/components/pki-syncs/PkiSyncTable.tsx

@@ -65,7 +65,7 @@ export const PkiSyncTable = ({ pkiSyncs, onEdit, onDelete, onTrigger }: Props) =
           {pkiSyncs.map((pkiSync) => (
             <Tr
               key={pkiSync.id}
-              className="hover:bg-mineshaft-700 cursor-pointer"
+              className="cursor-pointer hover:bg-mineshaft-700"
               onClick={() => onEdit(pkiSync)}
             >
               <Td>{pkiSync.name}</Td>

frontend/src/components/pki-syncs/forms/AwsCertificateManagerPkiSyncFields.tsx

@@ -32,7 +32,7 @@ export const AwsCertificateManagerPkiSyncFields = () => {
             <Select
               value={field.value}
               onValueChange={field.onChange}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               placeholder="Select an AWS region"
             >

frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx

@@ -124,12 +124,12 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
   if (showConfirmation)
     return (
       <>
-        <div className="rounded-xs border-mineshaft-600 border-l-primary bg-mineshaft-700/80 flex flex-col border border-l-2 px-4 py-3">
+        <div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
           <div className="mb-1 flex items-center text-sm">
-            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
             Certificate Sync Behavior
           </div>
-          <p className="text-bunker-200 mt-1 text-sm">
+          <p className="mt-1 text-sm text-bunker-200">
             Only certificates managed by Infisical will be affected during sync operations.
             Certificates not created or managed by Infisical will remain untouched, and changes made
             to Infisical-managed certificates directly in the destination service may be overwritten
@@ -162,7 +162,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -171,9 +171,9 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "text-bunker-300"
                   }`
                 }
@@ -207,7 +207,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
                       errorText={error?.message}
                     >
                       <Switch
-                        className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+                        className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                         id="auto-sync-enabled"
                         thumbClassName="bg-mineshaft-800"
                         onCheckedChange={onChange}

frontend/src/components/pki-syncs/forms/PkiSyncConnectionField.tsx

@@ -40,7 +40,7 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Specify the {appName} Connection to use to connect to {connectionName} and configure
         destination parameters.
       </p>
@@ -69,7 +69,7 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
         name="connection"
       />
       {availableConnections?.length === 0 && (
-        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           {canCreateConnection ? (
             <>

frontend/src/components/pki-syncs/forms/PkiSyncDetailsFields.tsx

@@ -9,7 +9,7 @@ export const PkiSyncDetailsFields = () => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Provide a name and description for this Certificate Sync.
       </p>
       <Controller

frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx

@@ -18,7 +18,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">Configure how certificates should be synced.</p>
+      <p className="mb-4 text-sm text-bunker-300">Configure how certificates should be synced.</p>
       {/*
       TODO: Re-enable this when we have a way to import certificates
       <Controller
@@ -64,7 +64,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
         render={({ field: { value, onChange }, fieldState: { error } }) => (
           <FormControl isError={Boolean(error)} errorText={error?.message}>
             <Switch
-              className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+              className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
               id="can-remove-certificates"
               thumbClassName="bg-mineshaft-800"
               onCheckedChange={onChange}
@@ -121,7 +121,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
                     <span className="text-yellow">
                       Character restrictions for {syncOption.name}:
                     </span>
-                    <div className="text-bunker-300 text-xs">
+                    <div className="text-xs text-bunker-300">
                       The following characters are not allowed:{" "}
                       {syncOption.forbiddenCharacters.split("").join(" ")}
                     </div>

frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx

@@ -34,8 +34,8 @@ export const PkiSyncReviewFields = () => {
   return (
     <div className="mb-4 flex flex-col gap-6">
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Source</span>
+          <span className="text-sm text-mineshaft-300">Source</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="PKI Subscriber">
@@ -44,8 +44,8 @@ export const PkiSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Destination</span>
+          <span className="text-sm text-mineshaft-300">Destination</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Connection">{connection?.name}</GenericFieldLabel>
@@ -58,8 +58,8 @@ export const PkiSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Sync Options</span>
+          <span className="text-sm text-mineshaft-300">Sync Options</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Auto-Sync">
@@ -86,8 +86,8 @@ export const PkiSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+          <span className="text-sm text-mineshaft-300">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>

frontend/src/components/pki-syncs/forms/PkiSyncSourceFields.tsx

@@ -16,7 +16,7 @@ export const PkiSyncSourceFields = () => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Specify the PKI subscriber where you would like to sync certificates from.
       </p>
 

frontend/src/components/project/ProjectOverviewChangeSection.tsx

@@ -83,9 +83,9 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
   };
 
   return (
-    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="justify-betweens flex">
-        <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Project Overview</h2>
+        <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
         <div className="space-x-2">
           <Button
             variant="outline_bg"
@@ -200,7 +200,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
                           placeholder="Project description"
                           {...field}
                           rows={3}
-                          className="thin-scrollbar resize-none! bg-mineshaft-800 max-w-md"
+                          className="thin-scrollbar max-w-md resize-none! bg-mineshaft-800"
                           isDisabled={!isAllowed}
                         />
                       </FormControl>

frontend/src/components/projects/NewProjectModal.tsx

@@ -202,7 +202,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                   <div
                     key={el.value}
                     className={twMerge(
-                      "border-mineshaft-600 hover:border-primary-400 hover:bg-mineshaft-600 flex cursor-pointer flex-col items-center gap-2 rounded-sm border px-2 py-4 opacity-75 transition-all",
+                      "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)}
@@ -238,7 +238,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                 placeholder="Project description"
                 {...field}
                 rows={3}
-                className="thin-scrollbar resize-none! bg-mineshaft-900 w-full"
+                className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
               />
             </FormControl>
           )}
@@ -311,7 +311,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                       onValueChange={(e) => {
                         onChange(e);
                       }}
-                      className="bg-mineshaft-600 mb-12 w-full"
+                      className="mb-12 w-full bg-mineshaft-600"
                       position="popper"
                       dropdownContainerClassName="max-w-none -top-1"
                       side="top"
@@ -333,7 +333,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        <div className="absolute bottom-0 right-0 mb-6 mr-6 flex items-start justify-end">
+        <div className="absolute right-0 bottom-0 mr-6 mb-6 flex items-start justify-end">
           <ModalClose>
             <Button colorSchema="secondary" variant="plain" className="py-2">
               Cancel

frontend/src/components/roles/RoleOption.tsx

@@ -13,15 +13,15 @@ export const RoleOption = ({
         <div>
           <p className="truncate">{children}</p>
           {props.data.description ? (
-            <p className="text-mineshaft-400 truncate text-xs leading-4">
+            <p className="truncate text-xs leading-4 text-mineshaft-400">
               {props.data.description}
             </p>
           ) : (
-            <p className="text-mineshaft-400/50 text-xs leading-4">No Description</p>
+            <p className="text-xs leading-4 text-mineshaft-400/50">No Description</p>
           )}
         </div>
         {isSelected && (
-          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
         )}
       </div>
     </components.Option>

frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx

@@ -115,7 +115,7 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
           selectedRotation ? (
             <SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
           ) : (
-            <div className="text-mineshaft-300 flex items-center">
+            <div className="flex items-center text-mineshaft-300">
               Add Secret Rotation
               <a
                 target="_blank"
@@ -123,8 +123,8 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
                 className="mb-1 ml-1"
                 rel="noopener noreferrer"
               >
-                <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
                   <span>Docs</span>
                   <FontAwesomeIcon
                     icon={faArrowUpRightFromSquare}

frontend/src/components/secret-rotations-v2/DeleteSecretRotationV2Modal.tsx

@@ -72,7 +72,7 @@ export const DeleteSecretRotationV2Modal = ({
     >
       <Switch
         containerClassName="mt-4"
-        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
         thumbClassName="bg-mineshaft-800"
         isChecked={revokeGeneratedCredentials}
         onCheckedChange={setRevokeGeneratedCredentials}
@@ -80,13 +80,13 @@ export const DeleteSecretRotationV2Modal = ({
       >
         Revoke Credentials
       </Switch>
-      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
         Generated credentials will {revokeGeneratedCredentials ? "" : "not"} be revoked on deletion
         {revokeGeneratedCredentials ? "" : " and remain active"}.
       </p>
       <Switch
         containerClassName="mt-4"
-        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
         thumbClassName="bg-mineshaft-800"
         isChecked={deleteSecrets}
         onCheckedChange={setDeleteSecrets}
@@ -94,7 +94,7 @@ export const DeleteSecretRotationV2Modal = ({
       >
         Delete Secrets
       </Switch>
-      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
         Rotation secrets will {deleteSecrets ? "" : "not"} be removed from your project on deletion.
       </p>
     </DeleteActionModal>

frontend/src/components/secret-rotations-v2/RotateSecretRotationV2Modal.tsx

@@ -48,7 +48,7 @@ const Content = ({ secretRotation, onComplete }: ContentProps) => {
 
   return (
     <div>
-      <p className="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         Are you sure you want to rotate the secrets for this {rotationType} Rotation?
       </p>
       <div className="mt-8 flex w-full items-center justify-between gap-2">

frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx

@@ -17,10 +17,10 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
       <img
         alt={`${destinationDetails.name} logo`}
         src={`/images/integrations/${destinationDetails.image}`}
-        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {destinationDetails.name} Rotation
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured
             ? `Edit ${destinationDetails.name} Rotation`
             : `Rotate ${destinationDetails.name}`}

frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx

@@ -16,7 +16,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
@@ -31,7 +31,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
             type="button"
             key={type}
             onClick={() => onSelect(type)}
-            className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
           >
             <img
               src={`/images/integrations/${image}`}
@@ -56,7 +56,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://infisical.com/slack"
                 rel="noopener noreferrer"
               >
@@ -65,7 +65,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
               or{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://github.com/Infisical/infisical/discussions"
                 rel="noopener noreferrer"
               >
@@ -76,7 +76,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
           </>
         }
       >
-        <div className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-900/50 group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed p-4">
+        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
           <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
           <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
             Coming Soon

frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx

@@ -31,18 +31,18 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
         position="left"
         className="max-w-sm select-text"
         content={
-          <div className="flex flex-col gap-2 whitespace-normal py-1">
+          <div className="flex flex-col gap-2 py-1 whitespace-normal">
             <div>
-              <div className="text-red mb-2 flex self-start">
+              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">Failure Reason</div>
               </div>
-              <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                 {errorMessage}
               </div>
             </div>
             {nextRotationAt && (
-              <span className="text-mineshaft-300 text-xs">
+              <span className="text-xs text-mineshaft-300">
                 Next rotation attempt on {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
                 {format(nextRotationAt, "h:mm aa")}.
               </span>
@@ -67,7 +67,7 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
     return (
       <Badge
         className={twMerge(
-          "bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap",
+          "flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
           className
         )}
       >

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -48,7 +48,7 @@ const Content = ({ secretRotation }: ContentProps) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="text-mineshaft-400 mt-4 text-sm">Loading generated credentials...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading generated credentials...</p>
       </div>
     );
   }
@@ -56,7 +56,7 @@ const Content = ({ secretRotation }: ContentProps) => {
   if (!generatedCredentialsResponse) {
     return (
       <div className="flex w-full justify-center">
-        <p className="text-red text-sm">No generated credentials found for this rotation.</p>
+        <p className="text-sm text-red">No generated credentials found for this rotation.</p>
       </div>
     );
   }
@@ -126,14 +126,14 @@ const Content = ({ secretRotation }: ContentProps) => {
       {Component}
       {!IS_ROTATION_DUAL_CREDENTIALS[type] && (
         <NoticeBannerV2 title={`${appName} Retired Credentials Behavior`}>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             Due to {SECRET_ROTATION_MAP[type].name} Rotations utilizing a single credential set,
             retired credentials will not be able to authenticate with {appName} during their{" "}
             <a
               target="_blank"
               href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
               rel="noopener noreferrer"
-              className="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
+              className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
             >
               inactive period
             </a>
@@ -142,7 +142,7 @@ const Content = ({ secretRotation }: ContentProps) => {
         </NoticeBannerV2>
       )}
       {nextRotationAt && (
-        <div className="text-mineshaft-200 flex items-center gap-x-1.5 text-sm">
+        <div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
           <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
           <span>
             Next rotation occurs on: {format(nextRotationAt, "MM/dd/yyyy")} at{" "}

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay.tsx

@@ -21,7 +21,7 @@ export const CredentialDisplay = ({ children, label, isSensitive }: Props) => {
   return (
     <GenericFieldLabel label={label}>
       {children ? (
-        <div className="text-mineshaft-100 flex w-full items-center gap-1">
+        <div className="flex w-full items-center gap-1 text-mineshaft-100">
           {showCredential ? children : "****************************"}
           <Tooltip content={`Copy ${label}`}>
             <IconButton

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx

@@ -14,31 +14,31 @@ export const ViewRotationGeneratedCredentialsDisplay = ({
   return (
     <>
       <div className="flex flex-col gap-2">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-100 text-sm">
+          <span className="text-sm text-mineshaft-100">
-            <FontAwesomeIcon icon={faCheck} className="text-green mr-1.5" />
+            <FontAwesomeIcon icon={faCheck} className="mr-1.5 text-green" />
             Current Credentials
           </span>
         </div>
-        <p className="text-mineshaft-300 text-sm">
+        <p className="text-sm text-mineshaft-300">
           The active credential set currently mapped to the rotation secrets.
         </p>
-        <div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border p-2">
+        <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
           {activeCredentials}
         </div>
       </div>
       {inactiveCredentials && (
         <div className="flex flex-col gap-2">
-          <div className="border-mineshaft-600 w-full border-b">
+          <div className="w-full border-b border-mineshaft-600">
-            <span className="text-mineshaft-100 text-sm">
+            <span className="text-sm text-mineshaft-100">
-              <FontAwesomeIcon icon={faClockRotateLeft} className="text-yellow mr-1.5" />
+              <FontAwesomeIcon icon={faClockRotateLeft} className="mr-1.5 text-yellow" />
               Retired Credentials
             </span>
           </div>
-          <p className="text-mineshaft-300 text-sm">
+          <p className="text-sm text-mineshaft-300">
             The retired credential set that will be revoked during the next rotation cycle.
           </p>
-          <div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border p-2">
+          <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
             {inactiveCredentials}
           </div>
         </div>

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx

@@ -26,7 +26,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Configure the connection rotation strategy for this Secret Rotation.
       </p>
       {!isUpdate && environments && (
@@ -90,7 +90,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
                     });
                   }
                 }}
-                className="bg-mineshaft-700 scheme-dark text-white"
+                className="bg-mineshaft-700 text-white scheme-dark"
               />
             </FormControl>
           );
@@ -113,7 +113,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
               errorText={error?.message}
             >
               <Switch
-                className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                 id="auto-rotation-enabled"
                 thumbClassName="bg-mineshaft-800"
                 onCheckedChange={onChange}
@@ -126,7 +126,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
         }}
       />
       {!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && (
-        <div className="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
+        <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
           <FontAwesomeIcon icon={faWarning} className="mr-1" /> Due to{" "}
           {SECRET_ROTATION_MAP[type].name} Rotations rotating a single credential set, auto-rotation
           may result in service interruptions. If you need to ensure service continuity, we
@@ -135,7 +135,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
             href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
             target="_blank"
             rel="noopener noreferrer"
-            className="decoration-yellow hover:text-mineshaft-200 underline underline-offset-2"
+            className="underline decoration-yellow underline-offset-2 hover:text-mineshaft-200"
           >
             Read more
           </a>

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.tsx

@@ -105,7 +105,7 @@ export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }
         name="connection"
       />
       {!isUpdate && !isPending && !availableConnections?.length && !canCreateConnection && (
-        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           You do not have access to any {appName} Connections. Contact an admin to create one.
         </p>

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx

@@ -9,7 +9,7 @@ export const SecretRotationV2DetailsFields = () => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Provide a name and description for this Secret Rotation.
       </p>
       <Controller

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx

@@ -183,7 +183,7 @@ export const SecretRotationV2Form = ({
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -192,9 +192,9 @@ export const SecretRotationV2Form = ({
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "text-bunker-300"
                   }`
                 }

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx

@@ -27,7 +27,7 @@ export const LdapPasswordRotationParametersFields = () => {
             tooltipText={
               <>
                 <span>Determines how the rotation will be performed:</span>
-                <ul className="ml-4 mt-2 flex list-disc flex-col gap-2">
+                <ul className="mt-2 ml-4 flex list-disc flex-col gap-2">
                   <li>
                     <span className="font-medium">Connection Principal</span> - The Connection
                     principal will rotate the target principal&#39;s password.
@@ -66,7 +66,7 @@ export const LdapPasswordRotationParametersFields = () => {
                 );
                 onChange(val);
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               dropdownContainerClassName="max-w-none"
             >
@@ -127,10 +127,10 @@ export const LdapPasswordRotationParametersFields = () => {
         )}
       </div>
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Password Requirements</span>
+          <span className="text-sm text-mineshaft-300">Password Requirements</span>
         </div>
-        <div className="border-mineshaft-600 bg-mineshaft-700 grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border px-3 pt-3">
+        <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
           <Controller
             control={control}
             name="parameters.passwordRequirements.length"

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/RedisCredentialsRotationParametersFields.tsx

@@ -31,7 +31,7 @@ export const RedisCredentialsRotationParametersFields = () => {
                   </p>
                   <p>
                     The default value is{" "}
-                    <code className="bg-mineshaft-700 text-bunker-300 rounded-sm px-1 py-0.5 font-mono font-medium">
+                    <code className="rounded-sm bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300">
                       ~* +@all
                     </code>
                     . You can modify it to suit your needs.
@@ -39,7 +39,7 @@ export const RedisCredentialsRotationParametersFields = () => {
                   <p>
                     For more information, please refer to the{" "}
                     <a
-                      className="text-primary-500 hover:text-primary-600 font-medium underline"
+                      className="font-medium text-primary-500 underline hover:text-primary-600"
                       href="https://redis.io/docs/latest/operate/oss_and_stack/management/security/acl/"
                       target="_blank"
                       rel="noopener noreferrer"
@@ -61,10 +61,10 @@ export const RedisCredentialsRotationParametersFields = () => {
       </div>
 
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Password Requirements</span>
+          <span className="text-sm text-mineshaft-300">Password Requirements</span>
         </div>
-        <div className="border-mineshaft-600 bg-mineshaft-700 grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border px-3 pt-3">
+        <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
           <Controller
             control={control}
             name="parameters.passwordRequirements.length"

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx

@@ -33,7 +33,7 @@ export const SecretRotationV2ParametersFields = () => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Configure the required parameters for this Secret Rotation.
       </p>
       <Component />

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx

@@ -62,19 +62,19 @@ export const SqlCredentialsRotationParametersFields = () => {
         name="parameters.username2"
       />
       <NoticeBannerV2 title="Example Create User Statement">
-        <p className="text-mineshaft-300 mb-3 text-sm">
+        <p className="mb-3 text-sm text-mineshaft-300">
           Infisical requires two database users to be created for rotation.
         </p>
-        <p className="text-mineshaft-300 mb-3 text-sm">
+        <p className="mb-3 text-sm text-mineshaft-300">
           These users are intended to be solely managed by Infisical. Altering their login after
           rotation may cause unexpected failure.
         </p>
-        <p className="text-mineshaft-300 mb-3 text-sm">
+        <p className="mb-3 text-sm text-mineshaft-300">
           Below is an example statement for creating the required users. You may need to modify it
           to suit your needs.
         </p>
         <p className="mb-3 text-sm">
-          <pre className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 max-h-40 overflow-y-auto whitespace-pre-wrap rounded-sm border p-2">
+          <pre className="max-h-40 overflow-y-auto rounded-sm border border-mineshaft-700 bg-mineshaft-800 p-2 whitespace-pre-wrap text-mineshaft-300">
             {rotationOption!.template.createUserStatement}
           </pre>
         </p>

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx

@@ -46,8 +46,8 @@ export const SecretRotationV2ReviewFields = () => {
   return (
     <div className="mb-4 flex flex-col gap-6">
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Configuration</span>
+          <span className="text-sm text-mineshaft-300">Configuration</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>
@@ -63,8 +63,8 @@ export const SecretRotationV2ReviewFields = () => {
       </div>
       <Component />
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+          <span className="text-sm text-mineshaft-300">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SecretRotationReviewSection.tsx

@@ -8,8 +8,8 @@ type Props = {
 export const SecretRotationReviewSection = ({ label, children }: Props) => {
   return (
     <div className="flex flex-col gap-3">
-      <div className="border-mineshaft-600 w-full border-b">
+      <div className="w-full border-b border-mineshaft-600">
-        <span className="text-mineshaft-300 text-sm">{label}</span>
+        <span className="text-sm text-mineshaft-300">{label}</span>
       </div>
       <div className="flex flex-wrap gap-x-8 gap-y-2">{children}</div>
     </div>

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx

@@ -33,7 +33,7 @@ export const SecretRotationV2SecretsMappingFields = () => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Map the rotated credentials to secrets in your Infisical project.
       </p>
       <Component />

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx

@@ -32,13 +32,13 @@ export const SecretsMappingTable = ({ items }: Props) => {
             <tr key={name}>
               <td className="whitespace-nowrap">
                 <div className="mb-4 flex h-full items-start justify-center">
-                  <Badge className="border-mineshaft-600 bg-mineshaft-600 text-bunker-200 pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border">
+                  <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
                     <FontAwesomeIcon icon={faKey} />
                     <span>{name}</span>
                   </Badge>
                 </div>
               </td>
-              <td className="whitespace-nowrap pl-5 pr-5">
+              <td className="pr-5 pl-5 whitespace-nowrap">
                 <div className="mb-4 flex items-center justify-center">
                   <FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} />
                 </div>

frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx

@@ -108,7 +108,7 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
           selectedDataSource ? (
             <SecretScanningDataSourceModalHeader isConfigured={false} type={selectedDataSource} />
           ) : (
-            <div className="text-mineshaft-300 flex items-center">
+            <div className="flex items-center text-mineshaft-300">
               Add Data Source
               <a
                 target="_blank"
@@ -116,8 +116,8 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
                 className="mb-1 ml-1"
                 rel="noopener noreferrer"
               >
-                <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
                   <span>Docs</span>
                   <FontAwesomeIcon
                     icon={faArrowUpRightFromSquare}

frontend/src/components/secret-scanning/DeleteSecretScanningDataSourceModal.tsx

@@ -58,7 +58,7 @@ export const DeleteSecretScanningDataSourceModal = ({
       deleteKey={name}
       onDeleteApproved={handleDeleteDataSource}
     >
-      <p className="font-inter text-mineshaft-400 mt-1 text-sm">
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
         Findings associated with this data source will be preserved.
       </p>
     </DeleteActionModal>

frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx

@@ -17,10 +17,10 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
       <img
         alt={`${dataSourceDetails.name} logo`}
         src={`/images/integrations/${dataSourceDetails.image}`}
-        className="bg-bunker-500 h-12 rounded-md p-2"
+        className="h-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {dataSourceDetails.name} Data Source
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured ? "Edit" : "Connect a"} {dataSourceDetails.name} Data Source
         </p>
       </div>

frontend/src/components/secret-scanning/SecretScanningDataSourceSelect.tsx

@@ -19,7 +19,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
@@ -34,7 +34,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
             type="button"
             key={type}
             onClick={() => onSelect(type)}
-            className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
           >
             <img
               src={`/images/integrations/${image}`}
@@ -59,7 +59,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://infisical.com/slack"
                 rel="noopener noreferrer"
               >
@@ -68,7 +68,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
               or{" "}
               <a
                 target="_blank"
-                className="hover:text-mineshaft-300 underline"
+                className="underline hover:text-mineshaft-300"
                 href="https://github.com/Infisical/infisical/discussions"
                 rel="noopener noreferrer"
               >
@@ -79,7 +79,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
           </>
         }
       >
-        <div className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-900/50 group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed p-4">
+        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
           <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
           <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
             Coming Soon

frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx

@@ -34,17 +34,17 @@ export const SecretScanningScanStatusBadge = ({
         position="left"
         className="max-w-sm select-text"
         content={
-          <div className="flex flex-col gap-2 whitespace-normal py-1">
+          <div className="flex flex-col gap-2 py-1 whitespace-normal">
             <div>
-              <div className="text-red mb-2 flex self-start">
+              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">Failure Reason</div>
               </div>
-              <div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
                 {errorMessage}
               </div>
               {scannedAt && (
-                <div className="text-mineshaft-400 mt-1 text-xs">
+                <div className="mt-1 text-xs text-mineshaft-400">
                   Attempted {formatDistance(new Date(scannedAt), new Date(), { addSuffix: true })}
                 </div>
               )}

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/BitbucketDataSourceConfigFields.tsx

@@ -110,7 +110,7 @@ export const BitbucketDataSourceConfigFields = () => {
           onValueChange={(val) => {
             setValue("config.includeRepos", val === ScanMethod.AllRepositories ? ["*"] : []);
           }}
-          className="border-mineshaft-500 w-full border capitalize"
+          className="w-full border border-mineshaft-500 capitalize"
           position="popper"
           dropdownContainerClassName="max-w-none"
           isDisabled={!connectionId}

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitHubDataSourceConfigFields.tsx

@@ -61,7 +61,7 @@ export const GitHubDataSourceConfigFields = () => {
           onValueChange={(val) => {
             setValue("config.includeRepos", val === ScanMethod.AllRepositories ? ["*"] : []);
           }}
-          className="border-mineshaft-500 w-full border capitalize"
+          className="w-full border border-mineshaft-500 capitalize"
           position="popper"
           dropdownContainerClassName="max-w-none"
           isDisabled={!connectionId}

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitLabDataSourceConfigFields.tsx

@@ -85,13 +85,13 @@ export const GitLabDataSourceConfigFields = () => {
                 <ul className="flex list-disc flex-col gap-3 pl-4">
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="text-bunker-200 font-medium">Project</span>: Scan an
+                      <span className="font-medium text-bunker-200">Project</span>: Scan an
                       individual GitLab project.
                     </p>
                   </li>
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="text-bunker-200 font-medium">Group</span>: Scan one or more
+                      <span className="font-medium text-bunker-200">Group</span>: Scan one or more
                       projects belonging to a GitLab group.
                     </p>
                   </li>
@@ -105,7 +105,7 @@ export const GitLabDataSourceConfigFields = () => {
                 onChange(v);
                 clearAllFields();
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               isDisabled={isUpdate}
               dropdownContainerClassName="max-w-none"
@@ -207,7 +207,7 @@ export const GitLabDataSourceConfigFields = () => {
               onValueChange={(val) => {
                 setValue("config.includeProjects", val === ScanMethod.AllProjects ? ["*"] : []);
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               dropdownContainerClassName="max-w-none"
               isDisabled={!connectionId}

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/SecretScanningDataSourceConfigFields.tsx

@@ -25,7 +25,7 @@ export const SecretScanningDataSourceConfigFields = () => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">Connect and configure your Data Source.</p>
+      <p className="mb-4 text-sm text-bunker-300">Connect and configure your Data Source.</p>
       <Component />
       <Controller
         control={control}
@@ -42,7 +42,7 @@ export const SecretScanningDataSourceConfigFields = () => {
               errorText={error?.message}
             >
               <Switch
-                className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                 id="auto-scan-enabled"
                 thumbClassName="bg-mineshaft-800"
                 onCheckedChange={onChange}

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConnectionField.tsx

@@ -106,7 +106,7 @@ export const SecretScanningDataSourceConnectionField = ({
         name="connection"
       />
       {!isUpdate && !isPending && !availableConnections?.length && !canCreateConnection && (
-        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           You do not have access to any {connectionName} Connections. Contact an admin to create
           one.

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceDetailsFields.tsx

@@ -9,7 +9,7 @@ export const SecretScanningDataSourceDetailsFields = () => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Provide a name and description for this Data Source.
       </p>
       <Controller

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx

@@ -136,7 +136,7 @@ export const SecretScanningDataSourceForm = ({
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -145,9 +145,9 @@ export const SecretScanningDataSourceForm = ({
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "text-bunker-300"
                   }`
                 }

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/SecretScanningDataSourceReviewFields.tsx

@@ -25,8 +25,8 @@ export const SecretScanningDataSourceReviewFields = () => {
     <div className="mb-4 flex flex-col gap-6">
       <Component />
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
+        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+          <span className="text-sm text-mineshaft-300">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>

frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/shared/SecretScanningDataSourceConfigReviewSection.tsx

@@ -7,8 +7,8 @@ type Props = {
 export const SecretScanningDataSourceConfigReviewSection = ({ children }: Props) => {
   return (
     <div className="flex flex-col gap-3">
-      <div className="border-mineshaft-600 w-full border-b">
+      <div className="w-full border-b border-mineshaft-600">
-        <span className="text-mineshaft-300 text-sm">Configuration</span>
+        <span className="text-sm text-mineshaft-300">Configuration</span>
       </div>
       <div className="flex flex-wrap gap-x-8 gap-y-2">{children}</div>
     </div>

frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx

@@ -58,7 +58,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
     >
       <Switch
         containerClassName="mt-4"
-        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
         thumbClassName="bg-mineshaft-800"
         isChecked={removeSecrets}
         onCheckedChange={setRemoveSecrets}

frontend/src/components/secret-syncs/SecretSyncImportSecretsModal.tsx

@@ -77,7 +77,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
 
   return (
     <form onSubmit={handleSubmit(handleTriggerImportSecrets)}>
-      <p className="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         Are you sure you want to import secrets from this {destinationName} destination into
         Infiscal?
       </p>
@@ -100,7 +100,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -115,7 +115,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="border-mineshaft-500 w-full border"
+              className="w-full border border-mineshaft-500"
               position="popper"
               placeholder="Select an option..."
               dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx

@@ -69,16 +69,16 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
       label = "Failed to Import Secrets";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <div className="text-red mb-2 flex self-start">
+              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Import Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>

frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx

@@ -17,10 +17,10 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
       <img
         alt={`${destinationDetails.name} logo`}
         src={`/images/integrations/${destinationDetails.image}`}
-        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {destinationDetails.name} Sync
           <a
             target="_blank"
@@ -28,8 +28,8 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >
-            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured
             ? `Edit ${destinationDetails.name} Sync`
             : `Sync secrets to ${destinationDetails.name}`}

frontend/src/components/secret-syncs/SecretSyncRemoveSecretsModal.tsx

@@ -46,7 +46,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
 
   return (
     <>
-      <p className="text-mineshaft-200 mb-8 text-sm">
+      <p className="mb-8 text-sm text-mineshaft-200">
         Are you sure you want to remove synced secrets from this {destinationName} destination?
       </p>
       <div className="mt-8 flex w-full items-center justify-between gap-2">

frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx

@@ -69,16 +69,16 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
       label = "Failed to Remove Secrets";
       icon = faTriangleExclamation;
       tooltipContent = (
-        <div className="flex flex-col gap-2 whitespace-normal py-1">
+        <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
             <div>
-              <div className="text-red mb-2 flex self-start">
+              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Remove Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
+              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
             </div>
           )}
         </div>

frontend/src/components/secret-syncs/SecretSyncSelect.tsx

@@ -44,7 +44,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
         <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
       </div>
     );
   }
@@ -58,7 +58,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
         placeholder="Search options..."
         className="bg-mineshaft-800 placeholder:text-mineshaft-400"
       />
-      <div className="h-118 grid grid-cols-4 content-start gap-2">
+      <div className="grid h-118 grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
           const { image, name } = SECRET_SYNC_MAP[destination];
           return (
@@ -70,7 +70,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                   ? handlePopUpOpen("upgradePlan")
                   : onSelect(destination)
               }
-              className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border p-4 duration-200"
+              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
             >
               <img
                 src={`/images/integrations/${image}`}
@@ -107,7 +107,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -116,7 +116,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="hover:text-mineshaft-300 underline"
+                      className="underline hover:text-mineshaft-300"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -127,7 +127,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
                 <span className="text-xs">
                   Don&#39;t see the third-party service you&#39;re looking for?
                 </span>

frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx

@@ -138,12 +138,12 @@ export const CreateSecretSyncForm = ({
   if (showConfirmation)
     return (
       <>
-        <div className="rounded-xs border-mineshaft-600 border-l-primary bg-mineshaft-700/80 flex flex-col border border-l-2 px-4 py-3">
+        <div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
           <div className="mb-1 flex items-center text-sm">
-            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
             Secret Sync Behavior
           </div>
-          <p className="text-bunker-200 mt-1 text-sm">
+          <p className="mt-1 text-sm text-bunker-200">
             Secret Syncs are the source of truth for connected third-party services. Any secret,
             including associated data, not present or imported in Infisical before syncing will be
             overwritten, and changes made directly in the connected service outside of infisical may
@@ -176,7 +176,7 @@ export const CreateSecretSyncForm = ({
     <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
       <FormProvider {...formMethods}>
         <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
             {FORM_TABS.map((tab, index) => (
               <Tab
                 onClick={async (e) => {
@@ -185,9 +185,9 @@ export const CreateSecretSyncForm = ({
                   setSelectedTabIndex((prev) => (isEnabled ? index : prev));
                 }}
                 className={({ selected }) =>
-                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
                     selected
-                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
                       : "text-bunker-300"
                   }`
                 }
@@ -221,7 +221,7 @@ export const CreateSecretSyncForm = ({
                       errorText={error?.message}
                     >
                       <Switch
-                        className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+                        className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
                         id="auto-sync-enabled"
                         thumbClassName="bg-mineshaft-800"
                         onCheckedChange={onChange}

frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx

@@ -24,9 +24,9 @@ export const DuplicateDestinationConfirmationModal = ({
             destination. Proceeding may cause conflicts or overwrite existing data.
           </p>
           {duplicateProjectId && (
-            <p className="text-mineshaft-400 mt-2 text-xs">
+            <p className="mt-2 text-xs text-mineshaft-400">
               Duplicate found in project ID:{" "}
-              <code className="bg-mineshaft-600 text-mineshaft-200 rounded-sm px-1 py-0.5">
+              <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
                 {duplicateProjectId}
               </code>
             </p>

frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx

@@ -46,7 +46,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">
+      <p className="mb-4 text-sm text-bunker-300">
         Specify the {appName} Connection to use to connect to {connectionName} and configure
         destination parameters.
       </p>
@@ -89,7 +89,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
         name="connection"
       />
       {!isPending && !availableConnections?.length && !canCreateConnection && (
-        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
           You do not have access to any {appName} Connections. Contact an admin to create one.
         </p>

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx

@@ -38,15 +38,15 @@ export const AwsParameterStoreSyncFields = () => {
               <>
                 The path is required and will be prepended to the key schema. For example, if you
                 have a path of{" "}
-                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
+                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
                   /demo/path/
                 </code>{" "}
                 and a key schema of{" "}
-                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
+                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
                   INFISICAL_{"{{secretKey}}"}
                 </code>
                 , then the result will be{" "}
-                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
+                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
                   /demo/path/INFISICAL_{"{{secretKey}}"}
                 </code>
               </>

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsSecretsManagerSyncFields.tsx

@@ -40,13 +40,13 @@ export const AwsSecretsManagerSyncFields = () => {
                 <ul className="flex list-disc flex-col gap-3 pl-4">
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="text-bunker-200 font-medium">One-To-One</span>: Each
+                      <span className="font-medium text-bunker-200">One-To-One</span>: Each
                       Infisical secret will be mapped to a separate AWS Secrets Manager secret.
                     </p>
                   </li>
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="text-bunker-200 font-medium">Many-To-One</span>: All
+                      <span className="font-medium text-bunker-200">Many-To-One</span>: All
                       Infisical secrets will be mapped to a single AWS Secrets Manager secret.
                     </p>
                   </li>
@@ -63,7 +63,7 @@ export const AwsSecretsManagerSyncFields = () => {
                 onChange(val);
                 setValue("syncOptions.syncSecretMetadataAsTags", false);
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               placeholder="Select an option..."
               dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/CloudflarePagesSyncFields.tsx

@@ -76,7 +76,7 @@ export const CloudflarePagesSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               placeholder="Select an environment..."
               dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx

@@ -119,7 +119,7 @@ export const GcpSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -133,7 +133,7 @@ export const GcpSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               dropdownContainerClassName="max-w-none"
               isDisabled={!projectId}

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitHubSyncFields.tsx

@@ -79,7 +79,7 @@ export const GitHubSyncFields = () => {
               onValueChange={(val) => {
                 onChange(val);
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
@@ -131,7 +131,7 @@ export const GitHubSyncFields = () => {
                     onChange(val);
                     setValue("destinationConfig.selectedRepositoryIds", undefined);
                   }}
-                  className="border-mineshaft-500 w-full border capitalize"
+                  className="w-full border border-mineshaft-500 capitalize"
                   position="popper"
                   placeholder="Select visibility..."
                   dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GitLabSyncFields.tsx

@@ -41,7 +41,7 @@ const SecretProtectionOption = ({
 }) => {
   return (
     <Switch
-      className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
+      className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
       id={id}
       thumbClassName="bg-mineshaft-800"
       onCheckedChange={onChange}
@@ -108,7 +108,7 @@ export const GitLabSyncFields = () => {
                 setValue("destinationConfig.groupId", "");
                 setValue("destinationConfig.groupName", "");
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx

@@ -135,7 +135,7 @@ export const HumanitecSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -150,7 +150,7 @@ export const HumanitecSyncFields = () => {
                 onChange(val);
                 setValue("destinationConfig.env", "");
               }}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/RenderSyncFields.tsx

@@ -66,7 +66,7 @@ export const RenderSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -78,7 +78,7 @@ export const RenderSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="border-mineshaft-500 w-full border capitalize"
+              className="w-full border border-mineshaft-500 capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/TeamCitySyncFields.tsx

@@ -120,7 +120,7 @@ export const TeamCitySyncFields = () => {
         )}
       />
 
-      <span className="text-bunker-300 text-sm">
+      <span className="text-sm text-bunker-300">
         Not selecting a Build Configuration will sync your secrets to the entire project.
       </span>
     </>