fix: modified bitcoin contract request ui (width, size, weight)

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-expiration-date.tsx

@@ -1,6 +1,5 @@
 import { Flex } from '@stacks/ui';
 
-import { SpaceBetween } from '@app/components/layout/space-between';
 import { Text } from '@app/components/typography';
 
 interface BitcoinContractExpirationDateProps {
@@ -10,15 +9,14 @@ export function BitcoinContractExpirationDate({
   expirationDate,
 }: BitcoinContractExpirationDateProps) {
   return (
-    <Flex>
-      <SpaceBetween spacing="base">
-        <Text fontSize={2} fontWeight="500">
-          Expiration Date
-        </Text>
-        <Text fontSize={1} textAlign="right">
-          {expirationDate}
-        </Text>
-      </SpaceBetween>
+    <Flex p="loose"
+    spacing="loose"
+    width="100%"
+    justifyContent="space-between">
+      <Text fontSize={2} fontWeight="bold">
+        Expiration Date
+      </Text>
+      <Text fontSize={2}>{expirationDate}</Text>
     </Flex>
   );
 }

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx

@@ -28,7 +28,7 @@ export function BitcoinContractLockAmount({
   const { onCopy, hasCopied } = useClipboard(hoverLabel ?? '');
 
   return (
-    <Flag align="middle" img={image || <BtcIcon />} my="loose" spacing="base">
+    <Flag img={image || <BtcIcon />} align="middle" width="100%">
       <SpaceBetween>
         <Text fontSize={2} fontWeight="500">
           {title ? title : 'BTC'}

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-offer-input.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from '@stacks/ui';
+import { Stack, Text, transition } from '@stacks/ui';
 import { truncateMiddle } from '@stacks/ui-utils';
 
 import { createMoneyFromDecimal } from '@shared/models/money.model';
@@ -27,22 +27,18 @@ export function BitcoinContractOfferInput({
   const formattedFiatValue = i18nFormatCurrency(fiatValue);
 
   return (
-    <Box
-      background="white"
-      borderBottomLeftRadius={'16px'}
-      borderBottomRightRadius={'16px'}
-      borderTopLeftRadius={'16px'}
-      borderTopRightRadius={'16px'}
+    <Stack
       p="loose"
+      spacing="loose"
+      width="100%"
     >
-      <Text fontWeight={500}>Amount</Text>
+      <Text fontWeight="bold">Amount</Text>
       <BitcoinContractLockAmount
         hoverLabel={addressNativeSegwit}
         subtitle={truncateMiddle(addressNativeSegwit)}
         subValue={`${formattedFiatValue} USD`}
         value={formattedBitcoinValue}
       />
-      <hr />
-    </Box>
+    </Stack>
   );
 }

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx

@@ -26,7 +26,7 @@ export function BitcoinContractRequestActions({
       borderTop="1px solid #DCDDE2"
       bottom="0px"
       height="96px"
-      position="absolute"
+      position="fixed"
       px="loose"
       width="100%"
       zIndex={999}

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-header.tsx

@@ -18,7 +18,7 @@ function BitcoinContractRequestHeaderBase({
 
   return (
     <Flex flexDirection="column" my="loose" width="100%">
-      <Title fontSize={3} fontWeight={500} mb="base">
+      <Title fontSize={4} fontWeight="bold" mb="base">
         Lock Bitcoin
       </Title>
       {caption && (
@@ -27,7 +27,7 @@ function BitcoinContractRequestHeaderBase({
           img={<img src={counterpartyWalletIcon} height="32px" width="32px" />}
           pl="tight"
         >
-          <Caption wordBreak="break-word">{caption}</Caption>
+          <Caption>{caption}</Caption>
         </Flag>
       )}
     </Flex>