Update styles in AccountCard and CardTitle components

plahteenlahti · Apr 29, 2024 · 6db3e5c · 6db3e5c
1 parent e734bc1
commit 6db3e5c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 65 deletions.
diff --git a/src/components/AccountCard.tsx b/src/components/AccountCard.tsx
@@ -1,14 +1,15 @@
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { FC } from 'react'
-import { TouchableOpacity } from 'react-native'
-import styled from 'styled-components/native'
+import { Image, TouchableOpacity, View } from 'react-native'
 import { usePrefetchAccount } from '../hooks/account'
 import { RootStackParamList } from '../navigators/RootStack'
 import { Account } from '../typings/netlify.d'
-import { UsageCard } from './account/UsageCard'
 import { Card } from './Card'
 import { PlaceholderIcon } from './PlaceholderIcon'
-import { Text } from './text/Text'
+import { UsageCard } from './account/UsageCard'
+import { HStack } from './layout/HStack'
+import { Typography } from './layout/Typography'
+import { VStack } from './layout/VStack'
 
 type Props = {
   account: Account
@@ -29,20 +30,23 @@ export const AccountCard: FC<Props> = ({ account, navigation }) => {
   return (
     <TouchableOpacity onPressIn={onPressIn} onPress={navigateToAccount}>
       <Card>
-        <TypeContainer>
-          <Type>{account.type_name}</Type>
-        </TypeContainer>
-        <HContainer>
-          <VContainer>
-            <CardTitle>
+        <View className="absolute bg-gray-400 p-2 rounded-tl-lg rounded-br-lg left-0 top-0">
+          <Typography>{account.type_name}</Typography>
+        </View>
+        <HStack>
+          <VStack>
+            <HStack>
               {account?.team_logo_url ? (
-                <TeamLogo source={{ uri: account?.team_logo_url }} />
+                <Image
+                  className="h-8 w-8 mr-2"
+                  source={{ uri: account?.team_logo_url }}
+                />
               ) : (
                 <PlaceholderIcon />
               )}
 
-              <AccountName>{account.name}</AccountName>
-            </CardTitle>
+              <Typography>{account.name}</Typography>
+            </HStack>
 
             <UsageCard
               min={0}
@@ -62,53 +66,9 @@ export const AccountCard: FC<Props> = ({ account, navigation }) => {
               value={account.capabilities.sites.used}
               title="Sites"
             />
-          </VContainer>
-        </HContainer>
+          </VStack>
+        </HStack>
       </Card>
     </TouchableOpacity>
   )
 }
-
-const TeamLogo = styled.Image`
-  height: 30px;
-  width: 30px;
-  margin-right: 8px;
-`
-
-const TypeContainer = styled.View`
-  position: absolute;
-  background-color: ${({ theme }) => theme.secondaryTextColor};
-  padding: 8px 16px;
-  border-top-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  left: 0px;
-  top: 0px;
-`
-
-const HContainer = styled.View`
-  flex-direction: row;
-`
-
-const VContainer = styled.View`
-  flex: 1;
-`
-
-const Type = styled(Text)`
-  text-transform: uppercase;
-  font-size: 10px;
-  padding: 0px 5px;
-  color: ${({ theme }) => theme.primaryBackground};
-`
-
-const CardTitle = styled.View`
-  flex-direction: row;
-  align-items: center;
-  margin-top: 32px;
-  margin-bottom: 16px;
-`
-
-const AccountName = styled(Text)`
-  color: ${({ theme }) => theme.primaryTextColor};
-  font-size: 15px;
-  margin-left: 8px;
-`
diff --git a/src/components/CardTitle.tsx b/src/components/CardTitle.tsx
@@ -1,6 +1,5 @@
 import { Text, View } from 'react-native'
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
-import styled from 'styled-components/native'
 
 type Props = {
   icon: string
@@ -12,7 +11,7 @@ export const CardTitle = ({ icon, title, extra }: Props) => {
   return (
     <View className="mb-2 mt-4 px-4">
       <View className="flex-row items-center">
-        <ThemedIcon name={icon} size={12} solid />
+        <FontAwesome5 name={icon} size={12} solid />
         <Text className="text-xs text-gray-600 font-medium uppercase ml-2">
           {title}
         </Text>
@@ -22,7 +21,3 @@ export const CardTitle = ({ icon, title, extra }: Props) => {
     </View>
   )
 }
-
-const ThemedIcon = styled(FontAwesome5).attrs(({ theme }) => ({
-  color: theme.secondaryTextColor
-}))``