Merge pull request #599 from threshold-network/dark-mode-fixes

🌓 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,19 @@
 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 }) => {
+  const borderColor = useColorModeValue("gray.100", "gray.700")
+
   return (
     <ListItem
       display="flex"
       justifyContent="space-between"
       alignItems="center"
-      borderColor="gray.100"
+      borderColor={borderColor}
       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"
@@ -125,6 +126,7 @@ export const Step: FC<StepProps> = ({
   ...restProps
 }) => {
   const { size } = useStepsContext()
+  const activeBorderColor = useColorModeValue("brand.500", "brand.300")
 
   return (
     <StepContext.Provider
@@ -139,7 +141,7 @@ export const Step: FC<StepProps> = ({
         w="full"
         borderLeftWidth="4px"
         borderLeftStyle="solid"
-        borderColor={isActive || isComplete ? "brand.500" : "gray.300"}
+        borderColor={isActive || isComplete ? activeBorderColor : "gray.300"}
         {...restProps}
       >
         {children}
@@ -153,11 +155,12 @@ export const StepIndicator: FC<ComponentProps<typeof LabelSm>> = ({
   ...restProps
 }) => {
   const { size } = useStepContext()
+  const textColor = useColorModeValue("brand.500", "brand.300")
 
   const Label = stepSizeMap[size].label.component
 
   return (
-    <Label color="brand.500" {...restProps}>
+    <Label color={textColor} {...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 = {
@@ -12,10 +17,12 @@ export const TransactionDetailsItem: FC<TransactionDetailsItemProps> = ({
   value,
   children,
 }) => {
+  const valueTextColor = useColorModeValue("gray.700", "gray.300")
+
   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={valueTextColor}>{value}</BodySm> : children}
     </ListItem>
   )
 }
@@ -29,10 +36,12 @@ type TransactionDetailsAmountItemProps = Omit<
 export const TransactionDetailsAmountItem: FC<
   TransactionDetailsAmountItemProps
 > = ({ label, tokenAmount, ...restProps }) => {
+  const tokenBalanceTextColor = useColorModeValue("gray.700", "gray.300")
+
   return (
     <TransactionDetailsItem label={label}>
       <Skeleton isLoaded={!!tokenAmount}>
-        <BodySm color="gray.700">
+        <BodySm color={tokenBalanceTextColor}>
           <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"
@@ -38,6 +39,8 @@ const RecentDepositItem: FC<RecentDeposit> = ({
   date,
   txHash,
 }) => {
+  const tokenBalanceTextColor = useColorModeValue("brand.500", "brand.300")
+
   return (
     <LinkBox as={OutlineListItem}>
       <LinkOverlay
@@ -63,7 +66,7 @@ const RecentDepositItem: FC<RecentDeposit> = ({
             tokenAmount={amount}
             withSymbol
             tokenSymbol="tBTC"
-            color="brand.500"
+            color={tokenBalanceTextColor}
           />
         </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"
@@ -90,6 +88,8 @@ export const DepositDetails: PageComponent = () => {
   const { mintingRequestedTxHash, mintingFinalizedTxHash } =
     useSubscribeToOptimisticMintingEvents(depositKey)
 
+  const depositStatusTextColor = useColorModeValue("brand.500", "brand.300")
+
   // Cache the location state in component state.
   const [locationStateCache] = useState<{ shouldStartFromFirstStep?: boolean }>(
     (state as { shouldStartFromFirstStep?: boolean }) || {}
@@ -208,7 +208,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={depositStatusTextColor}
+                    >
                       {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"
@@ -107,6 +111,8 @@ export const ProvideDataComponent: FC<{
   const { setDepositDataInLocalStorage } = useTBTCDepositDataFromLocalStorage()
   const depositTelemetry = useDepositTelemetry(threshold.tbtc.bitcoinNetwork)
 
+  const textColor = useColorModeValue("gray.500", "gray.300")
+
   const onSubmit = async (values: FormValues) => {
     if (account && !isSameETHAddress(values.ethAddress, account)) {
       throw new Error(
@@ -167,7 +173,7 @@ export const ProvideDataComponent: FC<{
         stepText="Step 1"
         subTitle="Generate a Deposit Address"
       />
-      <BodyMd color="gray.500" mb={12}>
+      <BodyMd color={textColor} 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,15 +1,17 @@
 import { ComponentProps, FC } from "react"
-import { BodyLg, Box } from "@threshold-network/components"
+import { BodyLg, Box, useColorModeValue } from "@threshold-network/components"
 
 export const BridgeProcessCardSubTitle: FC<
   {
     stepText: string
     subTitle?: string
   } & ComponentProps<typeof BodyLg>
 > = ({ stepText, subTitle, children, ...restProps }) => {
+  const mainTextColor = useColorModeValue("brand.500", "brand.300")
+
   return (
     <BodyLg mb={4} {...restProps}>
-      <Box as="span" fontWeight="bold" color="brand.500">
+      <Box as="span" fontWeight="bold" color={mainTextColor}>
         {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 {
@@ -18,6 +18,10 @@ export const BridgeProcessEmptyState: FC<{
 }> = ({ title, bridgeProcess = "mint" }) => {
   const [tvlInUSD, fetchTvl, tvl] = useFetchTvl()
   const [deposits] = useFetchRecentDeposits(3)
+  const protocolHistoryBackgroundColor = useColorModeValue(
+    "linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 117.78%)",
+    "linear-gradient(360deg, #333A47 0%, rgba(255, 255, 255, 0) 117.78%)"
+  )
 
   useEffect(() => {
     fetchTvl()
@@ -40,8 +44,7 @@ export const BridgeProcessEmptyState: FC<{
           width: "100%",
           height: "100px",
           opacity: "0.9",
-          background:
-            "linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 117.78%)",
+          background: protocolHistoryBackgroundColor,
         }}
       />
       <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,
@@ -38,6 +39,8 @@ export const BridgeProcessStep: FC<BridgeProcessStepProps> = ({
   icon,
   children,
 }) => {
+  const titleTextColor = useColorModeValue("gray.700", "gray.300")
+
   useEffect(() => {
     if (!isCompleted) return
 
@@ -51,7 +54,7 @@ export const BridgeProcessStep: FC<BridgeProcessStepProps> = ({
   return (
     <Flex flexDirection="column" alignItems="center" height="100%">
       <BodyLg
-        color="gray.700"
+        color={titleTextColor}
         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"
@@ -117,21 +118,21 @@ export const ExplorerPage: PageComponent = () => {
         <LabelSm as="header">History</LabelSm>
         <TableContainer mt="6">
           <Table variant="simple">
-            <Thead color="gray.500">
+            <Thead>
               <Tr>
                 <Th paddingLeft={12}>
                   <LabelXs color="gray.500">
                     <TBTCText /> amount
                   </LabelXs>
                 </Th>
                 <Th>
-                  <LabelXs>Wallet Address</LabelXs>
+                  <LabelXs color="gray.500">Wallet Address</LabelXs>
                 </Th>
                 <Th>
-                  <LabelXs>TX Hash</LabelXs>
+                  <LabelXs color="gray.500">TX Hash</LabelXs>
                 </Th>
                 <Th textAlign={"right"}>
-                  <LabelXs>Timestamp</LabelXs>
+                  <LabelXs color="gray.500">Timestamp</LabelXs>
                 </Th>
               </Tr>
             </Thead>
@@ -151,11 +152,13 @@ const renderHistoryRow = (item: RecentDeposit) => (
 )
 
 const HistoryRow: FC<RecentDeposit> = ({ txHash, address, amount, date }) => {
+  const oddRowBackgroundColor = useColorModeValue("gray.50", "gray.700")
+
   return (
     <LinkBox
       as={Tr}
       key={`latest-mints-${txHash}`}
-      _odd={{ backgroundColor: "gray.50" }}
+      _odd={{ backgroundColor: oddRowBackgroundColor }}
       sx={{ td: { borderBottom: "none" } }}
       transform="scale(1)"
     >
@@ -211,16 +214,19 @@ const SimpleMetricBox: FC<{ value: string; label: string }> = ({
 }
 
 const MetricBox: FC = ({ children }) => {
+  const borderColor = useColorModeValue("gray.100", "gray.500")
+  const backgroundColor = useColorModeValue("white", "gray.700")
+
   return (
     <Box
       border="1px solid"
-      borderColor="gray.100"
+      borderColor={borderColor}
       p="3.25rem"
-      bg="white"
+      bg={backgroundColor}
       textAlign="center"
       borderRadius="2"
       minWidth="294px"
-      color="grat.700"
+      color="gray.700"
     >
       {children}
     </Box>