Aditya Gupta
2aac9c3fb4
- 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.
24 lines
1.1 KiB
TypeScript
24 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
|
import { colors, radius, spacing } from './tokens';
|
|
|
|
type CardTone = 'surface' | 'sky' | 'skySoft' | 'cobaltSoft' | 'coralSoft';
|
|
type Props = { children: ReactNode; tone?: CardTone; style?: StyleProp<ViewStyle>; padding?: number; testID?: string };
|
|
|
|
const toneStyle = {
|
|
surface: { backgroundColor: colors.neutral.surface, borderWidth: 1, borderColor: colors.neutral.border },
|
|
sky: { backgroundColor: colors.brand.sky },
|
|
skySoft: { backgroundColor: colors.brand.skySoft },
|
|
cobaltSoft: { backgroundColor: colors.brand.cobaltSoft },
|
|
coralSoft: { backgroundColor: colors.brand.coralSoft },
|
|
} as const;
|
|
|
|
/** Flat grouped surface. Floating elevation is intentionally reserved for overlays. */
|
|
export function Card({ children, tone = 'surface', padding = spacing[5], style, testID }: Props) {
|
|
return <View testID={testID} style={[styles.base, toneStyle[tone], { padding }, style]}>{children}</View>;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
base: { borderRadius: radius.card, borderCurve: 'continuous' },
|
|
});
|