From 6596251122ec1d2efb1a34019abd69a8d74374b0 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sat, 8 Oct 2022 20:04:55 +1030
Subject: [PATCH] Fix checkbox disabled styling

---
 src/components/form/Checkbox.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/form/Checkbox.tsx b/src/components/form/Checkbox.tsx
index aa87e165..ad9c4ab8 100644
--- a/src/components/form/Checkbox.tsx
+++ b/src/components/form/Checkbox.tsx
@@ -14,14 +14,18 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             ref={ref}
             type="checkbox"
             className={`h-4 w-4 rounded border-transparent bg-orange-100 text-orange-500 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
-              disabled ? "cursor-not-allowed text-orange-200" : ""
+              disabled ? "cursor-not-allowed bg-orange-50 text-orange-200" : ""
             }`}
             disabled={disabled}
             {...rest}
           />
         </div>
         <div className="ml-3 text-sm">
-          <label htmlFor="comments" className="font-medium text-gray-700">
+          <label
+            className={`font-medium  ${
+              disabled ? "text-gray-500" : "text-gray-700"
+            }`}
+          >
             {label}
           </label>
         </div>