migrate checkbox

Author: JoeChenJ

src/pages/staking/deposit-contract.tsx

@@ -4,7 +4,6 @@ import { type GetStaticProps } from "next"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import { Checkbox } from "@chakra-ui/react"
 
 import type {
   BasePageProps,
@@ -41,6 +40,8 @@ import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import { DEPOSIT_CONTRACT_ADDRESS } from "@/data/addresses"
 
+import Checkbox from "../../../tailwind/ui/Checkbox"
+
 import consensys from "@/public/images/projects/consensys.png"
 import etherscan from "@/public/images/projects/etherscan-logo-circle.png"
 import ef from "@/public/images/staking/ef-blog-logo.png"
@@ -335,43 +336,46 @@ const DepositContractPage = () => {
                       {t("page-staking-deposit-contract-confirm-address")}
                     </CardTitle>
                   </Row>
-                  <Checkbox
-                    mb={2}
-                    isChecked={state.userHasUsedLaunchpad}
-                    onChange={() =>
-                      setState({
-                        ...state,
-                        userHasUsedLaunchpad: !state.userHasUsedLaunchpad,
-                      })
-                    }
-                  >
-                    {t("page-staking-deposit-contract-checkbox1")}
-                  </Checkbox>
-                  <Checkbox
-                    mb={2}
-                    isChecked={state.userUnderstandsStaking}
-                    onChange={() =>
-                      setState({
-                        ...state,
-                        userUnderstandsStaking: !state.userUnderstandsStaking,
-                      })
-                    }
-                  >
-                    {t("page-staking-deposit-contract-checkbox2")}
-                  </Checkbox>
-                  <Checkbox
-                    mb={2}
-                    isChecked={state.userWillCheckOtherSources}
-                    onChange={() =>
-                      setState({
-                        ...state,
-                        userWillCheckOtherSources:
-                          !state.userWillCheckOtherSources,
-                      })
-                    }
-                  >
-                    {t("page-staking-deposit-contract-checkbox3")}
-                  </Checkbox>
+                  <Flex className="flex-col">
+                    <label className="mb-2 flex items-center gap-2">
+                      <Checkbox
+                        checked={state.userHasUsedLaunchpad}
+                        onCheckedChange={() =>
+                          setState({
+                            ...state,
+                            userHasUsedLaunchpad: !state.userHasUsedLaunchpad,
+                          })
+                        }
+                      />
+                      {t("page-staking-deposit-contract-checkbox1")}
+                    </label>
+                    <label className="mb-2 flex items-center gap-2">
+                      <Checkbox
+                        checked={state.userUnderstandsStaking}
+                        onCheckedChange={() =>
+                          setState({
+                            ...state,
+                            userUnderstandsStaking:
+                              !state.userUnderstandsStaking,
+                          })
+                        }
+                      />
+                      {t("page-staking-deposit-contract-checkbox2")}
+                    </label>
+                    <label className="mb-2 flex items-center gap-2">
+                      <Checkbox
+                        checked={state.userWillCheckOtherSources}
+                        onCheckedChange={() =>
+                          setState({
+                            ...state,
+                            userWillCheckOtherSources:
+                              !state.userWillCheckOtherSources,
+                          })
+                        }
+                      />
+                      {t("page-staking-deposit-contract-checkbox3")}
+                    </label>
+                  </Flex>
                   <CopyButton
                     disabled={!isButtonEnabled}
                     onClick={() =>