From 3a259b45edf6eb103d7607ccef6d087a8f7697b5 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Tue, 14 Oct 2025 00:14:37 +0530
Subject: [PATCH] fix: lint

---
 .../secret-syncs/SecretSyncModalHeader.tsx    | 10 +++++-----
 .../SecretSyncOptionsFields.tsx               | 10 +++++-----
 .../SecretSyncReviewFields.tsx                | 20 +++++++++----------
 .../components/AppConnectionHeader.tsx        | 16 +++++++--------
 .../components/AppConnectionList.tsx          | 14 ++++++-------
 .../CloudIntegrationSection.tsx               | 14 ++++++-------
 .../SecretSyncDetailsByIDPage.tsx             |  6 +++---
 .../SecretSyncDestinatonSection.tsx           |  6 +++---
 .../SecretSyncOptionsSection.tsx              |  6 +++---
 9 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx b/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
index cca24b4c6..a9882ecec 100644
--- a/frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
+++ b/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 ${destinationDetails.imageClassName}`}
+        className={`h-12 w-12 rounded-md bg-bunker-500 p-2 ${destinationDetails.imageClassName}`}
       />
       <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">
-              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+            <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]" />
               <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}`}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
index de5b85e02..f66cadaea 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
@@ -78,7 +78,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
 
   return (
     <>
-      <p className="text-bunker-300 mb-4 text-sm">Configure how secrets should be synced.</p>
+      <p className="mb-4 text-sm text-bunker-300">Configure how secrets should be synced.</p>
       {!hideInitialSync && (
         <>
           <Controller
@@ -101,7 +101,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                           return (
                             <li key={name}>
                               <p className="text-mineshaft-300">
-                                <span className="text-bunker-200 font-medium">{name}</span>:{" "}
+                                <span className="font-medium text-bunker-200">{name}</span>:{" "}
                                 {description}
                               </p>
                             </li>
@@ -119,7 +119,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
                   isDisabled={!syncOption?.canImportSecrets}
                   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"
@@ -138,7 +138,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
             )}
           />
           {!syncOption?.canImportSecrets && (
-            <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={faTriangleExclamation} />
               {destinationName} only supports overwriting destination secrets.{" "}
               {!currentSyncOption.disableSecretDeletion &&
@@ -219,7 +219,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
           return (
             <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="auto-sync-enabled"
                 thumbClassName="bg-mineshaft-800"
                 onCheckedChange={onChange}
diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
index 6475ad7b3..44d35cd2c 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
@@ -179,8 +179,8 @@ export const SecretSyncReviewFields = () => {
   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">
-          <span className="text-mineshaft-300 text-sm">Source</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Source</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
@@ -188,14 +188,14 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <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 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>
         {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="mr-2 mt-1 text-yellow-600" />
+              <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
               <div>
                 <p>
                   Another secret sync in your organization is already configured with the same
@@ -219,8 +219,8 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Sync Options</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <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">
@@ -241,8 +241,8 @@ export const SecretSyncReviewFields = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="border-mineshaft-600 w-full border-b">
-          <span className="text-mineshaft-300 text-sm">Details</span>
+        <div className="w-full border-b border-mineshaft-600">
+          <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>
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx
index d0862b3b8..44aa194b3 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx
@@ -14,22 +14,22 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
   const appDetails = APP_CONNECTION_MAP[app];
 
   return (
-    <div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
       <div className="relative">
         <img
           alt={`${appDetails.name} logo`}
           src={`/images/integrations/${appDetails.image}`}
-          className={`bg-bunker-500 h-12 w-12 rounded-md p-2 ${appDetails.imageClassName}`}
+          className={`h-12 w-12 rounded-md bg-bunker-500 p-2 ${appDetails.imageClassName}`}
         />
         {appDetails.icon && (
           <FontAwesomeIcon
             icon={appDetails.icon}
-            className="text-primary-700 absolute bottom-1 right-1"
+            className="absolute right-1 bottom-1 text-primary-700"
           />
         )}
       </div>
       <div>
-        <div className="text-mineshaft-300 flex items-center">
+        <div className="flex items-center text-mineshaft-300">
           {appDetails.name}
           <a
             href={`https://infisical.com/docs/integrations/app-connections/${app}`}
@@ -37,8 +37,8 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: 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">
-              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+            <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]" />
               <span>Docs</span>
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -47,14 +47,14 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
             </div>
           </a>
         </div>
-        <p className="text-mineshaft-400 text-sm leading-4">
+        <p className="text-sm leading-4 text-mineshaft-400">
           {isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}
         </p>
       </div>
       {onBack && (
         <button
           type="button"
-          className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
+          className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
           onClick={onBack}
         >
           Select another App
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
index 4387fb4e7..8cd28ea91 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
@@ -46,7 +46,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: 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 AppConnectionsSelect = ({ onSelect, projectType }: 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((option) => {
           const {
             image,
@@ -78,7 +78,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
                   ? handlePopUpOpen("upgradePlan")
                   : onSelect(option.app)
               }
-              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"
             >
               {image && (
                 <img
@@ -93,7 +93,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
               {icon && (
                 <div className="relative">
                   <FontAwesomeIcon
-                    className="text-primary-700 absolute -bottom-1.5 -right-1.5"
+                    className="absolute -right-1.5 -bottom-1.5 text-primary-700"
                     size="xl"
                     icon={icon}
                   />
@@ -127,7 +127,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: 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"
                     >
@@ -136,7 +136,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: 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"
                     >
@@ -147,7 +147,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: 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>
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
index 3b46d4b64..9a6db9def 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
@@ -130,9 +130,9 @@ export const CloudIntegrationSection = ({
                 tabIndex={0}
                 className={`group relative ${
                   cloudIntegration.isAvailable
-                    ? "hover:bg-mineshaft-700 cursor-pointer duration-200"
+                    ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
                     : "opacity-50"
-                } border-mineshaft-600 bg-mineshaft-800 flex h-36 flex-col items-center justify-center rounded-md border p-3`}
+                } flex h-36 flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3`}
                 onClick={() => {
                   if (isSyncAvailable) {
                     navigate({
@@ -180,9 +180,9 @@ export const CloudIntegrationSection = ({
                 </div>
                 {cloudIntegration.isAvailable &&
                   Boolean(integrationAuths?.[cloudIntegration.slug]) && (
-                    <div className="absolute right-0 top-0 z-30 h-full">
+                    <div className="absolute top-0 right-0 z-30 h-full">
                       <div className="relative h-full">
-                        <div className="bg-primary absolute right-0 top-0 w-24 flex-row items-center overflow-hidden whitespace-nowrap rounded-bl-md rounded-tr-md px-2 py-0.5 text-xs text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
+                        <div className="absolute top-0 right-0 w-24 flex-row items-center overflow-hidden rounded-tr-md rounded-bl-md bg-primary px-2 py-0.5 text-xs whitespace-nowrap text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
                           <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
                           Authorized
                         </div>
@@ -197,7 +197,7 @@ export const CloudIntegrationSection = ({
                                 provider: cloudIntegration.slug
                               });
                             }}
-                            className="bg-red absolute right-0 top-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md text-xs opacity-50 transition-all duration-300 hover:opacity-100 group-hover:h-full"
+                            className="absolute top-0 right-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 group-hover:h-full hover:opacity-100"
                           >
                             <FontAwesomeIcon icon={faXmark} size="xl" />
                           </div>
@@ -208,7 +208,7 @@ export const CloudIntegrationSection = ({
                 {isSyncAvailable && (
                   <div className="absolute bottom-0 left-0 z-30 h-full w-full">
                     <div className="relative h-full">
-                      <div className="bg-yellow/20 text-yellow absolute bottom-0 left-0 w-full flex-row overflow-hidden whitespace-nowrap rounded-bl-md rounded-br-md px-2 py-0.5 text-center text-xs">
+                      <div className="absolute bottom-0 left-0 w-full flex-row overflow-hidden rounded-br-md rounded-bl-md bg-yellow/20 px-2 py-0.5 text-center text-xs whitespace-nowrap text-yellow">
                         Secret Sync Available
                       </div>
                     </div>
@@ -230,7 +230,7 @@ export const CloudIntegrationSection = ({
           {Array.from({ length: 16 }).map((_, index) => (
             <div
               key={`dummy-cloud-integration-${index + 1}`}
-              className="border-mineshaft-600 bg-mineshaft-800 h-32 animate-pulse rounded-md border"
+              className="h-32 animate-pulse rounded-md border border-mineshaft-600 bg-mineshaft-800"
             />
           ))}
         </div>
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
index fd87bbfb5..548c1c847 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
@@ -72,7 +72,7 @@ const PageContent = () => {
 
   return (
     <>
-      <div className="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white">
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <Button
             variant="link"
@@ -96,11 +96,11 @@ const PageContent = () => {
             <img
               alt={`${destinationDetails.name} sync`}
               src={`/images/integrations/${destinationDetails.image}`}
-              className="ml-1 mt-3 w-16"
+              className="mt-3 ml-1 w-16"
             />
             <div>
               <p className="text-3xl font-medium text-white">{secretSync.name}</p>
-              <p className="text-bunker-300 leading-3">{destinationDetails.name} Sync</p>
+              <p className="leading-3 text-bunker-300">{destinationDetails.name} Sync</p>
             </div>
             <SecretSyncActionTriggers secretSync={secretSync} />
           </div>
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
index 41c346aba..78e00d8fa 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
@@ -165,9 +165,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
       : ProjectPermissionSub.SecretSyncs;
 
   return (
-    <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
-      <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
-        <h3 className="text-mineshaft-100 font-medium">Destination Configuration</h3>
+    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+        <h3 className="font-medium text-mineshaft-100">Destination Configuration</h3>
         <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
           {(isAllowed) => (
             <IconButton
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx
index 69666f3e9..61d1d8ccb 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx
@@ -88,9 +88,9 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
 
   return (
     <div>
-      <div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3">
-        <div className="border-mineshaft-400 flex items-center justify-between border-b pb-2">
-          <h3 className="text-mineshaft-100 font-medium">Sync Options</h3>
+      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+          <h3 className="font-medium text-mineshaft-100">Sync Options</h3>
           <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
             {(isAllowed) => (
               <IconButton