ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign web menu layout, add header cover banner & dynamic header layout, refine mobile inputs and theme selector

Browse Source
This commit is contained in:
AyrisAI
2026-08-20 15:07:13 +03:00
parent 6fb91c94ff
commit 0836fc8539
17 changed files with 311 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/src/app/account/index.tsx
+15 -88
View File
@@ -560,8 +560,8 @@ export default function AccountScreen() {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FAF8F5",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 12,
}}
@@ -570,7 +570,7 @@ export default function AccountScreen() {
value={newDomainInput}
onChangeText={setNewDomainInput}
placeholder="Örn: menu.kebapciahmet.com"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
autoCapitalize="none"
autoCorrect={false}
style={{
@@ -728,15 +728,17 @@ export default function AccountScreen() {
value={name}
onChangeText={setName}
placeholder="Restoran Adı"
placeholderTextColor="#57534E"
style={{
backgroundColor: "#FAF8F5",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 10,
paddingHorizontal: 14,
paddingVertical: 12,
fontSize: 14,
color: "#1C1917",
fontWeight: "500",
}}
/>
</View>
@@ -750,16 +752,18 @@ export default function AccountScreen() {
value={phone}
onChangeText={setPhone}
placeholder="05xx xxx xx xx"
placeholderTextColor="#57534E"
keyboardType="phone-pad"
style={{
backgroundColor: "#FAF8F5",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 10,
paddingHorizontal: 14,
paddingVertical: 12,
fontSize: 14,
color: "#1C1917",
fontWeight: "500",
}}
/>
</View>
@@ -773,17 +777,19 @@ export default function AccountScreen() {
value={address}
onChangeText={setAddress}
placeholder="Restoran adresi"
placeholderTextColor="#57534E"
multiline
numberOfLines={2}
style={{
backgroundColor: "#FAF8F5",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 10,
paddingHorizontal: 14,
paddingVertical: 12,
fontSize: 14,
color: "#1C1917",
fontWeight: "500",
minHeight: 64,
}}
/>
@@ -806,85 +812,6 @@ export default function AccountScreen() {
</Text>
</Pressable>
</View>
{/* Theme Selector */}
<View
style={{
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 1,
borderColor: "#E7E5E4",
gap: 14,
}}
>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Ionicons name="color-palette-outline" size={20} color="#C8A96B" />
<Text style={{ fontSize: 16, fontWeight: "800", color: "#1C1917" }}>
Menü Şablonu (Tema)
</Text>
</View>
<Text style={{ fontSize: 12, color: "#78716C" }}>
Restoranınızın konseptine uygun tasarımı seçin. Seçtiğiniz tema QR menünüzde anında aktif olur.
</Text>
<View style={{ gap: 10 }}>
{THEME_OPTIONS.map((theme) => {
const isSelected = selectedTheme === theme.key;
return (
<Pressable
key={theme.key}
onPress={() => handleSelectTheme(theme.key)}
style={({ pressed }) => ({
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
padding: 14,
borderRadius: 14,
backgroundColor: isSelected ? "#FAF8F5" : "#FAFAFA",
borderWidth: 2,
borderColor: isSelected ? theme.color : "#E7E5E4",
opacity: pressed ? 0.9 : 1,
})}
>
<View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
<View
style={{
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: theme.color,
}}
/>
<View>
<Text style={{ fontSize: 14, fontWeight: "700", color: "#1C1917" }}>
{theme.name}
</Text>
<Text style={{ fontSize: 11, color: "#78716C", marginTop: 2 }}>
{theme.desc}
</Text>
</View>
</View>
<View
style={{
width: 22,
height: 22,
borderRadius: 11,
borderWidth: 2,
borderColor: isSelected ? theme.color : "#D6D3D1",
backgroundColor: isSelected ? theme.color : "transparent",
alignItems: "center",
justifyContent: "center",
}}
>
{isSelected ? <Ionicons name="checkmark" size={14} color="#FFFFFF" /> : null}
</View>
</Pressable>
);
})}
</View>
</View>
</ScrollView>
</View>
);