Fix check boxes in environment variables form (#36)

Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

![image](/attachments/0d90877d-86c7-4e3a-94c9-3c0d480f8b8c)

Co-authored-by: Isha <ishavenikar7@gmail.com>
Reviewed-on: #36

packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx

@@ -1,11 +1,15 @@
 import { useEffect, useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
+// TODO: Use custom checkbox component
+// Custom checkbox component does not work with react-hook-form
+import { Checkbox } from '@snowballtools/material-tailwind-react-fork';
+// import { Checkbox } from 'components/shared/Checkbox';
+
 import { Button } from 'components/shared/Button';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
 import { EnvironmentVariablesFormValues } from 'types/types';
-import { Checkbox } from 'components/shared/Checkbox';
 
 const EnvironmentVariablesForm = () => {
   const {
@@ -67,10 +71,19 @@ const EnvironmentVariablesForm = () => {
         />
       )}
       <div className="flex gap-2 p-2">
-        <Checkbox label="Production" {...register('environment.production')} />
+        <Checkbox
-        <Checkbox label="Preview" {...register('environment.preview')} />
+          label="Production"
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
+          {...register('environment.production')}
+        />
+        <Checkbox
+          label="Preview"
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
+          {...register('environment.preview')}
+        />
         <Checkbox
           label="Development"
+          labelProps={{ className: "text-gray-900 dark:text-white" }}
           {...register('environment.development')}
         />
       </div>