fix: remove manual css overrides of checkbox checked state

Clarify relationship between path and key schema for AWS parameter store

docs/integrations/secret-syncs/aws-parameter-store.mdx

@@ -148,3 +148,11 @@ description: "Learn how to configure an AWS Parameter Store Sync for Infisical."
         ```
     </Tab>
 </Tabs>
+
+## FAQ
+
+<AccordionGroup>
+    <Accordion title="What's the relationship between 'path' and 'key schema'?">
+        The path is required and will be prepended to the key schema. For example, if you have a path of `/demo/path/` and a key schema of `INFISICAL_{{secretKey}}`, then the result will be `/demo/path/INFISICAL_{{secretKey}}`.
+    </Accordion>
+</AccordionGroup>

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

@@ -58,6 +58,7 @@ export const CreateSecretSyncModal = ({ onOpenChange, selectSync = null, ...prop
         }
         onPointerDownOutside={(e) => e.preventDefault()}
         className="max-w-2xl"
+        bodyClassName="overflow-visible"
         subTitle={selectedSync ? undefined : "Select a third-party service to sync secrets to."}
       >
         <Content

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

@@ -1,10 +1,11 @@
-import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
-import { usePopUp } from "@app/hooks";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { SecretSync, useSecretSyncOptions } from "@app/hooks/api/secretSyncs";
 
 import { UpgradePlanModal } from "../license/UpgradePlanModal";
@@ -19,6 +20,26 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
+  const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", {
+    initPerPage: 16
+  });
+
+  const filteredOptions = useMemo(
+    () =>
+      secretSyncOptions?.filter(
+        ({ name, destination }) =>
+          name?.toLowerCase().includes(search.trim().toLowerCase()) ||
+          destination.toLowerCase().includes(search.toLowerCase())
+      ) ?? [],
+    [secretSyncOptions, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredOptions.length,
+    offset,
+    setPage
+  });
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -29,75 +50,103 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-4 gap-2">
-      {secretSyncOptions?.map(({ destination, enterprise }) => {
-        const { image, name } = SECRET_SYNC_MAP[destination];
-        return (
-          <button
-            type="button"
-            onClick={() =>
-              enterprise && !subscription.enterpriseSecretSyncs
-                ? 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"
-          >
-            <img
-              src={`/images/integrations/${image}`}
-              height={40}
-              width={40}
-              className="mt-auto"
-              alt={`${name} logo`}
-            />
-            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-              {name}
-            </div>
-          </button>
-        );
-      })}
+    <div className="flex flex-col gap-4">
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search options..."
+        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
+      />
+      <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
+        {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
+          const { image, name } = SECRET_SYNC_MAP[destination];
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                enterprise && !subscription.enterpriseSecretSyncs
+                  ? 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"
+            >
+              <img
+                src={`/images/integrations/${image}`}
+                height={40}
+                width={40}
+                className="mt-auto"
+                alt={`${name} logo`}
+              />
+              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+                {name}
+              </div>
+            </button>
+          );
+        })}
+        {!filteredOptions?.length && (
+          <EmptyState
+            className="col-span-full mt-40"
+            title="No Secret Syncs match search"
+            icon={faSearch}
+          />
+        )}
+      </div>
+      {Boolean(filteredOptions.length) && (
+        <Pagination
+          startAdornment={
+            <Tooltip
+              side="bottom"
+              className="max-w-sm py-4"
+              content={
+                <>
+                  <p className="mb-2">Infisical is constantly adding support for more services.</p>
+                  <p>
+                    {`If you don't see the third-party
+            service you're looking for,`}{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://infisical.com/slack"
+                      rel="noopener noreferrer"
+                    >
+                      let us know on Slack
+                    </a>{" "}
+                    or{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://github.com/Infisical/infisical/discussions"
+                      rel="noopener noreferrer"
+                    >
+                      make a request on GitHub
+                    </a>
+                    .
+                  </p>
+                </>
+              }
+            >
+              <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>
+                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
+              </div>
+            </Tooltip>
+          }
+          count={filteredOptions.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[16]}
+        />
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use every Secret Sync if you switch to Infisical's Enterprise plan."
       />
-      <Tooltip
-        side="bottom"
-        className="max-w-sm py-4"
-        content={
-          <>
-            <p className="mb-2">Infisical is constantly adding support for more services.</p>
-            <p>
-              {`If you don't see the third-party
-            service you're looking for,`}{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://infisical.com/slack"
-                rel="noopener noreferrer"
-              >
-                let us know on Slack
-              </a>{" "}
-              or{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://github.com/Infisical/infisical/discussions"
-                rel="noopener noreferrer"
-              >
-                make a request on GitHub
-              </a>
-              .
-            </p>
-          </>
-        }
-      >
-        <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
-          </div>
-        </div>
-      </Tooltip>
     </div>
   );
 };

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

@@ -30,7 +30,29 @@ export const AwsParameterStoreSyncFields = () => {
       />
       <Controller
         render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl isError={Boolean(error)} errorText={error?.message} label="Path">
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Path"
+            tooltipText={
+              <>
+                The path is required and will be prepended to the key schema. For example, if you
+                have a path of{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  /demo/path/
+                </code>{" "}
+                and a key schema of{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  INFISICAL_{"{{secretKey}}"}
+                </code>
+                , then the result will be{" "}
+                <code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
+                  /demo/path/INFISICAL_{"{{secretKey}}"}
+                </code>
+              </>
+            }
+            tooltipClassName="max-w-lg"
+          >
             <Input value={value} onChange={onChange} placeholder="Path..." />
           </FormControl>
         )}

frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx

@@ -163,7 +163,7 @@ const PasswordGeneratorModal = ({
           <div className="mb-6 flex flex-row justify-between gap-2">
             <Checkbox
               id="useUppercase"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useUppercase}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useUppercase: checked as boolean })
@@ -174,7 +174,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useLowercase"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useLowercase}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useLowercase: checked as boolean })
@@ -185,7 +185,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useNumbers"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useNumbers}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useNumbers: checked as boolean })
@@ -196,7 +196,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useSpecialChars"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useSpecialChars}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useSpecialChars: checked as boolean })

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx

@@ -446,7 +446,6 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                                 <Checkbox
                                   id={optionValue}
                                   key={optionValue}
-                                  className="data-[state=checked]:bg-primary"
                                   isDisabled={Boolean(cert)}
                                   isChecked={value[optionValue]}
                                   onCheckedChange={(state) => {
@@ -481,7 +480,6 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                                 <Checkbox
                                   id={optionValue}
                                   key={optionValue}
-                                  className="data-[state=checked]:bg-primary"
                                   isDisabled={Boolean(cert)}
                                   isChecked={value[optionValue]}
                                   onCheckedChange={(state) => {

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx

@@ -405,7 +405,6 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                               <Checkbox
                                 id={optionValue}
                                 key={optionValue}
-                                className="data-[state=checked]:bg-primary"
                                 isChecked={value[optionValue]}
                                 onCheckedChange={(state) => {
                                   onChange({
@@ -439,7 +438,6 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                               <Checkbox
                                 id={optionValue}
                                 key={optionValue}
-                                className="data-[state=checked]:bg-primary"
                                 isChecked={value[optionValue]}
                                 onCheckedChange={(state) => {
                                   onChange({

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx

@@ -408,7 +408,6 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                                     <Checkbox
                                       id={optionValue}
                                       key={optionValue}
-                                      className="data-[state=checked]:bg-primary"
                                       isChecked={value[optionValue]}
                                       onCheckedChange={(state) => {
                                         onChange({
@@ -443,7 +442,6 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                                       <Checkbox
                                         id={optionValue}
                                         key={optionValue}
-                                        className="data-[state=checked]:bg-primary"
                                         isChecked={value[optionValue]}
                                         onCheckedChange={(state) => {
                                           onChange({
@@ -477,12 +475,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                     errorText={error?.message}
                     tooltipText="If enabled, a new certificate will be issued automatically X days before the current certificate expires."
                   >
-                    <Checkbox
-                      id="enableAutoRenewal"
-                      isChecked={value}
-                      onCheckedChange={onChange}
-                      className="data-[state=checked]:bg-primary"
-                    >
+                    <Checkbox id="enableAutoRenewal" isChecked={value} onCheckedChange={onChange}>
                       Enable Certificate Auto Renewal
                     </Checkbox>
                   </FormControl>

frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx

@@ -333,7 +333,6 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                           <Checkbox
                             id={optionValue}
                             key={optionValue}
-                            className="data-[state=checked]:bg-primary"
                             isChecked={value[optionValue]}
                             onCheckedChange={(state) => {
                               onChange({
@@ -367,7 +366,6 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                           <Checkbox
                             id={optionValue}
                             key={optionValue}
-                            className="data-[state=checked]:bg-primary"
                             isChecked={value[optionValue]}
                             onCheckedChange={(state) => {
                               onChange({

frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx

@@ -145,7 +145,6 @@ const KmipClientForm = ({ onComplete, kmipClient }: FormProps) => {
                     <Checkbox
                       id={optionValue}
                       key={optionValue}
-                      className="data-[state=checked]:bg-primary"
                       isChecked={value[optionValue]}
                       onCheckedChange={(state) => {
                         onChange({

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx

@@ -1,11 +1,12 @@
-import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
-import { usePopUp } from "@app/hooks";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useAppConnectionOptions } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 
@@ -19,6 +20,26 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
+  const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", {
+    initPerPage: 16
+  });
+
+  const filteredOptions = useMemo(
+    () =>
+      appConnectionOptions?.filter(
+        ({ name, app }) =>
+          name?.toLowerCase().includes(search.trim().toLowerCase()) ||
+          app.toLowerCase().includes(search.toLowerCase())
+      ) ?? [],
+    [appConnectionOptions, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredOptions.length,
+    offset,
+    setPage
+  });
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -29,86 +50,120 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-4 gap-2">
-      {appConnectionOptions?.map((option) => {
-        const { image, name, size = 50, enterprise = false, icon } = APP_CONNECTION_MAP[option.app];
+    <div className="flex flex-col gap-4">
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search options..."
+        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
+      />
+      <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
+        {filteredOptions.slice(offset, perPage * page)?.map((option) => {
+          const {
+            image,
+            name,
+            size = 50,
+            enterprise = false,
+            icon
+          } = APP_CONNECTION_MAP[option.app];
 
-        return (
-          <button
-            type="button"
-            onClick={() =>
-              enterprise && !subscription.enterpriseAppConnections
-                ? handlePopUpOpen("upgradePlan")
-                : onSelect(option.app)
-            }
-            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"
-          >
-            <div className="relative">
-              <img
-                src={`/images/integrations/${image}`}
-                style={{
-                  width: `${size}px`
-                }}
-                className="mt-auto"
-                alt={`${name} logo`}
-              />
-              {icon && (
-                <FontAwesomeIcon
-                  className="absolute -bottom-1.5 -right-1.5 text-primary-700"
-                  size="xl"
-                  icon={icon}
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                enterprise && !subscription.enterpriseAppConnections
+                  ? handlePopUpOpen("upgradePlan")
+                  : onSelect(option.app)
+              }
+              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"
+            >
+              <div className="relative">
+                <img
+                  src={`/images/integrations/${image}`}
+                  style={{
+                    width: `${size}px`
+                  }}
+                  className="mt-auto"
+                  alt={`${name} logo`}
                 />
-              )}
-            </div>
-            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-              {name}
-            </div>
-          </button>
-        );
-      })}
+                {icon && (
+                  <FontAwesomeIcon
+                    className="absolute -bottom-1.5 -right-1.5 text-primary-700"
+                    size="xl"
+                    icon={icon}
+                  />
+                )}
+              </div>
+              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+                {name}
+              </div>
+            </button>
+          );
+        })}
+        {!filteredOptions?.length && (
+          <EmptyState
+            className="col-span-full mt-40"
+            title="No App Connections match search"
+            icon={faSearch}
+          />
+        )}
+      </div>
+      {Boolean(filteredOptions.length) && (
+        <Pagination
+          startAdornment={
+            <Tooltip
+              side="bottom"
+              className="max-w-sm py-4"
+              content={
+                <>
+                  <p className="mb-2">Infisical is constantly adding support for more services.</p>
+                  <p>
+                    {`If you don't see the third-party
+            service you're looking for,`}{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://infisical.com/slack"
+                      rel="noopener noreferrer"
+                    >
+                      let us know on Slack
+                    </a>{" "}
+                    or{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://github.com/Infisical/infisical/discussions"
+                      rel="noopener noreferrer"
+                    >
+                      make a request on GitHub
+                    </a>
+                    .
+                  </p>
+                </>
+              }
+            >
+              <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>
+                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
+              </div>
+            </Tooltip>
+          }
+          count={filteredOptions.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[16]}
+        />
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use every App Connection if you switch to Infisical's Enterprise plan."
       />
-      <Tooltip
-        side="bottom"
-        className="max-w-sm py-4"
-        content={
-          <>
-            <p className="mb-2">Infisical is constantly adding support for more connections.</p>
-            <p>
-              {`If you don't see the third-party
-            app you're looking for,`}{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://infisical.com/slack"
-                rel="noopener noreferrer"
-              >
-                let us know on Slack
-              </a>{" "}
-              or{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://github.com/Infisical/infisical/discussions"
-                rel="noopener noreferrer"
-              >
-                make a request on GitHub
-              </a>
-              .
-            </p>
-          </>
-        }
-      >
-        <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">
-          <FontAwesomeIcon className="mt-auto text-xl" icon={faWrench} />
-          <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-            Coming Soon
-          </div>
-        </div>
-      </Tooltip>
     </div>
   );
 };

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -284,7 +284,6 @@ const ServiceTokenForm = () => {
                     <Checkbox
                       id={String(value[optionValue])}
                       key={optionValue}
-                      className="data-[state=checked]:bg-primary"
                       isChecked={value[optionValue]}
                       isDisabled={optionValue === "read"}
                       onCheckedChange={(state) => {

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx

@@ -133,7 +133,6 @@ const Folder: React.FC<FolderProps> = ({
           {!isDisabled && (
             <Checkbox
               id="folder-root"
-              className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
               isChecked={allSelected || someSelected}
               onCheckedChange={handleFolderSelect}
               isIndeterminate={someSelected && !allSelected}
@@ -167,7 +166,6 @@ const Folder: React.FC<FolderProps> = ({
                 {!isDisabled && (
                   <Checkbox
                     id={`folder-${item.id}`}
-                    className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
                     isChecked={selectedItemIds.includes(item.id)}
                     onCheckedChange={(checked) => onItemSelect(item, !!checked)}
                     isDisabled={isDisabled}

frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -42,7 +42,6 @@ export const AutoCapitalizationSection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="autoCapitalization"
               isDisabled={!isAllowed}
               isChecked={currentWorkspace?.autoCapitalization ?? false}

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx

@@ -38,7 +38,6 @@ export const DeleteProjectProtection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="hasDeleteProtection"
               isDisabled={!isAllowed}
               isChecked={currentWorkspace?.hasDeleteProtection ?? false}

frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx

@@ -48,7 +48,6 @@ export const SecretSharingSection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="secretSharing"
               isDisabled={!isAllowed || isLoading}
               isChecked={currentWorkspace?.secretSharing ?? true}

frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx

@@ -48,7 +48,6 @@ export const SecretSnapshotsLegacySection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="showSnapshotsLegacy"
               isDisabled={!isAllowed || isLoading}
               isChecked={currentWorkspace?.showSnapshotsLegacy ?? false}