jiti-meet/react/features/notifications/components/styles.js

116 lines
2.4 KiB
JavaScript

// @flow
import { StyleSheet } from 'react-native';
import { BoxModel, createStyleSheet, ColorPalette } from '../../base/styles';
/**
* The styles of the React {@code Components} of the feature notifications.
*/
export default createStyleSheet({
/**
* The content (left) column of the notification.
*/
contentColumn: {
flex: 1,
flexDirection: 'column',
padding: BoxModel.padding
},
/**
* Test style of the notification.
*/
contentText: {
color: ColorPalette.white
},
/**
* Dismiss icon style.
*/
dismissIcon: {
alignSelf: 'center',
color: ColorPalette.white,
fontSize: 16,
padding: 1.5 * BoxModel.padding
},
/**
* Outermost view of a single notification.
*/
notification: {
borderRadius: 5,
flexDirection: 'row',
marginTop: 0.5 * BoxModel.margin
},
/**
* Outermost container of a list of notifications.
*/
notificationContainer: {
alignItems: 'flex-start',
bottom: 0,
left: 0,
padding: 2 * BoxModel.padding,
position: 'absolute',
right: 0
},
/**
* Wrapper for the message (without title).
*/
notificationContent: {
flexDirection: 'column',
paddingVertical: 0.5 * BoxModel.padding
},
/**
* A full screen overlay to help to position the container.
*/
notificationOverlay: {
...StyleSheet.absoluteFillObject
},
/**
* The View containing the title.
*/
notificationTitle: {
paddingVertical: 0.5 * BoxModel.padding
},
/**
* Background settings for different notification types.
*/
notificationTypeError: {
backgroundColor: ColorPalette.R400
},
notificationTypeInfo: {
backgroundColor: ColorPalette.N500
},
notificationTypeNormal: {
// NOTE: Mobile has black background when the large video doesn't render
// a stream, so we avoid using black as the background of the normal
// type notifications.
backgroundColor: ColorPalette.N500
},
notificationTypeSuccess: {
backgroundColor: ColorPalette.G400
},
notificationTypeWarning: {
backgroundColor: ColorPalette.Y200
},
/**
* Title text style.
*/
titleText: {
color: ColorPalette.white,
fontWeight: 'bold'
}
});