Merge pull request #3865 from Infisical/remove-manual-styled-css-on-checkboxes

fix(checkbox): Remove manual css overrides of checkbox checked state

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
+                    <Checkbox id="enableAutoRenewal" isChecked={value} onCheckedChange={onChange}>
-                      id="enableAutoRenewal"
-                      isChecked={value}
-                      onCheckedChange={onChange}
-                      className="data-[state=checked]:bg-primary"
-                    >
                       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/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}