Fretux/Shoppy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styling and accessibility, refine product and shopping list functionalities

Browse Source
This commit is contained in:
fretuks
2026-10-16 15:49:22 +02:00
parent 6938afb26c
commit defc1fbc13
24 changed files with 484 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.js
+24 -1
View File
@@ -32,6 +32,7 @@ export default function App() {
const [productCache, setProductCache] = useState({});
const [manualPrices, setManualPrices] = useState({});
const [recentProducts, setRecentProducts] = useState([]);
const [lastDeletedListItem, setLastDeletedListItem] = useState(null);
const [isHydrated, setIsHydrated] = useState(false);
const [storageError, setStorageError] = useState('');
@@ -133,10 +134,13 @@ export default function App() {
<ShoppingListScreen
onCompleteList={completeShoppingList}
onDeleteItem={deleteListItem}
onUndoDelete={undoDeleteListItem}
onStartScan={() => setActiveTab('scan')}
onOpenProfile={() => setActiveTab('profile')}
onToggleItem={toggleListItem}
onUpdateItemPrice={updateListItemPrice}
preferences={preferences}
lastDeletedItem={lastDeletedListItem}
shoppingList={shoppingList}
/>
);
@@ -161,7 +165,7 @@ export default function App() {
shoppingList={shoppingList}
/>
);
}, [activeTab, manualPrices, preferences, productCache, recentProducts, shoppingList]);
}, [activeTab, lastDeletedListItem, manualPrices, preferences, productCache, recentProducts, shoppingList]);
async function scanProductByBarcode(barcode) {
const result = await lookupProductByBarcode(
@@ -334,6 +338,9 @@ export default function App() {
}
function deleteListItem(itemId) {
const index = shoppingList.items.findIndex((item) => item.id === itemId);
if (index < 0) return;
setLastDeletedListItem({ item: shoppingList.items[index], index });
setShoppingList((current) => {
const items = current.items.filter((item) => item.id !== itemId);
return {
@@ -344,7 +351,19 @@ export default function App() {
});
}
function undoDeleteListItem() {
if (!lastDeletedListItem) return;
setShoppingList((current) => {
if (current.items.some((item) => item.id === lastDeletedListItem.item.id)) return current;
const items = [...current.items];
items.splice(Math.min(lastDeletedListItem.index, items.length), 0, lastDeletedListItem.item);
return { ...current, items, estimatedTotal: calculateEstimatedTotal(items) };
});
setLastDeletedListItem(null);
}
function completeShoppingList() {
setLastDeletedListItem(null);
setShoppingList({
...initialShoppingList,
createdAt: new Date().toISOString()
@@ -389,6 +408,10 @@ export default function App() {
<ProductDetailScreen
onAddToList={addProductToShoppingList}
onBack={goBackToTabs}
onOpenList={() => {
setActiveTab('list');
goBackToTabs();
}}
onSaveManualPrice={saveManualPriceForProduct}
onShowRatingCriteria={showRatingCriteria}
onShowAlternatives={showAlternatives}
src/components/PrimaryButton.js
+13 -4
View File
@@ -2,7 +2,7 @@ import { Pressable, StyleSheet, Text } from 'react-native';
import { colors } from '../utils/constants';
export default function PrimaryButton({ label, onPress, disabled = false }) {
export default function PrimaryButton({ label, onPress, disabled = false, tone = 'default' }) {
return (
<Pressable
accessibilityRole="button"
@@ -10,11 +10,12 @@ export default function PrimaryButton({ label, onPress, disabled = false }) {
onPress={onPress}
style={({ pressed }) => [
styles.button,
tone === 'light' ? styles.lightButton : null,
pressed ? styles.buttonPressed : null,
disabled ? styles.disabled : null
]}
>
<Text style={[styles.label, disabled ? styles.disabledLabel : null]}>{label}</Text>
<Text style={[styles.label, tone === 'light' ? styles.lightLabel : null, disabled ? styles.disabledLabel : null]}>{label}</Text>
</Pressable>
);
}
@@ -23,17 +24,25 @@ const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: colors.primary,
borderRadius: 8,
borderRadius: 14,
justifyContent: 'center',
minHeight: 50,
paddingHorizontal: 20,
paddingVertical: 14
},
buttonPressed: {
opacity: 0.82
},
lightButton: {
backgroundColor: colors.surface
},
label: {
color: colors.surface,
fontSize: 16,
fontWeight: '700'
fontWeight: '800'
},
lightLabel: {
color: colors.primaryDark
},
disabled: {
backgroundColor: colors.border
src/components/SecondaryButton.js
+3 -1
View File
@@ -23,8 +23,10 @@ const styles = StyleSheet.create({
button: {
alignItems: 'center',
borderColor: colors.primary,
borderRadius: 8,
borderRadius: 14,
borderWidth: 1,
justifyContent: 'center',
minHeight: 48,
paddingHorizontal: 18,
paddingVertical: 12
},
src/components/form/BudgetInput.js
+25 -6
View File
@@ -1,3 +1,4 @@
import { useState } from 'react';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import { budgetPeriodLabels, colors } from '../../utils/constants';
@@ -5,16 +6,28 @@ import { budgetPeriodLabels, colors } from '../../utils/constants';
const budgetPeriods = ['day', 'week', 'month', 'shoppingTrip'];
export default function BudgetInput({ value, currency, period, onChangePeriod, onChangeValue }) {
const [inputValue, setInputValue] = useState(String(value ?? ''));
function updateValue(text) {
setInputValue(text);
const parsedValue = Number(text.replace(',', '.'));
onChangeValue(text.trim() && Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : undefined);
}
return (
<View style={styles.wrap}>
<Text style={styles.label}>Maximales Einkaufsbudget</Text>
<Text style={styles.label}>Dein Budget (optional)</Text>
<Text style={styles.hint}>Ohne Budget bleibt die Preisbewertung offen.</Text>
<View style={styles.row}>
<Text style={styles.currency}>{currency}</Text>
<TextInput
accessibilityLabel="Budgetbetrag"
keyboardType="decimal-pad"
onChangeText={(text) => onChangeValue(Number(text.replace(',', '.')) || 0)}
onChangeText={updateValue}
placeholder="z. B. 45.00"
placeholderTextColor={colors.muted}
style={styles.input}
value={String(value ?? '')}
value={inputValue}
/>
</View>
<View style={styles.periodGrid}>
@@ -23,6 +36,7 @@ export default function BudgetInput({ value, currency, period, onChangePeriod, o
return (
<Pressable
accessibilityRole="button"
accessibilityState={{ selected: isActive }}
key={option}
onPress={() => onChangePeriod(option)}
style={[styles.periodChip, isActive ? styles.activePeriodChip : null]}
@@ -42,11 +56,16 @@ const styles = StyleSheet.create({
wrap: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
gap: 10,
padding: 14
},
hint: {
color: colors.muted,
fontSize: 13,
lineHeight: 18
},
label: {
color: colors.text,
fontSize: 15,
@@ -64,7 +83,7 @@ const styles = StyleSheet.create({
},
input: {
borderColor: colors.border,
borderRadius: 8,
borderRadius: 12,
borderWidth: 1,
color: colors.text,
flex: 1,
@@ -80,7 +99,7 @@ const styles = StyleSheet.create({
periodChip: {
alignItems: 'center',
borderColor: colors.border,
borderRadius: 8,
borderRadius: 12,
borderWidth: 1,
flexGrow: 1,
paddingHorizontal: 10,
src/components/form/ManualSearchInput.js
+2 -1
View File
@@ -7,6 +7,7 @@ export default function ManualSearchInput({ value, onChangeText, onSubmit, disab
return (
<View style={styles.row}>
<TextInput
accessibilityLabel="Produktname oder Barcode"
autoCapitalize="none"
onChangeText={onChangeText}
onSubmitEditing={onSubmit}
@@ -29,7 +30,7 @@ const styles = StyleSheet.create({
input: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 14,
borderWidth: 1,
color: colors.text,
fontSize: 16,
src/components/form/SettingsSwitchRow.js
+2 -1
View File
@@ -10,6 +10,7 @@ export default function SettingsSwitchRow({ label, description, value, onValueCh
<Text style={styles.description}>{description}</Text>
</View>
<Switch
accessibilityLabel={label}
onValueChange={onValueChange}
thumbColor={value ? colors.primary : '#f4f3f4'}
trackColor={{ false: colors.border, true: '#b7dbcf' }}
@@ -24,7 +25,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 16,
borderWidth: 1,
flexDirection: 'row',
gap: 12,
src/components/layout/AppHeader.js
+7 -6
View File
@@ -23,7 +23,7 @@ export default function AppHeader({ title, subtitle, onBack, rightAction }) {
const styles = StyleSheet.create({
header: {
paddingTop: 6
paddingBottom: 2
},
row: {
alignItems: 'center',
@@ -33,11 +33,11 @@ const styles = StyleSheet.create({
backButton: {
alignItems: 'center',
borderColor: colors.border,
borderRadius: 8,
borderRadius: 14,
borderWidth: 1,
height: 40,
height: 44,
justifyContent: 'center',
width: 40
width: 44
},
backText: {
color: colors.primary,
@@ -49,8 +49,9 @@ const styles = StyleSheet.create({
},
title: {
color: colors.text,
fontSize: 28,
fontWeight: '800'
fontSize: 29,
fontWeight: '800',
letterSpacing: -0.6
},
subtitle: {
color: colors.muted,
src/components/layout/BottomTabBar.js
+23 -11
View File
@@ -3,21 +3,23 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../utils/constants';
const tabs = [
{ id: 'home', label: 'Home', icon: '⌂' },
{ id: 'scan', label: 'Scan', icon: '□' },
{ id: 'list', label: 'Liste', icon: '✓' },
{ id: 'profile', label: 'Profil', icon: '◦' }
{ id: 'home', label: 'Start', icon: '⌂' },
{ id: 'scan', label: 'Scannen', icon: '▣' },
{ id: 'list', label: 'Liste', icon: '☷' },
{ id: 'profile', label: 'Profil', icon: '◉' }
];
export default function BottomTabBar({ activeTab, onChange }) {
return (
<View style={styles.wrap}>
<View style={styles.inner}>
{tabs.map((tab) => {
const isActive = activeTab === tab.id;
return (
<Pressable
accessibilityLabel={`${tab.label} öffnen`}
accessibilityRole="button"
accessibilityState={{ selected: isActive }}
key={tab.id}
onPress={() => onChange(tab.id)}
style={[styles.tab, isActive ? styles.activeTab : null]}
@@ -28,6 +30,7 @@ export default function BottomTabBar({ activeTab, onChange }) {
);
})}
</View>
</View>
);
}
@@ -37,26 +40,35 @@ const styles = StyleSheet.create({
borderColor: colors.border,
borderTopWidth: 1,
bottom: 0,
flexDirection: 'row',
gap: 8,
left: 0,
padding: 10,
paddingHorizontal: 12,
paddingTop: 9,
paddingBottom: 12,
position: 'absolute',
right: 0
},
inner: {
alignSelf: 'center',
flexDirection: 'row',
gap: 6,
maxWidth: 720,
width: '100%'
},
tab: {
alignItems: 'center',
borderRadius: 8,
borderRadius: 13,
flex: 1,
gap: 2,
paddingVertical: 8
minHeight: 58,
justifyContent: 'center',
paddingVertical: 6
},
activeTab: {
backgroundColor: '#e5f1ec'
backgroundColor: colors.surfaceTint
},
icon: {
color: colors.muted,
fontSize: 18,
fontSize: 20,
fontWeight: '800'
},
label: {
src/components/layout/ScreenContainer.js
+8 -4
View File
@@ -8,7 +8,7 @@ export default function ScreenContainer({ children, scroll = true }) {
}
return (
<ScrollView contentContainerStyle={styles.content} style={styles.container}>
<ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled" style={styles.container}>
{children}
</ScrollView>
);
@@ -20,8 +20,12 @@ const styles = StyleSheet.create({
flex: 1
},
content: {
gap: 18,
padding: 20,
paddingBottom: 110
alignSelf: 'center',
gap: 20,
maxWidth: 720,
paddingHorizontal: 20,
paddingTop: 22,
paddingBottom: 124,
width: '100%'
}
});
src/components/layout/SectionTitle.js
+3 -2
View File
@@ -9,8 +9,9 @@ export default function SectionTitle({ children }) {
const styles = StyleSheet.create({
title: {
color: colors.text,
fontSize: 18,
fontSize: 20,
fontWeight: '800',
marginTop: 4
letterSpacing: -0.3,
marginTop: 6
}
});
src/components/list/ShoppingListItem.js
+12 -10
View File
@@ -13,6 +13,7 @@ export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePri
}, [item.estimatedPrice]);
function savePrice() {
if (!priceText.trim() && typeof item.estimatedPrice !== 'number') return;
const parsedPrice = parsePrice(priceText);
if (parsedPrice === undefined) {
@@ -26,12 +27,12 @@ export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePri
return (
<View style={styles.row}>
<Pressable accessibilityRole="checkbox" onPress={onToggle} style={[styles.checkbox, item.checked ? styles.checked : null]}>
<Pressable accessibilityLabel={`${item.productName} ${item.checked ? 'als offen markieren' : 'abhaken'}`} accessibilityRole="checkbox" accessibilityState={{ checked: item.checked }} onPress={onToggle} style={[styles.checkbox, item.checked ? styles.checked : null]}>
<Text style={styles.checkText}>{item.checked ? '✓' : ''}</Text>
</Pressable>
<View style={styles.copy}>
<Text style={[styles.name, item.checked ? styles.done : null]}>{item.productName}</Text>
<Text style={styles.meta}>Menge {item.quantity} · {formatPrice(item.estimatedPrice, item.currency || 'CHF')}</Text>
<Text style={styles.meta}>{item.quantity} × {formatPrice(item.estimatedPrice, item.currency || 'CHF')}{item.quantity > 1 && typeof item.estimatedPrice === 'number' ? ` · ${formatPrice(item.estimatedPrice * item.quantity, item.currency || 'CHF')}` : ''}</Text>
<View style={styles.priceRow}>
<Text style={styles.currency}>{item.currency || 'CHF'}</Text>
<TextInput
@@ -51,7 +52,7 @@ export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePri
</View>
{priceError ? <Text style={styles.errorText}>{priceError}</Text> : null}
</View>
<Pressable accessibilityRole="button" onPress={onDelete} style={styles.deleteButton}>
<Pressable accessibilityLabel={`${item.productName} löschen`} accessibilityRole="button" onPress={onDelete} style={styles.deleteButton}>
<Text style={styles.deleteText}>Löschen</Text>
</Pressable>
</View>
@@ -78,7 +79,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
flexDirection: 'row',
gap: 12,
@@ -87,11 +88,11 @@ const styles = StyleSheet.create({
checkbox: {
alignItems: 'center',
borderColor: colors.primary,
borderRadius: 6,
borderRadius: 10,
borderWidth: 2,
height: 28,
height: 44,
justifyContent: 'center',
width: 28
width: 44
},
checked: {
backgroundColor: colors.primary
@@ -129,7 +130,7 @@ const styles = StyleSheet.create({
},
priceInput: {
borderColor: colors.border,
borderRadius: 8,
borderRadius: 10,
borderWidth: 1,
color: colors.text,
fontSize: 14,
@@ -144,8 +145,9 @@ const styles = StyleSheet.create({
marginTop: 4
},
deleteButton: {
paddingHorizontal: 8,
paddingVertical: 6
justifyContent: 'center',
minHeight: 44,
paddingHorizontal: 4
},
deleteText: {
color: colors.danger,
src/components/product/AlternativeProductCard.js
+4 -1
View File
@@ -9,7 +9,10 @@ export default function AlternativeProductCard({ item, onChoose, onOpen }) {
<View style={styles.wrap}>
<ProductCard product={item.product} rating={item.rating} onPress={onOpen} />
<Text style={styles.reason}>{item.reason}</Text>
<PrimaryButton label="Beste Alternative wählen" onPress={onChoose} />
<PrimaryButton
label={typeof item.product.price === 'number' ? 'Zur Liste hinzufügen' : 'Produkt ansehen'}
onPress={onChoose}
/>
</View>
);
}
src/components/product/ProductCard.js
+20 -4
View File
@@ -20,7 +20,10 @@ export default function ProductCard({ product, rating, onPress }) {
</Text>
<Text style={styles.source}>{sourceLabel(product.dataSource)}</Text>
</View>
</View>
<View style={styles.footer}>
{rating ? <ProductScoreBadge status={rating.overallStatus} score={rating.overallScore} /> : null}
<Text style={styles.openLabel}>Details ansehen ›</Text>
</View>
</Pressable>
);
@@ -40,7 +43,7 @@ const styles = StyleSheet.create({
card: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
gap: 10,
padding: 16
@@ -50,12 +53,25 @@ const styles = StyleSheet.create({
flexDirection: 'row',
gap: 12
},
footer: {
alignItems: 'center',
borderTopColor: colors.border,
borderTopWidth: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 11
},
openLabel: {
color: colors.primary,
fontSize: 13,
fontWeight: '800'
},
copy: {
flex: 1
},
name: {
color: colors.text,
fontSize: 17,
fontSize: 16,
fontWeight: '800'
},
meta: {
@@ -67,11 +83,11 @@ const styles = StyleSheet.create({
color: colors.muted,
fontSize: 13,
lineHeight: 18,
marginTop: 8
marginTop: 5
},
source: {
alignSelf: 'flex-start',
backgroundColor: '#eef3ef',
backgroundColor: colors.surfaceTint,
borderRadius: 8,
color: colors.primaryDark,
fontSize: 12,
src/components/product/ProductScoreBadge.js
+1 -1
View File
@@ -36,7 +36,7 @@ export default function ProductScoreBadge({ status, score }) {
const styles = StyleSheet.create({
badge: {
alignSelf: 'flex-start',
borderRadius: 8,
borderRadius: 999,
paddingHorizontal: 10,
paddingVertical: 6
},
src/components/product/RatingCategoryRow.js
+1 -1
View File
@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 16,
borderWidth: 1,
flexDirection: 'row',
gap: 12,
src/components/scan/BarcodeScannerView.js
+2 -2
View File
@@ -27,7 +27,7 @@ export default function BarcodeScannerView({ isLoadingProduct, isScanning, onBar
const styles = StyleSheet.create({
wrap: {
backgroundColor: '#000000',
borderRadius: 8,
borderRadius: 18,
height: 320,
overflow: 'hidden'
},
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
},
frame: {
borderColor: colors.surface,
borderRadius: 8,
borderRadius: 14,
borderWidth: 3,
height: 150,
width: '82%'
src/components/scan/ScanErrorModal.js
+1 -1
View File
@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
},
modal: {
backgroundColor: colors.surface,
borderRadius: 8,
borderRadius: 20,
gap: 14,
padding: 20,
width: '100%'
src/screens/AlternativesScreen.js
+1 -1
View File
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
empty: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
padding: 16
},
src/screens/HomeScreen.js
+56 -34
View File
@@ -7,40 +7,46 @@ import SectionTitle from '../components/layout/SectionTitle';
import ProductCard from '../components/product/ProductCard';
import { calculateProductRating } from '../services/ratingService';
import { colors } from '../utils/constants';
import { formatPrice } from '../utils/formatPrice';
export default function HomeScreen({ preferences, recentProducts, shoppingList, onStartScan, onOpenProduct, onOpenList }) {
const frequentProducts = [...recentProducts]
.filter((product) => (product.scanCount || 0) > 1)
.sort((a, b) => (b.scanCount || 0) - (a.scanCount || 0))
.slice(0, 3);
const openItems = shoppingList?.items?.filter((item) => !item.checked).length || 0;
return (
<ScreenContainer>
<AppHeader
title="Shoppinguin"
subtitle="Scanne Produkte im Supermarkt und erhalte eine persönliche Kaufempfehlung."
subtitle="Deine Entscheidungshilfe direkt am Regal"
/>
<View style={styles.hero}>
<Text style={styles.eyebrow}>Smart Shopping Companion</Text>
<Text style={styles.title}>Bereit für den nächsten Einkauf?</Text>
<Text style={styles.eyebrow}>PRODUKTE BESSER VERSTEHEN</Text>
<Text style={styles.title}>Wissen, was drinsteckt.</Text>
<Text style={styles.copy}>
Prüfe Allergien, Ernährung, Budget und Nachhaltigkeit direkt am Regal.
Barcode scannen und sofort sehen, wie ein Produkt zu deinen Zielen passt.
</Text>
<PrimaryButton label="Produkt scannen" onPress={onStartScan} />
{shoppingList?.items?.length > 0 ? (
<PrimaryButton label="Produkt scannen" onPress={onStartScan} tone="light" />
</View>
<Pressable accessibilityRole="button" onPress={onOpenList} style={styles.listShortcut}>
<Text style={styles.listShortcutTitle}>Einkaufsliste</Text>
<View style={styles.listShortcutText}>
<Text style={styles.listShortcutTitle}>Dein Einkauf</Text>
<Text style={styles.listShortcutCopy}>
{shoppingList.items.filter((item) => !item.checked).length} offene Produkte
{shoppingList?.items?.length ? `${openItems} noch offen · ${shoppingList.items.length} insgesamt` : 'Deine Liste ist noch leer'}
</Text>
</View>
<Text style={styles.listShortcutTotal}>
{shoppingList?.items?.length ? formatPrice(shoppingList.estimatedTotal, shoppingList.currency) : 'Liste öffnen'}
</Text>
</Pressable>
) : null}
</View>
{frequentProducts.length > 0 ? (
<>
<SectionTitle>Häufig gekauft</SectionTitle>
<SectionTitle>Häufig gescannt</SectionTitle>
{frequentProducts.map((product) => (
<View key={`frequent-${product.id}`} style={styles.frequentWrap}>
<ProductCard
@@ -54,11 +60,11 @@ export default function HomeScreen({ preferences, recentProducts, shoppingList,
</>
) : null}
<SectionTitle>Letzte Scans</SectionTitle>
<SectionTitle>Zuletzt angesehen</SectionTitle>
{recentProducts.length === 0 ? (
<View style={styles.emptyState}>
<Text style={styles.emptyTitle}>Noch keine Produkte gescannt</Text>
<Text style={styles.emptyCopy}>Starte einen Scan oder nutze die manuelle Suche.</Text>
<Text style={styles.emptyTitle}>Dein erster Scan wartet</Text>
<Text style={styles.emptyCopy}>Scanne einen Barcode oder suche ein Produkt nach Namen. Deine letzten Produkte erscheinen dann hier.</Text>
</View>
) : (
recentProducts.map((product) => (
@@ -76,29 +82,30 @@ export default function HomeScreen({ preferences, recentProducts, shoppingList,
const styles = StyleSheet.create({
hero: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderWidth: 1,
gap: 12,
padding: 18
backgroundColor: colors.primaryDark,
borderRadius: 22,
gap: 14,
padding: 24
},
eyebrow: {
color: colors.primary,
fontSize: 13,
color: '#b8e7ce',
fontSize: 12,
fontWeight: '800',
letterSpacing: 1.2,
textTransform: 'uppercase'
},
title: {
color: colors.text,
fontSize: 25,
color: colors.surface,
fontSize: 31,
fontWeight: '800',
lineHeight: 31
letterSpacing: -0.7,
lineHeight: 37
},
copy: {
color: colors.muted,
color: '#e2eee7',
fontSize: 16,
lineHeight: 23
lineHeight: 23,
marginBottom: 6
},
frequentWrap: {
gap: 6
@@ -113,9 +120,9 @@ const styles = StyleSheet.create({
emptyState: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
padding: 18
padding: 20
},
emptyTitle: {
color: colors.text,
@@ -129,18 +136,33 @@ const styles = StyleSheet.create({
marginTop: 4
},
listShortcut: {
backgroundColor: '#eaf4ef',
borderRadius: 8,
gap: 2,
padding: 12
alignItems: 'center',
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 18,
borderWidth: 1,
flexDirection: 'row',
gap: 12,
minHeight: 80,
padding: 18
},
listShortcutText: {
flex: 1,
gap: 4
},
listShortcutTitle: {
color: colors.primaryDark,
fontSize: 15,
fontSize: 17,
fontWeight: '800'
},
listShortcutCopy: {
color: colors.muted,
fontSize: 13
},
listShortcutTotal: {
color: colors.primary,
fontSize: 14,
fontWeight: '800',
textAlign: 'right'
}
});
src/screens/ProductDetailScreen.js
+61 -22
View File
@@ -1,5 +1,5 @@
import { useMemo, useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import PrimaryButton from '../components/PrimaryButton';
import SecondaryButton from '../components/SecondaryButton';
@@ -18,6 +18,7 @@ export default function ProductDetailScreen({
preferences,
onBack,
onAddToList,
onOpenList,
onSaveManualPrice,
onShowRatingCriteria,
onShowAlternatives
@@ -34,26 +35,27 @@ export default function ProductDetailScreen({
price: hasProductPrice ? product.price : parsedManualPrice
}), [currency, hasProductPrice, parsedManualPrice, product]);
const rating = useMemo(() => calculateProductRating(pricedProduct, preferences), [pricedProduct, preferences]);
const recommendation = rating.overallStatus === 'good' ? 'Passt gut zu dir' : rating.overallStatus === 'medium' ? 'Genauer prüfen' : 'Lieber meiden';
function addToList() {
if (!hasProductPrice && parsedManualPrice === undefined) {
if (!hasProductPrice && manualPrice.trim() && parsedManualPrice === undefined) {
setSavedMessage('');
setPriceError('Bitte gib einen Preis ein, bevor du das Produkt hinzufügst.');
setPriceError('Bitte gib einen gültigen Preis ein oder lasse das Feld leer.');
return;
}
if (typeof pricedProduct.price === 'number') {
if (!hasProductPrice && typeof pricedProduct.price === 'number') {
onSaveManualPrice(pricedProduct, pricedProduct.price);
}
onAddToList(pricedProduct);
setPriceError('');
setSavedMessage('Produkt wurde zur Einkaufsliste hinzugefügt.');
setSavedMessage('Zur Einkaufsliste hinzugefügt.');
}
return (
<ScreenContainer>
<AppHeader title="Produktbewertung" subtitle="Persönliche Einschätzung" onBack={onBack} />
<AppHeader title="Produkt im Check" subtitle="Bewertung nach deinen Einstellungen" onBack={onBack} />
<View style={styles.productPanel}>
<ProductImage imageUrl={product.imageUrl} productName={product.name} size="large" />
@@ -68,24 +70,27 @@ export default function ProductDetailScreen({
</View>
<ProductScoreBadge status={rating.overallStatus} score={rating.overallScore} />
</View>
<Text style={styles.summary}>
Empfehlung: {rating.overallStatus === 'good' ? 'kaufen' : rating.overallStatus === 'medium' ? 'prüfen' : 'meiden'}.
</Text>
<View style={[styles.recommendation, styles[`${rating.overallStatus}Recommendation`]]}>
<Text style={[styles.recommendationTitle, styles[`${rating.overallStatus}Text`]]}>{recommendation}</Text>
<Text style={styles.recommendationCopy}>Tippe unten auf ein Kriterium, um die Bewertung nachzuvollziehen.</Text>
</View>
</View>
{!hasProductPrice ? (
<View style={styles.pricePanel}>
<Text style={styles.priceTitle}>Preis ergänzen</Text>
<Text style={styles.priceTitle}>Ladenpreis ergänzen</Text>
<Text style={styles.priceCopy}>
Open Food Facts liefert keine Preise. Gib den Ladenpreis ein, damit die Einkaufsliste und Budgetprüfung stimmen.
Optional. Ohne Preis kannst du das Produkt speichern; die Einkaufssumme bleibt dann unvollständig.
</Text>
<View style={styles.priceInputRow}>
<Text style={styles.currency}>{currency}</Text>
<TextInput
accessibilityLabel="Ladenpreis"
keyboardType="decimal-pad"
onChangeText={(value) => {
setManualPrice(value);
setPriceError('');
setSavedMessage('');
}}
placeholder="z. B. 3.50"
placeholderTextColor={colors.muted}
@@ -97,6 +102,17 @@ export default function ProductDetailScreen({
</View>
) : null}
{savedMessage ? (
<View style={styles.savedPanel}>
<Text style={styles.saved}>{savedMessage}</Text>
<Pressable accessibilityRole="button" onPress={onOpenList}>
<Text style={styles.savedLink}>Einkaufsliste ansehen ›</Text>
</Pressable>
</View>
) : null}
<PrimaryButton label="Zur Einkaufsliste hinzufügen" onPress={addToList} />
<SecondaryButton label="Bessere Alternativen suchen" onPress={() => onShowAlternatives(product)} />
<SectionTitle>Bewertungskriterien</SectionTitle>
{Object.entries(rating.categoryScores).map(([category, categoryRating]) => (
<RatingCategoryRow
@@ -111,14 +127,11 @@ export default function ProductDetailScreen({
<View style={styles.dataPanel}>
<Text style={styles.dataText}>Barcode: {product.barcode}</Text>
<Text style={styles.dataText}>Zutaten: {(product.ingredients || []).join(', ') || 'Keine Angaben'}</Text>
<Text style={styles.dataText}>Allergene: {(product.allergens || []).join(', ') || 'Keine'}</Text>
<Text style={styles.dataText}>Allergene: {(product.allergens || []).join(', ') || 'Keine Angaben'}</Text>
<Text style={styles.dataText}>Nutri-Score: {product.nutrition?.nutriScore || 'Keine Angabe'}</Text>
<Text style={styles.dataText}>Eco-Score: {product.sustainability?.ecoScore || 'Keine Angabe'}</Text>
</View>
{savedMessage ? <Text style={styles.saved}>{savedMessage}</Text> : null}
<PrimaryButton label="Zur Einkaufsliste hinzufügen" onPress={addToList} />
<SecondaryButton label="Alternative anzeigen" onPress={() => onShowAlternatives(product)} />
</ScreenContainer>
);
}
@@ -148,7 +161,7 @@ const styles = StyleSheet.create({
productPanel: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 20,
borderWidth: 1,
gap: 14,
padding: 18
@@ -190,15 +203,30 @@ const styles = StyleSheet.create({
paddingHorizontal: 8,
paddingVertical: 4
},
summary: {
recommendation: {
borderRadius: 14,
gap: 4,
padding: 14
},
goodRecommendation: { backgroundColor: '#e4f4e9' },
mediumRecommendation: { backgroundColor: '#fff3d7' },
criticalRecommendation: { backgroundColor: '#fee9e7' },
recommendationTitle: {
fontSize: 17,
fontWeight: '800'
},
goodText: { color: colors.success },
mediumText: { color: '#8a5914' },
criticalText: { color: colors.danger },
recommendationCopy: {
color: colors.text,
fontSize: 16,
fontWeight: '700'
fontSize: 13,
lineHeight: 19
},
pricePanel: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
gap: 10,
padding: 16
@@ -225,7 +253,7 @@ const styles = StyleSheet.create({
},
priceInput: {
borderColor: colors.border,
borderRadius: 8,
borderRadius: 12,
borderWidth: 1,
color: colors.text,
flex: 1,
@@ -241,7 +269,7 @@ const styles = StyleSheet.create({
dataPanel: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
gap: 8,
padding: 14
@@ -255,5 +283,16 @@ const styles = StyleSheet.create({
color: colors.success,
fontSize: 14,
fontWeight: '800'
},
savedPanel: {
backgroundColor: colors.surfaceTint,
borderRadius: 14,
gap: 6,
padding: 14
},
savedLink: {
color: colors.primary,
fontSize: 14,
fontWeight: '800'
}
});
src/screens/ProfileScreen.js
+14 -4
View File
@@ -30,7 +30,7 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
<ScreenContainer>
<AppHeader
title="Profil"
subtitle="Präferenzen steuern die Produktbewertung global."
subtitle="Passe die Bewertung an deine Bedürfnisse an"
/>
<SectionTitle>Ernährungsziel</SectionTitle>
@@ -38,6 +38,7 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
{dietOptions.map((option) => (
<Pressable
accessibilityRole="button"
accessibilityState={{ selected: preferences.preferredDiet === option }}
key={option}
onPress={() => updatePreference('preferredDiet', option)}
style={[styles.chip, preferences.preferredDiet === option ? styles.activeChip : null]}
@@ -50,12 +51,14 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
</View>
<SectionTitle>Allergien vermeiden</SectionTitle>
<Text style={styles.sectionHint}>Wähle nur Allergene, die für dich relevant sind. Fehlende Produktangaben bleiben als unsicher markiert.</Text>
<View style={styles.optionGrid}>
{['Erdnüsse', 'Milch', 'Hafer', 'Gluten'].map((allergen) => {
const isActive = preferences.avoidAllergens?.includes(allergen);
return (
<Pressable
accessibilityRole="button"
accessibilityState={{ selected: isActive }}
key={allergen}
onPress={() => toggleAllergen(allergen)}
style={[styles.chip, isActive ? styles.dangerChip : null]}
@@ -111,6 +114,7 @@ function PrioritySelector({ label, value, onChange }) {
{priorityOptions.map((option) => (
<Pressable
accessibilityRole="button"
accessibilityState={{ selected: value === option }}
key={option}
onPress={() => onChange(option)}
style={[styles.priorityChip, value === option ? styles.activeChip : null]}
@@ -131,10 +135,16 @@ const styles = StyleSheet.create({
flexWrap: 'wrap',
gap: 8
},
sectionHint: {
color: colors.muted,
fontSize: 13,
lineHeight: 19,
marginTop: -10
},
chip: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 12,
borderWidth: 1,
paddingHorizontal: 12,
paddingVertical: 10
@@ -161,7 +171,7 @@ const styles = StyleSheet.create({
priorityRow: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 16,
borderWidth: 1,
gap: 10,
padding: 14
@@ -177,7 +187,7 @@ const styles = StyleSheet.create({
},
priorityChip: {
borderColor: colors.border,
borderRadius: 8,
borderRadius: 12,
borderWidth: 1,
flex: 1,
paddingVertical: 10,
src/screens/ScanScreen.js
+56 -15
View File
@@ -24,6 +24,8 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
const [manualSearchQuery, setManualSearchQuery] = useState('');
const [manualResults, setManualResults] = useState([]);
const [isSearching, setIsSearching] = useState(false);
const [hasSearched, setHasSearched] = useState(false);
const [searchError, setSearchError] = useState('');
async function handleBarcodeScanned(event) {
if (!isScanning) return;
@@ -50,9 +52,14 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
if (!manualSearchQuery.trim() || isSearching) return;
setIsSearching(true);
setSearchError('');
try {
const results = await searchProducts(manualSearchQuery, productCache, preferences.offlineModeEnabled);
setManualResults(results);
setHasSearched(true);
} catch (error) {
setManualResults([]);
setSearchError('Die Suche ist gerade nicht verfügbar. Bitte versuche es erneut.');
} finally {
setIsSearching(false);
}
@@ -69,17 +76,19 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
return (
<ScreenContainer>
<AppHeader
title="Scan"
subtitle={preferences.offlineModeEnabled ? 'Offline-Modus aktiv: nur Cache-Produkte verfügbar.' : 'Barcode scannen oder Produkt manuell suchen.'}
title="Produkt scannen"
subtitle={preferences.offlineModeEnabled ? 'Offline aktiv · nur gespeicherte Produkte' : 'Barcode scannen oder nach einem Produkt suchen'}
/>
{!permission?.granted && Platform.OS !== 'web' ? (
{permission && !permission.granted && Platform.OS !== 'web' ? (
<View style={styles.permissionBox}>
<Text style={styles.permissionTitle}>Kamera-Berechtigung benötigt</Text>
<Text style={styles.permissionTitle}>Kamera für den Scan freigeben</Text>
<Text style={styles.permissionCopy}>
Shoppinguin braucht die Kamera, um Barcodes direkt im Laden zu erfassen.
{permission.canAskAgain
? 'Shoppinguin braucht die Kamera, um Barcodes direkt im Laden zu erfassen.'
: 'Aktiviere den Kamerazugriff in den Einstellungen deines Geräts. Die Produktsuche funktioniert auch ohne Kamera.'}
</Text>
<PrimaryButton label="Kamera erlauben" onPress={requestPermission} />
{permission.canAskAgain ? <PrimaryButton label="Kamera erlauben" onPress={requestPermission} /> : null}
</View>
) : null}
@@ -87,35 +96,46 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
<>
<BarcodeScannerView isLoadingProduct={isLoadingProduct} isScanning={isScanning} onBarcodeScanned={handleBarcodeScanned} />
<SecondaryButton
disabled={isLoadingProduct}
label={isScanning ? 'Scan pausieren' : 'Scan fortsetzen'}
onPress={() => setIsScanning((current) => !current)}
/>
</>
) : (
<View style={styles.permissionBox}>
<Text style={styles.permissionTitle}>Scanner-Simulation</Text>
<Text style={styles.permissionTitle}>Beispielprodukt öffnen</Text>
<Text style={styles.permissionCopy}>
Auf Web oder ohne Kamera kannst du Open-Food-Facts-Barcodes testen.
Du kannst einen Beispiel-Barcode ausprobieren oder unten nach einem Produkt suchen.
</Text>
{isLoadingProduct ? <Text style={styles.note}>Produkt wird geladen...</Text> : null}
<View style={styles.demoRow}>
<SecondaryButton label="Nutella" onPress={() => handleBarcodeScanned({ data: '3017620422003' })} />
<SecondaryButton label="OpenFoodFacts Beispiel" onPress={() => handleBarcodeScanned({ data: '737628064502' })} />
<SecondaryButton label="Weiteres Beispiel" onPress={() => handleBarcodeScanned({ data: '737628064502' })} />
</View>
</View>
)}
<SectionTitle>Manuelle Suche</SectionTitle>
<SectionTitle>Nach Produkt suchen</SectionTitle>
<ManualSearchInput
onChangeText={setManualSearchQuery}
onChangeText={(value) => {
setManualSearchQuery(value);
setManualResults([]);
setHasSearched(false);
setSearchError('');
}}
onSubmit={handleManualSearch}
disabled={isSearching}
value={manualSearchQuery}
/>
{isSearching ? <Text style={styles.note}>Suche läuft...</Text> : null}
{!isSearching && manualSearchQuery && manualResults.length === 0 ? (
<Text style={styles.note}>Keine Treffer gefunden.</Text>
{searchError ? <Text style={styles.errorNote}>{searchError}</Text> : null}
{!isSearching && hasSearched && manualResults.length === 0 ? (
<View style={styles.emptyResults}>
<Text style={styles.permissionTitle}>Kein passendes Produkt gefunden</Text>
<Text style={styles.permissionCopy}>Prüfe die Schreibweise oder suche nach dem Barcode.</Text>
</View>
) : null}
{manualResults.length > 0 ? <Text style={styles.resultsCount}>{manualResults.length} Treffer</Text> : null}
{manualResults.map((product) => (
<ProductCard
key={product.id}
@@ -128,7 +148,10 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
<ScanErrorModal
message={scanError}
onClose={retryScan}
onManualSearch={() => setIsErrorModalVisible(false)}
onManualSearch={() => {
setIsErrorModalVisible(false);
setIsScanning(true);
}}
onRetry={retryScan}
visible={isErrorModalVisible}
/>
@@ -140,11 +163,19 @@ const styles = StyleSheet.create({
permissionBox: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
gap: 12,
padding: 16
},
emptyResults: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 16,
borderWidth: 1,
gap: 6,
padding: 16
},
permissionTitle: {
color: colors.text,
fontSize: 18,
@@ -161,5 +192,15 @@ const styles = StyleSheet.create({
note: {
color: colors.muted,
fontSize: 14
},
errorNote: {
color: colors.danger,
fontSize: 14,
fontWeight: '700'
},
resultsCount: {
color: colors.muted,
fontSize: 13,
fontWeight: '700'
}
});
src/screens/ShoppingListScreen.js
+131 -16
View File
@@ -1,5 +1,7 @@
import { StyleSheet, Text, View } from 'react-native';
import { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import PrimaryButton from '../components/PrimaryButton';
import SecondaryButton from '../components/SecondaryButton';
import AppHeader from '../components/layout/AppHeader';
import ScreenContainer from '../components/layout/ScreenContainer';
@@ -11,15 +13,22 @@ import { formatPrice } from '../utils/formatPrice';
export default function ShoppingListScreen({
preferences,
shoppingList,
lastDeletedItem,
onToggleItem,
onDeleteItem,
onUndoDelete,
onUpdateItemPrice,
onStartScan,
onOpenProfile,
onCompleteList
}) {
const [isConfirming, setIsConfirming] = useState(false);
const [wasCompleted, setWasCompleted] = useState(false);
const openItems = shoppingList.items.filter((item) => !item.checked).length;
const itemsWithoutPrice = shoppingList.items.filter((item) => typeof item.estimatedPrice !== 'number').length;
const budget = preferences.maxBudgetPerShoppingTrip;
const budgetShare = typeof budget === 'number' && budget > 0 ? shoppingList.estimatedTotal / budget : 0;
const hasBudget = typeof budget === 'number' && budget > 0;
const budgetShare = hasBudget ? shoppingList.estimatedTotal / budget : 0;
const budgetStatus = budgetShare <= 0.75 ? 'good' : budgetShare <= 1 ? 'medium' : 'critical';
const dailyWarnings = calculateShoppingListWarnings(shoppingList);
@@ -27,17 +36,32 @@ export default function ShoppingListScreen({
<ScreenContainer>
<AppHeader
title="Einkaufsliste"
subtitle={`${openItems} offene Produkte · ${formatPrice(shoppingList.estimatedTotal, shoppingList.currency)}`}
subtitle={shoppingList.items.length ? `${openItems} offen · ${shoppingList.items.length} insgesamt` : 'Alles für deinen nächsten Einkauf'}
/>
{wasCompleted && shoppingList.items.length === 0 ? (
<View style={styles.completedNotice}>
<Text style={styles.completedText}>Einkauf abgeschlossen. Deine neue Liste ist bereit.</Text>
</View>
) : null}
{lastDeletedItem ? (
<View style={styles.undoNotice}>
<Text style={styles.undoText}>{lastDeletedItem.item.productName} entfernt</Text>
<Pressable accessibilityRole="button" onPress={onUndoDelete}>
<Text style={styles.undoAction}>Rückgängig</Text>
</Pressable>
</View>
) : null}
<View style={styles.summary}>
<Text style={styles.summaryTitle}>{shoppingList.title}</Text>
<Text style={styles.summaryCopy}>
Produkte abhaken, löschen oder nach dem Einkauf abschliessen.
</Text>
<View style={styles.budgetBox}>
<Text style={styles.summaryTitle}>Deine Liste</Text>
<Text style={styles.totalLabel}>{itemsWithoutPrice ? 'Bekannte Summe' : 'Voraussichtliche Summe'}</Text>
<Text style={styles.totalValue}>{formatPrice(shoppingList.estimatedTotal, shoppingList.currency)}</Text>
{itemsWithoutPrice ? <Text style={styles.summaryCopy}>{itemsWithoutPrice} {itemsWithoutPrice === 1 ? 'Produkt ohne Preis ist' : 'Produkte ohne Preis sind'} nicht eingerechnet.</Text> : null}
{hasBudget ? <View style={styles.budgetBox}>
<View style={styles.budgetHeader}>
<Text style={styles.budgetLabel}>Budget pro {budgetPeriodLabels[preferences.budgetPeriod] || 'Woche'}</Text>
<Text style={styles.budgetLabel}>Anteil am Budget pro {budgetPeriodLabels[preferences.budgetPeriod] || 'Woche'}</Text>
<Text style={[styles.budgetValue, styles[budgetStatus]]}>
{formatPrice(shoppingList.estimatedTotal, shoppingList.currency)} von {formatPrice(budget, shoppingList.currency)}
</Text>
@@ -51,7 +75,11 @@ export default function ShoppingListScreen({
]}
/>
</View>
</View>
</View> : (
<Pressable accessibilityRole="button" onPress={onOpenProfile} style={styles.budgetLink}>
<Text style={styles.budgetLinkText}>Budget im Profil festlegen ›</Text>
</Pressable>
)}
</View>
{dailyWarnings.length > 0 ? (
@@ -95,7 +123,23 @@ export default function ShoppingListScreen({
)}
{shoppingList.items.length > 0 ? (
<SecondaryButton label="Einkauf abschliessen" onPress={onCompleteList} />
<>
<SecondaryButton label="Weiteres Produkt scannen" onPress={onStartScan} />
{isConfirming ? (
<View style={styles.confirmPanel}>
<Text style={styles.confirmTitle}>Einkauf abschliessen?</Text>
<Text style={styles.confirmCopy}>Die aktuelle Liste wird geleert. Gespeicherte Produktdaten bleiben erhalten.</Text>
<PrimaryButton label="Ja, Einkauf abschliessen" onPress={() => {
onCompleteList();
setIsConfirming(false);
setWasCompleted(true);
}} />
<SecondaryButton label="Abbrechen" onPress={() => setIsConfirming(false)} />
</View>
) : (
<SecondaryButton label="Einkauf abschliessen" onPress={() => setIsConfirming(true)} />
)}
</>
) : null}
</ScreenContainer>
);
@@ -113,9 +157,9 @@ const styles = StyleSheet.create({
summary: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 20,
borderWidth: 1,
padding: 16
padding: 18
},
summaryTitle: {
color: colors.text,
@@ -126,11 +170,35 @@ const styles = StyleSheet.create({
color: colors.muted,
fontSize: 14,
lineHeight: 20,
marginTop: 4
marginTop: 7
},
totalLabel: {
color: colors.muted,
fontSize: 13,
fontWeight: '700',
marginTop: 16
},
totalValue: {
color: colors.text,
fontSize: 30,
fontWeight: '800',
letterSpacing: -0.6,
marginTop: 2
},
budgetBox: {
marginTop: 14
},
budgetLink: {
minHeight: 44,
justifyContent: 'center',
alignSelf: 'flex-start',
marginTop: 8
},
budgetLinkText: {
color: colors.primary,
fontSize: 14,
fontWeight: '800'
},
budgetHeader: {
alignItems: 'flex-start',
gap: 4,
@@ -179,7 +247,7 @@ const styles = StyleSheet.create({
},
warningBox: {
backgroundColor: colors.surface,
borderRadius: 8,
borderRadius: 16,
borderWidth: 1,
padding: 14
},
@@ -202,7 +270,7 @@ const styles = StyleSheet.create({
empty: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 8,
borderRadius: 18,
borderWidth: 1,
gap: 12,
padding: 16
@@ -216,5 +284,52 @@ const styles = StyleSheet.create({
color: colors.muted,
fontSize: 14,
lineHeight: 20
},
confirmPanel: {
backgroundColor: colors.surface,
borderColor: colors.border,
borderRadius: 18,
borderWidth: 1,
gap: 12,
padding: 18
},
confirmTitle: {
color: colors.text,
fontSize: 18,
fontWeight: '800'
},
confirmCopy: {
color: colors.muted,
fontSize: 14,
lineHeight: 20
},
completedNotice: {
backgroundColor: colors.surfaceTint,
borderRadius: 14,
padding: 14
},
completedText: {
color: colors.primaryDark,
fontSize: 14,
fontWeight: '800'
},
undoNotice: {
alignItems: 'center',
backgroundColor: colors.text,
borderRadius: 14,
flexDirection: 'row',
gap: 12,
padding: 14
},
undoText: {
color: colors.surface,
flex: 1,
fontSize: 14,
fontWeight: '700'
},
undoAction: {
color: '#b8e7ce',
fontSize: 14,
fontWeight: '800'
}
});
src/utils/constants.js
+11 -10
View File
@@ -1,11 +1,12 @@
export const colors = {
background: '#f7f3ea',
background: '#f6f8f5',
surface: '#ffffff',
text: '#18201d',
muted: '#5a6a64',
border: '#d8ded9',
primary: '#256f5b',
primaryDark: '#174b3d',
surfaceTint: '#e9f4ef',
text: '#16251f',
muted: '#52665d',
border: '#dce7e0',
primary: '#176b50',
primaryDark: '#104934',
warning: '#b7791f',
danger: '#b42318',
success: '#1f7a4d'
@@ -13,10 +14,10 @@ export const colors = {
export const defaultPreferences = {
id: 'local-user',
avoidAllergens: ['Erdnüsse'],
preferredDiet: 'lowSugar',
preferBio: true,
maxBudgetPerShoppingTrip: 45,
avoidAllergens: [],
preferredDiet: 'none',
preferBio: false,
maxBudgetPerShoppingTrip: undefined,
budgetPeriod: 'week',
currency: 'CHF',
offlineModeEnabled: false,