Merge pull request #49 from GoodDollar/kris/page-padding

fixed padding on ViewCollective mobile page; fixes for Stewards list

packages/app/src/@constants/pfps.ts

@@ -9,8 +9,7 @@ import {
   IvoryBilledWoodpeckerUri,
 } from './ProfilePictures';
 
-let profilePictureArray: Array<string>;
-profilePictureArray = [
+export const profilePictureArray = [
   AfricanGreyParrotUri,
   BlackBrowedAlbatrossUri,
   CaliforniaCondorUri,
@@ -19,6 +18,9 @@ profilePictureArray = [
   GreatCurassowUri,
   HawaiianCrowUri,
   IvoryBilledWoodpeckerUri,
+  // TODO: Add the following pictures when SVG loading PR is merged
+  // Kakapo
+  // NorthernBaldIbis
+  // UltramarineLorikeet
+  // WhiteRumpedVulture
 ];
-
-export default profilePictureArray;

packages/app/src/components/CollectiveHomeCard.tsx

@@ -1,19 +1,10 @@
-import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
 import useCrossNavigate from '../routes/useCrossNavigate';
 import { Colors } from '../utils/colors';
 import { useMediaQuery } from 'native-base';
 import { useState } from 'react';
 
-export interface CollectiveHomeCardData {
-  name?: string;
-  description?: string;
-  email?: string;
-  twitter?: string;
-  id: string;
-  timestamp: number;
-}
-
 interface CollectiveHomeCardProps {
   imageUrl?: string;
   title: string;

packages/app/src/components/ImpactButton.tsx

@@ -31,9 +31,8 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.purple[200],
     color: Colors.purple[100],
     position: 'absolute',
-    bottom: 35,
+    bottom: 5,
     paddingVertical: 8,
-    gap: 8,
   },
   desktopButton: {
     position: 'relative',

packages/app/src/components/Layout.tsx

@@ -48,7 +48,6 @@ function Layout({ children }: LayoutProps) {
 const styles = StyleSheet.create({
   body: {
     flex: 1,
-    paddingBottom: 24,
   },
   scrollView: {
     flex: 1,

packages/app/src/components/RoundedButton.tsx

@@ -1,5 +1,4 @@
 import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
-// import useCrossNavigate from '../routes/useCrossNavigate';
 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> `;
@@ -10,7 +9,7 @@ interface RoundedButtonProps {
   color: string;
   fontSize: number;
   seeType: boolean;
-  onPress?: any;
+  onPress?: () => void;
   maxWidth?: number | string;
 }
 

packages/app/src/components/StewardsList/StewardListItem.tsx

@@ -0,0 +1,63 @@
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { VerifiedIconUri } from '../../@constants/ColorTypeIcons';
+import { Colors } from '../../utils/colors';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Steward } from '../../models/models';
+import { profilePictureArray } from '../../@constants/pfps';
+
+interface StewardListItemProps {
+  steward: Steward;
+  showActions: boolean;
+}
+
+export const StewardListItem = (props: StewardListItemProps) => {
+  const { showActions, steward } = props;
+
+  const randomIndex = Math.floor(Math.random() * profilePictureArray.length);
+  const profileImage = profilePictureArray[randomIndex];
+
+  return (
+    <View style={styles.row}>
+      <Image source={{ uri: profileImage }} style={styles.rowImg} />
+      <Text style={styles.title}>
+        {steward.username}{' '}
+        {steward.isVerified && <Image source={{ uri: VerifiedIconUri }} style={styles.verifiedIcon} />}
+      </Text>
+      {showActions && <Text style={styles.totalActions}>{steward.actions ?? 0} actions</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  rowImg: {
+    height: 48,
+    width: 48,
+    borderRadius: 24,
+    marginRight: 16,
+  },
+  verifiedIcon: {
+    height: 16,
+    width: 16,
+  },
+  row: {
+    width: '100%',
+    backgroundColor: Colors.white,
+    flex: 1,
+    flexDirection: 'row',
+    marginVertical: 8,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 16,
+    ...InterSemiBold,
+    width: '100%',
+    color: Colors.black,
+  },
+  totalActions: {
+    fontSize: 14,
+    ...InterRegular,
+    textAlign: 'right',
+    width: '100%',
+    color: Colors.gray[100],
+  },
+});

packages/app/src/components/StewardsList/StewardsList.tsx

@@ -0,0 +1,103 @@
+import { Image, Text, View, StyleSheet } from 'react-native';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { StewardBlueIcon, StewardGreenIcon } from '../../@constants/ColorTypeIcons';
+import { Colors } from '../../utils/colors';
+import { useMediaQuery } from 'native-base';
+import { StewardListItem } from './StewardListItem';
+import { Steward } from '../../models/models';
+
+const mockStewardData: Steward[] = [0, 1, 2, 3, 4, 5, 6].map(() => ({
+  username: 'username' + Math.floor(Math.random() * 10000),
+  isVerified: true,
+  actions: 730,
+}));
+
+interface StewardListProps {
+  listType: 'viewCollective' | 'viewStewards';
+  stewards: Steward[];
+  hideTitle?: boolean;
+}
+
+function StewardList({ listType, stewards, hideTitle }: StewardListProps) {
+  const [isDesktopResolution] = useMediaQuery({
+    minWidth: 612,
+  });
+
+  const toShow = listType === 'viewStewards' ? mockStewardData : mockStewardData.slice(0, isDesktopResolution ? 6 : 5);
+
+  return (
+    <View style={styles.stewardsHeader}>
+      {!hideTitle && (
+        <View style={[styles.row, { marginBottom: 24 }]}>
+          {listType === 'viewCollective' && <Image source={{ uri: StewardGreenIcon }} style={styles.titleIcon} />}
+          <Text style={styles.title}>Stewards{listType === 'viewCollective' ? ` (0)` : ''}</Text>
+          {listType === 'viewStewards' && <Image source={{ uri: StewardBlueIcon }} style={styles.titleIcon} />}
+        </View>
+      )}
+      <View style={styles.list}>
+        {toShow.map((steward) => (
+          <StewardListItem steward={steward} showActions={listType === 'viewStewards'} key={steward.username} />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  stewardsHeader: { flex: 1 },
+  titleIcon: {
+    height: 32,
+    width: 32,
+    marginRight: 8,
+  },
+  rowImg: {
+    height: 48,
+    width: 48,
+    borderRadius: 24,
+    marginRight: 16,
+  },
+  verifiedIcon: {
+    height: 16,
+    width: 16,
+  },
+  rowTransactionIcon: {
+    height: 32,
+    width: 32,
+  },
+  groupIcon: {
+    width: 9,
+    height: 8,
+  },
+  row: {
+    width: '100%',
+    backgroundColor: Colors.white,
+    flex: 1,
+    flexDirection: 'row',
+    marginVertical: 8,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 16,
+    ...InterSemiBold,
+    width: '100%',
+    color: Colors.black,
+  },
+  totalActions: {
+    fontSize: 14,
+    ...InterRegular,
+    textAlign: 'right',
+    width: '100%',
+    color: Colors.gray[100],
+  },
+  headerRow: {
+    ...InterRegular,
+  },
+  stewardRow: {
+    ...InterSemiBold,
+  },
+  list: {
+    maxHeight: 400,
+    overflow: 'scroll',
+  },
+});
+export default StewardList;