Repository: rubybui/mind-matter-frontend
Pull request #6: UI profile theme
Author: login: rubybui
Created: 2025-05-07T08:05:50Z | Merged: 2025-05-07T08:10:50Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced a profile screen displaying user information, streaks, assessment history, and account management actions.
  - Added a safety plan screen with crisis resources, emergency contacts, and warning signs, including direct call/text actions.
  - Added a reusable menu item component for consistent menu styling and interaction.

- **Enhancements**
  - Updated the survey list with a header and profile navigation button.
  - Improved survey question navigation with custom buttons, icons, and enhanced navigation controls.
  - Enhanced the themed button component with support for icons, multiple visual variants, and customizable styles.

- **Style**
  - Refactored question card, Likert scale, progress bar, and yes/no question components to use centralized theme-based styling for consistent appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/app/profile.tsx b/app/profile.tsx
new file mode 100644
index 0000000..37eaedc
--- /dev/null
+++ b/app/profile.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useAuth } from './context/AuthContext';
+import { theme } from './theme';
+import ThemedMenuItem from '@/components/themed/ThemedMenuItem';
+import { Ionicons } from '@expo/vector-icons';
+
+// Mock data - replace with real data later
+const MOCK_USER = {
+  name: 'Alex Johnson',
+  pronouns: 'they/them',
+  streak: 7,
+  assessments: [
+    { id: 1, date: '2024-03-15', type: 'Weekly Check-in', score: 85 },
+    { id: 2, date: '2024-03-08', type: 'Weekly Check-in', score: 78 },
+    { id: 3, date: '2024-03-01', type: 'Weekly Check-in', score: 82 },
+  ],
+  consent: true,
+};
+
+const ProfileScreen = () => {
+  const router = useRouter();
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    Alert.alert(
+      'Logout',
+      'Are you sure you want to logout?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout',
+          style: 'destructive',
+          onPress: () => logout()
+        },
+      ]
+    );
+  };
+
+  const handleLogoutAllDevices = () => {
+    Alert.alert(
+      'Logout All Devices',
+      'This will log you out of all devices. Are you sure?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout All',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement logout all devices
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleDeleteAccount = () => {
+    Alert.alert(
+      'Delete Account',
+      'This action cannot be undone. Are you sure you want to delete your account?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement account deletion
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleConsentToggle = () => {
+    Alert.alert(
+      'Update Consent',
+      MOCK_USER.consent 
+        ? 'Are you sure you want to revoke consent? This will limit some features.'
+        : 'Are you sure you want to give consent? This will enable all features.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: MOCK_USER.consent ? 'Revoke' : 'Give',
+          style: MOCK_USER.consent ? 'destructive' : 'default',
+          onPress: () => {
+            // TODO: Implement consent toggle
+          }
+        },
+      ]
+    );
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => router.replace('/survey')} style={styles.headerBackArrow}>
+          <Ionicons name="chevron-back" size={28} color="#FFF" />
+        </TouchableOpacity>
+        <View style={styles.avatarContainer}>
+          <Text style={styles.avatarText}>
+            {MOCK_USER.name.split(' ').map(n => n[0]).join('')}
+          </Text>
+        </View>
+        <Text style={styles.name}>{MOCK_USER.name}</Text>
+        <Text style={styles.pronouns}>{MOCK_USER.pronouns}</Text>
+      </View>
+
+      {/* Streak Section */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Current Streak</Text>
+        <View style={styles.streakContainer}>
+          <Text style={styles.streakNumber}>{MOCK_USER.streak}</Text>
+          <Text style={styles.streakLabel}>days</Text>
+        </View>
+      </View>
+
+      {/* Assessment History */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Recent Assessments</Text>
+        {MOCK_USER.assessments.map((assessment) => (
+          <View key={assessment.id} style={styles.assessmentItem}>
+            <View>
+              <Text style={styles.assessmentType}>{assessment.type}</Text>
+              <Text style={styles.assessmentDate}>{assessment.date}</Text>
+            </View>
+            <Text style={styles.assessmentScore}>{assessment.score}%</Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Account Management */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Account</Text>
+        <ThemedMenuItem
+          label="Crisis Plan / SOS"
+          icon="alert"
+          onPress={() => router.push('/safety-plan')}
+          showArrow
+        />
+        <ThemedMenuItem
+          label={MOCK_USER.consent ? 'Revoke Consent' : 'Give Consent'}
+          icon={MOCK_USER.consent ? 'close-circle' : 'checkmark-circle'}
+          onPress={handleConsentToggle}
+        />
+        <ThemedMenuItem
+          label="Logout All Devices"
+          icon="lock-closed"
+          onPress={handleLogoutAllDevices}
+        />
+        <ThemedMenuItem
+          label="Logout"
+          icon="log-out"
+          onPress={handleLogout}
+        />
+        <ThemedMenuItem
+          label="Delete Account"
+          icon="trash"
+          onPress={handleDeleteAccount}
+          color="error"
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  headerBackArrow: {
+    position: 'absolute',
+    top: 16,
+    left: 16,
+    zIndex: 10,
+  },
+  header: {
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: theme.colors.primary,
+    position: 'relative',
+  },
+  avatarContainer: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: theme.colors.surface,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatarText: {
+    fontSize: 36,
+    color: '#FFF',
+    fontWeight: 'bold',
+  },
+  name: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#FFF',
+    marginBottom: 4,
+  },
+  pronouns: {
+    fontSize: 16,
+    color: '#FFF',
+    opacity: 0.8,
+  },
+  section: {
+    padding: 16,
+    backgroundColor: '#FFF',
+    marginTop: 16,
+    borderRadius: 12,
+    marginHorizontal: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+  streakContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'center',
+  },
+  streakNumber: {
+    fontSize: 48,
+    fontWeight: 'bold',
+    color: theme.colors.primary,
+  },
+  streakLabel: {
+    fontSize: 18,
+    color: theme.colors.primary,
+    marginLeft: 8,
+  },
+  assessmentItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEE',
+  },
+  assessmentType: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  assessmentDate: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 2,
+  },
+  assessmentScore: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: theme.colors.primary,
+  },
+  menuButton: {
+    marginBottom: 12,
+  },
+  deleteButton: {
+    marginTop: 8,
+  },
+});
+
+export default ProfileScreen; 
\ No newline at end of file
diff --git a/app/safety-plan.tsx b/app/safety-plan.tsx
new file mode 100644
index 0000000..c8d3d19
--- /dev/null
+++ b/app/safety-plan.tsx
@@ -0,0 +1,194 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, Linking } from 'react-native';
+import { theme } from './theme';
+import ThemedButton from '@/components/themed/ThemedButton';
+
+// Mock data - replace with real data later
+const CRISIS_RESOURCES = [
+  {
+    name: 'National Suicide Prevention Lifeline',
+    phone: '988',
+    description: '24/7 support for people in suicidal crisis or emotional distress',
+  },
+  {
+    name: 'Crisis Text Line',
+    text: 'HOME to 741741',
+    description: '24/7 text support for any type of crisis',
+  },
+  {
+    name: 'SAMHSA\'s National Helpline',
+    phone: '1-800-662-4357',
+    description: '24/7 treatment referral and information',
+  },
+];
+
+const EMERGENCY_CONTACTS = [
+  {
+    name: 'Dr. Sarah Chen',
+    relationship: 'Therapist',
+    phone: '(555) 123-4567',
+  },
+  {
+    name: 'Alex Morgan',
+    relationship: 'Friend',
+    phone: '(555) 987-6543',
+  },
+];
+
+const SafetyPlanScreen = () => {
+  const handleCall = (phone: string) => {
+    Linking.openURL(`tel:${phone}`);
+  };
+
+  const handleText = (text: string) => {
+    Linking.openURL(`sms:${text}`);
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Safety Plan</Text>
+        <Text style={styles.subtitle}>Resources and contacts for when you need support</Text>
+      </View>
+
+      {/* Crisis Resources */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Crisis Resources</Text>
+        {CRISIS_RESOURCES.map((resource, index) => (
+          <View key={index} style={styles.resourceItem}>
+            <Text style={styles.resourceName}>{resource.name}</Text>
+            <Text style={styles.resourceDescription}>{resource.description}</Text>
+            {resource.phone ? (
+              <ThemedButton
+                title={`Call ${resource.phone}`}
+                onPress={() => handleCall(resource.phone)}
+                style={styles.actionButton}
+              />
+            ) : (
+              <ThemedButton
+                title={`Text ${resource.text}`}
+                onPress={() => handleText(resource.text)}
+                style={styles.actionButton}
+              />
+            )}
+          </View>
+        ))}
+      </View>
+
+      {/* Emergency Contacts */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Emergency Contacts</Text>
+        {EMERGENCY_CONTACTS.map((contact, index) => (
+          <View key={index} style={styles.contactItem}>
+            <View>
+              <Text style={styles.contactName}>{contact.name}</Text>
+              <Text style={styles.contactRelationship}>{contact.relationship}</Text>
+            </View>
+            <ThemedButton
+              title="Call"
+              onPress={() => handleCall(contact.phone)}
+              style={styles.actionButton}
+              variant="secondary"
+            />
+          </View>
+        ))}
+      </View>
+
+      {/* Warning Signs */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Warning Signs</Text>
+        <Text style={styles.warningText}>
+          If you notice these signs, reach out for help:
+        </Text>
+        <View style={styles.warningList}>
+          <Text style={styles.warningItem}>• Feeling overwhelmed or hopeless</Text>
+          <Text style={styles.warningItem}>• Changes in sleep or eating patterns</Text>
+          <Text style={styles.warningItem}>• Withdrawing from friends and activities</Text>
+          <Text style={styles.warningItem}>• Increased anxiety or agitation</Text>
+          <Text style={styles.warningItem}>• Thoughts of self-harm</Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  header: {
+    padding: 24,
+    backgroundColor: theme.colors.primary,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#FFF',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#FFF',
+    opacity: 0.8,
+  },
+  section: {
+    padding: 16,
+    backgroundColor: '#FFF',
+    marginTop: 16,
+    borderRadius: 12,
+    marginHorizontal: 16,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+  resourceItem: {
+    marginBottom: 24,
+  },
+  resourceName: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  resourceDescription: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 8,
+  },
+  contactItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEE',
+  },
+  contactName: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  contactRelationship: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 2,
+  },
+  actionButton: {
+    minWidth: 120,
+  },
+  warningText: {
+    fontSize: 16,
+    marginBottom: 12,
+  },
+  warningList: {
+    marginLeft: 8,
+  },
+  warningItem: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: '#444',
+  },
+});
+
+export default SafetyPlanScreen; 
\ No newline at end of file
diff --git a/app/survey.tsx b/app/survey.tsx
index a1c91f0..293cda5 100644
--- a/app/survey.tsx
+++ b/app/survey.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, Alert, StyleSheet } from 'react-native';
+import { View, ActivityIndicator, Alert, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 
 import SurveyList from '@/components/surverys/SurveyList';
 import { useAuth } from '@/app/context/AuthContext';
@@ -73,6 +74,16 @@ const SurveyListScreen = () => {
 
   return (
     <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Surveys</Text>
+        <TouchableOpacity 
+          style={styles.profileButton}
+          onPress={() => router.push('/profile')}
+        >
+          <Ionicons name="person-circle-outline" size={32} color={theme.colors.primary} />
+        </TouchableOpacity>
+      </View>
+
       {loading && surveys.length > 0 ? (
         <ActivityIndicator size="large" />
       ) : (
@@ -85,8 +96,25 @@ const SurveyListScreen = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     padding: 16,
+    paddingTop: 48,
     backgroundColor: theme.colors.background,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: theme.colors.text,
+  },
+  profileButton: {
+    padding: 8,
   },
 });
 
diff --git a/app/surveyquestionscreen.tsx b/app/surveyquestionscreen.tsx
index 4c54855..36739a3 100644
--- a/app/surveyquestionscreen.tsx
+++ b/app/surveyquestionscreen.tsx
@@ -1,17 +1,20 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Button, ScrollView, Alert } from 'react-native';
-import { useLocalSearchParams } from 'expo-router';
+import { View, Text, StyleSheet, Button, ScrollView, Alert, TouchableOpacity } from 'react-native';
+import { useLocalSearchParams, useRouter } from 'expo-router';
 import { config } from '@/app/config';
 import { useAuth } from '@/app/context/AuthContext';
-
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '@/app/theme';
 import LinkertScaleQuestion from '@/components/questions/LinkertScaleQuestion';
 import YesNoQuestion from '@/components/questions/YesNoQuestion';
+import ThemedButton from '@/components/themed/ThemedButton';
 
 const PAGE_SIZE = 3;
 
 const SurveyQuestionScreen: React.FC = () => {
   const { question, totalQuestions: initialTotal } = useLocalSearchParams();
   const { token } = useAuth();
+  const router = useRouter();
 
   const [questions, setQuestions] = useState<any[]>(JSON.parse(question as string));
   const [totalQuestions, setTotalQuestions] = useState(parseInt(initialTotal as string, 10));
@@ -112,16 +115,36 @@ const SurveyQuestionScreen: React.FC = () => {
 
   return (
     <ScrollView contentContainerStyle={styles.container}>
+      <TouchableOpacity onPress={() => router.replace('/survey')} style={styles.backArrow}>
+        <Ionicons name="chevron-back" size={28} color={theme.colors.primary} />
+      </TouchableOpacity>
       {currentQuestions.map(renderQuestion)}
 
       <View style={styles.buttonRow}>
         {currentIndex > 0 && (
-          <Button title="Back" onPress={handleBack} />
+          <ThemedButton 
+            title="Back" 
+            onPress={handleBack}
+            icon={<Ionicons name="chevron-back" size={20} color={theme.colors.primary} />}
+            iconPosition="left"
+            style={styles.navButton}
+            variant="transparent"
+            textColor={theme.colors.primary}
+          />
         )}
-        <Button
+        <ThemedButton
           title={currentIndex + PAGE_SIZE < totalQuestions ? 'Next' : 'Finish'}
-          onPress={handleNext}
+          onPress={
+            currentIndex + PAGE_SIZE < totalQuestions
+              ? handleNext
+              : () => router.replace('/survey')
+          }
           disabled={isLoading}
+          icon={<Ionicons name="chevron-forward" size={20} color={theme.colors.primary} />}
+          iconPosition="right"
+          variant="transparent"
+          style={styles.navButton}
+          textColor={theme.colors.primary}
         />
       </View>
     </ScrollView>
@@ -131,12 +154,23 @@ const SurveyQuestionScreen: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     padding: 16,
+    backgroundColor: theme.colors.background,
+  },
+  backArrow: {
+    marginBottom: 12,
+    marginLeft: 2,
+    marginTop: 2,
+    alignSelf: 'flex-start',
   },
   buttonRow: {
     marginTop: 24,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  navButton: {
+    paddingHorizontal: 20,
+    minWidth: 120,
+  },
 });
 
 export default SurveyQuestionScreen;
diff --git a/components/questions/BaseQuestionCard.tsx b/components/questions/BaseQuestionCard.tsx
index a112900..089a94d 100644
--- a/components/questions/BaseQuestionCard.tsx
+++ b/components/questions/BaseQuestionCard.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import ProgressBar from './ProgressBar';
+import { theme } from '../../app/theme';
 
 interface BaseQuestionCardProps {
   questionId: number;
@@ -29,26 +30,30 @@ const BaseQuestionCard: React.FC<BaseQuestionCardProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#FFF',
-    padding: 16,
-    borderRadius: 12,
-    margin: 16,
-    shadowColor: '#000',
+    backgroundColor: theme.colors.surface,
+    padding: theme.spacing.md,
+    borderRadius: theme.radius.md,
+    margin: theme.spacing.md,
+    shadowColor: theme.colors.shadow,
     shadowOpacity: 0.1,
     shadowRadius: 4,
     elevation: 3,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
   },
   questionId: {
-    fontSize: 12,
-    color: '#888',
-    marginBottom: 4,
+    fontSize: theme.font.size.sm,
+    color: theme.colors.subtext,
+    marginBottom: theme.spacing.xs,
     textAlign: 'center',
+    fontWeight: '500',
   },
   questionText: {
-    fontSize: 16,
+    fontSize: theme.font.size.base,
+    color: theme.colors.text,
     textAlign: 'center',
-    marginBottom: 12,
-    fontWeight: '500',
+    marginBottom: theme.spacing.md,
+    fontWeight: '600',
   },
 });
 
diff --git a/components/questions/LinkertScaleQuestion.tsx b/components/questions/LinkertScaleQuestion.tsx
index 9112099..c90ebbc 100644
--- a/components/questions/LinkertScaleQuestion.tsx
+++ b/components/questions/LinkertScaleQuestion.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import BaseQuestionCard from './BaseQuestionCard';
+import { theme } from '../../app/theme';
 
 interface LikertScaleQuestionData {
   question_id: number;
@@ -86,17 +87,17 @@ const styles = StyleSheet.create({
     paddingHorizontal: 2,
   },
   scaleText: {
-    fontSize: 16,
-    color: '#AAA',
+    fontSize: theme.font.size.base,
+    color: theme.colors.subtext,
   },
   scaleTextSelected: {
-    color: '#000',
+    color: theme.colors.primary,
     fontWeight: 'bold',
-    fontSize: 18,
+    fontSize: theme.font.size.md,
   },
   labelText: {
-    fontSize: 10,
-    color: '#666',
+    fontSize: theme.font.size.xs,
+    color: theme.colors.subtext,
     textAlign: 'center',
     marginTop: 4,
   },
diff --git a/components/questions/ProgressBar.tsx b/components/questions/ProgressBar.tsx
index c27c4e8..826d3be 100644
--- a/components/questions/ProgressBar.tsx
+++ b/components/questions/ProgressBar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
+import { theme } from '../../app/theme';
 
 interface ProgressBarProps {
   progress: number; // between 0 and 1
@@ -19,15 +20,15 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     height: 4,
-    borderRadius: 2,
+    borderRadius: theme.radius.sm,
     overflow: 'hidden',
-    marginBottom: 12,
+    marginBottom: theme.spacing.md,
   },
   fill: {
-    backgroundColor: '#222',
+    backgroundColor: theme.colors.primary,
   },
   remaining: {
-    backgroundColor: '#EEE',
+    backgroundColor: theme.colors.border,
   },
 });
 
diff --git a/components/questions/YesNoQuestion.tsx b/components/questions/YesNoQuestion.tsx
index 10d8f54..786a5a7 100644
--- a/components/questions/YesNoQuestion.tsx
+++ b/components/questions/YesNoQuestion.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import BaseQuestionCard from './BaseQuestionCard';
+import { theme } from '../../app/theme';
 
 interface YesNoQuestionData {
   question_id: number;
@@ -75,6 +76,7 @@ const styles = StyleSheet.create({
   optionContainer: {
     flexDirection: 'row',
     justifyContent: 'space-around',
+    marginTop: theme.spacing.sm,
   },
   optionButton: {
     padding: 10,
@@ -82,13 +84,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   optionText: {
-    fontSize: 16,
-    color: '#AAA',
+    fontSize: theme.font.size.base,
+    color: theme.colors.subtext,
   },
   optionTextSelected: {
-    color: '#000',
+    color: theme.colors.primary,
     fontWeight: 'bold',
-    fontSize: 18,
+    fontSize: theme.font.size.md,
   },
 });
 
diff --git a/components/themed/ThemedButton.tsx b/components/themed/ThemedButton.tsx
index 28fb56b..71e9214 100644
--- a/components/themed/ThemedButton.tsx
+++ b/components/themed/ThemedButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   TouchableOpacity,
   Text,
@@ -6,6 +6,7 @@ import {
   GestureResponderEvent,
   ViewStyle,
   TextStyle,
+  View,
 } from 'react-native';
 import { theme } from '@/app/theme';
 
@@ -13,16 +14,81 @@ interface Props {
   title: string;
   onPress: (event: GestureResponderEvent) => void;
   disabled?: boolean;
+  style?: ViewStyle | ViewStyle[];
+  variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'transparent';
+  textColor?: string;
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
 }
 
-const ThemedButton = ({ title, onPress, disabled = false }: Props) => {
+const ThemedButton = ({ 
+  title, 
+  onPress, 
+  disabled = false,
+  style,
+  variant = 'primary',
+  textColor,
+  icon,
+  iconPosition = 'right',
+}: Props) => {
+  const getBackgroundColor = () => {
+    switch (variant) {
+      case 'secondary':
+        return theme.colors.surface;
+      case 'destructive':
+        return theme.colors.error;
+      case 'outline':
+        return 'transparent';
+      case 'transparent':
+        return 'transparent';
+      default:
+        return theme.colors.primary;
+    }
+  };
+
+  const getTextColor = () => {
+    if (textColor) return textColor;
+    if (variant === 'outline') return theme.colors.primary;
+    return variant === 'secondary' ? theme.colors.primary : theme.colors.surface;
+  };
+
+  const getBorder = () => {
+    if (variant === 'outline') {
+      return {
+        borderWidth: 2,
+        borderColor: theme.colors.primary,
+      };
+    }
+    return {};
+  };
+
+  // For outline variant, parent should pass icon with correct color (e.g., theme.colors.primary)
+  const renderIcon = (position: 'left' | 'right') => {
+    if (!icon) return null;
+    if (iconPosition !== position) return null;
+    const marginStyle = position === 'left'
+      ? { marginRight: theme.spacing.sm }
+      : { marginLeft: theme.spacing.sm };
+    return <View style={marginStyle}>{icon}</View>;
+  };
+
   return (
     <TouchableOpacity
-      style={[styles.button, disabled && styles.disabled]}
+      style={[
+        styles.button,
+        { backgroundColor: getBackgroundColor() },
+        getBorder(),
+        disabled && styles.disabled,
+        style,
+      ]}
       onPress={onPress}
       disabled={disabled}
     >
-      <Text style={styles.buttonText}>{title}</Text>
+      <View style={styles.contentContainer}>
+        {renderIcon('left')}
+        <Text style={[styles.buttonText, { color: getTextColor() }]}>{title}</Text>
+        {renderIcon('right')}
+      </View>
     </TouchableOpacity>
   );
 };
@@ -31,11 +97,11 @@ interface Style {
   button: ViewStyle;
   disabled: ViewStyle;
   buttonText: TextStyle;
+  contentContainer: ViewStyle;
 }
 
 const styles = StyleSheet.create<Style>({
   button: {
-    backgroundColor: theme.colors.primary,
     paddingVertical: theme.spacing.md,
     borderRadius: theme.radius.lg,
     alignItems: 'center',
@@ -46,10 +112,14 @@ const styles = StyleSheet.create<Style>({
     opacity: 0.6,
   },
   buttonText: {
-    color: theme.colors.surface,
     fontSize: theme.font.size.base,
     fontWeight: theme.font.weight.semiBold as TextStyle['fontWeight'],
   },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 export default ThemedButton;
diff --git a/components/themed/ThemedMenuItem.tsx b/components/themed/ThemedMenuItem.tsx
new file mode 100644
index 0000000..ccf66bd
--- /dev/null
+++ b/components/themed/ThemedMenuItem.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '@/app/theme';
+
+interface Props {
+  label: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  onPress: () => void;
+  showArrow?: boolean;
+  color?: 'primary' | 'error';
+}
+
+const ThemedMenuItem = ({ label, icon, onPress, showArrow = false, color = 'primary' }: Props) => {
+  const iconBg = color === 'error' ? theme.colors.error : theme.colors.primary;
+  const iconColor = color === 'error' ? theme.colors.surface : theme.colors.surface;
+  const textColor = color === 'error' ? theme.colors.error : theme.colors.text;
+  return (
+    <TouchableOpacity style={styles.row} onPress={onPress}>
+      <View style={[styles.iconCircle, { backgroundColor: iconBg }]}> 
+        <Ionicons name={icon} size={24} color={iconColor} />
+      </View>
+      <Text style={[styles.label, { color: textColor }]}>{label}</Text>
+      {showArrow && (
+        <Ionicons name="chevron-forward" size={20} color={theme.colors.subtext} style={styles.arrow} />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: theme.spacing.md,
+    paddingHorizontal: theme.spacing.lg,
+    backgroundColor: theme.colors.surface,
+    borderRadius: theme.radius.lg,
+    marginBottom: theme.spacing.md,
+    shadowColor: theme.colors.shadow,
+    shadowOpacity: 0.04,
+    shadowRadius: 2,
+    shadowOffset: { width: 0, height: 1 },
+  },
+  iconCircle: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: theme.spacing.md,
+  },
+  label: {
+    fontSize: theme.font.size.md,
+    fontWeight: '600' as TextStyle['fontWeight'],
+    flex: 1,
+  },
+  arrow: {
+    marginLeft: theme.spacing.md,
+  },
+});
+
+export default ThemedMenuItem; 
\ No newline at end of file


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 7**

<details>
<summary>🧹 Nitpick comments (12)</summary><blockquote>

<details>
<summary>app/survey.tsx (1)</summary><blockquote>

`106-106`: **Consider using theme value for paddingTop.**

For consistency with the theming approach, consider using a theme spacing value (perhaps theme.spacing.xl or a new value) instead of the hardcoded 48.

```diff
-    paddingTop: 48,
+    paddingTop: theme.spacing.xl + theme.spacing.md, // Or create a dedicated value in theme
```

</blockquote></details>
<details>
<summary>components/themed/ThemedMenuItem.tsx (1)</summary><blockquote>

`31-61`: **Consider platform-specific shadow implementations for Android.**

The shadow styling is defined correctly for iOS, but might not appear on Android without elevation.

```diff
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: theme.spacing.md,
    paddingHorizontal: theme.spacing.lg,
    backgroundColor: theme.colors.surface,
    borderRadius: theme.radius.lg,
    marginBottom: theme.spacing.md,
    shadowColor: theme.colors.shadow,
    shadowOpacity: 0.04,
    shadowRadius: 2,
    shadowOffset: { width: 0, height: 1 },
+   // For Android shadow
+   elevation: 2,
  },
```

</blockquote></details>
<details>
<summary>app/surveyquestionscreen.tsx (1)</summary><blockquote>

`2-7`: **Unused Button import and missing types.**

The Button import appears to be unused now that ThemedButton is implemented. Also, consider adding the correct return type for the useRouter hook.

```diff
-import { View, Text, StyleSheet, Button, ScrollView, Alert, TouchableOpacity } from 'react-native';
-import { useLocalSearchParams, useRouter } from 'expo-router';
+import { View, Text, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native';
+import { useLocalSearchParams, useRouter, Router } from 'expo-router';
```

</blockquote></details>
<details>
<summary>app/safety-plan.tsx (4)</summary><blockquote>

`7-36`: **Well-structured mock data for future implementation.**

Clear organization of mock data with appropriate fields. Consider adding typing for these data structures.

```diff
// Mock data - replace with real data later
+interface CrisisResource {
+  name: string;
+  description: string;
+  phone?: string;
+  text?: string;
+}
+
+interface EmergencyContact {
+  name: string;
+  relationship: string;
+  phone: string;
+}
+
-const CRISIS_RESOURCES = [
+const CRISIS_RESOURCES: CrisisResource[] = [
  {
    name: 'National Suicide Prevention Lifeline',
    phone: '988',
    description: '24/7 support for people in suicidal crisis or emotional distress',
  },
  // ...
];

-const EMERGENCY_CONTACTS = [
+const EMERGENCY_CONTACTS: EmergencyContact[] = [
  {
    name: 'Dr. Sarah Chen',
    relationship: 'Therapist',
    phone: '(555) 123-4567',
  },
  // ...
];
```

---

`120-134`: **Use theme colors instead of hardcoded values.**

Replace hardcoded colors with theme colors for better consistency and maintainability.

```diff
  header: {
    padding: 24,
    backgroundColor: theme.colors.primary,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
-   color: '#FFF',
+   color: theme.colors.surface,
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
-   color: '#FFF',
+   color: theme.colors.surface,
    opacity: 0.8,
  },
```

---

`147-176`: **Use theme colors for contact item styling.**

Replace hardcoded colors with theme colors for better consistency.

```diff
  contactItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
-   borderBottomColor: '#EEE',
+   borderBottomColor: theme.colors.border,
  },
  contactName: {
    fontSize: 16,
    fontWeight: '500',
  },
  contactRelationship: {
    fontSize: 14,
-   color: '#666',
+   color: theme.colors.placeholder,
    marginTop: 2,
  },
```

---

`183-191`: **Use theme colors for warning text styling.**

Replace hardcoded colors with theme colors for consistent styling.

```diff
  warningItem: {
    fontSize: 16,
    marginBottom: 8,
-   color: '#444',
+   color: theme.colors.text,
  },
```

</blockquote></details>
<details>
<summary>app/profile.tsx (3)</summary><blockquote>

`9-20`: **Add TypeScript interface for the user data structure.**

Define a proper TypeScript interface for the user data structure to improve type safety and code documentation.

```diff
// Mock data - replace with real data later
+interface Assessment {
+  id: number;
+  date: string;
+  type: string;
+  score: number;
+}
+
+interface User {
+  name: string;
+  pronouns: string;
+  streak: number;
+  assessments: Assessment[];
+  consent: boolean;
+}
+
-const MOCK_USER = {
+const MOCK_USER: User = {
  name: 'Alex Johnson',
  pronouns: 'they/them',
  streak: 7,
  assessments: [
    { id: 1, date: '2024-03-15', type: 'Weekly Check-in', score: 85 },
    { id: 2, date: '2024-03-08', type: 'Weekly Check-in', score: 78 },
    { id: 3, date: '2024-03-01', type: 'Weekly Check-in', score: 82 },
  ],
  consent: true,
};
```

---

`50-54`: **Implement logout functionality for all devices.**

The function currently has a TODO comment but falls back to regular logout. Consider adding a more detailed comment about requirements or implementation needs.

Would you like me to provide guidance on how to implement a logout for all devices functionality? This typically involves revoking all refresh tokens or session tokens on the server.

---

`69-71`: **Implement account deletion functionality.**

There's a placeholder for account deletion that currently just logs out. This critical feature needs proper implementation.

Would you like me to provide guidance on implementing account deletion functionality? This typically involves API calls to delete user data and confirmation steps.

</blockquote></details>
<details>
<summary>components/themed/ThemedButton.tsx (2)</summary><blockquote>

`49-53`: **Consider simplifying the text color logic.**

The text color determination is correct but could be more concise with a similar switch statement approach for consistency with the getBackgroundColor function.

```diff
-  const getTextColor = () => {
-    if (textColor) return textColor;
-    if (variant === 'outline') return theme.colors.primary;
-    return variant === 'secondary' ? theme.colors.primary : theme.colors.surface;
-  };
+  const getTextColor = () => {
+    if (textColor) return textColor;
+    
+    switch (variant) {
+      case 'outline':
+      case 'secondary':
+        return theme.colors.primary;
+      default:
+        return theme.colors.surface;
+    }
+  };
```

---

`34-64`: **Consider adding accessibility support for buttons with icons.**

While the button implementation is solid, it would be beneficial to add accessibility properties for screen readers, especially since icons are now supported.

```diff
  return (
    <TouchableOpacity
      style={[
        styles.button,
        { backgroundColor: getBackgroundColor() },
        getBorder(),
        disabled && styles.disabled,
        style,
      ]}
      onPress={onPress}
      disabled={disabled}
+     accessibilityRole="button"
+     accessibilityLabel={title}
+     accessibilityState={{ disabled }}
    >
      <View style={styles.contentContainer}>
        {renderIcon('left')}
        <Text style={[styles.buttonText, { color: getTextColor() }]}>{title}</Text>
        {renderIcon('right')}
      </View>
    </TouchableOpacity>
  );
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 9417374c73e238e20785d70142b3c46cb2eb1414 and dd7d63d642b5f8f4c1c60489e4b99683f6bf2ae3.

</details>

<details>
<summary>📒 Files selected for processing (10)</summary>

* `app/profile.tsx` (1 hunks)
* `app/safety-plan.tsx` (1 hunks)
* `app/survey.tsx` (3 hunks)
* `app/surveyquestionscreen.tsx` (3 hunks)
* `components/questions/BaseQuestionCard.tsx` (2 hunks)
* `components/questions/LinkertScaleQuestion.tsx` (2 hunks)
* `components/questions/ProgressBar.tsx` (2 hunks)
* `components/questions/YesNoQuestion.tsx` (2 hunks)
* `components/themed/ThemedButton.tsx` (3 hunks)
* `components/themed/ThemedMenuItem.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (7)</summary>

<details>
<summary>components/questions/BaseQuestionCard.tsx (1)</summary><blockquote>

<details>
<summary>app/theme.ts (1)</summary>

* `theme` (1-45)

</details>

</blockquote></details>
<details>
<summary>components/questions/YesNoQuestion.tsx (1)</summary><blockquote>

<details>
<summary>app/theme.ts (1)</summary>

* `theme` (1-45)

</details>

</blockquote></details>
<details>
<summary>components/questions/ProgressBar.tsx (1)</summary><blockquote>

<details>
<summary>app/theme.ts (1)</summary>

* `theme` (1-45)

</details>

</blockquote></details>
<details>
<summary>components/questions/LinkertScaleQuestion.tsx (1)</summary><blockquote>

<details>
<summary>app/theme.ts (1)</summary>

* `theme` (1-45)

</details>

</blockquote></details>
<details>
<summary>components/themed/ThemedMenuItem.tsx (1)</summary><blockquote>

<details>
<summary>app/theme.ts (1)</summary>

* `theme` (1-45)

</details>

</blockquote></details>
<details>
<summary>app/safety-plan.tsx (1)</summary><blockquote>

<details>
<summary>app/theme.ts (1)</summary>

* `theme` (1-45)

</details>

</blockquote></details>
<details>
<summary>components/themed/ThemedButton.tsx (1)</summary><blockquote>

<details>
<summary>app/theme.ts (1)</summary>

* `theme` (1-45)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (37)</summary><blockquote>

<details>
<summary>components/questions/ProgressBar.tsx (3)</summary>

`3-3`: **Good addition of theme import.**

Adding the theme import allows for consistent styling with the rest of the application.

---

`23-25`: **Great refactoring to use theme values.**

Replacing hardcoded values with theme-based ones improves consistency and maintainability.

---

`28-31`: **Excellent use of theme colors.**

Replacing hex color codes with theme color references enhances consistency and makes future theming changes easier to implement.

</details>
<details>
<summary>components/questions/LinkertScaleQuestion.tsx (4)</summary>

`4-4`: **Good addition of theme import.**

Adding the theme import allows for consistent styling with the rest of the application.

---

`90-92`: **Good use of theme styling for scale text.**

Replacing hardcoded font size and color values with theme references improves consistency.

---

`94-97`: **Appropriate use of theme values for selected state.**

The use of theme-based primary color and font size for the selected state ensures consistent highlighting throughout the app.

---

`99-101`: **Good use of theme values for label text.**

Using theme-based font size and color for label text improves styling consistency.

</details>
<details>
<summary>components/questions/YesNoQuestion.tsx (4)</summary>

`4-4`: **Good addition of theme import.**

Adding the theme import allows for consistent styling with the rest of the application.

---

`79-79`: **Good use of theme spacing.**

Replacing hardcoded margin value with theme spacing improves consistency.

---

`87-89`: **Good use of theme styling for option text.**

Replacing hardcoded font size and color values with theme references improves consistency.

---

`91-94`: **Appropriate use of theme values for selected state.**

The use of theme-based primary color and font size for the selected state ensures consistent highlighting throughout the app.

</details>
<details>
<summary>components/questions/BaseQuestionCard.tsx (5)</summary>

`4-4`: **Good addition of theme import.**

Adding the theme import allows for consistent styling with the rest of the application.

---

`33-38`: **Excellent use of theme values for container styling.**

Replacing hardcoded values with theme-based ones for background color, padding, border radius, margin, and shadow color improves consistency and maintainability.

---

`41-43`: **Good addition of border styling.**

Adding a thin border with theme color enhances the visual separation of the question card.

---

`45-50`: **Good use of theme values for question ID styling.**

Using theme-based font size, color, spacing, and adding appropriate font weight improves text styling consistency.

---

`52-57`: **Good use of theme values for question text styling.**

Using theme-based font size, color, spacing, and adding appropriate font weight improves text styling consistency and readability.

</details>
<details>
<summary>app/survey.tsx (6)</summary>

`2-3`: **Good additions to imports.**

Including TouchableOpacity, Text, and Ionicons for the new header components.

---

`77-85`: **Good addition of header with profile navigation.**

The header with title and profile button provides better navigation structure and follows common mobile UI patterns.

---

`99-100`: **Good use of theme background color.**

Using theme.colors.background for container ensures consistency with the app's color scheme.

---

`101-110`: **Good header styling.**

The header styling creates a clean, well-organized layout with appropriate spacing and border.

---

`111-118`: **Good styling for title and profile button.**

The styling for these elements follows the app's design patterns and uses appropriate theme colors.

---

`80-82`: <details>
<summary>✅ Verification successful</summary>

**Verify the profile route exists.**

Ensure that the '/profile' route is properly set up to handle this navigation.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if profile screen component exists
echo "Checking for profile screen component..."
fd "profile.tsx" app/
```

Length of output: 128

---



</details>

**No action needed: `/profile` route exists**  
- Verified presence of `app/profile.tsx`, which defines the `/profile` screen for the router.

</details>
<details>
<summary>components/themed/ThemedMenuItem.tsx (1)</summary>

`1-13`: **Well-structured component props interface.**

The props interface is well-defined with clear typing. Good use of TypeScript features including `keyof typeof Ionicons.glyphMap` for type-safe icon selection.

</details>
<details>
<summary>app/surveyquestionscreen.tsx (2)</summary>

`154-173`: **LGTM - Style improvements align with the design system.**

The new styles for the navigation buttons and background color are consistent with the theme.

---

`135-148`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify navigation behavior change in "Finish" button.**

The "Finish" button now navigates back to the survey screen instead of calling handleNext. Make sure this is the intended behavior and won't cause issues with data submission.

---

🏁 Script executed:

```shell
#!/bin/bash
# Looking for other instances where handleNext might be expected to complete a form submission
rg -A 5 "handleNext" --no-ignore
```

Length of output: 834

---

🏁 Script executed:

```shell
#!/bin/bash
# Extract the full implementation of handleNext to inspect submission logic
rg -n "const handleNext" -A 50 app/surveyquestionscreen.tsx
```

Length of output: 1969

---



</details>

**Verify final submission before navigating on “Finish”**

The “Finish” button now calls  
```tsx
() => router.replace('/survey')
```  
instead of invoking `handleNext`, which merely paginates or fetches more questions and does **not** submit any answers. Ensure that all responses are persisted (via auto-save, effect hook, or explicit API call) before redirecting, or you risk data loss.

• File: `app/surveyquestionscreen.tsx` (lines 135–148)  
• Confirm where/when survey answers are submitted or saved  
• If submission isn’t happening elsewhere, invoke your submit logic immediately before `router.replace('/survey')`

</details>
<details>
<summary>app/profile.tsx (2)</summary>

`137-142`: **Improve design consistency with crisis plan menu item.**

Good use of ThemedMenuItem for the crisis plan navigation. The icon and label clearly communicate the purpose.

---

`158-163`: **Appropriate use of error color for destructive action.**

Good use of the "error" color variant for the delete account menu item, clearly indicating that it's a destructive action.

</details>
<details>
<summary>components/themed/ThemedButton.tsx (10)</summary>

`1-11`: **Good job importing View for the new icon layout.**

The addition of the View import is necessary for implementing the new horizontal layout with icons. This is a clean way to handle the icon positioning functionality.

---

`17-22`: **Well-designed props interface with comprehensive type safety.**

The enhanced props interface provides good type safety and flexibility:
- Style prop supports both single and array of ViewStyle
- Variant types are properly defined as a union type
- IconPosition is correctly constrained to 'left' or 'right'

These changes enable the button to be highly customizable while maintaining type safety.

---

`24-33`: **Props destructuring with sensible defaults.**

Good implementation of default values:
- Setting 'primary' as the default variant
- Setting 'right' as the default icon position
- Using optional parameters appropriately

This makes the component flexible yet opinionated about its defaults.

---

`34-47`: **Clean implementation of variant-based background colors.**

The switch statement is an appropriate choice for mapping variants to background colors. The function follows the single responsibility principle by focusing only on determining the background color.

---

`55-64`: **Good use of conditional border styling.**

The getBorder function properly handles the outline variant. Returning an empty object for other variants is a clean approach for conditional styling in React Native.

---

`65-73`: **Well-implemented icon rendering with appropriate spacing.**

The renderIcon function:
- Correctly handles icon positioning
- Applies appropriate margins based on position
- Properly returns null when no icon or position mismatch

The comment about parent responsibility for icon color in outline variant is helpful for future developers.

---

`76-86`: **Flexible styling implementation with proper inheritance.**

The button styling approach:
- Correctly applies base styles first
- Dynamically applies variant-specific styling
- Handles disabled state appropriately
- Allows custom styles to override defaults (by placing `style` last in the array)

This provides good flexibility while maintaining consistent theming.

---

`87-91`: **Good implementation of flexible content layout.**

The contentContainer with conditional icon rendering enables a clean and consistent button layout regardless of icon presence or position.

---

`96-101`: **Style interface properly updated for the new layout.**

Good job updating the Style interface to include the new contentContainer style type.

---

`118-122`: **Well-implemented horizontal layout for icons and text.**

The contentContainer styles properly:
- Set horizontal layout with flexDirection: 'row'
- Center items vertically with alignItems: 'center'
- Center the entire container horizontally with justifyContent: 'center'

This ensures proper alignment of the icon and text elements.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-07T08:09:07Z

Review comments:
diff_hunk: @@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '@/app/theme';
+
+interface Props {
+  label: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  onPress: () => void;
+  showArrow?: boolean;
+  color?: 'primary' | 'error';
+}
+
+const ThemedMenuItem = ({ label, icon, onPress, showArrow = false, color = 'primary' }: Props) => {
+  const iconBg = color === 'error' ? theme.colors.error : theme.colors.primary;
+  const iconColor = color === 'error' ? theme.colors.surface : theme.colors.surface;
+  const textColor = color === 'error' ? theme.colors.error : theme.colors.text;
+  return (
+    <TouchableOpacity style={styles.row} onPress={onPress}>
+      <View style={[styles.iconCircle, { backgroundColor: iconBg }]}> 
+        <Ionicons name={icon} size={24} color={iconColor} />
+      </View>
+      <Text style={[styles.label, { color: textColor }]}>{label}</Text>
+      {showArrow && (
+        <Ionicons name="chevron-forward" size={20} color={theme.colors.subtext} style={styles.arrow} />
+      )}
+    </TouchableOpacity>
+  );
+};
path: components/themed/ThemedMenuItem.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Consider adding accessibility properties for better screen reader support.**

The component handles color variants well and has a clean implementation. However, it's missing accessibility properties which are important for users with disabilities.

```diff
- <TouchableOpacity style={styles.row} onPress={onPress}>
+ <TouchableOpacity 
+   style={styles.row} 
+   onPress={onPress}
+   accessible={true}
+   accessibilityRole="button"
+   accessibilityLabel={label}
+   accessibilityHint={`Activates ${label}`}>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const ThemedMenuItem = ({ label, icon, onPress, showArrow = false, color = 'primary' }: Props) => {
  const iconBg = color === 'error' ? theme.colors.error : theme.colors.primary;
  const iconColor = color === 'error' ? theme.colors.surface : theme.colors.surface;
  const textColor = color === 'error' ? theme.colors.error : theme.colors.text;
  return (
    <TouchableOpacity 
      style={styles.row} 
      onPress={onPress}
      accessible={true}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityHint={`Activates ${label}`}>
      <View style={[styles.iconCircle, { backgroundColor: iconBg }]}>
        <Ionicons name={icon} size={24} color={iconColor} />
      </View>
      <Text style={[styles.label, { color: textColor }]}>{label}</Text>
      {showArrow && (
        <Ionicons
          name="chevron-forward"
          size={20}
          color={theme.colors.subtext}
          style={styles.arrow}
        />
      )}
    </TouchableOpacity>
  );
};
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-07T08:09:06Z
author_association: NONE
diff_hunk: @@ -112,16 +115,36 @@ const SurveyQuestionScreen: React.FC = () => {
 
   return (
     <ScrollView contentContainerStyle={styles.container}>
+      <TouchableOpacity onPress={() => router.replace('/survey')} style={styles.backArrow}>
+        <Ionicons name="chevron-back" size={28} color={theme.colors.primary} />
+      </TouchableOpacity>
path: app/surveyquestionscreen.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add accessibility support to the back navigation button.**

The back button should include accessibility properties to improve usability for users with disabilities.

```diff
-<TouchableOpacity onPress={() => router.replace('/survey')} style={styles.backArrow}>
+<TouchableOpacity 
+  onPress={() => router.replace('/survey')} 
+  style={styles.backArrow}
+  accessible={true}
+  accessibilityRole="button"
+  accessibilityLabel="Go back to survey list"
+  accessibilityHint="Navigates back to the survey list screen">
  <Ionicons name="chevron-back" size={28} color={theme.colors.primary} />
</TouchableOpacity>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
      <TouchableOpacity 
        onPress={() => router.replace('/survey')} 
        style={styles.backArrow}
        accessible={true}
        accessibilityRole="button"
        accessibilityLabel="Go back to survey list"
        accessibilityHint="Navigates back to the survey list screen"
      >
        <Ionicons name="chevron-back" size={28} color={theme.colors.primary} />
      </TouchableOpacity>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-07T08:09:06Z
author_association: NONE
diff_hunk: @@ -0,0 +1,194 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, Linking } from 'react-native';
+import { theme } from './theme';
+import ThemedButton from '@/components/themed/ThemedButton';
+
+// Mock data - replace with real data later
+const CRISIS_RESOURCES = [
+  {
+    name: 'National Suicide Prevention Lifeline',
+    phone: '988',
+    description: '24/7 support for people in suicidal crisis or emotional distress',
+  },
+  {
+    name: 'Crisis Text Line',
+    text: 'HOME to 741741',
+    description: '24/7 text support for any type of crisis',
+  },
+  {
+    name: 'SAMHSA\'s National Helpline',
+    phone: '1-800-662-4357',
+    description: '24/7 treatment referral and information',
+  },
+];
+
+const EMERGENCY_CONTACTS = [
+  {
+    name: 'Dr. Sarah Chen',
+    relationship: 'Therapist',
+    phone: '(555) 123-4567',
+  },
+  {
+    name: 'Alex Morgan',
+    relationship: 'Friend',
+    phone: '(555) 987-6543',
+  },
+];
+
+const SafetyPlanScreen = () => {
+  const handleCall = (phone: string) => {
+    Linking.openURL(`tel:${phone}`);
+  };
+
+  const handleText = (text: string) => {
+    Linking.openURL(`sms:${text}`);
+  };
path: app/safety-plan.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add error handling for Linking API calls.**

The Linking API may fail if the device doesn't support making calls or sending texts. Consider adding error handling.

```diff
const handleCall = (phone: string) => {
-  Linking.openURL(`tel:${phone}`);
+  Linking.canOpenURL(`tel:${phone}`).then(supported => {
+    if (supported) {
+      Linking.openURL(`tel:${phone}`);
+    } else {
+      Alert.alert('Error', 'Phone calls are not supported on this device');
+    }
+  }).catch(err => {
+    console.error('An error occurred', err);
+    Alert.alert('Error', 'Could not open phone app');
+  });
};

const handleText = (text: string) => {
-  Linking.openURL(`sms:${text}`);
+  Linking.canOpenURL(`sms:${text}`).then(supported => {
+    if (supported) {
+      Linking.openURL(`sms:${text}`);
+    } else {
+      Alert.alert('Error', 'SMS is not supported on this device');
+    }
+  }).catch(err => {
+    console.error('An error occurred', err);
+    Alert.alert('Error', 'Could not open messaging app');
+  });
};
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const SafetyPlanScreen = () => {
  const handleCall = (phone: string) => {
    Linking.canOpenURL(`tel:${phone}`).then(supported => {
      if (supported) {
        Linking.openURL(`tel:${phone}`);
      } else {
        Alert.alert('Error', 'Phone calls are not supported on this device');
      }
    }).catch(err => {
      console.error('An error occurred', err);
      Alert.alert('Error', 'Could not open phone app');
    });
  };

  const handleText = (text: string) => {
    Linking.canOpenURL(`sms:${text}`).then(supported => {
      if (supported) {
        Linking.openURL(`sms:${text}`);
      } else {
        Alert.alert('Error', 'SMS is not supported on this device');
      }
    }).catch(err => {
      console.error('An error occurred', err);
      Alert.alert('Error', 'Could not open messaging app');
    });
  };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-07T08:09:06Z
author_association: NONE
diff_hunk: @@ -0,0 +1,268 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useAuth } from './context/AuthContext';
+import { theme } from './theme';
+import ThemedMenuItem from '@/components/themed/ThemedMenuItem';
+import { Ionicons } from '@expo/vector-icons';
+
+// Mock data - replace with real data later
+const MOCK_USER = {
+  name: 'Alex Johnson',
+  pronouns: 'they/them',
+  streak: 7,
+  assessments: [
+    { id: 1, date: '2024-03-15', type: 'Weekly Check-in', score: 85 },
+    { id: 2, date: '2024-03-08', type: 'Weekly Check-in', score: 78 },
+    { id: 3, date: '2024-03-01', type: 'Weekly Check-in', score: 82 },
+  ],
+  consent: true,
+};
+
+const ProfileScreen = () => {
+  const router = useRouter();
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    Alert.alert(
+      'Logout',
+      'Are you sure you want to logout?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout',
+          style: 'destructive',
+          onPress: () => logout()
+        },
+      ]
+    );
+  };
+
+  const handleLogoutAllDevices = () => {
+    Alert.alert(
+      'Logout All Devices',
+      'This will log you out of all devices. Are you sure?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout All',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement logout all devices
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleDeleteAccount = () => {
+    Alert.alert(
+      'Delete Account',
+      'This action cannot be undone. Are you sure you want to delete your account?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement account deletion
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleConsentToggle = () => {
+    Alert.alert(
+      'Update Consent',
+      MOCK_USER.consent 
+        ? 'Are you sure you want to revoke consent? This will limit some features.'
+        : 'Are you sure you want to give consent? This will enable all features.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: MOCK_USER.consent ? 'Revoke' : 'Give',
+          style: MOCK_USER.consent ? 'destructive' : 'default',
+          onPress: () => {
+            // TODO: Implement consent toggle
+          }
+        },
+      ]
+    );
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => router.replace('/survey')} style={styles.headerBackArrow}>
+          <Ionicons name="chevron-back" size={28} color="#FFF" />
+        </TouchableOpacity>
+        <View style={styles.avatarContainer}>
+          <Text style={styles.avatarText}>
+            {MOCK_USER.name.split(' ').map(n => n[0]).join('')}
+          </Text>
+        </View>
+        <Text style={styles.name}>{MOCK_USER.name}</Text>
+        <Text style={styles.pronouns}>{MOCK_USER.pronouns}</Text>
+      </View>
+
+      {/* Streak Section */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Current Streak</Text>
+        <View style={styles.streakContainer}>
+          <Text style={styles.streakNumber}>{MOCK_USER.streak}</Text>
+          <Text style={styles.streakLabel}>days</Text>
+        </View>
+      </View>
+
+      {/* Assessment History */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Recent Assessments</Text>
+        {MOCK_USER.assessments.map((assessment) => (
+          <View key={assessment.id} style={styles.assessmentItem}>
+            <View>
+              <Text style={styles.assessmentType}>{assessment.type}</Text>
+              <Text style={styles.assessmentDate}>{assessment.date}</Text>
+            </View>
+            <Text style={styles.assessmentScore}>{assessment.score}%</Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Account Management */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Account</Text>
+        <ThemedMenuItem
+          label="Crisis Plan / SOS"
+          icon="alert"
+          onPress={() => router.push('/safety-plan')}
+          showArrow
+        />
+        <ThemedMenuItem
+          label={MOCK_USER.consent ? 'Revoke Consent' : 'Give Consent'}
+          icon={MOCK_USER.consent ? 'close-circle' : 'checkmark-circle'}
+          onPress={handleConsentToggle}
+        />
+        <ThemedMenuItem
+          label="Logout All Devices"
+          icon="lock-closed"
+          onPress={handleLogoutAllDevices}
+        />
+        <ThemedMenuItem
+          label="Logout"
+          icon="log-out"
+          onPress={handleLogout}
+        />
+        <ThemedMenuItem
+          label="Delete Account"
+          icon="trash"
+          onPress={handleDeleteAccount}
+          color="error"
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  headerBackArrow: {
+    position: 'absolute',
+    top: 16,
+    left: 16,
+    zIndex: 10,
+  },
+  header: {
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: theme.colors.primary,
+    position: 'relative',
+  },
+  avatarContainer: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: theme.colors.surface,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatarText: {
+    fontSize: 36,
+    color: '#FFF',
+    fontWeight: 'bold',
+  },
path: app/profile.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix avatar text color in styles.**

The avatarText style uses white color ('#FFF') but the background is theme.colors.surface which appears to be white. This needs to be changed for visibility.

```diff
avatarText: {
  fontSize: 36,
-  color: '#FFF',
+  color: theme.colors.primary,
  fontWeight: 'bold',
},
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
avatarText: {
  fontSize: 36,
  color: theme.colors.primary,
  fontWeight: 'bold',
},
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-07T08:09:06Z
author_association: NONE
diff_hunk: @@ -0,0 +1,268 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useAuth } from './context/AuthContext';
+import { theme } from './theme';
+import ThemedMenuItem from '@/components/themed/ThemedMenuItem';
+import { Ionicons } from '@expo/vector-icons';
+
+// Mock data - replace with real data later
+const MOCK_USER = {
+  name: 'Alex Johnson',
+  pronouns: 'they/them',
+  streak: 7,
+  assessments: [
+    { id: 1, date: '2024-03-15', type: 'Weekly Check-in', score: 85 },
+    { id: 2, date: '2024-03-08', type: 'Weekly Check-in', score: 78 },
+    { id: 3, date: '2024-03-01', type: 'Weekly Check-in', score: 82 },
+  ],
+  consent: true,
+};
+
+const ProfileScreen = () => {
+  const router = useRouter();
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    Alert.alert(
+      'Logout',
+      'Are you sure you want to logout?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout',
+          style: 'destructive',
+          onPress: () => logout()
+        },
+      ]
+    );
+  };
+
+  const handleLogoutAllDevices = () => {
+    Alert.alert(
+      'Logout All Devices',
+      'This will log you out of all devices. Are you sure?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout All',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement logout all devices
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleDeleteAccount = () => {
+    Alert.alert(
+      'Delete Account',
+      'This action cannot be undone. Are you sure you want to delete your account?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement account deletion
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleConsentToggle = () => {
+    Alert.alert(
+      'Update Consent',
+      MOCK_USER.consent 
+        ? 'Are you sure you want to revoke consent? This will limit some features.'
+        : 'Are you sure you want to give consent? This will enable all features.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: MOCK_USER.consent ? 'Revoke' : 'Give',
+          style: MOCK_USER.consent ? 'destructive' : 'default',
+          onPress: () => {
+            // TODO: Implement consent toggle
+          }
+        },
+      ]
+    );
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => router.replace('/survey')} style={styles.headerBackArrow}>
+          <Ionicons name="chevron-back" size={28} color="#FFF" />
+        </TouchableOpacity>
path: app/profile.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add accessibility attributes to back navigation.**

The back navigation button should have accessibility attributes for screen reader support.

```diff
-<TouchableOpacity onPress={() => router.replace('/survey')} style={styles.headerBackArrow}>
+<TouchableOpacity 
+  onPress={() => router.replace('/survey')} 
+  style={styles.headerBackArrow}
+  accessible={true}
+  accessibilityRole="button"
+  accessibilityLabel="Go back to survey"
+  accessibilityHint="Returns to the survey screen">
  <Ionicons name="chevron-back" size={28} color="#FFF" />
</TouchableOpacity>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        <TouchableOpacity
          onPress={() => router.replace('/survey')}
          style={styles.headerBackArrow}
          accessible={true}
          accessibilityRole="button"
          accessibilityLabel="Go back to survey"
          accessibilityHint="Returns to the survey screen"
        >
          <Ionicons name="chevron-back" size={28} color="#FFF" />
        </TouchableOpacity>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-07T08:09:06Z
author_association: NONE
diff_hunk: @@ -0,0 +1,268 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useAuth } from './context/AuthContext';
+import { theme } from './theme';
+import ThemedMenuItem from '@/components/themed/ThemedMenuItem';
+import { Ionicons } from '@expo/vector-icons';
+
+// Mock data - replace with real data later
+const MOCK_USER = {
+  name: 'Alex Johnson',
+  pronouns: 'they/them',
+  streak: 7,
+  assessments: [
+    { id: 1, date: '2024-03-15', type: 'Weekly Check-in', score: 85 },
+    { id: 2, date: '2024-03-08', type: 'Weekly Check-in', score: 78 },
+    { id: 3, date: '2024-03-01', type: 'Weekly Check-in', score: 82 },
+  ],
+  consent: true,
+};
+
+const ProfileScreen = () => {
+  const router = useRouter();
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    Alert.alert(
+      'Logout',
+      'Are you sure you want to logout?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout',
+          style: 'destructive',
+          onPress: () => logout()
+        },
+      ]
+    );
+  };
+
+  const handleLogoutAllDevices = () => {
+    Alert.alert(
+      'Logout All Devices',
+      'This will log you out of all devices. Are you sure?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout All',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement logout all devices
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleDeleteAccount = () => {
+    Alert.alert(
+      'Delete Account',
+      'This action cannot be undone. Are you sure you want to delete your account?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement account deletion
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleConsentToggle = () => {
+    Alert.alert(
+      'Update Consent',
+      MOCK_USER.consent 
+        ? 'Are you sure you want to revoke consent? This will limit some features.'
+        : 'Are you sure you want to give consent? This will enable all features.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: MOCK_USER.consent ? 'Revoke' : 'Give',
+          style: MOCK_USER.consent ? 'destructive' : 'default',
+          onPress: () => {
+            // TODO: Implement consent toggle
+          }
+        },
+      ]
+    );
+  };
path: app/profile.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Complete the consent toggle implementation.**

The function shows an alert but doesn't actually update the consent state.

```diff
const handleConsentToggle = () => {
  Alert.alert(
    'Update Consent',
    MOCK_USER.consent 
      ? 'Are you sure you want to revoke consent? This will limit some features.'
      : 'Are you sure you want to give consent? This will enable all features.',
    [
      { text: 'Cancel', style: 'cancel' },
      { 
        text: MOCK_USER.consent ? 'Revoke' : 'Give',
        style: MOCK_USER.consent ? 'destructive' : 'default',
        onPress: () => {
          // TODO: Implement consent toggle
+         // Add state update
+         // When using real data:
+         // 1. Update local state
+         // 2. Make API call to update consent on server
+         // 3. Handle success/error
+         // For mock data, you could use:
+         // setMockUser(prev => ({...prev, consent: !prev.consent}));
        }
      },
    ]
  );
};
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  const handleConsentToggle = () => {
    Alert.alert(
      'Update Consent',
      MOCK_USER.consent 
        ? 'Are you sure you want to revoke consent? This will limit some features.'
        : 'Are you sure you want to give consent? This will enable all features.',
      [
        { text: 'Cancel', style: 'cancel' },
        { 
          text: MOCK_USER.consent ? 'Revoke' : 'Give',
          style: MOCK_USER.consent ? 'destructive' : 'default',
          onPress: () => {
            // TODO: Implement consent toggle
            // Add state update
            // When using real data:
            // 1. Update local state
            // 2. Make API call to update consent on server
            // 3. Handle success/error
            // For mock data, you could use:
            // setMockUser(prev => ({ ...prev, consent: !prev.consent }));
          }
        },
      ]
    );
  };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-07T08:09:06Z
author_association: NONE
diff_hunk: @@ -0,0 +1,268 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useAuth } from './context/AuthContext';
+import { theme } from './theme';
+import ThemedMenuItem from '@/components/themed/ThemedMenuItem';
+import { Ionicons } from '@expo/vector-icons';
+
+// Mock data - replace with real data later
+const MOCK_USER = {
+  name: 'Alex Johnson',
+  pronouns: 'they/them',
+  streak: 7,
+  assessments: [
+    { id: 1, date: '2024-03-15', type: 'Weekly Check-in', score: 85 },
+    { id: 2, date: '2024-03-08', type: 'Weekly Check-in', score: 78 },
+    { id: 3, date: '2024-03-01', type: 'Weekly Check-in', score: 82 },
+  ],
+  consent: true,
+};
+
+const ProfileScreen = () => {
+  const router = useRouter();
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    Alert.alert(
+      'Logout',
+      'Are you sure you want to logout?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout',
+          style: 'destructive',
+          onPress: () => logout()
+        },
+      ]
+    );
+  };
+
+  const handleLogoutAllDevices = () => {
+    Alert.alert(
+      'Logout All Devices',
+      'This will log you out of all devices. Are you sure?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Logout All',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement logout all devices
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleDeleteAccount = () => {
+    Alert.alert(
+      'Delete Account',
+      'This action cannot be undone. Are you sure you want to delete your account?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            // TODO: Implement account deletion
+            logout();
+          }
+        },
+      ]
+    );
+  };
+
+  const handleConsentToggle = () => {
+    Alert.alert(
+      'Update Consent',
+      MOCK_USER.consent 
+        ? 'Are you sure you want to revoke consent? This will limit some features.'
+        : 'Are you sure you want to give consent? This will enable all features.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { 
+          text: MOCK_USER.consent ? 'Revoke' : 'Give',
+          style: MOCK_USER.consent ? 'destructive' : 'default',
+          onPress: () => {
+            // TODO: Implement consent toggle
+          }
+        },
+      ]
+    );
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => router.replace('/survey')} style={styles.headerBackArrow}>
+          <Ionicons name="chevron-back" size={28} color="#FFF" />
+        </TouchableOpacity>
+        <View style={styles.avatarContainer}>
+          <Text style={styles.avatarText}>
+            {MOCK_USER.name.split(' ').map(n => n[0]).join('')}
+          </Text>
path: app/profile.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix avatar text color for visibility.**

The avatar text is white, but the background is also white (theme.colors.surface), making it invisible. Change the text color for visibility.

```diff
<View style={styles.avatarContainer}>
  <Text style={styles.avatarText}>
    {MOCK_USER.name.split(' ').map(n => n[0]).join('')}
  </Text>
</View>

// In styles:
avatarText: {
  fontSize: 36,
-  color: '#FFF',
+  color: theme.colors.primary,
  fontWeight: 'bold',
},
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
// In app/profile.tsx, around the avatar rendering (unchanged):
<View style={styles.avatarContainer}>
  <Text style={styles.avatarText}>
    {MOCK_USER.name.split(' ').map(n => n[0]).join('')}
  </Text>
</View>

// In your StyleSheet definition:
const styles = StyleSheet.create({
  // …other styles…

  avatarText: {
    fontSize: 36,
    color: theme.colors.primary,  // was '#FFF'
    fontWeight: 'bold',
  },

  // …other styles…
});
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-07T08:09:06Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-07T08:05:56Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces two new screens: a user profile screen and a safety plan screen, each with structured sections and interactive elements. The survey list and survey question screens receive UI enhancements, including new headers and navigation controls. Themed UI components are refactored for consistency, and a new reusable menu item component is added.

## Changes

| File(s)                                                                                         | Change Summary                                                                                                                                                                                                                                                                                                                                                                                |
|-------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `app/profile.tsx`                                                                               | Added a new `ProfileScreen` React Native component displaying user info, streaks, recent assessments, and account management actions with confirmation dialogs. Integrates navigation and authentication context.                                                                                                |
| `app/safety-plan.tsx`                                                                           | Added `SafetyPlanScreen` component with crisis resources, emergency contacts, and warning signs. Supports direct call/text actions using mock data.                                                                                                                      |
| `app/survey.tsx`                                                                                | Enhanced `SurveyListScreen` with a header containing a title and profile button that navigates to the profile screen. Updated styles for the header and container.                                                                                                       |
| `app/surveyquestionscreen.tsx`                                                                  | Replaced native buttons with `ThemedButton` for navigation, added a top back-arrow button, updated navigation logic, and applied theme-based styling.                                                                                                                     |
| `components/questions/BaseQuestionCard.tsx`<br>`components/questions/LinkertScaleQuestion.tsx`<br>`components/questions/ProgressBar.tsx`<br>`components/questions/YesNoQuestion.tsx` | Refactored styles to use centralized theme values for colors, font sizes, spacing, and borders, replacing hardcoded literals for consistent theming across question components and the progress bar.                                                                      |
| `components/themed/ThemedButton.tsx`                                                            | Extended `ThemedButton` with new props: style, variant, textColor, icon, and iconPosition. Added support for multiple button variants, dynamic styling, and inline icon placement. Refactored style logic for flexibility and consistency.                                 |
| `components/themed/ThemedMenuItem.tsx`                                                          | Added new `ThemedMenuItem` component for rendering stylized menu items with icons, labels, optional arrows, and color variants.                                                                                                   |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
  participant User
  participant SurveyListScreen
  participant ProfileScreen
  participant SafetyPlanScreen
  participant AuthContext

  User->>SurveyListScreen: Opens app/survey.tsx
  SurveyListScreen->>User: Displays survey list with header
  User->>SurveyListScreen: Taps profile button
  SurveyListScreen->>ProfileScreen: Navigates to profile
  ProfileScreen->>User: Shows user info, streak, assessments, account actions
  User->>ProfileScreen: Selects "Crisis Plan"
  ProfileScreen->>SafetyPlanScreen: Navigates to safety plan
  SafetyPlanScreen->>User: Shows crisis resources, contacts, warning signs
  User->>ProfileScreen: Selects "Log Out"
  ProfileScreen->>AuthContext: Calls logout()
  AuthContext->>User: Logs out user
```

## Poem

> 🐇  
> Hopping through new screens so bright,  
> Profile and safety, both in sight.  
> Themed buttons, menus, colors align,  
> Surveys with headers—oh, how fine!  
> With every click, a gentle cheer,  
> This bunny’s code brings comfort near.  
> 🌱✨

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=rubybui/mind-matter-frontend&utm_content=6):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: rubybui
created_at: 2025-05-07T08:06:41Z
body: https://github.com/rubybui/mind-matter-frontend/issues/3
https://github.com/rubybui/mind-matter-frontend/issues/5
author_association: OWNER