From 5253f26c94ea20bee60135bf576f67201af63132 Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Thu, 11 Dec 2025 16:18:59 +0530
Subject: [PATCH] fix: css for checkbox in light mode (#25782)

---
 .../oauth-clients/oauth-client-form/index.tsx | 45 +++++--------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
index 6c35a246f4..220b217a34 100644
--- a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
+++ b/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}
             />