mirror of
https://github.com/bulwarkmail/native.git
synced 2026-10-31 16:06:32 +00:00
Linus Rath
cf3f919fa2
- Integrated useColors hook for dynamic theming in SettingsScreen. - Updated tab labels and titles to use localized strings. - Refactored styles to utilize theme palette for consistent styling. - Improved locale subscription to re-render labels on language change. feat: implement useSheetDrag hook for bottom sheet gesture handling - Added useSheetDrag hook to manage drag-to-dismiss functionality for bottom sheets. - Configured pan responder for handling drag gestures and dismissing the sheet based on distance and velocity. refactor: restructure color and token management - Introduced useColors and useResolvedTheme hooks for better theme management. - Separated light and dark color palettes for improved maintainability. - Updated tokens to reflect new theming structure and ensure consistency across components.
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
import { CloudOff } from 'lucide-react-native';
|
|
import { useNetworkStore } from '../stores/network-store';
|
|
import { spacing, typography, type ThemePalette } from '../theme/tokens';
|
|
import { useColors } from '../theme/colors';
|
|
|
|
interface OfflineBannerProps {
|
|
/** Optional extra notice (e.g. "Showing cached mail"). */
|
|
hint?: string;
|
|
}
|
|
|
|
export function OfflineBanner({ hint }: OfflineBannerProps) {
|
|
const c = useColors();
|
|
const styles = React.useMemo(() => makeStyles(c), [c]);
|
|
const online = useNetworkStore((s) => s.online);
|
|
if (online) return null;
|
|
return (
|
|
<View style={styles.bar}>
|
|
<CloudOff size={14} color={c.primaryForeground} />
|
|
<Text style={styles.text} numberOfLines={1}>
|
|
You are offline{hint ? ` — ${hint}` : ''}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function makeStyles(c: ThemePalette) {
|
|
return StyleSheet.create({
|
|
bar: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.sm,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: 6,
|
|
backgroundColor: '#a16207',
|
|
},
|
|
text: {
|
|
...typography.caption,
|
|
color: c.primaryForeground,
|
|
flex: 1,
|
|
},
|
|
});
|
|
}
|