fix: minor tw4 fixes and lint tw format

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 shadow-inner data-[state=checked]:bg-red/50"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
         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="mb-8 text-sm text-mineshaft-200">
+      <p className="text-mineshaft-200 mb-8 text-sm">
         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="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -115,7 +115,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500"
+              className="border-mineshaft-500 w-full border"
               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 py-1 whitespace-normal">
+        <div className="flex flex-col gap-2 whitespace-normal py-1">
           {failureMessage && (
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Import Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
+              <div className="bg-mineshaft-600 rounded-sm 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="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        className="bg-bunker-500 h-12 w-12 rounded-md p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="text-mineshaft-300 flex items-center">
           {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="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
+            <div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-sm leading-4 text-mineshaft-400">
+        <p className="text-mineshaft-400 text-sm leading-4">
           {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="mb-8 text-sm text-mineshaft-200">
+      <p className="text-mineshaft-200 mb-8 text-sm">
         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 py-1 whitespace-normal">
+        <div className="flex flex-col gap-2 whitespace-normal py-1">
           {failureMessage && (
             <div>
-              <div className="mb-2 flex self-start text-red">
-                <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
+              <div className="text-red mb-2 flex self-start">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
                 <div className="text-xs">
                   {mini ? "Failed to Remove Secrets" : "Failure Reason"}
                 </div>
               </div>
-              <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
+              <div className="bg-mineshaft-600 rounded-sm 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="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+        <p className="text-mineshaft-400 mt-4 text-sm">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="grid h-118 grid-cols-4 content-start gap-2">
+      <div className="h-118 grid 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="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"
+              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"
             >
               <img
                 src={`/images/integrations/${image}`}
@@ -107,7 +107,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
             service you're looking for,`}{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://infisical.com/slack"
                       rel="noopener noreferrer"
                     >
@@ -116,7 +116,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                     or{" "}
                     <a
                       target="_blank"
-                      className="underline hover:text-mineshaft-300"
+                      className="hover:text-mineshaft-300 underline"
                       href="https://github.com/Infisical/infisical/discussions"
                       rel="noopener noreferrer"
                     >
@@ -127,7 +127,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
                 </>
               }
             >
-              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+              <div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
                 <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="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="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="mb-1 flex items-center text-sm">
-            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+            <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-primary mr-1.5" />
             Secret Sync Behavior
           </div>
-          <p className="mt-1 text-sm text-bunker-200">
+          <p className="text-bunker-200 mt-1 text-sm">
             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 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
             {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] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                  `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
                     selected
-                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                      ? "border-mineshaft-300 text-mineshaft-200 border-b-2"
                       : "text-bunker-300"
                   }`
                 }
@@ -221,7 +221,7 @@ export const CreateSecretSyncForm = ({
                       errorText={error?.message}
                     >
                       <Switch
-                        className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                        className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
                         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="mt-2 text-xs text-mineshaft-400">
+            <p className="text-mineshaft-400 mt-2 text-xs">
               Duplicate found in project ID:{" "}
-              <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
+              <code className="bg-mineshaft-600 text-mineshaft-200 rounded-sm px-1 py-0.5">
                 {duplicateProjectId}
               </code>
             </p>

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

@@ -46,7 +46,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         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="-mt-2.5 mb-2.5 text-xs text-yellow">
+        <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
           <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="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
                   /demo/path/
                 </code>{" "}
                 and a key schema of{" "}
-                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
                   INFISICAL_{"{{secretKey}}"}
                 </code>
                 , then the result will be{" "}
-                <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                <code className="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
                   /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="font-medium text-bunker-200">One-To-One</span>: Each
+                      <span className="text-bunker-200 font-medium">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="font-medium text-bunker-200">Many-To-One</span>: All
+                      <span className="text-bunker-200 font-medium">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="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border 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="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border 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="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -133,7 +133,7 @@ export const GcpSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border 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="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border 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="w-full border border-mineshaft-500 capitalize"
+                  className="border-mineshaft-500 w-full border 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 shadow-inner data-[state=checked]:bg-green/80"
+      className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
       id={id}
       thumbClassName="bg-mineshaft-800"
       onCheckedChange={onChange}
@@ -108,7 +108,7 @@ export const GitLabSyncFields = () => {
                 setValue("destinationConfig.groupId", "");
                 setValue("destinationConfig.groupName", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border 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="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -150,7 +150,7 @@ export const HumanitecSyncFields = () => {
                 onChange(val);
                 setValue("destinationConfig.env", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border 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="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -78,7 +78,7 @@ export const RenderSyncFields = () => {
             <Select
               value={value}
               onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border 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-sm text-bunker-300">
+      <span className="text-bunker-300 text-sm">
         Not selecting a Build Configuration will sync your secrets to the entire project.
       </span>
     </>

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

@@ -90,7 +90,7 @@ export const TerraformCloudSyncFields = () => {
                 <ul className="flex list-disc flex-col gap-3 pl-4">
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">
+                      <span className="text-bunker-200 font-medium">
                         Environment variables configure Terraform&apos;s behavior (e.g.,
                         credentials).
                       </span>
@@ -98,7 +98,7 @@ export const TerraformCloudSyncFields = () => {
                   </li>
                   <li>
                     <p className="text-mineshaft-300">
-                      <span className="font-medium text-bunker-200">
+                      <span className="text-bunker-200 font-medium">
                         Terraform variables are used as input values in your configuration.
                       </span>
                     </p>
@@ -110,7 +110,7 @@ export const TerraformCloudSyncFields = () => {
             <Select
               value={value}
               onValueChange={onChange}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               defaultValue={TerraformCloudSyncCategory.Environment}
               placeholder="Select category..."
@@ -146,7 +146,7 @@ export const TerraformCloudSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -164,7 +164,7 @@ export const TerraformCloudSyncFields = () => {
                 setValue("destinationConfig.variableSetName", "");
                 setValue("destinationConfig.workspaceName", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"

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

@@ -85,7 +85,7 @@ export const WindmillSyncFields = () => {
                   rel="noopener noreferrer"
                   href="https://www.windmill.dev/docs/core_concepts/roles_and_permissions#path"
                 >
-                  <span className="cursor-pointer underline decoration-primary underline-offset-2 hover:text-mineshaft-200">
+                  <span className="decoration-primary hover:text-mineshaft-200 cursor-pointer underline underline-offset-2">
                     owner path convention
                   </span>
                   .

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

@@ -58,7 +58,7 @@ export const ZabbixSyncFields = () => {
                     return (
                       <li key={name}>
                         <p className="text-mineshaft-300">
-                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                          <span className="text-bunker-200 font-medium">{name}</span>: {description}
                         </p>
                       </li>
                     );
@@ -74,7 +74,7 @@ export const ZabbixSyncFields = () => {
                 setValue("destinationConfig.hostId", "");
                 setValue("destinationConfig.hostName", "");
               }}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a scope..."
               dropdownContainerClassName="max-w-none"
@@ -127,7 +127,7 @@ export const ZabbixSyncFields = () => {
             <Select
               value={String(value)}
               onValueChange={(val) => onChange(parseInt(val, 10))}
-              className="w-full border border-mineshaft-500 capitalize"
+              className="border-mineshaft-500 w-full border capitalize"
               position="popper"
               placeholder="Select a macro type..."
               dropdownContainerClassName="max-w-none"

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx

@@ -10,11 +10,11 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
         <p className="truncate">{children}</p>
-        <Badge variant="success" className="mr-auto ml-1 cursor-pointer">
+        <Badge variant="success" className="ml-1 mr-auto cursor-pointer">
           {props.data.slug}
         </Badge>
         {isSelected && (
-          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+          <FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
         )}
       </div>
     </components.Option>

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

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

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx

@@ -33,12 +33,12 @@ const AwsTagsSection = () => {
   });
 
   return (
-    <div className="mt-2 mb-4 flex flex-col pl-2">
+    <div className="mb-4 mt-2 flex flex-col pl-2">
       <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
         {tagFields.fields.map(({ id: tagFieldId }, i) => (
           <Fragment key={tagFieldId}>
             <div className="col-span-5">
-              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+              {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
               <Controller
                 control={control}
                 name={`syncOptions.tags.${i}.key`}
@@ -55,7 +55,7 @@ const AwsTagsSection = () => {
             </div>
             <div className="col-span-6">
               {i === 0 && (
-                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+                <FormLabel label="Value" className="text-mineshaft-400 text-xs" isOptional />
               )}
               <Controller
                 control={control}
@@ -143,19 +143,19 @@ export const AwsParameterStoreSyncOptionsFields = () => {
                   <p>
                     To configure a KMS key, ensure the following permissions are present on the
                     selected IAM role:{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:ListAliases&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:DescribeKey&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Encrypt&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Decrypt&#34;
                     </span>
                     .
@@ -173,7 +173,7 @@ export const AwsParameterStoreSyncOptionsFields = () => {
         )}
       />
       <Switch
-        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
         id="overwrite-tags"
         thumbClassName="bg-mineshaft-800"
         isChecked={Array.isArray(watchedTags)}
@@ -212,7 +212,7 @@ export const AwsParameterStoreSyncOptionsFields = () => {
             errorText={error?.message}
           >
             <Switch
-              className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+              className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
               id="overwrite-existing-secrets"
               thumbClassName="bg-mineshaft-800"
               isChecked={value}

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx

@@ -34,12 +34,12 @@ const AwsTagsSection = () => {
   });
 
   return (
-    <div className="mt-2 mb-4 flex flex-col pl-2">
+    <div className="mb-4 mt-2 flex flex-col pl-2">
       <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
         {tagFields.fields.map(({ id: tagFieldId }, i) => (
           <Fragment key={tagFieldId}>
             <div className="col-span-5">
-              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+              {i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
               <Controller
                 control={control}
                 name={`syncOptions.tags.${i}.key`}
@@ -56,7 +56,7 @@ const AwsTagsSection = () => {
             </div>
             <div className="col-span-6">
               {i === 0 && (
-                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+                <FormLabel label="Value" className="text-mineshaft-400 text-xs" isOptional />
               )}
               <Controller
                 control={control}
@@ -145,19 +145,19 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
                   <p>
                     To configure a KMS key, ensure the following permissions are present on the
                     selected IAM role:{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:ListAliases&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:DescribeKey&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Encrypt&#34;
                     </span>
                     ,{" "}
-                    <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
+                    <span className="bg-mineshaft-600 text-mineshaft-300 rounded-sm">
                       &#34;kms:Decrypt&#34;
                     </span>
                     .
@@ -178,7 +178,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
       />
 
       <Switch
-        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+        className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
         id="overwrite-tags"
         thumbClassName="bg-mineshaft-800"
         isChecked={Array.isArray(watchedTags)}
@@ -218,7 +218,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
               className="mt-4"
             >
               <Switch
-                className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
                 id="sync-metadata-as-tags"
                 thumbClassName="bg-mineshaft-800"
                 isChecked={value}

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/RenderSyncOptionsFields.tsx

@@ -17,7 +17,7 @@ export const RenderSyncOptionsFields = () => {
       render={({ field: { value, onChange }, fieldState: { error } }) => (
         <FormControl className="mt-4" isError={Boolean(error?.message)} errorText={error?.message}>
           <Switch
-            className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+            className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
             id="auto-redeploy-services"
             thumbClassName="bg-mineshaft-800"
             isChecked={value}

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

@@ -77,7 +77,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">Configure how secrets should be synced.</p>
+      <p className="text-bunker-300 mb-4 text-sm">Configure how secrets should be synced.</p>
       {!hideInitialSync && (
         <>
           <Controller
@@ -100,7 +100,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                           return (
                             <li key={name}>
                               <p className="text-mineshaft-300">
-                                <span className="font-medium text-bunker-200">{name}</span>:{" "}
+                                <span className="text-bunker-200 font-medium">{name}</span>:{" "}
                                 {description}
                               </p>
                             </li>
@@ -118,7 +118,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                   isDisabled={!syncOption?.canImportSecrets}
                   value={value}
                   onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
+                  className="border-mineshaft-500 w-full border"
                   position="popper"
                   placeholder="Select an option..."
                   dropdownContainerClassName="max-w-none"
@@ -137,7 +137,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
             )}
           />
           {!syncOption?.canImportSecrets && (
-            <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
+            <p className="text-yellow -mt-2.5 mb-2.5 text-xs">
               <FontAwesomeIcon className="mr-1" size="xs" icon={faTriangleExclamation} />
               {destinationName} only supports overwriting destination secrets.{" "}
               {!currentSyncOption.disableSecretDeletion &&
@@ -218,7 +218,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
           return (
             <FormControl isError={Boolean(error)} errorText={error?.message}>
               <Switch
-                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
                 id="auto-sync-enabled"
                 thumbClassName="bg-mineshaft-800"
                 onCheckedChange={onChange}

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx

@@ -26,7 +26,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
             content={
               <Table>
                 <THead>
-                  <Th className="p-2 whitespace-nowrap">Key</Th>
+                  <Th className="whitespace-nowrap p-2">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -41,7 +41,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>
                   {tags.length} Tag{tags.length > 1 ? "s" : ""}

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx

@@ -58,7 +58,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
             content={
               <Table>
                 <THead>
-                  <Th className="p-2 whitespace-nowrap">Key</Th>
+                  <Th className="whitespace-nowrap p-2">Key</Th>
                   <Th className="p-2">Value</Th>
                 </THead>
                 <TBody>
@@ -73,7 +73,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
                 <FontAwesomeIcon icon={faEye} />
                 <span>
                   {tags.length} Tag{tags.length > 1 ? "s" : ""}

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

@@ -175,8 +175,8 @@ export const SecretSyncReviewFields = () => {
   return (
     <div className="mb-4 flex flex-col gap-6">
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Source</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Source</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
@@ -184,14 +184,14 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="flex w-full items-center gap-2 border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Destination</span>
-          {isChecking && <span className="text-xs text-mineshaft-400">Checking...</span>}
+        <div className="border-mineshaft-600 flex w-full items-center gap-2 border-b">
+          <span className="text-mineshaft-300 text-sm">Destination</span>
+          {isChecking && <span className="text-mineshaft-400 text-xs">Checking...</span>}
         </div>
         {hasDuplicate && (
           <div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2">
             <div className="flex text-sm text-yellow-100">
-              <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
+              <FontAwesomeIcon icon={faWarning} className="mr-2 mt-1 text-yellow-600" />
               <div>
                 <p>
                   Another secret sync in your organization is already configured with the same
@@ -215,8 +215,8 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Sync Options</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Sync Options</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Auto-Sync">
@@ -237,8 +237,8 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Details</span>
+        <div className="border-mineshaft-600 w-full border-b">
+          <span className="text-mineshaft-300 text-sm">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Name">{name}</GenericFieldLabel>

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

@@ -43,7 +43,7 @@ export const SecretSyncSourceFields = () => {
 
   return (
     <>
-      <p className="mb-4 text-sm text-bunker-300">
+      <p className="text-bunker-300 mb-4 text-sm">
         Specify the environment and path where you would like to sync secrets from.
       </p>
 

frontend/src/components/secret-syncs/github/GitHubSyncSelectedRepositoriesTooltipContent.tsx

@@ -24,7 +24,7 @@ export const GitHubSyncSelectedRepositoriesTooltipContent = ({ secretSync }: Pro
   if (destinationConfig.scope === GitHubSyncScope.Organization) {
     return (
       <>
-        <span className="text-xs text-bunker-300">Repositories:</span>
+        <span className="text-bunker-300 text-xs">Repositories:</span>
         <p className={twMerge("text-sm", isPending && "text-mineshaft-400")}>
           {isPending
             ? "Loading..."