fix: css for checkbox in light mode (calcom#25782)

Author: Ryukemeister

apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx

@@ -82,7 +82,8 @@ export const OAuthClientForm = ({
             <input
               {...register(`${permissionKey}Read`)}
               id={`${permissionKey}Read`}
-              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              className="border-default bg-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition checked:border-transparent checked:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              style={{ accentColor: "#ffffff" }}
               type="checkbox"
               disabled={!!defaultValues}
             />
@@ -94,7 +95,8 @@ export const OAuthClientForm = ({
             <input
               {...register(`${permissionKey}Write`)}
               id={`${permissionKey}Write`}
-              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              className="border-default bg-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition checked:border-transparent checked:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              style={{ accentColor: "#ffffff" }}
               type="checkbox"
               disabled={!!defaultValues}
             />
@@ -162,36 +164,6 @@ export const OAuthClientForm = ({
             );
           })}
         </div>
-        {/** <div className="mt-6">
-          <Controller
-            control={control}
-            name="logo"
-            render={({ field: { value } }) => (
-              <>
-                <Label>Client logo</Label>
-                <div className="flex items-center">
-                  <Avatar
-                    alt=""
-                    imageSrc={value}
-                    fallback={<Icon name="plus" className="text-subtle h-4 w-4" />}
-                    size="sm"
-                  />
-                  <div className="ms-4">
-                    <ImageUploader
-                      target="avatar"
-                      id="vatar-upload"
-                      buttonMsg="Upload"
-                      imageSrc={value}
-                      handleAvatarChange={(newAvatar: string) => {
-                        setValue("logo", newAvatar);
-                      }}
-                    />
-                  </div>
-                </div>
-              </>
-            )}
-          />
-        </div> */}
         <div className="mt-6">
           <Tooltip content={t("booking_redirect_uri")}>
             <TextField
@@ -229,7 +201,8 @@ export const OAuthClientForm = ({
           <input
             {...register("areEmailsEnabled")}
             id="areEmailsEnabled"
-            className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+            className="border-default bg-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition checked:border-transparent checked:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+            style={{ accentColor: "#ffffff" }}
             type="checkbox"
             disabled={isFormDisabled}
           />
@@ -242,7 +215,8 @@ export const OAuthClientForm = ({
             <input
               {...register("areCalendarEventsEnabled")}
               id="areCalendarEventsEnabled"
-              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              className="border-default bg-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition checked:border-transparent checked:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              style={{ accentColor: "#ffffff" }}
               type="checkbox"
               disabled={isFormDisabled}
             />
@@ -263,7 +237,8 @@ export const OAuthClientForm = ({
             <input
               {...register("areDefaultEventTypesEnabled")}
               id="areDefaultEventTypesEnabled"
-              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              className="border-default bg-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition checked:border-transparent checked:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              style={{ accentColor: "#ffffff" }}
               type="checkbox"
               disabled={isFormDisabled}
             />