Merge pull request #20 from threshold-network/ui/provide-data-step

UI: Provide Data step Ref: #2 Depends on: #12 This pull request introduces redesigned Provide Data minting flow step
threshold-network · Feb 14, 2024 · 83f0c00 · 83f0c00
2 parents 9e20ebf + 5e281ad
commit 83f0c00
Show file tree

Hide file tree

Showing 20 changed files with 309 additions and 463 deletions.
diff --git a/src/components/Forms/FormikInput.tsx b/src/components/Forms/FormikInput.tsx
@@ -4,9 +4,8 @@ import {
   FormControlProps,
   FormLabel,
   Input,
-  Stack,
-  useColorModeValue,
   BodySm,
+  HStack,
 } from "@threshold-network/components"
 import { useField } from "formik"
 import TooltipIcon from "../TooltipIcon"
@@ -35,46 +34,53 @@ export const FormikInput: FC<
   const isError = Boolean(meta.touched && meta.error)
 
   const secondaryLabelColor = "gray.500"
-  const labelColor = useColorModeValue("gray.700", "gray.300")
 
   return (
     <FormControl isInvalid={isError} {...restProps}>
-      <Stack
-        direction="row"
-        mb={2}
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Stack direction="row" alignItems="center">
-          <FormLabel m={0} htmlFor={name} color={labelColor}>
-            {label}{" "}
-            {tooltip && (
-              <TooltipIcon
-                // Unset color to get the same color as label.
-                color="unset"
-                label={tooltip}
-                width="20px"
-                height="20px"
-                alignSelf="center"
-                m="auto"
-                verticalAlign="text-top"
-              />
-            )}
-          </FormLabel>
-        </Stack>
-        {secondaryLabel && (
-          // @ts-ignore - htmlFor is not a valid prop for BodySm but we're setting to label here
-          <BodySm as="label" htmlFor={name} color={secondaryLabelColor} m={0}>
-            {secondaryLabel}
-          </BodySm>
-        )}
-      </Stack>
+      <HStack as={FormLabel} mr={0} mb={2} spacing={2} htmlFor={name}>
+        <BodySm
+          as="span"
+          lineHeight={1.5}
+          fontWeight="medium"
+          color="hsl(182, 100%, 70%)"
+        >
+          {label}
+        </BodySm>
+        {tooltip && <TooltipIcon color="#888" label={tooltip} />}
+      </HStack>
+      {secondaryLabel && (
+        // @ts-ignore - htmlFor is not a valid prop for BodySm but we're setting to label here
+        <BodySm as="label" htmlFor={name} color={secondaryLabelColor} m={0}>
+          {secondaryLabel}
+        </BodySm>
+      )}
       <Input
+        variant="unstyled"
+        px={6}
+        py={4}
+        rounded="2xl"
+        border="1px solid"
+        borderColor="hsl(0, 0%, 20%)"
+        lineHeight={1.5}
         id={name}
         isInvalid={isError}
         errorBorderColor="red.300"
         placeholder={placeholder}
-        _placeholder={{ color: useColorModeValue("gray.400", "gray.500") }}
+        _placeholder={{ color: "hsla(0, 0%, 100%, 30%)" }}
+        _readOnly={{
+          bg: "hsla(0, 0%, 20%, 30%)",
+          borderColor: "hsl(0, 0%, 20%)",
+        }}
+        _focusVisible={{
+          borderColor: "hsl(182, 100%, 70%)", // TODO: replace with theme tokens
+          boxShadow: "0 0 0 3px hsla(182, 100%, 70%, 20%)",
+        }}
+        _invalid={{
+          borderColor: "hsla(0, 100%, 70%)",
+          _focusVisible: {
+            boxShadow: "0 0 0 3px hsla(0, 100%, 70%, 20%)",
+          },
+        }}
         {...field}
         value={meta.value}
       />

diff --git a/src/components/Modal/TbtcRecoveryFileModal/index.tsx b/src/components/Modal/TbtcRecoveryFileModal/index.tsx
diff --git a/src/components/TooltipIcon.tsx b/src/components/TooltipIcon.tsx
@@ -1,47 +1,39 @@
-import { IoInformationCircleOutline } from "react-icons/all"
 import {
   Icon,
   IconProps,
   Popover,
-  useColorModeValue,
   PopoverTrigger,
   PopoverContent,
   PopoverArrow,
   PopoverBody,
   BodySm,
+  Flex,
 } from "@threshold-network/components"
 import { FC } from "react"
+import { HiInformationCircle as InformationIcon } from "react-icons/hi"
 
 const TooltipIcon: FC<{ label: string | JSX.Element } & IconProps> = ({
   label,
   css,
   ...iconProps
 }) => {
-  const bgColor = useColorModeValue("white", "gray.300")
-  const textColor = useColorModeValue("gray.700", "gray.900")
-  const iconColor = useColorModeValue("gray.500", "gray.300")
-  const boxShadow = useColorModeValue("md", "none")
-
   return (
     <Popover trigger="hover" placement="top">
       <PopoverTrigger>
-        <span>
-          <Icon
-            color={iconColor}
-            as={IoInformationCircleOutline}
-            {...iconProps}
-          />
-        </span>
+        <Flex display="inline-flex" as="span">
+          <Icon as={InformationIcon} w={4} h={4} {...iconProps} />
+        </Flex>
       </PopoverTrigger>
       <PopoverContent
-        bg={bgColor}
+        bg="brand.100"
         border="none"
-        color={textColor}
-        borderRadius="0.25rem"
-        boxShadow={boxShadow}
+        color="black"
+        rounded="xl"
+        w="full"
+        maxW="352px"
       >
-        <PopoverArrow bg={bgColor} />
-        <BodySm as={PopoverBody} color={textColor}>
+        <PopoverArrow bg="brand.100" />
+        <BodySm as={PopoverBody} p={4} color="black">
           {label}
         </BodySm>
       </PopoverContent>

diff --git a/src/enums/modal.ts b/src/enums/modal.ts
@@ -3,7 +3,6 @@ export enum ModalType {
   TransactionIsPending = "TRANSACTION_IS_PENDING",
   TransactionIsWaitingForConfirmation = "TRANSACTION_IS_WAITING_FOR_CONFIRMATION",
   TransactionFailed = "TRANSACTION_FAILED",
-  TbtcRecoveryJson = "TBTC_RECOVERY_JSON",
   TbtcMintingConfirmation = "TBTC_MINTING_CONFIRMATION",
   NewTBTCApp = "NEW_TBTC_APP",
   GenerateNewDepositAddress = "TBTC_GENERATE_NEW_DEPOSIT_ADDRESS",

diff --git a/src/pages/tBTC/Bridge/DepositDetails.tsx b/src/pages/tBTC/Bridge/DepositDetails.tsx
@@ -48,7 +48,6 @@ import {
   TBTCTokenContractLink,
 } from "../../../components/tBTC"
 import { Step1, Step2, Step3, Step4 } from "./components/DepositDetailsStep"
-import { BridgeProcessCardTitle } from "./components/BridgeProcessCardTitle"
 import {
   BridgeProcessResource,
   BridgeProcessResourceProps,
@@ -205,7 +204,6 @@ export const DepositDetails: PageComponent = () => {
               spacing={4}
             >
               <Flex flexDirection="column" w={{ base: "100%", xl: "65%" }}>
-                <BridgeProcessCardTitle />
                 <Flex mb="4" alignItems="center" textStyle="bodyLg">
                   <BodyLg>
                     <Box

diff --git a/src/pages/tBTC/Bridge/Minting/InitiateMinting.tsx b/src/pages/tBTC/Bridge/Minting/InitiateMinting.tsx
@@ -5,12 +5,11 @@ import withOnlyConnectedWallet from "../../../../components/withOnlyConnectedWal
 import { ModalType } from "../../../../enums"
 import { useModal } from "../../../../hooks/useModal"
 import { MintingStep } from "../../../../types/tbtc"
-import { BridgeProcessCardSubTitle } from "../components/BridgeProcessCardSubTitle"
 import { BridgeProcessCardTitle } from "../components/BridgeProcessCardTitle"
 
 const InitiateMintingComponent: FC<{
   utxo: BitcoinUtxo
-  onPreviousStepClick: (previosuStep: MintingStep) => void
+  onPreviousStepClick: (previousStep?: MintingStep) => void
 }> = ({ utxo, onPreviousStepClick }) => {
   const { openModal } = useModal()
 
@@ -21,12 +20,9 @@ const InitiateMintingComponent: FC<{
   return (
     <Box mx={{ base: 0, lg: 10 }}>
       <BridgeProcessCardTitle
-        previousStep={MintingStep.ProvideData}
         onPreviousStepClick={onPreviousStepClick}
-      />
-      <BridgeProcessCardSubTitle
-        stepText="Step 3"
-        subTitle="Initiate minting"
+        badgeText="3/3"
+        title="Initiate minting"
       />
       <BodyMd color="gray.500" mb={6}>
         This step requires you to sign a transaction in your Ethereum wallet.