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

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
+24 -28
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
import { Link, router } from "expo-router";
import { ActivityIndicator, Pressable, Text, TextInput, View } from "react-native";
import { ActivityIndicator, Image, Pressable, Text, TextInput, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { supabase } from "@/lib/supabase";
@@ -30,28 +30,24 @@ export default function LoginScreen() {
<View style={{ maxWidth: 400, width: "100%", alignSelf: "center" }}>
{/* Brand Icon Header */}
<View style={{ alignItems: "center", marginBottom: 28 }}>
<View
<Image
source={require("../../../assets/icon.png")}
style={{
width: 64,
height: 64,
borderRadius: 32,
backgroundColor: "#1C1917",
alignItems: "center",
justifyContent: "center",
width: 72,
height: 72,
borderRadius: 18,
marginBottom: 14,
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.15,
shadowRadius: 10,
elevation: 4,
shadowOpacity: 0.12,
shadowRadius: 8,
}}
>
<Ionicons name="restaurant-outline" size={30} color="#C8A96B" />
</View>
<Text style={{ fontSize: 26, fontWeight: "800", color: "#1C1917", letterSpacing: -0.5 }}>
Menulio&apos;ya Giriş Yap
resizeMode="contain"
/>
<Text style={{ fontSize: 28, fontWeight: "800", color: "#1C1917", letterSpacing: -0.5 }}>
MenuL.io
</Text>
<Text style={{ fontSize: 13, color: "#78716C", marginTop: 4 }}>
<Text style={{ fontSize: 13, color: "#57534E", marginTop: 4, fontWeight: "500" }}>
AI destekli dijital restoran menü yöneticisi
</Text>
</View>
@@ -81,22 +77,22 @@ export default function LoginScreen() {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FFFFFF",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 14,
marginBottom: 12,
}}
>
<Ionicons name="mail-outline" size={18} color="#A8A29E" style={{ marginRight: 10 }} />
<Ionicons name="mail-outline" size={18} color="#57534E" style={{ marginRight: 10 }} />
<TextInput
placeholder="E-posta adresiniz"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
autoCapitalize="none"
keyboardType="email-address"
value={email}
onChangeText={setEmail}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917" }}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917", fontWeight: "500" }}
/>
</View>
@@ -106,27 +102,27 @@ export default function LoginScreen() {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FFFFFF",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 14,
marginBottom: 20,
}}
>
<Ionicons name="lock-closed-outline" size={18} color="#A8A29E" style={{ marginRight: 10 }} />
<Ionicons name="lock-closed-outline" size={18} color="#57534E" style={{ marginRight: 10 }} />
<TextInput
placeholder="Şifreniz"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
secureTextEntry={!showPassword}
value={password}
onChangeText={setPassword}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917" }}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917", fontWeight: "500" }}
/>
<Pressable onPress={() => setShowPassword(!showPassword)} style={{ padding: 4 }}>
<Ionicons
name={showPassword ? "eye-off-outline" : "eye-outline"}
size={18}
color="#A8A29E"
color="#57534E"
/>
</Pressable>
</View>