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.
20 lines
1.1 KiB
TypeScript
20 lines
1.1 KiB
TypeScript
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
|
import { AppText } from './app-text';
|
|
import { colors, radius, type SubjectTone } from './tokens';
|
|
|
|
type Props = { shortName: string; tone: SubjectTone; size?: 'small' | 'medium'; style?: StyleProp<ViewStyle> };
|
|
|
|
/** Stable subject identifier. Use the same tone for a subject everywhere in the product. */
|
|
export function SubjectBadge({ shortName, tone, size = 'medium', style }: Props) {
|
|
const subject = colors.subject[tone];
|
|
return <View accessibilityRole="text" style={[styles.base, size === 'small' ? styles.small : styles.medium, { backgroundColor: subject.surface }, style]}>
|
|
<AppText variant={size === 'small' ? 'caption' : 'label'} color={subject.accent} numberOfLines={1}>{shortName}</AppText>
|
|
</View>;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
base: { alignItems: 'center', justifyContent: 'center', borderRadius: radius.control, borderCurve: 'continuous' },
|
|
small: { minWidth: 32, height: 32, paddingHorizontal: 6 },
|
|
medium: { minWidth: 44, height: 44, paddingHorizontal: 8, borderRadius: 14, borderCurve: 'continuous' },
|
|
});
|