feat(mobile): applique l'identité visuelle DSFR (bleu France, République Française)
- palette officielle DSFR (#000091, rouge Marianne, gris DSFR) dans lib/colors.ts - composant RepubliqueHeader (bloc « République Française » + service CESIZen) - restyle boutons/champs/cartes/onglets/urgence au style gouv.fr sur tous les écrans - couleurs d'émotions conservées Le DSFR étant un framework web, le mobile en reçoit l'identité visuelle (pas les classes fr-*). tsc 0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Azmog
@@ -112,7 +112,7 @@ export default function EditEntryScreen() {
|
||||
onPress={handleSubmit}
|
||||
disabled={updateSaisie.isPending || !emotionId}
|
||||
>
|
||||
<Ionicons name="checkmark" size={20} color={Colors.black} />
|
||||
<Ionicons name="checkmark" size={20} color={Colors.white} />
|
||||
<Text style={styles.submitBtnText}>
|
||||
{updateSaisie.isPending ? 'Envoi...' : 'Enregistrer'}
|
||||
</Text>
|
||||
@@ -129,34 +129,35 @@ const styles = StyleSheet.create({
|
||||
loadingText: { color: Colors.gray[400], fontSize: 16 },
|
||||
title: { fontSize: 24, fontWeight: '800', color: Colors.black, marginBottom: 24 },
|
||||
section: { marginBottom: 24 },
|
||||
label: { fontSize: 15, fontWeight: '700', color: Colors.gray[700], marginBottom: 10 },
|
||||
label: { fontSize: 15, fontWeight: '700', color: Colors.black, marginBottom: 10 },
|
||||
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 16 },
|
||||
intensityValue: { fontSize: 48, fontWeight: '800', color: Colors.black },
|
||||
intensityUnit: { fontSize: 20, color: Colors.gray[400], marginLeft: 4 },
|
||||
sliderButtons: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
|
||||
sliderDot: {
|
||||
width: 28, height: 28, borderRadius: 14,
|
||||
width: 28, height: 28, borderRadius: 4,
|
||||
backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center',
|
||||
},
|
||||
sliderDotActive: { backgroundColor: Colors.primary },
|
||||
sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
|
||||
sliderDotTextActive: { color: Colors.black },
|
||||
sliderDotTextActive: { color: Colors.white },
|
||||
sliderLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 },
|
||||
sliderLabel: { fontSize: 12, color: Colors.gray[400] },
|
||||
textArea: {
|
||||
backgroundColor: Colors.gray[50], borderWidth: 1, borderColor: Colors.gray[200],
|
||||
borderRadius: 16, padding: 16, fontSize: 15, color: Colors.black, minHeight: 100,
|
||||
backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
|
||||
borderBottomWidth: 2, borderBottomColor: Colors.black,
|
||||
padding: 16, fontSize: 15, color: Colors.black, minHeight: 100,
|
||||
},
|
||||
actionsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8, gap: 12 },
|
||||
cancelBtn: {
|
||||
flex: 1, paddingVertical: 16, borderRadius: 14,
|
||||
backgroundColor: Colors.gray[100], alignItems: 'center',
|
||||
flex: 1, paddingVertical: 16, borderRadius: 4,
|
||||
backgroundColor: Colors.white, alignItems: 'center', borderWidth: 1, borderColor: Colors.primary,
|
||||
},
|
||||
cancelBtnText: { fontSize: 15, fontWeight: '600', color: Colors.gray[600] },
|
||||
cancelBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
|
||||
submitBtn: {
|
||||
flex: 1, flexDirection: 'row', gap: 8, paddingVertical: 16, borderRadius: 14,
|
||||
backgroundColor: Colors.secondary, alignItems: 'center', justifyContent: 'center',
|
||||
flex: 1, flexDirection: 'row', gap: 8, paddingVertical: 16, borderRadius: 4,
|
||||
backgroundColor: Colors.primary, alignItems: 'center', justifyContent: 'center',
|
||||
},
|
||||
submitBtnText: { fontSize: 15, fontWeight: '700', color: Colors.black },
|
||||
submitBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
|
||||
btnDisabled: { opacity: 0.5 },
|
||||
});
|
||||
|
||||
@@ -81,7 +81,7 @@ export default function JournalScreen() {
|
||||
}
|
||||
/>
|
||||
<TouchableOpacity style={styles.fab} onPress={() => router.push('/(tabs)/journal/new')}>
|
||||
<Ionicons name="add" size={28} color={Colors.black} />
|
||||
<Ionicons name="add" size={28} color={Colors.white} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
@@ -92,14 +92,14 @@ const styles = StyleSheet.create({
|
||||
listContent: { padding: 16, paddingBottom: 80 },
|
||||
saisieCard: {
|
||||
flexDirection: 'row', alignItems: 'flex-start', gap: 12, padding: 16,
|
||||
backgroundColor: Colors.gray[50], borderRadius: 16, marginBottom: 10,
|
||||
borderWidth: 1, borderColor: Colors.gray[100],
|
||||
backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
|
||||
borderWidth: 1, borderColor: Colors.gray[200],
|
||||
},
|
||||
emotionIcon: { width: 48, height: 48, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
|
||||
emotionIcon: { width: 48, height: 48, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
|
||||
emotionEmoji: { fontSize: 24 },
|
||||
saisieContent: { flex: 1 },
|
||||
saisieHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 6 },
|
||||
badge: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 8 },
|
||||
badge: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 4 },
|
||||
badgeText: { fontSize: 13, fontWeight: '600' },
|
||||
intensityText: { fontSize: 12, color: Colors.gray[400] },
|
||||
intensityBar: { height: 4, backgroundColor: Colors.gray[200], borderRadius: 2, marginBottom: 6 },
|
||||
@@ -113,7 +113,7 @@ const styles = StyleSheet.create({
|
||||
emptyText: { fontSize: 14, color: Colors.gray[400], marginTop: 4 },
|
||||
fab: {
|
||||
position: 'absolute', right: 20, bottom: 20,
|
||||
width: 56, height: 56, borderRadius: 28,
|
||||
width: 56, height: 56, borderRadius: 4,
|
||||
backgroundColor: Colors.primary, justifyContent: 'center', alignItems: 'center',
|
||||
shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8,
|
||||
elevation: 6,
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function NewEntryScreen() {
|
||||
disabled={!emotionId}
|
||||
>
|
||||
<Text style={styles.nextBtnText}>Suivant</Text>
|
||||
<Ionicons name="arrow-forward" size={20} color={Colors.black} />
|
||||
<Ionicons name="arrow-forward" size={20} color={Colors.white} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
@@ -96,12 +96,12 @@ export default function NewEntryScreen() {
|
||||
</View>
|
||||
<View style={styles.navRow}>
|
||||
<TouchableOpacity style={styles.backBtn} onPress={() => setStep(1)}>
|
||||
<Ionicons name="arrow-back" size={20} color={Colors.gray[600]} />
|
||||
<Ionicons name="arrow-back" size={20} color={Colors.primary} />
|
||||
<Text style={styles.backBtnText}>Retour</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.nextBtn} onPress={() => setStep(3)}>
|
||||
<Text style={styles.nextBtnText}>Suivant</Text>
|
||||
<Ionicons name="arrow-forward" size={20} color={Colors.black} />
|
||||
<Ionicons name="arrow-forward" size={20} color={Colors.white} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
@@ -122,7 +122,7 @@ export default function NewEntryScreen() {
|
||||
/>
|
||||
<View style={styles.navRow}>
|
||||
<TouchableOpacity style={styles.backBtn} onPress={() => setStep(2)}>
|
||||
<Ionicons name="arrow-back" size={20} color={Colors.gray[600]} />
|
||||
<Ionicons name="arrow-back" size={20} color={Colors.primary} />
|
||||
<Text style={styles.backBtnText}>Retour</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
@@ -130,7 +130,7 @@ export default function NewEntryScreen() {
|
||||
onPress={handleSubmit}
|
||||
disabled={createSaisie.isPending}
|
||||
>
|
||||
<Ionicons name="checkmark" size={20} color={Colors.black} />
|
||||
<Ionicons name="checkmark" size={20} color={Colors.white} />
|
||||
<Text style={styles.nextBtnText}>{createSaisie.isPending ? 'Envoi...' : 'Enregistrer'}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -149,11 +149,11 @@ const styles = StyleSheet.create({
|
||||
width: 32, height: 32, borderRadius: 16, backgroundColor: Colors.gray[200],
|
||||
justifyContent: 'center', alignItems: 'center',
|
||||
},
|
||||
stepActive: { backgroundColor: Colors.secondary },
|
||||
stepActive: { backgroundColor: Colors.primary },
|
||||
stepNumber: { fontSize: 14, fontWeight: '700', color: Colors.gray[500] },
|
||||
stepNumberActive: { color: Colors.white },
|
||||
stepLine: { width: 40, height: 3, backgroundColor: Colors.gray[200], marginHorizontal: 4 },
|
||||
stepLineActive: { backgroundColor: Colors.secondary },
|
||||
stepLineActive: { backgroundColor: Colors.primary },
|
||||
stepTitle: { fontSize: 20, fontWeight: '700', color: Colors.black, marginBottom: 20 },
|
||||
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 24 },
|
||||
intensityValue: { fontSize: 64, fontWeight: '800', color: Colors.black },
|
||||
@@ -165,20 +165,21 @@ const styles = StyleSheet.create({
|
||||
sliderTrack: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 8 },
|
||||
sliderFill: { height: 6, backgroundColor: Colors.primary, borderRadius: 3 },
|
||||
sliderButtons: { flexDirection: 'row', justifyContent: 'space-between' },
|
||||
sliderDot: { width: 28, height: 28, borderRadius: 14, backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center' },
|
||||
sliderDot: { width: 28, height: 28, borderRadius: 4, backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center' },
|
||||
sliderDotActive: { backgroundColor: Colors.primary },
|
||||
sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
|
||||
sliderDotTextActive: { color: Colors.black },
|
||||
sliderDotTextActive: { color: Colors.white },
|
||||
textArea: {
|
||||
backgroundColor: Colors.gray[50], borderWidth: 1, borderColor: Colors.gray[200],
|
||||
borderRadius: 16, padding: 16, fontSize: 15, color: Colors.black,
|
||||
backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
|
||||
borderBottomWidth: 2, borderBottomColor: Colors.black,
|
||||
padding: 16, fontSize: 15, color: Colors.black,
|
||||
minHeight: 120, marginBottom: 24,
|
||||
},
|
||||
navRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 16 },
|
||||
backBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 20, borderRadius: 12, backgroundColor: Colors.gray[100] },
|
||||
backBtnText: { fontSize: 15, fontWeight: '600', color: Colors.gray[600] },
|
||||
nextBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 12, backgroundColor: Colors.primary },
|
||||
submitBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 12, backgroundColor: Colors.secondary },
|
||||
nextBtnText: { fontSize: 15, fontWeight: '700', color: Colors.black },
|
||||
backBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 20, borderRadius: 4, backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.primary },
|
||||
backBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
|
||||
nextBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
|
||||
submitBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
|
||||
nextBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
|
||||
btnDisabled: { opacity: 0.5 },
|
||||
});
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function ReportsScreen() {
|
||||
<Text style={styles.statLabel}>Intensite moy.</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Ionicons name="heart" size={20} color="#FF69B4" />
|
||||
<Ionicons name="heart" size={20} color={Colors.rougeMarianne} />
|
||||
<Text style={styles.statValue}>{rapport.stats.emotion_dominante?.icone || '—'}</Text>
|
||||
<Text style={styles.statLabel}>{rapport.stats.emotion_dominante?.nom || 'Aucune'}</Text>
|
||||
</View>
|
||||
@@ -102,17 +102,17 @@ export default function ReportsScreen() {
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: Colors.white },
|
||||
content: { padding: 20, paddingBottom: 40 },
|
||||
periodRow: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: 12, padding: 4, marginBottom: 20 },
|
||||
periodBtn: { flex: 1, paddingVertical: 10, alignItems: 'center', borderRadius: 10 },
|
||||
periodBtnActive: { backgroundColor: Colors.white, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2 },
|
||||
periodRow: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: 4, padding: 4, marginBottom: 20 },
|
||||
periodBtn: { flex: 1, paddingVertical: 10, alignItems: 'center', borderRadius: 4 },
|
||||
periodBtnActive: { backgroundColor: Colors.primary },
|
||||
periodText: { fontSize: 13, fontWeight: '600', color: Colors.gray[500] },
|
||||
periodTextActive: { color: Colors.black },
|
||||
periodTextActive: { color: Colors.white },
|
||||
loading: { padding: 40, alignItems: 'center' },
|
||||
loadingText: { color: Colors.gray[400] },
|
||||
statsRow: { flexDirection: 'row', gap: 10, marginBottom: 16 },
|
||||
statCard: {
|
||||
flex: 1, backgroundColor: Colors.gray[50], borderRadius: 16, padding: 16,
|
||||
alignItems: 'center', gap: 6, borderWidth: 1, borderColor: Colors.gray[100],
|
||||
flex: 1, backgroundColor: Colors.gray[50], borderRadius: 4, padding: 16,
|
||||
alignItems: 'center', gap: 6, borderWidth: 1, borderColor: Colors.gray[200],
|
||||
},
|
||||
statValue: { fontSize: 22, fontWeight: '800', color: Colors.black },
|
||||
statLabel: { fontSize: 11, color: Colors.gray[500] },
|
||||
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
|
||||
repartitionItem: { marginBottom: 16 },
|
||||
repartitionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 6 },
|
||||
colorDot: { width: 10, height: 10, borderRadius: 5, marginRight: 8 },
|
||||
repartitionName: { flex: 1, fontSize: 14, fontWeight: '600', color: Colors.gray[700] },
|
||||
repartitionName: { flex: 1, fontSize: 14, fontWeight: '600', color: Colors.black },
|
||||
repartitionPct: { fontSize: 14, fontWeight: '700', color: Colors.black },
|
||||
progressBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 4 },
|
||||
progressFill: { height: 6, borderRadius: 3 },
|
||||
|
||||
Reference in New Issue
Block a user