fixed icon alignment on ViewCollective page

GoodDollar · Dec 13, 2023 · b17bb8c · b17bb8c
1 parent 5ee37d5
commit b17bb8c
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 150 deletions.
diff --git a/packages/app/src/components/RowItem.tsx b/packages/app/src/components/RowItem.tsx
@@ -34,6 +34,7 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.white,
     flex: 1,
     flexDirection: 'row',
+    alignItems: 'center',
   },
   rowIcon: {
     height: 28,

diff --git a/packages/app/src/components/TransactionList.tsx b/packages/app/src/components/TransactionList.tsx
@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginVertical: 8,
     backgroundColor: Colors.white,
+    alignItems: 'center',
   },
   bar: {
     width: 6,

diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
@@ -257,152 +257,147 @@ function ViewCollective({
   }
 
   return (
-    <View style={{ gap: 24 }}>
+    <>
       <Image source={{ uri: imageUrl }} style={styles.image} />
-      <View style={[styles.container]}>
-        <Text style={styles.title}> {title}</Text>
-        <Text style={styles.description}>{description}</Text>
-        <View style={styles.icons}>
-          <Link href={'/'}>
-            <Image source={{ uri: WebIconUri }} style={styles.rowIcon} />
-          </Link>
-
-          <Link href={'#'}>
-            <Image source={{ uri: TwitterIconUri }} style={styles.rowIcon} />
-          </Link>
-
-          <Link href={'#'}>
-            <Image source={{ uri: InstragramIconUri }} style={styles.rowIcon} />
-          </Link>
-
-          <Link href={'#'}>
-            <Image source={{ uri: AtIconUri }} style={styles.rowIcon} />
-          </Link>
-
-          <Link href={'#'}>
-            <Image source={{ uri: LastRowIconUri }} style={styles.rowIcon} />
-          </Link>
-        </View>
-        <View style={styles.collectiveInformation}>
-          <Image source={{ uri: InfoIcon }} style={styles.infoIcon} />
-          <Text style={styles.informationLabel}>Stewards get G$ 800 each time they log a tree's status.</Text>
-        </View>
+      <View style={{ gap: 24 }}>
+        <View style={[styles.container]}>
+          <Text style={styles.title}> {title}</Text>
+          <Text style={styles.description}>{description}</Text>
+          <View style={styles.icons}>
+            <Link href={'/'}>
+              <Image source={{ uri: WebIconUri }} style={styles.rowIcon} />
+            </Link>
+            <Link href={'#'}>
+              <Image source={{ uri: TwitterIconUri }} style={styles.rowIcon} />
+            </Link>
+            <Link href={'#'}>
+              <Image source={{ uri: InstragramIconUri }} style={styles.rowIcon} />
+            </Link>
+            <Link href={'#'}>
+              <Image source={{ uri: AtIconUri }} style={styles.rowIcon} />
+            </Link>
+            <Link href={'#'}>
+              <Image source={{ uri: LastRowIconUri }} style={styles.rowIcon} />
+            </Link>
+          </View>
+          <View style={styles.collectiveInformation}>
+            <Image source={{ uri: InfoIcon }} style={styles.infoIcon} />
+            <Text style={styles.informationLabel}>Stewards get G$ 800 each time they log a tree's status.</Text>
+          </View>
 
-        <View style={styles.rowContainer}>
-          <RowItem imageUrl={CalendarIcon} rowInfo="Creation Date" rowData={formatTime(creationDate as any)} />
-          <RowItem
-            imageUrl={StewardGreenIcon}
-            rowInfo="Stewards Paid"
-            rowData={stewardsPaid?.length ? stewardsPaid : 0}
-            currency="G$"
-            balance={stewardsPaid?.length ? 0.00018672442844237 * stewardsPaid : 0}
-          />
-          <RowItem
-            imageUrl={GreenListIcon}
-            rowInfo="# of Payments Made"
-            rowData={paymentsMade?.length ? paymentsMade : 0}
-            currency=""
-          />
-          <RowItem
-            imageUrl={ReceiveLightIcon}
-            rowInfo="Total Donations Received"
-            rowData={donationsReceived?.length ? donationsReceived : 0}
-            currency="G$"
-            balance={donationsReceived?.length ? 0.00018672442844237 * donationsReceived : 0}
-          />
-          <RowItem
-            imageUrl={SendIcon}
-            rowInfo="Total Paid Out"
-            rowData={totalPaidOut?.length ? totalPaidOut : 0}
-            currency="G$"
-            balance={totalPaidOut?.length ? 0.00018672442844237 * totalPaidOut : 0}
-          />
-          <RowItem
-            imageUrl={SquaresIcon}
-            rowInfo="Current Pool"
-            rowData={currentPool?.length ? currentPool : 0}
-            currency="G$"
-            balance={currentPool?.length ? 0.00018672442844237 * currentPool : 0}
-          />
-          In this code, we're checking if each of the values (donationsReceived, totalPaidOut, and currentPool) is
-          truthy (not null or undefined) before rendering the corresponding section. If the value is truthy, it will use
-          the actual value; otherwise, it will use 0 as the default value.
-        </View>
+          <View style={styles.rowContainer}>
+            <RowItem imageUrl={CalendarIcon} rowInfo="Creation Date" rowData={formatTime(creationDate as any)} />
+            <RowItem
+              imageUrl={StewardGreenIcon}
+              rowInfo="Stewards Paid"
+              rowData={stewardsPaid?.length ? stewardsPaid : 0}
+              currency="G$"
+              balance={stewardsPaid?.length ? 0.00018672442844237 * stewardsPaid : 0}
+            />
+            <RowItem
+              imageUrl={GreenListIcon}
+              rowInfo="# of Payments Made"
+              rowData={paymentsMade?.length ? paymentsMade : 0}
+              currency=""
+            />
+            <RowItem
+              imageUrl={ReceiveLightIcon}
+              rowInfo="Total Donations Received"
+              rowData={donationsReceived?.length ? donationsReceived : 0}
+              currency="G$"
+              balance={donationsReceived?.length ? 0.00018672442844237 * donationsReceived : 0}
+            />
+            <RowItem
+              imageUrl={SendIcon}
+              rowInfo="Total Paid Out"
+              rowData={totalPaidOut?.length ? totalPaidOut : 0}
+              currency="G$"
+              balance={totalPaidOut?.length ? 0.00018672442844237 * totalPaidOut : 0}
+            />
+            <RowItem
+              imageUrl={SquaresIcon}
+              rowInfo="Current Pool"
+              rowData={currentPool?.length ? currentPool : 0}
+              currency="G$"
+              balance={currentPool?.length ? 0.00018672442844237 * currentPool : 0}
+            />
+          </View>
 
-        {isDonating ? (
-          <View style={{ gap: 24 }}>
-            <Image source={{ uri: SupportImage }} style={styles.supportImg} />
-            <Text style={styles.supportText}>You Support this GoodCollective!!</Text>
+          {isDonating ? (
+            <View style={{ gap: 24 }}>
+              <Image source={{ uri: SupportImage }} style={styles.supportImg} />
+              <Text style={styles.supportText}>You Support this GoodCollective!!</Text>
 
+              <View style={{ gap: 16 }}>
+                <RoundedButton
+                  title="Stop your donation"
+                  backgroundColor={Colors.orange[100]}
+                  color={Colors.orange[200]}
+                  fontSize={18}
+                  seeType={false}
+                  onPress={() => {
+                    setStopDonationModal(true);
+                    console.log(stopDonationModal);
+                  }}
+                />
+                {renderDonorsButton}
+              </View>
+            </View>
+          ) : (
             <View style={{ gap: 16 }}>
               <RoundedButton
-                title="Stop your donation"
-                backgroundColor={Colors.orange[100]}
-                color={Colors.orange[200]}
+                title="Donate"
+                backgroundColor={Colors.green[100]}
+                color={Colors.green[200]}
                 fontSize={18}
                 seeType={false}
                 onPress={() => {
-                  setStopDonationModal(true);
-                  console.log(stopDonationModal);
+                  navigate(`/donate/${route}`);
                 }}
               />
               {renderDonorsButton}
             </View>
-          </View>
-        ) : (
-          <View style={{ gap: 16 }}>
-            <RoundedButton
-              title="Donate"
-              backgroundColor={Colors.green[100]}
-              color={Colors.green[200]}
-              fontSize={18}
-              seeType={false}
-              onPress={() => {
-                navigate(`/donate/${route}`);
-              }}
-            />
-            {renderDonorsButton}
-          </View>
-        )}
-      </View>
+          )}
+        </View>
 
-      <View style={[styles.container]}>
-        <StewardList
-          stewardData={{
-            username: 'username123',
-            isVerified: true,
-            actions: 730,
-          }}
-          listType="steward"
-        />
-        <RoundedButton
-          title="See all stewards"
-          backgroundColor={Colors.purple[100]}
-          color={Colors.purple[200]}
-          fontSize={18}
-          seeType={true}
-          onPress={() => navigate('/collective/123/stewards')}
-        />
-      </View>
-      <View style={styles.container}>
-        <TransactionList
-          username="username123"
-          currency="G$"
-          amount={2400}
-          transactionId="18347cg786hfc6f29837r6hd23"
-        />
-        <RoundedButton
-          title="See all Transactions"
-          backgroundColor={Colors.purple[100]}
-          color={Colors.purple[200]}
-          fontSize={18}
-          seeType={true}
-          onPress={() => navigate('/profile/abc123/activity')}
-        />
+        <View style={[styles.container]}>
+          <StewardList
+            stewardData={{
+              username: 'username123',
+              isVerified: true,
+              actions: 730,
+            }}
+            listType="steward"
+          />
+          <RoundedButton
+            title="See all stewards"
+            backgroundColor={Colors.purple[100]}
+            color={Colors.purple[200]}
+            fontSize={18}
+            seeType={true}
+            onPress={() => navigate('/collective/123/stewards')}
+          />
+        </View>
+        <View style={styles.container}>
+          <TransactionList
+            username="username123"
+            currency="G$"
+            amount={2400}
+            transactionId="18347cg786hfc6f29837r6hd23"
+          />
+          <RoundedButton
+            title="See all Transactions"
+            backgroundColor={Colors.purple[100]}
+            color={Colors.purple[200]}
+            fontSize={18}
+            seeType={true}
+            onPress={() => navigate('/profile/abc123/activity')}
+          />
+        </View>
+        <StopDonationModal openModal={stopDonationModal} setOpenModal={setStopDonationModal} />
+        <ThankYouModal openModal={donateModal} setOpenModal={setDonateModal} />
       </View>
-      <StopDonationModal openModal={stopDonationModal} setOpenModal={setStopDonationModal} />
-      <ThankYouModal openModal={donateModal} setOpenModal={setDonateModal} />
-    </View>
+    </>
   );
 }
 

diff --git a/packages/app/src/pages/DonatePage.tsx b/packages/app/src/pages/DonatePage.tsx
@@ -2,12 +2,17 @@ import Layout from '../components/Layout';
 import DonateComponent from '../components/DonateComponent';
 import React from 'react';
 import Breadcrumb from '../components/Breadcrumb';
+import { useMediaQuery } from 'native-base';
 
 function DonatePage() {
   const collectiveId = window.location.pathname.slice('/donate/'.length);
+  const [isDesktopResolution] = useMediaQuery({
+    minWidth: 612,
+  });
+
   return (
     <Layout>
-      <Breadcrumb previousPage={`collective / ${collectiveId}`} currentPage={`donate`} />
+      {isDesktopResolution && <Breadcrumb previousPage={`collective / ${collectiveId}`} currentPage={`donate`} />}
       <DonateComponent
         walletConected={true}
         insufficientLiquidity={false}

diff --git a/packages/app/src/pages/ViewCollectivePage.tsx b/packages/app/src/pages/ViewCollectivePage.tsx
@@ -6,29 +6,35 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import React from 'react';
 import Breadcrumb from '../components/Breadcrumb';
+import { useMediaQuery } from 'native-base';
 
 function ViewCollectivePage() {
   const { request } = useCollectiveSpecificData(window.location.pathname.slice('/collective/'.length));
   const [collectiveData, setCollectiveData] = useState<any>(undefined);
   const [isLoading, setIsLoading] = useState(true);
+  const [isDesktopResolution] = useMediaQuery({
+    minWidth: 612,
+  });
 
   useEffect(() => {
-    console.log('Request: ' + JSON.stringify(request, null, 2));
     if (!request || request.length === 0) {
       setIsLoading(false); // No requests, no loading
       return;
     }
     axios
       .get(`https://gateway.pinata.cloud/ipfs/${request[0].ipfs}`)
-      .then((response) => ({
-        name: response.data?.name,
-        description: response.data?.description,
-        email: response.data?.email,
-        twitter: response.data?.twitter,
-        id: request[0].id,
-        time: request[0].timestamp,
-        contributions: request[0]?.contributions,
-      }))
+      .then((response) => {
+        console.log(JSON.stringify(response.data, null, 2));
+        return {
+          name: response.data?.name,
+          description: response.data?.description,
+          email: response.data?.email,
+          twitter: response.data?.twitter,
+          id: request[0].id,
+          time: request[0].timestamp,
+          contributions: request[0]?.contributions,
+        };
+      })
       .then((data) => {
         console.log(JSON.stringify(data, null, 2));
         setCollectiveData(data);
@@ -43,7 +49,7 @@ function ViewCollectivePage() {
 
   return (
     <Layout>
-      <Breadcrumb currentPage={`collective / ${collectiveData?.id ?? ''}`} />
+      {isDesktopResolution && <Breadcrumb currentPage={`collective / ${collectiveData?.id ?? ''}`} />}
       <>
         {isLoading ? (
           <p>Loading...</p>

diff --git a/packages/app/src/pages/ViewDonorsPage.tsx b/packages/app/src/pages/ViewDonorsPage.tsx
@@ -1,8 +1,6 @@
-import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { StyleSheet, Text, View, Image } from 'react-native';
 import oceanUri from '../@constants/SafariImagePlaceholder';
 import Layout from '../components/Layout';
-import StewardList from '../components/StewardsList';
-import ImpactButton from '../components/ImpactButton';
 import DonorsList from '../components/DonorsList';
 import { InterSemiBold } from '../utils/webFonts';
 import { Colors } from '../utils/colors';

diff --git a/packages/app/web/main.tsx b/packages/app/web/main.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from '../src/App';
 // import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 // import { celo } from 'wagmi/chains';
@@ -43,9 +43,10 @@ import App from '../src/App';
 //   webSocketPublicClient,
 // });
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );