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/(auth)/login.tsx
+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>
apps/mobile/src/app/(auth)/register.tsx
+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";
@@ -35,28 +35,24 @@ export default function RegisterScreen() {
<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="sparkles" size={28} color="#C8A96B" />
</View>
<Text style={{ fontSize: 26, fontWeight: "800", color: "#1C1917", letterSpacing: -0.5 }}>
Hesap Oluştur
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" }}>
Dakikalar içinde restoranınızı ve QR menünüzü hazırlayın
</Text>
</View>
@@ -86,22 +82,22 @@ export default function RegisterScreen() {
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>
@@ -111,27 +107,27 @@ export default function RegisterScreen() {
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="Güçlü bir şifre belirleyin"
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>
apps/mobile/src/app/(onboarding)/restaurant.tsx
+15 -15
View File
@@ -96,20 +96,20 @@ export default function OnboardingRestaurantStep() {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FFFFFF",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 14,
marginBottom: 12,
}}
>
<Ionicons name="storefront-outline" size={18} color="#A8A29E" style={{ marginRight: 10 }} />
<Ionicons name="storefront-outline" size={18} color="#57534E" style={{ marginRight: 10 }} />
<TextInput
placeholder="Restoran adı (Örn: Kebapçı Ahmet)"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
value={name}
onChangeText={setName}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917" }}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917", fontWeight: "500" }}
/>
</View>
@@ -119,21 +119,21 @@ export default function OnboardingRestaurantStep() {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FFFFFF",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 14,
marginBottom: 12,
}}
>
<Ionicons name="call-outline" size={18} color="#A8A29E" style={{ marginRight: 10 }} />
<Ionicons name="call-outline" size={18} color="#57534E" style={{ marginRight: 10 }} />
<TextInput
placeholder="Telefon numarası (opsiyonel)"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
keyboardType="phone-pad"
value={phone}
onChangeText={setPhone}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917" }}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917", fontWeight: "500" }}
/>
</View>
@@ -143,20 +143,20 @@ export default function OnboardingRestaurantStep() {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FFFFFF",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 14,
marginBottom: 24,
}}
>
<Ionicons name="location-outline" size={18} color="#A8A29E" style={{ marginRight: 10 }} />
<Ionicons name="location-outline" size={18} color="#57534E" style={{ marginRight: 10 }} />
<TextInput
placeholder="Adres / Şehir (opsiyonel)"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
value={address}
onChangeText={setAddress}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917" }}
style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917", fontWeight: "500" }}
/>
</View>
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>
);
apps/mobile/src/components/menu/AddCategoryModal.tsx
+3 -3
View File
@@ -101,12 +101,12 @@ export function AddCategoryModal({
value={name}
onChangeText={setName}
placeholder="Örn: Tatlılar, Başlangıçlar, Sıcak İçecekler"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
autoFocus
style={{
backgroundColor: "#FAFAFA",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
padding: 14,
fontSize: 15,
apps/mobile/src/components/menu/AddItemModal.tsx
+9 -9
View File
@@ -218,11 +218,11 @@ export function AddItemModal({
value={name}
onChangeText={setName}
placeholder="Örn: Mercimek Çorbası"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
style={{
backgroundColor: "#FAFAFA",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
padding: 14,
fontSize: 15,
@@ -241,8 +241,8 @@ export function AddItemModal({
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FAFAFA",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 14,
}}
@@ -251,7 +251,7 @@ export function AddItemModal({
value={price}
onChangeText={setPrice}
placeholder="120"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
keyboardType="decimal-pad"
style={{
flex: 1,
@@ -273,13 +273,13 @@ export function AddItemModal({
value={description}
onChangeText={setDescription}
placeholder="Kısa içerik veya porsiyon açıklaması..."
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
multiline
numberOfLines={3}
style={{
backgroundColor: "#FAFAFA",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
padding: 14,
fontSize: 14,
apps/mobile/src/components/menu/ItemDetailSheet.tsx
+9 -9
View File
@@ -311,11 +311,11 @@ export function ItemDetailSheet({
value={name}
onChangeText={setName}
placeholder="Örn: Izgara Levrek"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
style={{
backgroundColor: "#FAFAFA",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
padding: 14,
fontSize: 15,
@@ -335,8 +335,8 @@ export function ItemDetailSheet({
flexDirection: "row",
alignItems: "center",
backgroundColor: "#FAFAFA",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
paddingHorizontal: 14,
}}
@@ -345,7 +345,7 @@ export function ItemDetailSheet({
value={price}
onChangeText={setPrice}
placeholder="0.00"
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
keyboardType="decimal-pad"
style={{
flex: 1,
@@ -368,13 +368,13 @@ export function ItemDetailSheet({
value={description}
onChangeText={setDescription}
placeholder="İçindekiler, porsiyon bilgisi, pişirme tarzı..."
placeholderTextColor="#A8A29E"
placeholderTextColor="#57534E"
multiline
numberOfLines={3}
style={{
backgroundColor: "#FAFAFA",
borderWidth: 1,
borderColor: "#E7E5E4",
borderWidth: 1.5,
borderColor: "#D6D3D1",
borderRadius: 12,
padding: 14,
fontSize: 14,
apps/mobile/src/components/menu/ThemeSelectorSheet.tsx
+26 -84
View File
@@ -285,7 +285,7 @@ export function ThemeSelectorSheet({
Menü Şablonları & Canlı Önizleme
</Text>
<Text style={{ fontSize: 12, color: "#78716C", marginTop: 2 }}>
5 lüks şablonu inceleyin, demolarını paylaşın veya menünüze uygulayın
Şablonları inceleyin, demolarını görün veya menünüze uygulayın
</Text>
</View>
@@ -323,61 +323,21 @@ export function ThemeSelectorSheet({
elevation: isSelected ? 3 : 1,
}}
>
{/* Top Row: Color Pip, Name, Category Badge & Active Check */}
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
<View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
<View
style={{
width: 18,
height: 18,
borderRadius: 9,
backgroundColor: theme.color,
borderWidth: 2,
borderColor: "#FFFFFF",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 2,
}}
/>
<View>
<Text style={{ fontSize: 16, fontWeight: "800", color: "#1C1917" }}>
{theme.name}
</Text>
</View>
</View>
<View
style={{
backgroundColor: theme.badgeBg,
paddingHorizontal: 8,
paddingVertical: 3,
borderRadius: 6,
}}
>
<Text style={{ fontSize: 11, fontWeight: "700", color: theme.badgeText }}>
{theme.category}
</Text>
</View>
</View>
{/* Description */}
<Text style={{ fontSize: 13, color: "#57534E", lineHeight: 18, marginBottom: 8 }}>
{theme.desc}
</Text>
{/* Meta details */}
<View style={{ flexDirection: "row", alignItems: "center", gap: 6, marginBottom: 14 }}>
<Ionicons name="sparkles" size={13} color={theme.color} />
<Text style={{ fontSize: 11, color: "#78716C", fontWeight: "600" }}>
Renk: <Text style={{ color: "#1C1917", fontWeight: "700" }}>{theme.accent}</Text> • {theme.suitableFor}
{/* Top Row: Theme Name */}
<View style={{ marginBottom: 6 }}>
<Text style={{ fontSize: 17, fontWeight: "800", color: "#1C1917" }}>
{theme.name}
</Text>
</View>
{/* Action Bar: Canlı Demo, Paylaş, Uygula */}
<View style={{ flexDirection: "row", gap: 8, borderTopWidth: 1, borderTopColor: "#F5F5F4", paddingTop: 12 }}>
{/* Canlı Demo Aç */}
{/* Description */}
<Text style={{ fontSize: 13, color: "#57534E", lineHeight: 18, marginBottom: 12 }}>
{theme.desc}
</Text>
{/* Action Bar: Canlı Demo & Şablon Seç */}
<View style={{ flexDirection: "row", gap: 10, borderTopWidth: 1, borderTopColor: "#F5F5F4", paddingTop: 12 }}>
{/* Canlı Demo Önizle */}
<Pressable
onPress={() => handleOpenDemo(theme.key)}
style={({ pressed }) => ({
@@ -385,43 +345,25 @@ export function ThemeSelectorSheet({
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 4,
gap: 6,
backgroundColor: "#F5F5F4",
paddingVertical: 10,
borderRadius: 10,
paddingVertical: 12,
borderRadius: 12,
opacity: pressed ? 0.8 : 1,
})}
>
<Ionicons name="eye-outline" size={15} color="#1C1917" />
<Text style={{ fontSize: 12, fontWeight: "700", color: "#1C1917" }}>
Demo Menü
<Ionicons name="eye-outline" size={17} color="#1C1917" />
<Text style={{ fontSize: 13, fontWeight: "700", color: "#1C1917" }}>
Demo Önizle
</Text>
</Pressable>
{/* Demo Linkini Gönder / Paylaş */}
<Pressable
onPress={() => handleShareDemo(theme)}
style={({ pressed }) => ({
width: 40,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#FAF8F5",
borderWidth: 1,
borderColor: "#E7E5E4",
paddingVertical: 10,
borderRadius: 10,
opacity: pressed ? 0.8 : 1,
})}
>
<Ionicons name="share-outline" size={16} color="#78716C" />
</Pressable>
{/* Bu Şablonu Uygula / Aktif Rozeti */}
<Pressable
onPress={() => handleApplyTheme(theme.key)}
disabled={isSelected || isApplying}
style={({ pressed }) => ({
flex: 1.3,
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
@@ -429,8 +371,8 @@ export function ThemeSelectorSheet({
backgroundColor: isSelected ? "#ECFDF5" : theme.color,
borderWidth: isSelected ? 1 : 0,
borderColor: "#A7F3D0",
paddingVertical: 10,
borderRadius: 10,
paddingVertical: 12,
borderRadius: 12,
opacity: pressed ? 0.85 : 1,
})}
>
@@ -438,15 +380,15 @@ export function ThemeSelectorSheet({
<ActivityIndicator size="small" color="#FFFFFF" />
) : isSelected ? (
<>
<Ionicons name="checkmark-circle" size={16} color="#059669" />
<Text style={{ fontSize: 12, fontWeight: "800", color: "#059669" }}>
<Ionicons name="checkmark-circle" size={17} color="#059669" />
<Text style={{ fontSize: 13, fontWeight: "800", color: "#059669" }}>
Aktif Şablon
</Text>
</>
) : (
<>
<Ionicons name="checkmark" size={15} color="#FFFFFF" />
<Text style={{ fontSize: 12, fontWeight: "800", color: "#FFFFFF" }}>
<Ionicons name="checkmark" size={16} color="#FFFFFF" />
<Text style={{ fontSize: 13, fontWeight: "800", color: "#FFFFFF" }}>
Şablonu Seç
</Text>
</>