sfm-uikit-react-native/src/style/EnxQnaStyle.js

It is a react native component for SmartFloMeet users.

import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff",
    },
    card: {
      backgroundColor: '#fff',
      borderRadius: 10,
      padding: 15,
      marginVertical: 10, // Space between cards
      marginHorizontal: 20, // Space from screen edges
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 5,
      elevation: 3, // Adds a subtle shadow for Android
    },
    segmentView: {
      height: 40,
      backgroundColor: "#f0f0f0",
    },
    messageList: {
      flex: 1,
      paddingHorizontal: 10,
    },
    messageItem: {
      paddingVertical: 10,
      borderBottomWidth: 1,
      borderBottomColor: "#ddd",
    },
    messageText: {
        fontSize: 16,
        fontWeight: '500',
      },
    inputContainer: {
      flexDirection: "row",
      alignItems: "center",
      padding: 10,
      borderTopWidth: 1,
      borderTopColor: "#ddd",
    },
    input: {
      flex: 1,
      height: 40,
      borderColor: "#ddd",
      borderWidth: 1,
      borderRadius: 8,
      paddingHorizontal: 10,
    },
    sendButton: {
        marginLeft: 10,
        backgroundColor: "#e60073",
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 8,
      },
    sendButtonText: {
        color: "#fff",
        fontSize: 16,
      },
     
      avatarContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
      },
      avatar: {
        backgroundColor: '#e60073',
        width: 40,
        height: 40,
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
      },
      avatarText: {
        color: '#fff',
        fontWeight: 'bold',
      },
      username: {
        marginLeft: 10,
        fontWeight: 'bold',
        color: '#333',
      },
      time: {
        marginLeft: 10,
        color: '#999',
      },
      messageContainer: {
        marginBottom: 10,
      },
     
      actionsContainer: {
        flexDirection: 'row', // Layout buttons in a row
        justifyContent: 'flex-end', // Push buttons to the right
        alignItems: 'center', // Center align vertically
        flex: 1, // Take up remaining space 
       },
      actionButton: {
        borderColor: '#e60073',
        borderWidth: 1,
        backgroundColor: '#e60073',
        borderRadius: 5,
        paddingVertical: 5,
        paddingHorizontal: 10,
        margin :1
      },
      actionText: {
        color: '#FFFFFF',
      },
      deleteButtonContainer: {
        padding: 5,
      },
      deleteButtonIcon: {
        width: 25,
        
        height: 25,
        tintColor: '#e60073', // Change color if needed
      },
      leftSection: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between', // Space between the avatar/message and delete button
        padding: 10,
      },
      nestedMessagesContainer: {
        marginTop: 10,
        paddingLeft: 20, // Indentation for nested messages
      },
      
      nestedMessageContainer: {
        marginBottom: 10,
      },
      
      nestedHeader: {
        flexDirection: 'row',
        alignItems: 'center',
      },
      
      nestedAvatar: {
        backgroundColor: '#e60073',
        width: 30,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
      },
      
      nestedAvatarText: {
        color: '#fff',
        fontWeight: 'bold',
      },
      
      nestedUsername: {
        marginLeft: 10,
        fontWeight: 'bold',
        color: '#333',
      },
      
      nestedTime: {
        marginLeft: 10,
        color: '#999',
      },
      
      nestedMessageContent: {
        marginTop: 5,
        paddingLeft: 10,
      },
      
      nestedMessageText: {
        fontSize: 14,
        color: '#555',
      },
      
      nestedIcon: {
        width: 20,
        height: 20,
        tintColor: '#555',
      },
      
  });
  export { styles }