693cc1c0b6
- Replace modal calendar with inline expandable calendar widget integrated into the day picker. - Add status indicator dots (attended/absent/pending) to month calendar grid matching day picker. - Disable and gray out weekend days in calendar when weekend schedule is turned off. - Redesign extend bar with integrated handle that aligns with the palette. - Remove start-to-end timing on Today screen's class time rail, showing only start time. - Implement Playwright E2E and visual testing suite with multi-screen capture scripts. - Add cascade DELETE endpoints for subjects and versioned recurring timetable entries.
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import type { ReactNode } from 'react';
|
|
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
|
import { AppText } from './app-text';
|
|
import { colors, radius, spacing, type SemanticTone } from './tokens';
|
|
|
|
type Props = {
|
|
title: string;
|
|
message?: string;
|
|
tone?: SemanticTone;
|
|
action?: ReactNode;
|
|
style?: StyleProp<ViewStyle>;
|
|
};
|
|
|
|
const icon = { success: 'checkmark-circle', warning: 'alert-circle', danger: 'alert-circle', neutral: 'information-circle' } as const;
|
|
|
|
/** Concise, data-backed feedback for save states and attendance insights. */
|
|
export function InlineBanner({ title, message, tone = 'neutral', action, style }: Props) {
|
|
const palette = colors.semantic[tone];
|
|
return <View accessibilityRole="alert" style={[styles.banner, { backgroundColor: palette.soft }, style]}>
|
|
<Ionicons name={icon[tone]} size={20} color={palette.text} />
|
|
<View style={styles.copy}>
|
|
<AppText variant="label" color={palette.text}>{title}</AppText>
|
|
{message ? <AppText variant="bodySmall" color={colors.neutral.textSecondary} style={styles.message}>{message}</AppText> : null}
|
|
</View>
|
|
{action ? <View style={styles.action}>{action}</View> : null}
|
|
</View>;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
banner: { flexDirection: 'row', alignItems: 'flex-start', gap: spacing[3], borderRadius: radius.card, borderCurve: 'continuous', padding: spacing[4] },
|
|
copy: { flex: 1 },
|
|
message: { marginTop: spacing[1] },
|
|
action: { alignSelf: 'center' },
|
|
});
|