Files
beenvoice-app/components/TopChromeBar.tsx
T
soconnor 32ffe782ea Fix Live Activity lock screen rendering and polish multi-account auth.
Flatten widget layouts and use system colors so banner and expanded regions render on vibrant lock screens; migrate auth sessions per account to prevent double sign-in; scope app lock PIN to accounts; default clock description to "Clock In"; add architecture docs and deferred form validation on auth screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-18 01:23:36 -04:00

56 lines
1.4 KiB
TypeScript

import { BlurView } from "expo-blur";
import { StyleSheet, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { TopChrome } from "@/components/TopChrome";
import { useAppTheme } from "@/contexts/ThemeContext";
import { blurIntensity } from "@/lib/beenvoice-theme";
import {
TOP_CHROME_PADDING_BOTTOM,
TOP_CHROME_ROW_HEIGHT,
} from "@/lib/top-chrome-insets";
/** Blurred status-bar chrome with logo + account switcher. */
export function TopChromeBar() {
const insets = useSafeAreaInsets();
const { isDark } = useAppTheme();
const tint = isDark ? "rgba(9, 9, 11, 0.28)" : "rgba(255, 255, 255, 0.32)";
return (
<View
style={[
styles.host,
{
paddingTop: insets.top,
paddingBottom: TOP_CHROME_PADDING_BOTTOM,
paddingLeft: insets.left,
paddingRight: insets.right,
height: insets.top + TOP_CHROME_ROW_HEIGHT + TOP_CHROME_PADDING_BOTTOM,
},
]}
>
<BlurView
intensity={blurIntensity.chrome}
tint={isDark ? "dark" : "light"}
style={StyleSheet.absoluteFill}
/>
<View
pointerEvents="none"
style={[StyleSheet.absoluteFill, { backgroundColor: tint }]}
/>
<TopChrome />
</View>
);
}
const styles = StyleSheet.create({
host: {
overflow: "hidden",
position: "absolute",
top: 0,
left: 0,
right: 0,
zIndex: 10,
},
});