Convert inline styles to Chakra theming (#219)

onflow · Aug 1, 2024 · 0956294 · 0956294
1 parent 350c68d
commit 0956294
Show file tree

Hide file tree

Showing 22 changed files with 941 additions and 133 deletions.
diff --git a/components/AboutCard.tsx b/components/AboutCard.tsx
@@ -13,22 +13,18 @@ export default function AboutCard({
   description,
 }: AboutCardProps) {
   return (
-    <Flex gap={6} maxW="22rem" alignItems="center">
+    <Flex gap={4} maxW="22rem" alignItems="center">
       <Image
         as={NextImage}
         src={image as any}
-        alt="Coinbase Wallet"
-        boxSize="3.5rem"
+        alt={title}
+        boxSize="3rem"
         borderRadius="xl"
       />
 
       <Flex direction="column" textAlign="left" gap={1}>
-        <Text fontSize="sm" as="b">
-          {title}
-        </Text>
-        <Text fontSize="sm" color="gray.500">
-          {description}
-        </Text>
+        <Text textStyle="body2Bold">{title}</Text>
+        <Text textStyle="body2">{description}</Text>
       </Flex>
     </Flex>
   )

diff --git a/components/GetWalletCard.tsx b/components/GetWalletCard.tsx
@@ -54,9 +54,8 @@ export default function GetWalletCard({ wallet, onGetWallet }: Props) {
         </Stack>
 
         <HybridButton
-          variant="outline"
+          variant="secondary"
           size="sm"
-          colorScheme="blue"
           ml="auto"
           alignSelf="center"
           borderRadius="full"

diff --git a/components/Icons/BackIcon.tsx b/components/Icons/BackIcon.tsx
@@ -0,0 +1,7 @@
+import { createIcon } from '@chakra-ui/react'
+
+export default createIcon({
+  displayName: 'BackIcon',
+  viewBox: '0 0 11 18',
+  d: 'M0.99707 9.1543C0.99707 9.58496 1.15527 9.94531 1.51562 10.2969L8.16016 16.8096C8.43262 17.0732 8.74902 17.2051 9.13574 17.2051C9.90918 17.2051 10.5508 16.5811 10.5508 15.8076C10.5508 15.4121 10.3838 15.0605 10.0938 14.7705L4.30176 9.14551L10.0938 3.5293C10.3838 3.24805 10.5508 2.8877 10.5508 2.50098C10.5508 1.73633 9.90918 1.10352 9.13574 1.10352C8.74902 1.10352 8.43262 1.23535 8.16016 1.49902L1.51562 8.01172C1.15527 8.35449 1.00586 8.71484 0.99707 9.1543Z',
+})
diff --git a/components/Icons/CloseIcon.tsx b/components/Icons/CloseIcon.tsx
@@ -0,0 +1,7 @@
+import { createIcon } from '@chakra-ui/react'
+
+export default createIcon({
+  displayName: 'CloseIcon',
+  d: 'M1.70711 0.292893C1.31658 -0.097631 0.683417 -0.097631 0.292893 0.292893C-0.097631 0.683417 -0.097631 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.097631 8.68342 -0.097631 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.097631 8.68342 -0.097631 8.29289 0.292893L5 3.58579L1.70711 0.292893Z',
+  viewBox: '0 0 10 10',
+})
diff --git a/components/ServiceList.tsx b/components/ServiceList.tsx
@@ -19,7 +19,7 @@ export default function ServiceList({
   const { isLastUsed } = useWalletHistory()
 
   // Get the last used service, installed services, and recommended services
-  const { lastUsedWallet, installedWallets, recommendedWallets } = useMemo(
+  const categorizedWallets = useMemo(
     () =>
       wallets?.reduce(
         (acc, wallet) => {
@@ -38,11 +38,16 @@ export default function ServiceList({
           lastUsedWallet: null as Wallet | null,
           installedWallets: [] as Wallet[],
           recommendedWallets: [] as Wallet[],
-        }
+        },
       ),
-    [wallets, isLastUsed]
+    [wallets, isLastUsed],
   )
 
+  if (!categorizedWallets) return null
+
+  const { lastUsedWallet, installedWallets, recommendedWallets } =
+    categorizedWallets
+
   return (
     <Stack spacing={4}>
       {lastUsedWallet && (

diff --git a/components/ViewHeader.tsx b/components/ViewHeader.tsx
@@ -1,7 +1,15 @@
-import { CloseIcon } from '@chakra-ui/icons'
-import { Flex, IconButton, Text } from '@chakra-ui/react'
+import {
+  Flex,
+  Heading,
+  Icon,
+  IconButton,
+  Text,
+  useStyles,
+} from '@chakra-ui/react'
 import { ComponentProps } from 'react'
 import { IoChevronBack } from 'react-icons/io5'
+import CloseIcon from './Icons/CloseIcon'
+import BackIcon from './Icons/BackIcon'
 
 type HeaderProps = {
   title?: string
@@ -19,51 +27,42 @@ export default function ViewHeader({
   onBack,
 }: HeaderProps) {
   return (
-    <Flex
-      alignItems="center"
-      justifyContent="space-between"
-      px={6}
-      pt={4}
-      pb={6}
-    >
+    <Flex alignItems="center" justifyContent="space-between" px={5} py={4}>
       {!titleOnly && (
         <Flex flexGrow={1} flexBasis={0} justifyContent="flex-start">
           {onBack && (
             <IconButton
               onClick={onBack}
-              icon={<IoChevronBack />}
+              icon={<BackIcon h="1.125rem" pr="0.15rem" />}
               aria-label="Close Modal"
               borderRadius="full"
               variant="ghost"
-              size="sm"
-              color="blue.500"
-              fontWeight="bold"
-              fontSize="1.5rem"
+              isRound={true}
+              boxSize="1.75rem"
+              minW="0"
             ></IconButton>
           )}
         </Flex>
       )}
 
-      <Text
-        fontSize="xl"
-        fontWeight="bold"
-        textAlign={'center'}
-        {...titleProps}
-      >
-        {title}
-      </Text>
+      <Flex direction="column" justifyContent="center" h="1.75rem">
+        <Heading textAlign={'center'} {...titleProps}>
+          {title}
+        </Heading>
+      </Flex>
 
       {!titleOnly && (
         <Flex flexGrow={1} flexBasis={0} justifyContent="flex-end">
           {onClose && (
             <IconButton
               onClick={onClose}
-              icon={<CloseIcon />}
+              variant="secondary"
+              icon={<CloseIcon h="0.625rem" />}
               aria-label="Close Modal"
-              borderRadius="full"
-              bg="gray.100"
-              color="black"
-              size="sm"
+              isRound={true}
+              boxSize="1.75rem"
+              minW="0"
+              color="rgba(0, 0, 0, 0.6)"
             ></IconButton>
           )}
         </Flex>

diff --git a/components/WalletTypeCard.tsx b/components/WalletTypeCard.tsx
@@ -52,7 +52,7 @@ export default function WalletTypeCard({
     >
       <SimpleGrid
         columns={2}
-        w="sm"
+        w="xs"
         gap={4}
         templateColumns={'auto 1fr'}
         templateRows={'auto 1fr'}
@@ -62,23 +62,22 @@ export default function WalletTypeCard({
           as={isDataURL(icon) ? 'img' : NextImage}
           src={icon}
           alt={title}
-          boxSize="5rem"
+          boxSize="4.5rem"
           borderRadius="xl"
           my="auto"
         />
         <Stack pt={1}>
-          <Heading size="sm">{title}</Heading>
-          <Text color="gray.500">{description}</Text>
+          <Text textStyle="body1Bold">{title}</Text>
+          <Text textStyle="body2">{description}</Text>
         </Stack>
 
+        {/* Placeholder for grid */}
         <Box></Box>
 
         <HybridButton
+          variant="primary"
           size="sm"
-          colorScheme="blue"
           borderRadius="full"
-          fontWeight="bold"
-          fontSize="sm"
           mr="auto"
           {...buttonProps}
         >

diff --git a/components/views/AboutWallets.tsx b/components/views/AboutWallets.tsx
@@ -18,11 +18,9 @@ export default function AboutWallets({ onGetWallet }: AboutWalletsProps) {
       overflow="auto"
       flexGrow={1}
       pb={8}
-      px={6}
+      px={5}
     >
-      <Heading textAlign="center" size="md" display={['none', null, 'block']}>
-        What is a Wallet?
-      </Heading>
+      <Heading display={['none', null, 'block']}>What is a Wallet?</Heading>
 
       <Stack spacing={8} my="auto">
         <AboutCard
@@ -39,18 +37,18 @@ export default function AboutWallets({ onGetWallet }: AboutWalletsProps) {
 
       <Stack spacing={4}>
         <Button
-          colorScheme="blue"
+          variant="primary"
           borderRadius="full"
           size="sm"
           onClick={onGetWallet}
         >
           Get a Wallet
         </Button>
         <HybridButton
-          href={LEARN_MORE_URL}
-          variant="link"
-          colorScheme="blue"
+          variant="ghost"
           size="sm"
+          href={LEARN_MORE_URL}
+          colorScheme="primary"
         >
           Learn More
         </HybridButton>

diff --git a/components/views/ConnectWallet.tsx b/components/views/ConnectWallet.tsx
@@ -28,7 +28,7 @@ export default function ConnectWallet({
         fcl.WalletUtils.redirect(service)
       }
     },
-    [walletConnectUri, onConnectQRCode]
+    [walletConnectUri, onConnectQRCode],
   )
 
   const getServiceInfo = (service: Service) => {
@@ -65,7 +65,7 @@ export default function ConnectWallet({
   }
 
   return (
-    <Stack flexGrow={1} alignItems="center" spacing={4} px={6} pb={6}>
+    <Stack flexGrow={1} alignItems="center" spacing={4} px={5} pb={5}>
       {wallet.services.map((service, i) => {
         const { title, description, buttonText, icon } = getServiceInfo(service)
         return (

diff --git a/components/views/ExploreWallets.tsx b/components/views/ExploreWallets.tsx
@@ -1,6 +1,7 @@
-import { Container, Stack, Text } from '@chakra-ui/react'
+import { Stack, Text } from '@chakra-ui/react'
 import GetWalletList from '../GetWalletList'
 import { Wallet } from '../../data/wallets'
+import { useIsCollapsed } from '../../hooks/useIsCollapsed'
 
 interface ExploreWalletsProps {
   onGetWallet: (wallet: Wallet) => void
@@ -9,18 +10,27 @@ interface ExploreWalletsProps {
 export default function ExploreWallets({ onGetWallet }: ExploreWalletsProps) {
   return (
     <Stack spacing={0} flexGrow={1} overflow="hidden">
-      <Stack spacing={8} px={8} pb={6} flexGrow={1} overflow="scroll">
+      <Stack px={5} pb={5} flexGrow={1} overflow="scroll">
         <GetWalletList onGetWallet={onGetWallet} />
       </Stack>
-      <Container textAlign="center" p={8} maxW="xs">
-        <Text fontSize="md" fontWeight="bold" mb={1}>
-          Not what you're looking for?
+      <Stack
+        px={5}
+        py={6}
+        maxW="xs"
+        spacing={2}
+        justifyContent="center"
+        mx="auto"
+        textAlign="center"
+      >
+        <Text textStyle="body1Bold">Not what you're looking for?</Text>
+        <Text display={['inline', null, 'none']} textStyle="body2">
+          Return to the main screen to select a different wallet provider
         </Text>
-        <Text fontSize="sm" color="gray.500">
+        <Text display={['none', null, 'inline']} textStyle="body2">
           Select a wallet on the left to get started with a different wallet
           provider.
         </Text>
-      </Container>
+      </Stack>
     </Stack>
   )
 }
diff --git a/components/views/GetWallet.tsx b/components/views/GetWallet.tsx
@@ -15,7 +15,7 @@ export default function GetWallet({ wallet, onGetQRCode }: GetWalletProps) {
     wallet.installLink?.[browserInfo.id] || wallet.installLink?.browser
 
   return (
-    <Stack flexGrow={1} alignItems="center" spacing={4} px={6} pb={6}>
+    <Stack flexGrow={1} alignItems="center" spacing={4} px={5} pb={5}>
       {browserInstallLink && (
         <WalletTypeCard
           icon={browserInfo.icon}

diff --git a/components/views/ScanInstall.tsx b/components/views/ScanInstall.tsx
@@ -26,7 +26,7 @@ export default function ScanInstall({ onContinue, wallet }: ScanInstallProps) {
       </Box>
 
       <Button
-        colorScheme="blue"
+        variant="primary"
         size="sm"
         mt="auto"
         mb={4}

diff --git a/components/views/WalletSelection.tsx b/components/views/WalletSelection.tsx
@@ -1,4 +1,12 @@
-import { Button, Divider, HStack, Stack, Text } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  HStack,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 import ServiceList from '../ServiceList'
 import { useWallets } from '../../hooks/useWallets'
 import { isGreaterThanOrEqualToVersion } from '../../helpers/version'
@@ -22,14 +30,14 @@ export default function WalletSelection({
   const { appVersion } = useConfig()
   const isFeaturesSupported = isGreaterThanOrEqualToVersion(
     appVersion,
-    SUPPORTED_VERSIONS.SUGGESTED_FEATURES
+    SUPPORTED_VERSIONS.SUGGESTED_FEATURES,
   )
 
   const isCollapsed = useIsCollapsed()
 
   return (
     <Stack spacing={0} flexGrow={1} overflow="hidden">
-      <Stack overflow="scroll" px={8} pb={6} flexGrow={1}>
+      <Stack overflow="scroll" px={5} pb={5} flexGrow={1}>
         {/* TODO: replace this in future PR with Filter Bar */}
         {/*isFeaturesSupported && <Features />*/}
         <ServiceList
@@ -42,19 +50,11 @@ export default function WalletSelection({
       {isCollapsed && (
         <>
           <Divider color="gray.300" />
-          <HStack
-            justifyContent="space-between"
-            alignItems="center"
-            padding={8}
-          >
-            <Text fontSize="sm" color="gray.500">
-              Don't have a wallet?
-            </Text>
+          <HStack justifyContent="space-between" alignItems="center" p={5}>
+            <Text fontSize="sm">Don't have a wallet?</Text>
 
             <Button onClick={onSwitchToLearnMore} variant="link" padding={0}>
-              <Text fontSize="sm" color="blue.500">
-                Learn More
-              </Text>
+              Learn More
             </Button>
           </HStack>
         </>