@controleonline/ui-common 1.2.70

package/src/react/pages/GenericLogPage.styles.js

@@ -0,0 +1,401 @@
+import {StyleSheet} from 'react-native';
+
+const createStyles = () =>
+  StyleSheet.create({
+    safeArea: {
+      flex: 1,
+      backgroundColor: '#F8FAFC',
+    },
+    container: {
+      flex: 1,
+      backgroundColor: '#F8FAFC',
+      paddingHorizontal: 12,
+      paddingTop: 12,
+    },
+    heroCard: {
+      borderRadius: 18,
+      backgroundColor: '#FFFFFF',
+      borderWidth: 1,
+      borderColor: '#E2E8F0',
+      paddingHorizontal: 14,
+      paddingVertical: 14,
+      marginBottom: 12,
+    },
+    heroHeader: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      gap: 12,
+    },
+    heroCopy: {
+      flex: 1,
+    },
+    heroTitle: {
+      color: '#0F172A',
+      fontSize: 18,
+      fontWeight: '800',
+    },
+    heroSubtitle: {
+      color: '#64748B',
+      fontSize: 13,
+      fontWeight: '600',
+      lineHeight: 19,
+      marginTop: 6,
+    },
+    heroSummary: {
+      color: '#0F172A',
+      fontSize: 13,
+      fontWeight: '800',
+      marginTop: 12,
+    },
+    refreshButton: {
+      width: 38,
+      height: 38,
+      borderRadius: 19,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: 1,
+      borderColor: '#DBEAFE',
+      backgroundColor: '#EFF6FF',
+    },
+    scroll: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingBottom: 24,
+      gap: 10,
+    },
+    filtersCard: {
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: '#E2E8F0',
+      backgroundColor: '#FFFFFF',
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      gap: 14,
+    },
+    filterHeaderRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      gap: 12,
+    },
+    filterHeaderCopy: {
+      flex: 1,
+    },
+    filterTitle: {
+      color: '#0F172A',
+      fontSize: 15,
+      fontWeight: '800',
+    },
+    filterSubtitle: {
+      color: '#64748B',
+      fontSize: 12,
+      fontWeight: '600',
+      lineHeight: 18,
+      marginTop: 4,
+    },
+    clearButton: {
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: '#DBEAFE',
+      backgroundColor: '#EFF6FF',
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+    },
+    clearButtonText: {
+      color: '#2563EB',
+      fontSize: 12,
+      fontWeight: '800',
+    },
+    filterGroup: {
+      gap: 8,
+    },
+    filterLabel: {
+      color: '#0F172A',
+      fontSize: 12,
+      fontWeight: '800',
+      textTransform: 'uppercase',
+      letterSpacing: 0.6,
+    },
+    filterHint: {
+      color: '#64748B',
+      fontSize: 12,
+      fontWeight: '600',
+      lineHeight: 18,
+    },
+    filterChipsRow: {
+      gap: 8,
+      paddingRight: 2,
+    },
+    filterChip: {
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: '#CBD5E1',
+      backgroundColor: '#F8FAFC',
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+    },
+    filterChipActive: {
+      borderColor: '#2563EB',
+      backgroundColor: '#EFF6FF',
+    },
+    filterChipText: {
+      color: '#475569',
+      fontSize: 12,
+      fontWeight: '800',
+    },
+    filterChipTextActive: {
+      color: '#2563EB',
+    },
+    customRangeBox: {
+      gap: 8,
+      paddingTop: 4,
+    },
+    dateInputsRow: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    dateInput: {
+      flex: 1,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: '#CBD5E1',
+      backgroundColor: '#F8FAFC',
+      color: '#0F172A',
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 13,
+      fontWeight: '700',
+    },
+    validationText: {
+      color: '#DC2626',
+      fontSize: 12,
+      fontWeight: '700',
+      lineHeight: 18,
+    },
+    customActionsRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      gap: 8,
+    },
+    secondaryButton: {
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: '#CBD5E1',
+      backgroundColor: '#F1F5F9',
+      paddingHorizontal: 14,
+      paddingVertical: 9,
+    },
+    secondaryButtonText: {
+      color: '#0F172A',
+      fontSize: 12,
+      fontWeight: '800',
+    },
+    primaryButton: {
+      borderRadius: 999,
+      backgroundColor: '#2563EB',
+      paddingHorizontal: 14,
+      paddingVertical: 9,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 6,
+    },
+    primaryButtonText: {
+      color: '#FFFFFF',
+      fontSize: 12,
+      fontWeight: '900',
+    },
+    textFilterRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    textFilterInput: {
+      flex: 1,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: '#CBD5E1',
+      backgroundColor: '#F8FAFC',
+      color: '#0F172A',
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 13,
+      fontWeight: '700',
+    },
+    stateBox: {
+      minHeight: 140,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: '#E2E8F0',
+      backgroundColor: '#FFFFFF',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 18,
+      gap: 10,
+    },
+    stateTitle: {
+      color: '#0F172A',
+      fontSize: 16,
+      fontWeight: '800',
+      textAlign: 'center',
+    },
+    stateText: {
+      color: '#64748B',
+      fontSize: 13,
+      fontWeight: '600',
+      textAlign: 'center',
+      lineHeight: 19,
+    },
+    list: {
+      gap: 10,
+    },
+    card: {
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: '#E2E8F0',
+      backgroundColor: '#FFFFFF',
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      gap: 10,
+    },
+    cardHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      gap: 8,
+      flexWrap: 'wrap',
+    },
+    badgesRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      flexWrap: 'wrap',
+      flex: 1,
+    },
+    badge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      borderRadius: 999,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+      borderWidth: 1,
+    },
+    badgeText: {
+      fontSize: 12,
+      fontWeight: '800',
+    },
+    date: {
+      color: '#0F172A',
+      fontSize: 12,
+      fontWeight: '700',
+    },
+    entityTitle: {
+      color: '#0F172A',
+      fontSize: 15,
+      fontWeight: '800',
+    },
+    classTitle: {
+      color: '#0F172A',
+      fontSize: 14,
+      fontWeight: '800',
+    },
+    metaText: {
+      color: '#64748B',
+      fontSize: 12,
+      fontWeight: '600',
+      lineHeight: 18,
+    },
+    previewText: {
+      color: '#334155',
+      fontSize: 13,
+      fontWeight: '600',
+      lineHeight: 19,
+    },
+    messageBox: {
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: '#E2E8F0',
+      backgroundColor: '#F8FAFC',
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+    },
+    message: {
+      color: '#0F172A',
+      fontSize: 14,
+      fontWeight: '700',
+      lineHeight: 20,
+    },
+    payloadList: {
+      gap: 8,
+    },
+    payloadRow: {
+      gap: 6,
+    },
+    payloadLabel: {
+      color: '#2563EB',
+      fontSize: 11,
+      fontWeight: '800',
+      textTransform: 'uppercase',
+    },
+    payloadValueBox: {
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: '#E2E8F0',
+      backgroundColor: '#F8FAFC',
+      paddingHorizontal: 10,
+      paddingVertical: 9,
+    },
+    payloadValue: {
+      color: '#0F172A',
+      fontSize: 13,
+      fontWeight: '600',
+      lineHeight: 18,
+    },
+    cardActionsRow: {
+      flexDirection: 'row',
+      gap: 8,
+      flexWrap: 'wrap',
+    },
+    secondaryActionButton: {
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: '#CBD5E1',
+      backgroundColor: '#FFFFFF',
+      paddingHorizontal: 14,
+      paddingVertical: 9,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+    },
+    secondaryActionButtonText: {
+      color: '#0F172A',
+      fontSize: 12,
+      fontWeight: '800',
+    },
+    primaryActionButton: {
+      borderRadius: 999,
+      backgroundColor: '#2563EB',
+      paddingHorizontal: 14,
+      paddingVertical: 9,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+    },
+    primaryActionButtonText: {
+      color: '#FFFFFF',
+      fontSize: 12,
+      fontWeight: '900',
+    },
+    expandedEntityWrap: {
+      borderTopWidth: 1,
+      borderTopColor: '#E2E8F0',
+      paddingTop: 12,
+      marginTop: 2,
+      minHeight: 220,
+    },
+  });
+
+export default createStyles;