Merge branch 'kris/show-more-link' of github.com:GoodDollar/GoodColle…

…ctive into kris/show-more-link
GoodDollar · Feb 7, 2024 · 72dcd5d · 72dcd5d
2 parents 9c8133f + 3510c24
commit 72dcd5d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 61 deletions.
diff --git a/packages/app/src/components/Layout/Layout.tsx b/packages/app/src/components/Layout/Layout.tsx
@@ -27,11 +27,19 @@ function Layout({ children, breadcrumbPath }: LayoutProps) {
   const { navigate } = useCrossNavigate();
   const onClickImpactButton = () => navigate('/profile/' + (address ?? ''));
 
+  const isCollectivePage = location.pathname.includes('collective');
+
   const bodyStyles = {
     ...styles.body,
     backgroundColor: isDesktopResolution ? Colors.brown[200] : Colors.gray[400],
   };
 
+  const scrollViewStyles = [
+    styles.scrollView,
+    { maxHeight: scrollViewHeight },
+    { paddingBottom: isCollectivePage ? 61 : 0 },
+  ];
+
   return (
     <View style={bodyStyles}>
       <Header />
@@ -46,9 +54,9 @@ function Layout({ children, breadcrumbPath }: LayoutProps) {
           </DesktopPageContentContainer>
         </View>
       ) : (
-        <ScrollView style={[styles.scrollView, { maxHeight: scrollViewHeight }]}>{children}</ScrollView>
+        <ScrollView style={scrollViewStyles}>{children}</ScrollView>
       )}
-      {location.pathname.includes('collective') && !isDesktopResolution && (
+      {isCollectivePage && !isDesktopResolution && (
         <ImpactButton title="SEE YOUR IMPACT" onClick={onClickImpactButton} />
       )}
     </View>

diff --git a/packages/app/src/components/RoundedButton.tsx b/packages/app/src/components/RoundedButton.tsx
@@ -1,7 +1,6 @@
 import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
 import { InterSemiBold } from '../utils/webFonts';
-
-const ForwardIconUri = `data:image/svg+xml;utf8,<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.792893C0.683417 0.402369 1.31658 0.402369 1.70711 0.792893L7.70711 6.79289C8.09763 7.18342 8.09763 7.81658 7.70711 8.20711L1.70711 14.2071C1.31658 14.5976 0.683417 14.5976 0.292893 14.2071C-0.0976311 13.8166 -0.0976311 13.1834 0.292893 12.7929L5.58579 7.5L0.292893 2.20711C-0.0976311 1.81658 -0.0976311 1.18342 0.292893 0.792893Z" fill="#5B7AC6"/> </svg> `;
+import { ForwardIcon } from '../assets';
 
 interface RoundedButtonProps {
   title: string;
@@ -24,64 +23,26 @@ function RoundedButton({
   maxWidth,
   disabled,
 }: RoundedButtonProps) {
+  const dynamicTextStyle = {
+    color: color,
+    fontSize: fontSize,
+  };
+
   if (!seeType) {
     return (
       <TouchableOpacity
         disabled={disabled}
-        style={[
-          styles.button,
-          {
-            backgroundColor: backgroundColor,
-            maxWidth: maxWidth ?? 'auto',
-          },
-        ]}
+        style={[styles.button, { backgroundColor, maxWidth: maxWidth ?? 'auto' }]}
         onPress={onPress}>
-        <Text
-          style={{
-            color: color,
-            fontSize: fontSize,
-            ...InterSemiBold,
-            textAlign: 'center',
-            width: '100%',
-          }}>
-          {title}
-        </Text>
+        <Text style={[styles.nonSeeTypeText, dynamicTextStyle]}>{title}</Text>
       </TouchableOpacity>
     );
   }
   return (
-    <TouchableOpacity
-      disabled={disabled}
-      style={[styles.button, { backgroundColor: backgroundColor }]}
-      onPress={onPress}>
-      <View
-        style={{
-          flexDirection: 'row',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}>
-        <Text
-          style={{
-            color: color,
-            fontSize: fontSize,
-            ...InterSemiBold,
-            textAlign: 'right',
-            marginTop: 0,
-            marginBottom: 0,
-          }}>
-          {title}
-        </Text>
-        <Image
-          source={{
-            uri: ForwardIconUri,
-          }}
-          style={{
-            width: 8,
-            height: 14,
-            marginTop: 6,
-            marginLeft: '35%',
-          }}
-        />
+    <TouchableOpacity disabled={disabled} style={[styles.button, { backgroundColor }]} onPress={onPress}>
+      <View style={styles.seeTypeRow}>
+        <Text style={[styles.seeTypeText, dynamicTextStyle]}>{title}</Text>
+        <Image source={ForwardIcon} style={styles.image} />
       </View>
     </TouchableOpacity>
   );
@@ -98,5 +59,27 @@ const styles = StyleSheet.create({
     alignContent: 'center',
     borderWidth: 0,
   },
+  image: {
+    width: 8,
+    height: 14,
+    marginTop: 6,
+    marginLeft: '35%',
+  },
+  seeTypeText: {
+    ...InterSemiBold,
+    textAlign: 'right',
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  nonSeeTypeText: {
+    ...InterSemiBold,
+    textAlign: 'center',
+    width: '100%',
+  },
+  seeTypeRow: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'space-between',
+  },
 });
 export default RoundedButton;
diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
@@ -374,14 +374,15 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
         </View>
         <View style={styles.container}>
           <TransactionList collective={collective.address as `0x${string}`} />
-          <RoundedButton
-            title="See all Transactions"
-            backgroundColor={Colors.purple[100]}
-            color={Colors.purple[200]}
-            fontSize={18}
-            seeType={true}
-            onPress={() => navigate('/profile/abc123/activity')}
-          />
+          <Link href={`https://explorer.celo.org/mainnet/address/${collective.address}`} isExternal>
+            <RoundedButton
+              title="See all transactions"
+              backgroundColor={Colors.purple[100]}
+              color={Colors.purple[200]}
+              fontSize={18}
+              seeType={true}
+            />
+          </Link>
         </View>
         <ErrorModal
           openModal={!!errorMessage}