snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/chat/components/native/styles.ts

@@ -0,0 +1,462 @@
+import { BoxModel } from '../../../base/styles/components/styles/BoxModel';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+const BUBBLE_RADIUS = 8;
+
+const recipientContainer = {
+    alignItems: 'center',
+    backgroundColor: BaseTheme.palette.support05,
+    borderRadius: BaseTheme.shape.borderRadius,
+    flexDirection: 'row',
+    height: 48,
+    marginBottom: BaseTheme.spacing[3],
+    marginHorizontal: BaseTheme.spacing[3],
+    padding: BaseTheme.spacing[2]
+};
+
+/**
+ * The styles of the feature chat.
+ *
+ * NOTE: Sizes and colors come from the 8x8 guidelines. This is the first
+ * component to receive this treating, if others happen to have similar, we
+ * need to extract the brand colors and sizes into a branding feature (planned
+ * for the future).
+ */
+export default {
+
+    /**
+     * Background of the chat screen.
+     */
+    backdrop: {
+        backgroundColor: BaseTheme.palette.ui10,
+        flex: 1
+    },
+
+    chatDisabled: {
+        padding: BaseTheme.spacing[2],
+        textAlign: 'center'
+    },
+
+    emptyComponentText: {
+        ...BaseTheme.typography.bodyLongBold,
+        color: BaseTheme.palette.text02,
+        textAlign: 'center'
+    },
+
+    lobbyMessageBubble: {
+        backgroundColor: BaseTheme.palette.support06
+    },
+
+    lobbyMsgNotice: {
+        color: BaseTheme.palette.text04,
+        fontSize: 11,
+        marginTop: 6
+    },
+
+    privateNotice: {
+        ...BaseTheme.palette.bodyShortRegular,
+        color: BaseTheme.palette.text02
+    },
+
+    privateMessageBubble: {
+        backgroundColor: BaseTheme.palette.support05
+    },
+
+    remoteMessageBubble: {
+        backgroundColor: BaseTheme.palette.ui02,
+        borderTopLeftRadius: 0
+    },
+
+    replyContainer: {
+        alignSelf: 'stretch',
+        justifyContent: 'center'
+    },
+
+    replyStyles: {
+        iconStyle: {
+            color: BaseTheme.palette.icon01,
+            fontSize: 22,
+            padding: BaseTheme.spacing[2]
+        },
+        underlayColor: 'transparent'
+    },
+
+    activeMatchMessageBubble: {
+        backgroundColor: BaseTheme.palette.warning02
+    },
+
+    chatMessageHighlight: {
+        backgroundColor: BaseTheme.palette.action02,
+        color: BaseTheme.palette.text01
+    },
+
+    chatMessageHighlightActive: {
+        backgroundColor: BaseTheme.palette.action01,
+        color: BaseTheme.palette.text01
+    },
+
+    searchBarContainer: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.ui03,
+        borderColor: BaseTheme.palette.ui03,
+        borderRadius: BaseTheme.shape.borderRadius,
+        borderWidth: 2,
+        flexDirection: 'row',
+        height: 40,
+        marginBottom: BaseTheme.spacing[1],
+        marginHorizontal: BaseTheme.spacing[3],
+        marginTop: BaseTheme.spacing[2],
+        paddingHorizontal: BaseTheme.spacing[2]
+    },
+
+    searchBarCounter: {
+        ...BaseTheme.typography.labelRegular,
+        color: BaseTheme.palette.text03,
+        marginHorizontal: BaseTheme.spacing[1]
+    },
+
+    searchBarNavButton: {
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        justifyContent: 'center',
+        padding: BaseTheme.spacing[1]
+    },
+
+    searchClearButton: {
+        alignItems: 'center',
+        height: 40,
+        justifyContent: 'center',
+        top: 0
+    },
+
+    searchInputContainer: {
+        flex: 1,
+        marginBottom: 0
+    },
+
+    searchInput: {
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        height: 40,
+        paddingHorizontal: 0
+    },
+
+    /**
+     * Wrapper View for the avatar.
+     */
+    avatarWrapper: {
+        marginRight: BaseTheme.spacing[2],
+        width: 32
+    },
+
+    chatLink: {
+        color: BaseTheme.palette.link01
+    },
+
+    chatMessage: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01
+    },
+
+    /**
+     * Wrapper for the details together, such as name, message and time.
+     */
+    detailsWrapper: {
+        alignItems: 'flex-start',
+        flex: 1,
+        flexDirection: 'column'
+    },
+
+    emptyComponentWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: BoxModel.padding,
+        maxWidth: '80%'
+    },
+
+    emptyListStyle: {
+        flex: 1
+    },
+
+    emptyListContentContainer: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center'
+    },
+
+    disabledSendWrapper: {
+        alignSelf: 'center',
+        flex: 0,
+        padding: BoxModel.padding,
+        paddingBottom: '8%',
+        paddingTop: '8%',
+        maxWidth: '80%'
+    },
+
+    /**
+     * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
+     */
+    extraBarPadding: {
+        paddingBottom: BaseTheme.spacing[6]
+    },
+
+    inputBar: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        width: '100%'
+    },
+
+    sendButton: {
+        marginRight: BaseTheme.spacing[4],
+        marginLeft: BaseTheme.spacing[2]
+    },
+
+    customInputContainer: {
+        marginLeft: BaseTheme.spacing[4],
+        flex: 1
+    },
+
+    messageBubble: {
+        alignItems: 'center',
+        borderRadius: BUBBLE_RADIUS,
+        flexDirection: 'row'
+    },
+
+    /**
+     * Wrapper View for the entire block.
+     */
+    messageWrapper: {
+        alignItems: 'flex-start',
+        flex: 1,
+        flexDirection: 'row',
+        marginHorizontal: 17,
+        marginVertical: 4
+    },
+
+    /**
+     * Style modifier for the {@code detailsWrapper} for own messages.
+     */
+    ownMessageDetailsWrapper: {
+        alignItems: 'flex-end'
+    },
+
+    replyWrapper: {
+        alignItems: 'center',
+        flexDirection: 'row'
+    },
+
+    /**
+     * Style modifier for system (error) messages.
+     */
+    systemMessageBubble: {
+        backgroundColor: 'rgb(247, 215, 215)'
+    },
+
+    /**
+     * Wrapper for the name and the message text.
+     */
+    textWrapper: {
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+        padding: 9
+    },
+
+    /**
+     * Text node for the timestamp.
+     */
+    timeText: {
+        color: BaseTheme.palette.text03,
+        fontSize: 13
+    },
+
+    tabContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center'
+    },
+
+    tabLeftButton: {
+        flex: 1,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0
+    },
+
+    tabRightButton: {
+        flex: 1,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+    },
+
+    gifContainer: {
+        maxHeight: 150
+    },
+
+    gifImage: {
+        flexGrow: 1,
+        height: undefined,
+        resizeMode: 'contain',
+        width: 250
+    },
+
+    gifMedia: {
+        height: 150,
+        resizeMode: 'contain',
+        width: 250,
+    },
+
+    senderDisplayName: {
+        ...BaseTheme.typography.bodyShortBold,
+        color: BaseTheme.palette.text02
+    },
+
+    localMessageBubble: {
+        backgroundColor: BaseTheme.palette.ui04,
+        borderTopRightRadius: 0
+    },
+
+    lobbyMessageRecipientContainer: {
+        ...recipientContainer,
+        backgroundColor: BaseTheme.palette.support06
+    },
+
+    messageRecipientCancelIcon: {
+        color: BaseTheme.palette.icon01,
+        fontSize: 18
+    },
+
+    messageRecipientContainer: {
+        ...recipientContainer
+    },
+
+    messageRecipientText: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01,
+        flex: 1
+    }
+};
+
+/**
+ * Styles for the ClosedCaptions component.
+ */
+export const closedCaptionsStyles = {
+    container: {
+        backgroundColor: BaseTheme.palette.ui01,
+        flex: 1
+    },
+
+    emptyContentContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+
+    emptyContent: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        padding: BaseTheme.spacing[3]
+    },
+
+    emptyStateText: {
+        ...BaseTheme.typography.bodyLongBold,
+        color: BaseTheme.palette.text02,
+        textAlign: 'center',
+        maxWidth: '80%'
+    },
+
+    transcribingContainer: {
+        flex: 1
+    },
+
+    languageButtonContainer: {
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+        padding: BaseTheme.spacing[3]
+    },
+
+    languageButtonText: {
+        ...BaseTheme.typography.bodyShortRegularLarge,
+        color: BaseTheme.palette.text01,
+        marginHorizontal: BaseTheme.spacing[2]
+    },
+
+    languageButtonContent: {
+        flexDirection: 'row'
+    },
+
+    subtitleMessageContainer: {
+        backgroundColor: BaseTheme.palette.ui02,
+        borderRadius: BaseTheme.shape.borderRadius,
+        padding: BaseTheme.spacing[2],
+        maxWidth: '100%',
+        marginTop: BaseTheme.spacing[1]
+    },
+
+    subtitleMessageContent: {
+        maxWidth: '100%',
+        flex: 1
+    },
+
+    subtitleMessageHeader: {
+        ...BaseTheme.typography.labelBold,
+        color: BaseTheme.palette.text02,
+        marginBottom: BaseTheme.spacing[1],
+        maxWidth: 130
+    },
+
+    subtitleMessageText: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01
+    },
+
+    subtitleMessageTimestamp: {
+        ...BaseTheme.typography.labelRegular,
+        color: BaseTheme.palette.text03,
+        marginTop: BaseTheme.spacing[1]
+    },
+
+    subtitleMessageInterim: {
+        opacity: 0.7
+    },
+
+    subtitlesGroupContainer: {
+        flexDirection: 'row',
+        marginBottom: BaseTheme.spacing[3]
+    },
+
+    subtitlesGroupAvatar: {
+        marginBottom: BaseTheme.spacing[10],
+        marginRight: BaseTheme.spacing[2],
+        alignSelf: 'flex-start',
+        width: 32
+    },
+
+    subtitlesGroupMessagesContainer: {
+        flexDirection: 'column',
+        flex: 1,
+        maxWidth: '100%'
+    },
+
+    subtitlesMessagesContainer: {
+        flex: 1,
+        position: 'relative',
+        height: '100%'
+    },
+
+    subtitlesMessagesList: {
+        padding: BaseTheme.spacing[4]
+    },
+
+    newMessagesButtonContainer: {
+        position: 'absolute',
+        bottom: BaseTheme.spacing[3],
+        alignSelf: 'center'
+    },
+
+    messagesContainer: {
+        display: 'flex',
+        flex: 1,
+        overflow: 'hidden'
+    }
+};