jiti-meet/react/features/toolbox/components/native/styles.js

133 lines
2.8 KiB
JavaScript

// @flow
import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
import { HANGUP_BUTTON_SIZE } from '../../constants';
// Toolbox, toolbar:
/**
* The style of toolbar buttons.
*/
const toolbarButton = {
backgroundColor: ColorPalette.white,
borderRadius: 20,
borderWidth: 0,
flex: 0,
flexDirection: 'row',
height: 40,
justifyContent: 'center',
// XXX We probably tested BoxModel.margin and discovered it to be too small
// for our taste.
marginHorizontal: 7,
opacity: 0.7,
width: 40
};
/**
* The icon style of the toolbar buttons.
*/
const toolbarButtonIcon = {
alignSelf: 'center',
color: ColorPalette.darkGrey,
fontSize: 22
};
/**
* The Toolbox and toolbar related styles.
*/
const styles = createStyleSheet({
/**
* The style of the toolbar button which hangs the current conference up.
*/
hangupButton: {
...toolbarButton,
backgroundColor: ColorPalette.red,
borderRadius: 30,
height: HANGUP_BUTTON_SIZE,
width: HANGUP_BUTTON_SIZE
},
/**
* The icon style of toolbar buttons which hangs the current conference up.
*/
hangupButtonIcon: {
...toolbarButtonIcon,
color: ColorPalette.white,
fontSize: 24
},
/**
* The style of the toolbar.
*/
toolbar: {
alignItems: 'center',
flexDirection: 'row',
flexGrow: 0,
justifyContent: 'center',
marginBottom: BoxModel.margin / 2,
paddingHorizontal: BoxModel.margin
},
/**
* The style of toolbar buttons.
*/
toolbarButton,
/**
* The icon style of the toolbar buttons.
*/
toolbarButtonIcon,
/**
* The style of the root/top-level {@link Container} of {@link Toolbox}.
*/
toolbox: {
flexDirection: 'column',
flexGrow: 0
},
/**
* The style of toolbar buttons which display white icons.
*/
whiteToolbarButton: {
...toolbarButton,
backgroundColor: ColorPalette.buttonUnderlay
},
/**
* The icon style of toolbar buttons which display white icons.
*/
whiteToolbarButtonIcon: {
...toolbarButtonIcon,
color: ColorPalette.white
}
});
export default styles;
/**
* Styles for the hangup button.
*/
export const hangupButtonStyles = {
iconStyle: styles.whiteToolbarButtonIcon,
style: styles.hangupButton,
underlayColor: ColorPalette.buttonUnderlay
};
/**
* Styles for buttons in the toolbar.
*/
export const toolbarButtonStyles = {
iconStyle: styles.toolbarButtonIcon,
style: styles.toolbarButton
};
/**
* Styles for toggled buttons in the toolbar.
*/
export const toolbarToggledButtonStyles = {
iconStyle: styles.whiteToolbarButtonIcon,
style: styles.whiteToolbarButton
};