Skip to content
This repository was archived by the owner on Jan 23, 2026. It is now read-only.

Replace all icons (SVG, Ionicons, emoji) with Material Design Icons from @expo/vector-icons #21

Open
Copilot wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Replace all icons (SVG, Ionicons, emoji) with Material Design Icons from @expo/vector-icons #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
202a5b8
Initial plan
Copilot Nov 23, 2025
7fd800d
Replace custom SVG icons and Ionicons with Material Design Icons
Copilot Nov 23, 2025
a967448
Fix React import style consistency in VoiceChatIcon
Copilot Nov 23, 2025
feb8e4b
Replace emoji icons in HamburgerMenu with Material Design Icons
Copilot Nov 23, 2025
f66b027
Replace all remaining emoji icons with Material Design Icons in scree…
Copilot Nov 23, 2025
98ef813
Move inline style to StyleSheet for better performance
Copilot Nov 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Thunderdomes/app/(tabs)/scavenger-hunt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Modal,
View,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { router } from 'expo-router';
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
Expand Down Expand Up @@ -369,8 +369,8 @@ export default function ScavengerHuntScreen() {
<ThemedText style={styles.learnMoreText}>
{isStoryExpanded ? t('domeDetective.hideStory') : t('domeDetective.learnMore')}
</ThemedText>
<Ionicons
name={isStoryExpanded ? 'chevron-up' : 'chevron-down'}
<MaterialIcons
name={isStoryExpanded ? 'expand-less' : 'expand-more'}
size={20}
color="#5A6A5D"
/>
Expand Down
23 changes: 8 additions & 15 deletions Thunderdomes/app/(tabs)/sip-and-seek.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Text,
Linking,
} from 'react-native';
import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';
import { CameraView, useCameraPermissions } from 'expo-camera';
import { router } from 'expo-router';
import { ThemedView } from '@/components/themed-view';
Expand Down Expand Up @@ -230,7 +231,7 @@ export default function SipAndSeekScreen() {
activeOpacity={0.8}
>
<ThemedText style={styles.scanButtonText}>{t('sipAndSeek.scanButton')}</ThemedText>
<ThemedText style={styles.cameraIcon}>📷</ThemedText>
<MaterialIcons name="camera-alt" size={24} color="#FFFFFF" />
</TouchableOpacity>
</View>

Expand Down Expand Up @@ -260,15 +261,15 @@ export default function SipAndSeekScreen() {
onPress={() => handleMenuItemPress('accessibility')}
>
<Text style={styles.menuText}>{t('menu.accessibility')}</Text>
<Text style={styles.menuIcon}>ⓘ</Text>
<MaterialIcons name="info-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => setLanguageExpanded(!languageExpanded)}
>
<Text style={styles.menuText}>{t('menu.language')}</Text>
<Text style={styles.menuIcon}>🌐</Text>
<MaterialIcons name="language" size={24} color="#FFFFFF" />
</TouchableOpacity>

{languageExpanded && (
Expand All @@ -290,31 +291,31 @@ export default function SipAndSeekScreen() {
onPress={() => handleMenuItemPress('member')}
>
<Text style={styles.menuText}>{t('menu.becomeMember')}</Text>
<Text style={styles.menuIcon}>📋</Text>
<MaterialCommunityIcons name="card-account-details-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('donate')}
>
<Text style={styles.menuText}>{t('menu.makeDonation')}</Text>
<Text style={styles.menuIcon}>💝</Text>
<MaterialIcons name="volunteer-activism" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('calendar')}
>
<Text style={styles.menuText}>{t('menu.viewCalendar')}</Text>
<Text style={styles.menuIcon}>📅</Text>
<MaterialIcons name="event" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('website')}
>
<Text style={styles.menuText}>{t('menu.visitWebsite')}</Text>
<Text style={styles.menuIcon}>🏛️</Text>
<MaterialIcons name="public" size={24} color="#FFFFFF" />
</TouchableOpacity>
</ScrollView>
</View>
Expand Down Expand Up @@ -434,10 +435,6 @@ const styles = StyleSheet.create({
marginRight: 8,
lineHeight: 24,
},
cameraIcon: {
fontSize: 24,
lineHeight: 24,
},
cameraHeaderSafeArea: {
backgroundColor: '#68A4D2',
paddingTop: Platform.OS === 'android' ? 35 : 0,
Expand Down Expand Up @@ -524,10 +521,6 @@ const styles = StyleSheet.create({
fontWeight: '600',
flex: 1,
},
menuIcon: {
fontSize: 24,
marginLeft: 10,
},
submenu: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: 8,
Expand Down
17 changes: 7 additions & 10 deletions Thunderdomes/app/botanical-tales/arid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Text,
Linking,
} from 'react-native';
import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';
import { router } from 'expo-router';
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
Expand Down Expand Up @@ -176,15 +177,15 @@ export default function AridDomeScreen() {
onPress={() => handleMenuItemPress('accessibility')}
>
<Text style={styles.menuText}>{t('menu.accessibility')}</Text>
<Text style={styles.menuIcon}>ⓘ</Text>
<MaterialIcons name="info-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => setLanguageExpanded(!languageExpanded)}
>
<Text style={styles.menuText}>{t('menu.language')}</Text>
<Text style={styles.menuIcon}>🌐</Text>
<MaterialIcons name="language" size={24} color="#FFFFFF" />
</TouchableOpacity>

{languageExpanded && (
Expand All @@ -206,31 +207,31 @@ export default function AridDomeScreen() {
onPress={() => handleMenuItemPress('member')}
>
<Text style={styles.menuText}>{t('menu.becomeMember')}</Text>
<Text style={styles.menuIcon}>📋</Text>
<MaterialCommunityIcons name="card-account-details-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('donate')}
>
<Text style={styles.menuText}>{t('menu.makeDonation')}</Text>
<Text style={styles.menuIcon}>💝</Text>
<MaterialIcons name="volunteer-activism" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('calendar')}
>
<Text style={styles.menuText}>{t('menu.viewCalendar')}</Text>
<Text style={styles.menuIcon}>📅</Text>
<MaterialIcons name="event" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('website')}
>
<Text style={styles.menuText}>{t('menu.visitWebsite')}</Text>
<Text style={styles.menuIcon}>🏛️</Text>
<MaterialIcons name="public" size={24} color="#FFFFFF" />
</TouchableOpacity>
</ScrollView>
</View>
Expand Down Expand Up @@ -361,10 +362,6 @@ const styles = StyleSheet.create({
fontWeight: '600',
flex: 1,
},
menuIcon: {
fontSize: 24,
marginLeft: 10,
},
submenu: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: 8,
Expand Down
17 changes: 7 additions & 10 deletions Thunderdomes/app/botanical-tales/arid/madagascar-collection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
Text,
Linking,
} from 'react-native';
import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';

import { router } from 'expo-router';
import { ThemedView } from '@/components/themed-view';
Expand Down Expand Up @@ -259,15 +260,15 @@ export default function MadagascarCollectionScreen() {
onPress={() => handleMenuItemPress('accessibility')}
>
<Text style={styles.menuText}>{t('menu.accessibility')}</Text>
<Text style={styles.menuIcon}>ⓘ</Text>
<MaterialIcons name="info-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => setLanguageExpanded(!languageExpanded)}
>
<Text style={styles.menuText}>{t('menu.language')}</Text>
<Text style={styles.menuIcon}>🌐</Text>
<MaterialIcons name="language" size={24} color="#FFFFFF" />
</TouchableOpacity>

{languageExpanded && (
Expand All @@ -289,31 +290,31 @@ export default function MadagascarCollectionScreen() {
onPress={() => handleMenuItemPress('member')}
>
<Text style={styles.menuText}>{t('menu.becomeMember')}</Text>
<Text style={styles.menuIcon}>📋</Text>
<MaterialCommunityIcons name="card-account-details-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('donate')}
>
<Text style={styles.menuText}>{t('menu.makeDonation')}</Text>
<Text style={styles.menuIcon}>💝</Text>
<MaterialIcons name="volunteer-activism" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('calendar')}
>
<Text style={styles.menuText}>{t('menu.viewCalendar')}</Text>
<Text style={styles.menuIcon}>📅</Text>
<MaterialIcons name="event" size={24} color="#FFFFFF" />
</TouchableOpacity>

<TouchableOpacity
style={styles.menuItem}
onPress={() => handleMenuItemPress('website')}
>
<Text style={styles.menuText}>{t('menu.visitWebsite')}</Text>
<Text style={styles.menuIcon}>🏛️</Text>
<MaterialIcons name="public" size={24} color="#FFFFFF" />
</TouchableOpacity>
</ScrollView>
</View>
Expand Down Expand Up @@ -470,10 +471,6 @@ const styles = StyleSheet.create({
fontWeight: '600',
flex: 1,
},
menuIcon: {
fontSize: 24,
marginLeft: 10,
},
submenu: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: 8,
Expand Down
17 changes: 7 additions & 10 deletions Thunderdomes/components/HamburgerMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, ScrollView, Linking, Animated, Dimensions, Platform } from 'react-native';
import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';
import { router } from 'expo-router';
import { useLocalization } from '@/contexts/LocalizationContext';

Expand Down Expand Up @@ -120,7 +121,7 @@ export function HamburgerMenu({ visible, onClose }: HamburgerMenuProps) {
onPress={() => handleMenuItemPress('accessibility')}
>
<Text style={styles.menuText}>{t('menu.accessibility')}</Text>
<Text style={styles.menuIcon}>ⓘ</Text>
<MaterialIcons name="info-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

{/* Language */}
Expand All @@ -129,7 +130,7 @@ export function HamburgerMenu({ visible, onClose }: HamburgerMenuProps) {
onPress={() => setLanguageExpanded(!languageExpanded)}
>
<Text style={styles.menuText}>{t('menu.language')}</Text>
<Text style={styles.menuIcon}>🌐</Text>
<MaterialIcons name="language" size={24} color="#FFFFFF" />
</TouchableOpacity>

{/* Language Submenu */}
Expand All @@ -153,7 +154,7 @@ export function HamburgerMenu({ visible, onClose }: HamburgerMenuProps) {
onPress={() => handleMenuItemPress('member')}
>
<Text style={styles.menuText}>{t('menu.becomeMember')}</Text>
<Text style={styles.menuIcon}>📋</Text>
<MaterialCommunityIcons name="card-account-details-outline" size={24} color="#FFFFFF" />
</TouchableOpacity>

{/* Make a Donation */}
Expand All @@ -162,7 +163,7 @@ export function HamburgerMenu({ visible, onClose }: HamburgerMenuProps) {
onPress={() => handleMenuItemPress('donate')}
>
<Text style={styles.menuText}>{t('menu.makeDonation')}</Text>
<Text style={styles.menuIcon}>💝</Text>
<MaterialIcons name="volunteer-activism" size={24} color="#FFFFFF" />
</TouchableOpacity>

{/* View Our Calendar */}
Expand All @@ -171,7 +172,7 @@ export function HamburgerMenu({ visible, onClose }: HamburgerMenuProps) {
onPress={() => handleMenuItemPress('calendar')}
>
<Text style={styles.menuText}>{t('menu.viewCalendar')}</Text>
<Text style={styles.menuIcon}>📅</Text>
<MaterialIcons name="event" size={24} color="#FFFFFF" />
</TouchableOpacity>

{/* Visit Our Website */}
Expand All @@ -180,7 +181,7 @@ export function HamburgerMenu({ visible, onClose }: HamburgerMenuProps) {
onPress={() => handleMenuItemPress('website')}
>
<Text style={styles.menuText}>{t('menu.visitWebsite')}</Text>
<Text style={styles.menuIcon}>🏛️</Text>
<MaterialIcons name="public" size={24} color="#FFFFFF" />
</TouchableOpacity>
</ScrollView>
</Animated.View>
Expand Down Expand Up @@ -237,10 +238,6 @@ const styles = StyleSheet.create({
fontWeight: '600',
flex: 1,
},
menuIcon: {
fontSize: 24,
marginLeft: 10,
},
submenu: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: 8,
Expand Down
18 changes: 15 additions & 3 deletions Thunderdomes/components/PlantCameraModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, View, TouchableOpacity, Alert } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { CameraView, useCameraPermissions, Camera } from 'expo-camera';
import * as ImagePicker from 'expo-image-picker';
import { ThemedView } from './themed-view';
Expand Down Expand Up @@ -120,9 +121,12 @@ export function PlantCameraModal({ onPhotoTaken, onClose }: PlantCameraModalProp
onPress={handleTakePicture}
disabled={isCapturing}
>
<ThemedText style={styles.scanButtonText}>
{isCapturing ? 'Taking Picture...' : 'Scan 📷'}
</ThemedText>
<View style={styles.scanButtonContent}>
<ThemedText style={styles.scanButtonText}>
{isCapturing ? 'Taking Picture...' : 'Scan'}
</ThemedText>
{!isCapturing && <MaterialIcons name="camera-alt" size={20} color="#FFFFFF" style={styles.cameraIconStyle} />}
</View>
</TouchableOpacity>
</ThemedView>
);
Expand Down Expand Up @@ -173,10 +177,18 @@ const styles = StyleSheet.create({
shadowRadius: 3,
elevation: 3,
},
scanButtonContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
scanButtonText: {
color: '#F5F1E3',
fontSize: 20,
fontWeight: 'bold',
},
cameraIconStyle: {
marginLeft: 8,
},
});

6 changes: 2 additions & 4 deletions Thunderdomes/components/icons/BotanicalTalesIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Svg, { Path, G, Mask, Rect } from 'react-native-svg';
import { MaterialCommunityIcons } from '@expo/vector-icons';

interface BotanicalTalesIconProps {
color?: string;
Expand All @@ -8,9 +8,7 @@ interface BotanicalTalesIconProps {

export function BotanicalTalesIcon({ color = '#FFFFFF', size = 60 }: BotanicalTalesIconProps) {
return (
<Svg width={size} height={size} viewBox="-10 -10 50 50">
<Path d="M28 14.5031C28 12.0823 27.3583 9.87292 26.075 7.875C24.7917 5.87708 23.0708 4.38229 20.9125 3.39062C20.475 3.18646 20.1542 2.87292 19.95 2.45C19.7458 2.02708 19.7167 1.59688 19.8625 1.15938C20.0375 0.692708 20.351 0.357292 20.8031 0.153125C21.2552 -0.0510417 21.7146 -0.0510417 22.1812 0.153125C25.0104 1.40729 27.2708 3.325 28.9625 5.90625C30.6542 8.4875 31.5 11.3531 31.5 14.5031C31.5 17.6531 30.6542 20.5187 28.9625 23.1C27.2708 25.6812 25.0104 27.599 22.1812 28.8531C21.7146 29.0573 21.2552 29.0573 20.8031 28.8531C20.351 28.649 20.0375 28.3135 19.8625 27.8469C19.7167 27.4094 19.7458 26.9792 19.95 26.5562C20.1542 26.1333 20.475 25.8198 20.9125 25.6156C23.0708 24.624 24.7917 23.1292 26.075 21.1313C27.3583 19.1333 28 16.924 28 14.5031ZM7 19.7969H1.75C1.25417 19.7969 0.838542 19.6292 0.503125 19.2938C0.167708 18.9583 0 18.5427 0 18.0469V11.0469C0 10.551 0.167708 10.1354 0.503125 9.8C0.838542 9.46458 1.25417 9.29688 1.75 9.29688H7L12.775 3.52188C13.3292 2.96771 13.9635 2.84375 14.6781 3.15C15.3927 3.45625 15.75 4.00312 15.75 4.79063V24.3031C15.75 25.0906 15.3927 25.6375 14.6781 25.9438C13.9635 26.25 13.3292 26.126 12.775 25.5719L7 19.7969ZM23.625 14.5469C23.625 15.7719 23.3479 16.9312 22.7938 18.025C22.2396 19.1187 21.5104 20.0156 20.6063 20.7156C20.3146 20.8906 20.0156 20.8979 19.7094 20.7375C19.4031 20.5771 19.25 20.3219 19.25 19.9719V9.03438C19.25 8.68437 19.4031 8.42917 19.7094 8.26875C20.0156 8.10833 20.3146 8.11563 20.6063 8.29063C21.5104 9.01979 22.2396 9.93854 22.7938 11.0469C23.3479 12.1552 23.625 13.3219 23.625 14.5469ZM12.25 9.03438L8.4875 12.7969H3.5V16.2969H8.4875L12.25 20.0594V9.03438Z" fill="#FBF7DF"/>
</Svg>
<MaterialCommunityIcons name="volume-high" size={size} color={color} />
);
}

Loading