🌓 Dark mode fixes

src/components/Forms/FormikInput.tsx

@@ -74,6 +74,7 @@ export const FormikInput: FC<
         isInvalid={isError}
         errorBorderColor="red.300"
         placeholder={placeholder}
+        _placeholder={{ color: useColorModeValue("gray.400", "gray.500") }}
         {...field}
         value={meta.value}
       />

src/components/OutlineListItem.tsx

@@ -1,13 +1,17 @@
 import { FC } from "react"
-import { ListItem, ListItemProps } from "@threshold-network/components"
+import {
+  ListItem,
+  ListItemProps,
+  useColorModeValue,
+} from "@threshold-network/components"
 
 export const OutlineListItem: FC<ListItemProps> = ({ ...props }) => {
   return (
     <ListItem
       display="flex"
       justifyContent="space-between"
       alignItems="center"
-      borderColor="gray.100"
+      borderColor={useColorModeValue("gray.100", "gray.700")}
       borderWidth="1px"
       borderStyle="solid"
       borderRadius="6px"

src/components/Step/index.tsx

@@ -14,6 +14,7 @@ import {
   Badge,
   ImageProps,
   Image,
+  useColorModeValue,
 } from "@threshold-network/components"
 
 type Sizes = "sm" | "md" | "lg"
@@ -139,7 +140,11 @@ export const Step: FC<StepProps> = ({
         w="full"
         borderLeftWidth="4px"
         borderLeftStyle="solid"
-        borderColor={isActive || isComplete ? "brand.500" : "gray.300"}
+        borderColor={
+          isActive || isComplete
+            ? useColorModeValue("brand.500", "brand.300")
+            : "gray.300"
+        }
         {...restProps}
       >
         {children}
@@ -157,7 +162,7 @@ export const StepIndicator: FC<ComponentProps<typeof LabelSm>> = ({
   const Label = stepSizeMap[size].label.component
 
   return (
-    <Label color="brand.500" {...restProps}>
+    <Label color={useColorModeValue("brand.500", "brand.300")} {...restProps}>
       {children}
     </Label>
   )

src/components/TransactionDetails/index.tsx

@@ -1,5 +1,10 @@
 import { ComponentProps, FC } from "react"
-import { BodySm, ListItem, Skeleton } from "@threshold-network/components"
+import {
+  BodySm,
+  ListItem,
+  Skeleton,
+  useColorModeValue,
+} from "@threshold-network/components"
 import { InlineTokenBalance } from "../TokenBalance"
 
 type TransactionDetailsItemProps = {
@@ -15,7 +20,13 @@ export const TransactionDetailsItem: FC<TransactionDetailsItemProps> = ({
   return (
     <ListItem display="flex" justifyContent="space-between" alignItems="center">
       <BodySm color="gray.500">{label}</BodySm>
-      {value ? <BodySm color="gray.700">{value}</BodySm> : children}
+      {value ? (
+        <BodySm color={useColorModeValue("gray.700", "gray.300")}>
+          {value}
+        </BodySm>
+      ) : (
+        children
+      )}
     </ListItem>
   )
 }
@@ -32,7 +43,7 @@ export const TransactionDetailsAmountItem: FC<
   return (
     <TransactionDetailsItem label={label}>
       <Skeleton isLoaded={!!tokenAmount}>
-        <BodySm color="gray.700">
+        <BodySm color={useColorModeValue("gray.700", "gray.300")}>
           <InlineTokenBalance
             withSymbol
             tokenAmount={tokenAmount || "0"}

src/components/tBTC/RecentDeposits.tsx

@@ -7,6 +7,7 @@ import {
   LinkBox,
   LinkOverlay,
   Link,
+  useColorModeValue,
 } from "@threshold-network/components"
 import shortenAddress from "../../utils/shortenAddress"
 import Identicon from "../Identicon"
@@ -63,7 +64,7 @@ const RecentDepositItem: FC<RecentDeposit> = ({
             tokenAmount={amount}
             withSymbol
             tokenSymbol="tBTC"
-            color="brand.500"
+            color={useColorModeValue("brand.500", "brand.300")}
           />
         </BodySm>
       </LinkOverlay>

src/pages/tBTC/Bridge/DepositDetails.tsx

@@ -17,18 +17,16 @@ import {
   LabelSm,
   List,
   ListItem,
-  Skeleton,
   Stack,
   StackDivider,
   Icon,
   Divider,
-  SkeletonText,
-  SkeletonCircle,
   BodySm,
   BodyXs,
   Alert,
   AlertDescription,
   AlertIcon,
+  useColorModeValue,
 } from "@threshold-network/components"
 import { IoCheckmarkSharp, IoTime as TimeIcon } from "react-icons/all"
 import { InlineTokenBalance } from "../../../components/TokenBalance"
@@ -208,7 +206,11 @@ export const DepositDetails: PageComponent = () => {
                 <BridgeProcessCardTitle />
                 <Flex mb="4" alignItems="center" textStyle="bodyLg">
                   <BodyLg>
-                    <Box as="span" fontWeight="600" color="brand.500">
+                    <Box
+                      as="span"
+                      fontWeight="600"
+                      color={useColorModeValue("brand.500", "brand.300")}
+                    >
                       {mintingProgressStep === "completed"
                         ? "Minted"
                         : "Minting"}

src/pages/tBTC/Bridge/Minting/ProvideData.tsx

@@ -1,6 +1,10 @@
 import { FC, Ref, useRef, useState } from "react"
 import { FormikErrors, FormikProps, withFormik } from "formik"
-import { Button, BodyMd } from "@threshold-network/components"
+import {
+  Button,
+  BodyMd,
+  useColorModeValue,
+} from "@threshold-network/components"
 import { useTbtcState } from "../../../../hooks/useTbtcState"
 import { BridgeProcessCardTitle } from "../components/BridgeProcessCardTitle"
 import { BridgeProcessCardSubTitle } from "../components/BridgeProcessCardSubTitle"
@@ -167,7 +171,7 @@ export const ProvideDataComponent: FC<{
         stepText="Step 1"
         subTitle="Generate a Deposit Address"
       />
-      <BodyMd color="gray.500" mb={12}>
+      <BodyMd color={useColorModeValue("gray.500", "gray.300")} mb={12}>
         Based on these two addresses, the system will generate for you a unique
         BTC deposit address. There is no minting limit.
       </BodyMd>

src/pages/tBTC/Bridge/components/BridgeProcessCardSubTitle.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps, FC } from "react"
-import { BodyLg, Box } from "@threshold-network/components"
+import { BodyLg, Box, useColorModeValue } from "@threshold-network/components"
 
 export const BridgeProcessCardSubTitle: FC<
   {
@@ -9,7 +9,11 @@ export const BridgeProcessCardSubTitle: FC<
 > = ({ stepText, subTitle, children, ...restProps }) => {
   return (
     <BodyLg mb={4} {...restProps}>
-      <Box as="span" fontWeight="bold" color="brand.500">
+      <Box
+        as="span"
+        fontWeight="bold"
+        color={useColorModeValue("brand.500", "brand.300")}
+      >
         {stepText}
       </Box>
       {subTitle ? ` - ${subTitle}` : children}

src/pages/tBTC/Bridge/components/BridgeProcessEmptyState.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect } from "react"
-import { H5 } from "@threshold-network/components"
+import { H5, useColorModeValue } from "@threshold-network/components"
 import { BridgeProcessCardTitle } from "./BridgeProcessCardTitle"
 import SubmitTxButton from "../../../../components/SubmitTxButton"
 import {
@@ -40,8 +40,10 @@ export const BridgeProcessEmptyState: FC<{
           width: "100%",
           height: "100px",
           opacity: "0.9",
-          background:
+          background: useColorModeValue(
             "linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 117.78%)",
+            "linear-gradient(360deg, #4A5568 0%, rgba(255, 255, 255, 0) 117.78%)"
+          ),
         }}
       />
       <ProtocolHistoryViewMoreLink mt="7" />

src/pages/tBTC/Bridge/components/BridgeProcessStep.tsx

@@ -5,6 +5,7 @@ import {
   CircularProgress,
   CircularProgressLabel,
   Flex,
+  useColorModeValue,
 } from "@threshold-network/components"
 import ViewInBlockExplorer, {
   Chain as ViewInBlockExplorerChain,
@@ -51,7 +52,7 @@ export const BridgeProcessStep: FC<BridgeProcessStepProps> = ({
   return (
     <Flex flexDirection="column" alignItems="center" height="100%">
       <BodyLg
-        color="gray.700"
+        color={useColorModeValue("gray.700", "gray.300")}
         mt="8"
         alignSelf="flex-start"
         fontSize="20px"

src/pages/tBTC/Explorer/index.tsx

@@ -24,6 +24,7 @@ import {
   Th,
   Thead,
   Tr,
+  useColorModeValue,
 } from "@threshold-network/components"
 import { PageComponent } from "../../../types"
 import tBTCExplorerBg from "../../../static/images/tBTC-explorer-bg.svg"
@@ -155,7 +156,7 @@ const HistoryRow: FC<RecentDeposit> = ({ txHash, address, amount, date }) => {
     <LinkBox
       as={Tr}
       key={`latest-mints-${txHash}`}
-      _odd={{ backgroundColor: "gray.50" }}
+      _odd={{ backgroundColor: useColorModeValue("gray.50", "gray.700") }}
       sx={{ td: { borderBottom: "none" } }}
       transform="scale(1)"
     >
@@ -216,11 +217,11 @@ const MetricBox: FC = ({ children }) => {
       border="1px solid"
       borderColor="gray.100"
       p="3.25rem"
-      bg="white"
+      bg={useColorModeValue("white", "gray.700")}
       textAlign="center"
       borderRadius="2"
       minWidth="294px"
-      color="grat.700"
+      color="gray.700"
     >
       {children}
     </Box>