jiti-meet/react/features/participants-pane/components/web/ParticipantPaneBaseButton.js

99 lines
2.3 KiB
JavaScript

// @flow
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
type Props = {
/**
* Label used for accessibility.
*/
accessibilityLabel: String,
/**
* Additional class name for custom styles.
*/
className?: string,
/**
* Children of the component.
*/
children: string | React$Node,
/**
* Button id.
*/
id?: string,
/**
* Click handler.
*/
onClick: Function,
/**
* Whether or not the button should have primary button style.
*/
primary?: boolean
}
const useStyles = makeStyles(theme => {
return {
button: {
alignItems: 'center',
backgroundColor: theme.palette.action02,
border: 0,
borderRadius: `${theme.shape.borderRadius}px`,
display: 'flex',
justifyContent: 'center',
minHeight: '40px',
padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
...theme.typography.labelButton,
lineHeight: `${theme.typography.labelButton.lineHeight}px`,
'&:hover': {
backgroundColor: theme.palette.action02Hover
},
[`@media (max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
...theme.typography.labelButtonLarge,
lineHeight: `${theme.typography.labelButtonLarge.lineHeight}px`,
minWidth: '48px',
minHeight: '48px'
}
},
buttonPrimary: {
backgroundColor: theme.palette.action01,
'&:hover': {
backgroundColor: theme.palette.action01Hover
}
}
};
});
const ParticipantPaneBaseButton = ({
accessibilityLabel,
className,
children,
id,
onClick,
primary = false
}: Props) => {
const styles = useStyles();
return (
<button
aria-label = { accessibilityLabel }
className = { `${styles.button} ${primary ? styles.buttonPrimary : ''} ${className ?? ''}` }
id = { id }
onClick = { onClick }>
{children}
</button>
);
};
export default ParticipantPaneBaseButton;