frontend: draft new page components
Parents:
11192d32 file(s) changed
- frontend/app/(tabs)/new/index.tsx +52 -3
- frontend/app/auth/login.tsx +1 -1
frontend/app/(tabs)/new/index.tsx
@@ -16,7 +16,8 @@ import { Badge } from '@/components/ui/Badge';
16 16 import { Button } from '@/components/ui/Button';
17 17 import { Section, SectionHeader } from '@/components/ui/Sections';
18 18 import { MoodSelector } from '@/components/ui/EmojiSelectors';
19 - import { Typography, Spacing, Shadows, Colors } from '@/constants/theme';
19 + import { Typography, Spacing, Shadows, Colors, BorderRadius } from '@/constants/theme';
20 + import { Ionicons } from '@expo/vector-icons';
20 21 import { router } from 'expo-router';
21 22 import {
22 23 MoodDefinition, MOODS
@@ -84,10 +85,40 @@
84 85 {/* TODO: Check whether we gonna have to generate these on demand */}
85 86 <Section>
86 87 <Grid gap={4}>
87 - <Card style={{minHeight: 150, backgroundColor: 'powderblue'}}>
88 + <Card style={{ padding: Spacing.cardGap }}>
89 + <View style={{ flex: 1, flexDirection: 'row', flexGrow: 0, paddingVertical: 10 }}>
90 + <Ionicons name="flash" size={20} color="#64748B" />
91 +
92 + <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
93 + Energia
94 + </Text>
95 + </View>
96 +
97 + <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
98 + Média Alta
99 + </Text>
100 +
101 + <View style={styles.lineTrack}>
102 + <View style={[styles.lineFill, { width: `35%` }]} />
103 + </View>
88 104 </Card>
89 105
90 - <Card style={{minHeight: 150, backgroundColor: 'tomato'}}>
106 + <Card style={{ padding: Spacing.cardGap }}>
107 + <View style={{ flex: 1, flexDirection: 'row', flexGrow: 0, paddingVertical: 10 }}>
108 + <Ionicons name="moon-outline" size={20} color="#64748B" />
109 +
110 + <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
111 + Sono
112 + </Text>
113 + </View>
114 +
115 + <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
116 + 7h 30m
117 + </Text>
118 +
119 + <Text style={styles.indicatorGreen}>
120 + +45min que ontem
121 + </Text>
91 122 </Card>
92 123 </Grid>
93 124 </Section>
@@ -128,5 +159,23 @@ marginLeft: 16,
128 159 marginRight: 16,
129 160 marginBottom: 16,
130 161 ...Shadows.lg
162 + },
163 + lineTrack: {
164 + height: 6,
165 + backgroundColor: Colors.light.divider,
166 + borderRadius: BorderRadius.full,
167 + marginBottom: 4,
168 + overflow: 'hidden',
169 + },
170 + lineFill: {
171 + height: '100%',
172 + backgroundColor: Colors.light.tint,
173 + borderRadius: BorderRadius.full,
174 + },
175 + indicatorGreen: {
176 + color: Colors.light.tint,
177 + fontSize: 11,
178 + fontWeight: 600,
179 + lineHeight: 16.5
131 180 }
132 181 });
frontend/app/auth/login.tsx
@@ -67,7 +67,7 @@ >
67 67 <View style={styles.header}>
68 68 <Text style={[styles.title, { color: textColor }]}>Bem vindo de volta</Text>
69 69 <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
70 - Logue na sua conta
70 + Logue na sua conta nexo
71 71 </Text>
72 72 </View>
73 73