fix: apply requested ui changes

GoodDollar · Sep 11, 2023 · 50f49e8 · 50f49e8
1 parent 9a29fe6
commit 50f49e8
Showing 1 changed file with 39 additions and 9 deletions.
diff --git a/packages/good-design/src/core/web3/GoodIdModal.tsx b/packages/good-design/src/core/web3/GoodIdModal.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Box, Button, Text } from "native-base";
+import { Box, Button, Text, useBreakpointValue } from "native-base";
 import { SupportedChains, useFVLink } from "@gooddollar/web3sdk-v2";
 import { InterfaceBoxProps } from "native-base/lib/typescript/components/primitives/Box";
 
@@ -41,27 +41,57 @@ export const GoodIdDetails = ({ account }: { account: string }) => {
     console.log("Fv is Deleted -->", { deleted });
   }, [fvId, deleteFvId]);
 
+  const direction = useBreakpointValue({
+    base: "column",
+    lg: "row"
+  });
+
+  const fontSize = useBreakpointValue({
+    base: "2xs",
+    lg: "sm"
+  });
+
+  const margin = useBreakpointValue({
+    base: "1",
+    lg: "0"
+  });
+
+  const titleStyles = useBreakpointValue({
+    base: { fontSize: "l", mb: "4" },
+    lg: { fontSize: "xl", mb: "6" }
+  });
+
   return (
-    <CentreBox backgroundColor="white" mt="100" borderColor="borderGrey" borderWidth="1" padding="10" borderRadius="20">
-      <Title mb="2" color="main" fontSize="xl" lineHeight="36px">
+    <CentreBox backgroundColor="white" mt="50" padding="10" borderRadius="20">
+      <Title {...titleStyles} color="main" lineHeight="36px">
         {`GoodID`}
       </Title>
-      <Text>Wallet: {account}</Text>
-      <CentreBox flexDir="row" justifyContent="flex-start">
-        <Text>Face-Id:</Text>
+      <CentreBox flexDir={direction} justifyContent="flex-start">
+        <Text textAlign="center" mb="2" fontSize={fontSize}>
+          Wallet: {account}
+        </Text>
+      </CentreBox>
+      <CentreBox flexDir={direction} justifyContent="flex-start">
+        <Text fontSize={fontSize}>Face-Id:</Text>
         {!fvId ? (
           <Web3ActionButton
-            marginLeft="4"
+            ml="4"
+            mt={margin}
+            padding="0"
             text="Show my FaceId"
             web3Action={retreiveFaceId}
             variant="outlined"
+            innerText={{ fontSize: 14 }}
+            innerIndicatorText={{ color: "goodBlack.100" }}
             supportedChains={[SupportedChains.FUSE, SupportedChains.CELO]}
           />
         ) : (
           <CentreBox flexDir="row">
-            <Text px="2">{fvId}</Text>
+            <Text px="2" fontSize={fontSize}>
+              {fvId}
+            </Text>
             <Button onPress={deleteFaceId} padding="0">
-              <Text fontWeight="bold" fontSize="24">
+              <Text fontWeight="bold" fontSize={fontSize}>
                 X
               </Text>
             </Button>