Merge pull request #328 from ClimateMind/main

Update Production

app.json

@@ -5,7 +5,7 @@
     "slug": "climate-mind",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./src/assets/icon.png",
+    "icon": "./src/assets/app-icon.png",
     "userInterfaceStyle": "dark",
     "splash": {
       "image": "./src/assets/SplashScreen.png",

src/screens/UserAAuthorizedScreens/ClimateDetailsScreen/ClimateDetailsScreen.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { ClimateFeedStackParams } from 'src/navigation/Stacks/ClimateFeedStack';
 import ActionCard from './ActionCard';
 import DetailsSourcesTab from 'src/components/DetailsSourcesTabs';
 
-import { capitalizeFirstLetter } from 'src/utils';
+import { capitalizeFirstLetter, openUrl } from 'src/utils';
 import Screen from 'src/components/Screen/Screen';
 import Section from 'src/components/Screen/Section';
 import Content from 'src/components/Screen/Content';
@@ -18,7 +18,6 @@ type Props = NativeStackScreenProps<ClimateFeedStackParams, 'ClimateDetailsScree
 function ClimateDetailsScreen({ navigation, route }: Props) {
   const climateEffect = route.params.climateEffect;
   const [selectedTab, setSelectedTab] = useState(0);
-
   return (
     <Screen style={{ backgroundColor: 'white' }}>
       <Section>
@@ -35,7 +34,9 @@ function ClimateDetailsScreen({ navigation, route }: Props) {
             {climateEffect.effectSolutions.map(solution => <View style={{ marginVertical: 20 }} key={solution.solutionTitle}><ActionCard solution={solution} /></View>)}
           </View>}
 
-          {selectedTab === 1 && climateEffect.effectSources.map(source => <View key={source} style={styles.links}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></View>)}
+          {selectedTab === 1 && climateEffect.effectSources.map(source => <View key={source} style={styles.links}>
+            <Pressable onPress={() => openUrl(source)}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></Pressable>
+          </View>)}
         </Content>
       </Section>
     </Screen>
@@ -60,10 +61,11 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   links: {
-    padding: 10,
+    alignSelf: 'flex-start',
   },
   link: {
     paddingHorizontal: 20,
+    marginTop: 20,
     textDecorationLine: 'underline',
     lineHeight: 20,
   },

src/screens/UserAAuthorizedScreens/ClimateFeedScreen/ActionCardHeader.tsx

@@ -29,18 +29,18 @@ function ActionCardHeader({ effectSolution, color = '#FDED6D' }: Props) {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    paddingVertical: 20,
+    width: '100%',
   },
   imageContainer: {
-    width: 60,
-    height: 50,
+    width: '20%',
     justifyContent: 'center',
     alignItems: 'center',
   },
   textContainer: {
     justifyContent: 'center',
-    width: '90%',
+    width: '80%',
     gap: -5,
+    paddingVertical: 10,
   },
   title: {
     width: '90%',

src/screens/UserAAuthorizedScreens/ConversationsScreen/ActionDetailsModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Image, Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 
-import { capitalizeFirstLetter } from 'src/utils';
+import { capitalizeFirstLetter, openUrl } from 'src/utils';
 import Colors from 'src/assets/colors';
 import ClimateEffect2 from 'src/types/ClimateEffect2';
 import ClimateEffect3 from 'src/types/ClimateEffect3';
@@ -57,7 +57,9 @@ function ActionDetailsModal({ open, action, onClose }: Props) {
             <CmTypography variant='body' style={styles.text}>{actionDetails.longDescription}</CmTypography>
           </View>}
 
-          {selectedTab === 1 && actionDetails.effectSources.map(source => <View key={source} style={styles.links}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></View>)}
+          {selectedTab === 1 && actionDetails.effectSources.map(source => <View key={source} style={styles.links}>
+            <Pressable onPress={() => openUrl(source)}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></Pressable>
+          </View>)}
 
         </ScrollView>
       </View>
@@ -90,10 +92,11 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   links: {
-    padding: 10,
+    alignSelf: 'flex-start',
   },
   link: {
     paddingHorizontal: 20,
+    marginTop: 20,
     textDecorationLine: 'underline',
     lineHeight: 20,
   },

src/screens/UserAAuthorizedScreens/ConversationsScreen/ConversationCard.tsx

@@ -81,13 +81,13 @@ function ConversationCard({ conversation, onDelete }: Props) {
       <Card style={[{ padding: 15 }, { backgroundColor: conversationState === 5 ? '#BDFADC' : 'white' }]}>
 
         <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <CmTypography variant='caption'>{headerText[conversationState]}</CmTypography>
+          <CmTypography variant='caption' style={{ flexShrink: 1 }}>{headerText[conversationState]}</CmTypography>
           {expanded && <Pressable onPress={copyLink}><Text>COPY LINK</Text></Pressable>}
           {!expanded &&  conversationState > 0 && conversationState < 5 && <NotifyIcon />}
         </View>
 
         <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: expanded ? 20 : 0 }}>
-          <CmTypography variant='h3' style={{ marginBottom: 5 }}>{conversation.userB.name}</CmTypography>
+          <CmTypography variant='h3' style={{ marginBottom: 5, textAlign: 'left' }}>{conversation.userB.name}</CmTypography>
           {expanded && <Pressable>
             {/* <MaterialIcons name="edit" size={24} color="black" style={{ marginHorizontal: 10 }} /> */}
           </Pressable>}

src/screens/UserAAuthorizedScreens/ConversationsScreen/ConversationsScreen.tsx

@@ -54,7 +54,9 @@ function ConversationsScreen() {
                 share it, so they can take the quiz, discover your shared values, and
                 pick topics to talk about.
               </CmTypography>
-
+              <CmTypography variant="caption" style={{ textAlign: 'center' }}>
+                We will send you an email when they agree to share their results with you!
+              </CmTypography>
               <CmTypography variant='label' style={styles.label}>Name of recipient</CmTypography>
               <TextInput
                 placeholder='Try "Peter Smith" or "Mom"'
@@ -64,6 +66,7 @@ function ConversationsScreen() {
                 style={styles.input}
                 value={recipient}
                 placeholderTextColor={'#88999C'}
+                maxLength={20}
               />
               <SimpleWhiteTextButton style={styles.createLinkButton} disabled={recipient === ''} text='CREATE LINK' onPress={showModal} />
             </KeyboardAvoidingView>

src/screens/UserAAuthorizedScreens/ConversationsScreen/SolutionDetailsModal.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Image, Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 
+import { openUrl } from 'src/utils';
 import Colors from 'src/assets/colors';
 import useApiClient from 'src/hooks/useApiClient';
 import Solution3 from 'src/types/Solution3';
@@ -56,7 +57,10 @@ function SolutionDetailsModal({ open, solution, onClose }: Props) {
           <DetailsSourcesTab onTabChanged={(tab) => setSelectedTab(tab)} />
 
           {selectedTab === 0 && <View><CmTypography variant='body' style={styles.text}>{solutionDetails.longDescription}</CmTypography></View>}
-          {selectedTab === 1 && solutionDetails.solutionSources.map(source => <View key={source} style={styles.links}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></View>)}
+
+          {selectedTab === 1 && solutionDetails.solutionSources.map(source => <View key={source} style={styles.links}>
+            <Pressable onPress={() => openUrl(source)}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></Pressable>
+          </View>)}
         </ScrollView>
       </View>
     </Modal>
@@ -87,10 +91,11 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   links: {
-    padding: 10,
+    alignSelf: 'flex-start',
   },
   link: {
     paddingHorizontal: 20,
+    marginTop: 20,
     textDecorationLine: 'underline',
     lineHeight: 20,
   },

src/screens/UserAAuthorizedScreens/MythDetailsScreen/MythDetailsScreen.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { MythsFeedStackParams } from 'src/navigation/Stacks/MythsFeedStack';
 
+import { openUrl } from 'src/utils';
 import Screen from 'src/components/Screen/Screen';
 import Section from 'src/components/Screen/Section';
 import Content from 'src/components/Screen/Content';
@@ -32,8 +33,11 @@ function MythDetailsScreen({ navigation, route }: Props) {
             <DetailsSourcesTab detailsTabName='Flawed Logic' onTabChanged={(tab) => setSelectedTab(tab)} />
           </View>
 
-          {selectedTab === 0 && <CmTypography variant='caption' style={styles.description}>{myth.faultyLogicDescription}</CmTypography>}
-          {selectedTab === 1 && myth.mythSources.map(source => <CmTypography variant='label' key={source} style={styles.link}>{source}</CmTypography>)}
+          {selectedTab === 0 && <CmTypography variant='body' style={styles.description}>{myth.faultyLogicDescription}</CmTypography>}
+
+          {selectedTab === 1 && myth.mythSources.map(source => <View key={source} style={styles.links}>
+            <Pressable onPress={() => openUrl(source)}><CmTypography variant='label' key={source} style={styles.link}>{source}</CmTypography></Pressable>
+          </View>)}
         </Content>
       </Section>
     </Screen>
@@ -48,7 +52,12 @@ const styles = StyleSheet.create({
     letterSpacing: 1,
     lineHeight: 20,
   },
+  links: {
+    alignSelf: 'flex-start',
+  },
   link: {
+    paddingHorizontal: 20,
+    marginTop: 20,
     textDecorationLine: 'underline',
     lineHeight: 20,
   },

src/screens/UserAAuthorizedScreens/SolutionsDetailsScreen/SolutionDetailsScreen.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { SolutionsFeedStackParams } from 'src/navigation/Stacks/SolutionsFeedStack';
 
+import { openUrl } from 'src/utils';
 import useApiClient from 'src/hooks/useApiClient';
 import Myth from 'src/types/Myth';
 import Screen from 'src/components/Screen/Screen';
@@ -54,7 +55,9 @@ function SolutionDetailsScreen({ navigation, route }: Props) {
             {myths?.map(myth => <View style={{ margin: 10 }} key={myth.iri}><MythsFeedCard myth={myth} onLearnMore={null} /></View>)}
             </View>}
 
-          {selectedTab === 1 && solution.solutionSources.map(source => <View key={source} style={{ padding: 10 }}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></View>)}
+          {selectedTab === 1 && solution.solutionSources.map(source => <View key={source} style={styles.links}>
+            <Pressable onPress={() => openUrl(source)}><CmTypography variant='label' style={styles.link}>{source}</CmTypography></Pressable>
+          </View>)}
         </Content>
       </Section>
     </Screen>
@@ -72,8 +75,12 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     padding: 20,
   },
+  links: {
+    alignSelf: 'flex-start',
+  },
   link: {
     paddingHorizontal: 20,
+    marginTop: 20,
     textDecorationLine: 'underline',
     lineHeight: 20,
   },