react-native-ajora/lib/Thread/styles.js

The most complete AI agent UI for React Native

import { StyleSheet, Dimensions } from "react-native";
import { colors, typography, spacing, borderRadius, shadows } from "../Theme";
const { width: screenWidth } = Dimensions.get("window");
export const DRAWER_WIDTH = screenWidth * 0.8;
export default StyleSheet.create({
    backdrop: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: colors.shadow + "80", // 50% opacity
        zIndex: 998,
    },
    drawer: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        width: DRAWER_WIDTH,
        backgroundColor: colors.white,
        zIndex: 999,
        ...shadows.lg,
    },
    drawerHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: spacing.lg,
        paddingVertical: spacing.sm,
        backgroundColor: colors.white,
    },
    searchContainer: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: colors.appSecondary,
        borderWidth: 1,
        borderColor: colors.border,
        borderRadius: borderRadius.base,
        paddingHorizontal: spacing.md,
        paddingVertical: spacing.sm,
        marginRight: spacing.md,
    },
    headerContent: {
        flex: 1,
    },
    drawerTitle: {
        fontSize: typography.sizes.xl,
        fontWeight: typography.weights.bold,
        color: colors.primaryText,
        letterSpacing: -0.5,
        marginBottom: spacing.xs,
    },
    drawerSubtitle: {
        fontSize: typography.sizes.sm,
        fontWeight: typography.weights.medium,
        color: colors.secondaryText,
        letterSpacing: -0.1,
    },
    closeButton: {
        width: 36,
        height: 36,
        borderRadius: borderRadius.full,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: colors.appSecondary,
        ...shadows.sm,
    },
    closeIcon: {
        fontSize: typography.sizes.xl,
        fontWeight: typography.weights.semibold,
        color: colors.text,
    },
    newThreadButton: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: spacing.lg,
        paddingVertical: spacing.lg,
        marginHorizontal: spacing.base,
        marginVertical: spacing.md,
        backgroundColor: colors.appPrimary,
        borderRadius: borderRadius.base,
        ...shadows.base,
    },
    newThreadIcon: {
        fontSize: typography.sizes.lg,
        fontWeight: typography.weights.semibold,
        color: colors.white,
        marginRight: spacing.sm,
    },
    newThreadText: {
        fontSize: typography.sizes.base,
        fontWeight: typography.weights.semibold,
        color: colors.white,
        letterSpacing: -0.2,
    },
    threadList: {
        flex: 1,
        paddingTop: spacing.sm,
        paddingBottom: spacing.base,
    },
    threadSeparator: {
        height: 1,
        backgroundColor: colors.appSecondary,
        marginHorizontal: spacing.base,
    },
    threadItem: {
        paddingHorizontal: spacing.md,
        paddingVertical: spacing.lg,
        marginHorizontal: spacing.base,
        marginVertical: spacing.xs,
        backgroundColor: colors.white,
        borderRadius: borderRadius.base,
        // ...shadows.sm,
    },
    activeThreadItem: {
        backgroundColor: colors.appSecondary,
        borderColor: colors.appPrimary,
        borderWidth: 2,
        ...shadows.base,
    },
    chatsHeader: {
        paddingHorizontal: spacing.lg,
        paddingVertical: spacing.md,
        backgroundColor: colors.white,
    },
    chatsHeaderText: {
        fontSize: typography.sizes.lg,
        fontWeight: typography.weights.semibold,
        color: colors.text,
        letterSpacing: -0.3,
    },
    threadContent: {
        flex: 1,
    },
    threadTitle: {
        fontSize: typography.sizes.sm,
        fontWeight: typography.weights.semibold,
        color: colors.text,
        marginBottom: spacing.sm,
        letterSpacing: -0.2,
    },
    activeThreadTitle: {
        color: colors.primaryText,
        fontWeight: typography.weights.bold,
    },
    threadLastMessage: {
        fontSize: typography.sizes.sm,
        color: colors.secondaryText,
        marginBottom: spacing.sm,
        lineHeight: 18,
    },
    activeThreadLastMessage: {
        color: colors.text,
        fontWeight: typography.weights.medium,
    },
    threadTimestamp: {
        fontSize: typography.sizes.xs,
        color: colors.secondaryText,
        fontWeight: typography.weights.medium,
    },
    activeThreadTimestamp: {
        color: colors.text,
        fontWeight: typography.weights.semibold,
    },
    emptyStateContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: spacing.xl,
        paddingVertical: spacing["3xl"],
    },
    emptyStateContent: {
        alignItems: "center",
    },
    emptyStateIcon: {
        fontSize: typography.sizes["4xl"],
        marginBottom: spacing.base,
        textAlign: "center",
    },
    emptyStateTitle: {
        fontSize: typography.sizes.lg,
        fontWeight: typography.weights.semibold,
        color: colors.text,
        marginBottom: spacing.sm,
        textAlign: "center",
    },
    emptyStateSubtitle: {
        fontSize: typography.sizes.sm,
        color: colors.secondaryText,
        textAlign: "center",
        lineHeight: 20,
    },
    threadEmptyContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: spacing.xl,
        paddingVertical: spacing["3xl"],
    },
    threadEmptyIcon: {
        fontSize: typography.sizes["4xl"],
        marginBottom: spacing.base,
        textAlign: "center",
    },
    threadEmptyTitle: {
        fontSize: typography.sizes.lg,
        fontWeight: typography.weights.semibold,
        color: colors.text,
        marginBottom: spacing.sm,
        textAlign: "center",
    },
    threadEmptySubtitle: {
        fontSize: typography.sizes.sm,
        color: colors.secondaryText,
        textAlign: "center",
        lineHeight: 20,
    },
    searchInput: {
        flex: 1,
        fontSize: typography.sizes.base,
        color: colors.text,
        paddingVertical: spacing.sm,
        paddingHorizontal: spacing.sm,
    },
    searchIcon: {
        fontSize: typography.sizes.xl,
        marginRight: spacing.sm,
        color: colors.secondaryText,
    },
    // Error styles
    errorContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: spacing.lg,
        paddingVertical: spacing["3xl"],
        backgroundColor: colors.background,
    },
    errorContent: {
        alignItems: "center",
        backgroundColor: colors.white,
        padding: spacing.xl,
        borderRadius: borderRadius.lg,
        ...shadows.lg,
        maxWidth: 320,
        width: "100%",
    },
    errorIcon: {
        marginBottom: spacing.base,
    },
    errorTitle: {
        fontSize: typography.sizes.xl,
        fontWeight: typography.weights.bold,
        color: colors.error,
        marginBottom: spacing.md,
        textAlign: "center",
        letterSpacing: -0.3,
    },
    errorMessage: {
        fontSize: typography.sizes.base,
        color: colors.secondaryText,
        textAlign: "center",
        marginBottom: spacing.lg,
        lineHeight: 22,
        letterSpacing: -0.1,
    },
    errorRetryButton: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: colors.appPrimary,
        paddingHorizontal: spacing.lg,
        paddingVertical: spacing.md,
        borderRadius: borderRadius.base,
        ...shadows.base,
    },
    errorRetryIcon: {
        marginRight: spacing.sm,
    },
    errorRetryText: {
        color: colors.white,
        fontSize: typography.sizes.base,
        fontWeight: typography.weights.semibold,
        letterSpacing: -0.2,
    },
});
//# sourceMappingURL=styles.js.map