147 lines
4.0 KiB
TypeScript
147 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, Modal, TouchableOpacity, Linking } from 'react-native';
|
|
import { Feather } from '@expo/vector-icons';
|
|
import { useAppTheme } from '../context/ThemeContext';
|
|
|
|
interface KillSwitchProps {
|
|
visible: boolean;
|
|
message?: string;
|
|
supportEmail?: string;
|
|
}
|
|
|
|
export const KillSwitchOverlay = ({ visible, message, supportEmail }: KillSwitchProps) => {
|
|
const { colors, isDark } = useAppTheme();
|
|
|
|
return (
|
|
<Modal visible={visible} transparent animationType="fade">
|
|
<View style={[styles.container, { backgroundColor: isDark ? '#0A0A0A' : '#F8FAFC' }]}>
|
|
<View style={styles.content}>
|
|
<View style={[styles.glow, { backgroundColor: colors.error, opacity: 0.1 }]} />
|
|
|
|
<View style={[styles.iconContainer, { backgroundColor: isDark ? '#1A1A1A' : '#FFF' }]}>
|
|
<View style={[styles.iconBox, { backgroundColor: `${colors.error}15` }]}>
|
|
<Feather name="shield-off" size={48} color={colors.error} />
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={[styles.title, { color: colors.text }]}>System Maintenance</Text>
|
|
|
|
<View style={styles.messageBox}>
|
|
<Text style={[styles.message, { color: isDark ? '#94A3B8' : '#64748B' }]}>
|
|
{message || "We're currently performing urgent system maintenance to improve your experience. Please check back later."}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={[styles.statusBadge, { backgroundColor: isDark ? '#1E293B' : '#F1F5F9' }]}>
|
|
<View style={[styles.dot, { backgroundColor: colors.error }]} />
|
|
<Text style={[styles.statusText, { color: colors.textSecondary }]}>
|
|
Service Temporarily Unavailable
|
|
</Text>
|
|
</View>
|
|
|
|
{supportEmail && (
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
style={[styles.supportBtn, { backgroundColor: isDark ? '#FFF' : '#111' }]}
|
|
onPress={() => Linking.openURL(`mailto:${supportEmail}`)}
|
|
>
|
|
<Feather name="mail" size={16} color={isDark ? '#000' : '#FFF'} style={{ marginRight: 8 }} />
|
|
<Text style={[styles.supportText, { color: isDark ? '#000' : '#FFF' }]}>Contact Support</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 32,
|
|
},
|
|
glow: {
|
|
position: 'absolute',
|
|
width: 300,
|
|
height: 300,
|
|
borderRadius: 150,
|
|
top: '10%',
|
|
},
|
|
content: {
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
},
|
|
iconContainer: {
|
|
padding: 20,
|
|
borderRadius: 40,
|
|
marginBottom: 32,
|
|
elevation: 8,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 10 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 20,
|
|
},
|
|
iconBox: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 30,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
fontFamily: 'Outfit_800ExtraBold',
|
|
textAlign: 'center',
|
|
marginBottom: 20,
|
|
letterSpacing: -0.5,
|
|
},
|
|
messageBox: {
|
|
paddingHorizontal: 10,
|
|
marginBottom: 40,
|
|
},
|
|
message: {
|
|
fontSize: 16,
|
|
fontFamily: 'Outfit_400Regular',
|
|
textAlign: 'center',
|
|
lineHeight: 26,
|
|
},
|
|
statusBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 18,
|
|
borderRadius: 50,
|
|
gap: 10,
|
|
},
|
|
dot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
},
|
|
statusText: {
|
|
fontSize: 13,
|
|
fontFamily: 'Outfit_600SemiBold',
|
|
letterSpacing: 0.5,
|
|
textTransform: 'uppercase',
|
|
},
|
|
supportBtn: {
|
|
marginTop: 60,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 32,
|
|
borderRadius: 20,
|
|
elevation: 4,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
},
|
|
supportText: {
|
|
fontSize: 15,
|
|
fontFamily: 'Outfit_700Bold',
|
|
},
|
|
});
|