@cometchat/chat-uikit-react-native/lib/calls/CometChatCallLogs/style.js

Ready-to-use Chat UI Components for React Native

import { StyleSheet, } from "react-native";
import { deepMerge } from "../../shared/helper/helperFunctions";
export const Style = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    errorEmptyContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: "10%",
        gap: 4,
    },
    headerStyle: {
        alignItems: "center",
        justifyContent: "space-between",
    },
    row: {
        flexDirection: "row",
        alignItems: "center",
        gap: 10
    },
    imageStyle: {
        height: 24,
        width: 24,
        alignSelf: "center",
    },
});
export const getCallLogsStyleLight = (color, spacing, typography) => deepMerge({
    containerStyle: {},
    titleTextStyle: {
        color: color.textPrimary,
        ...typography.heading1.bold,
    },
    titleSeparatorStyle: {
        borderBottomWidth: 1,
        borderBottomColor: color.borderLight,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        width: "100%",
    },
    errorStateStyle: {
        containerStyle: {},
        titleStyle: {
            color: color.textPrimary,
            textAlign: "center",
            ...typography.heading3.bold,
        },
        subTitleStyle: {
            color: color.textSecondary,
            textAlign: "center",
            ...typography.body.regular,
        },
    },
    emptyStateStyle: {
        containerStyle: {},
        titleStyle: {
            color: color.textPrimary,
            textAlign: "center",
            ...typography.heading3.bold,
        },
        subTitleStyle: {
            color: color.textSecondary,
            textAlign: "center",
            ...typography.body.regular,
        },
    },
    itemStyle: getCallLogsItemStyle(color, spacing, typography),
    skeletonStyle: {
        linearGradientColors: ["#E8E8E8", "#F5F5F5"],
        shimmerBackgroundColor: color.staticBlack,
        shimmerOpacity: 0.01,
        speed: 1,
        containerBackgroundColor: color.background2,
    },
}, {});
export const getCallLogsStyleDark = (color, spacing, typography) => deepMerge(getCallLogsStyleLight(color, spacing, typography), {
    skeletonStyle: {
        linearGradientColors: ["#383838", "#272727"],
        shimmerBackgroundColor: color.staticWhite,
        shimmerOpacity: 0.01,
        speed: 1,
        containerBackgroundColor: color.background2,
    },
});
export const getCallLogsItemStyle = (color, spacing, typography) => {
    return {
        containerStyle: {
            flex: 1,
            paddingVertical: 12,
            paddingHorizontal: 16,
            flexDirection: "row",
            gap: 12,
            alignItems: "center",
        },
        titleTextStyle: {
            color: color.textPrimary,
            ...typography.heading4.medium,
        },
        missedCallTitleTextStyle: {
            color: color.error,
            ...typography.heading4.medium,
        },
        subTitleTextStyle: {
            color: color.textSecondary,
            ...typography.body.regular,
        },
        avatarStyle: {
            containerStyle: {
                width: 48,
                height: 48,
            },
            imageStyle: {},
            textStyle: {},
        },
        callIconStyle: {
            tintColor: color.iconPrimary,
        },
        outgoingCallStatusIconStyle: {
            tintColor: color.success,
        },
        incomingCallStatusIconStyle: {
            tintColor: color.success,
        },
        missedCallStatusIconStyle: {
            tintColor: color.error,
        },
    };
};
//# sourceMappingURL=style.js.map