58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { Theme } from '@mui/material';
|
|
import React from 'react';
|
|
import { WithTranslation } from 'react-i18next';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import { translate } from '../../../../base/i18n/functions';
|
|
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
|
|
import { UPGRADE_OPTIONS_LINK, UPGRADE_OPTIONS_TEXT } from '../../../constants';
|
|
|
|
const useStyles = makeStyles()((theme: Theme) => {
|
|
return {
|
|
limitContainer: {
|
|
backgroundColor: theme.palette.warning01,
|
|
borderRadius: '6px',
|
|
padding: '8px 16px'
|
|
},
|
|
limitInfo: {
|
|
color: theme.palette.field01,
|
|
...withPixelLineHeight(theme.typography.bodyShortRegular)
|
|
},
|
|
link: {
|
|
color: theme.palette.field01,
|
|
fontWeight: 'bold',
|
|
textDecoration: 'underline'
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Component that displays a message when the dial in limit is reached.
|
|
* * @param {Function} t - Function which translate strings.
|
|
*
|
|
* @returns {ReactElement}
|
|
*/
|
|
const DialInLimit: React.FC<WithTranslation> = ({ t }) => {
|
|
const { classes } = useStyles();
|
|
|
|
return (
|
|
<div className = { classes.limitContainer }>
|
|
<span className = { classes.limitInfo }>
|
|
<b>{ `${t('info.dialInNumber')} ` }</b>
|
|
{ `${t('info.reachedLimit')} `}
|
|
{ `${t('info.upgradeOptions')} ` }
|
|
<a
|
|
className = { classes.link }
|
|
href = { UPGRADE_OPTIONS_LINK }
|
|
rel = 'noopener noreferrer'
|
|
target = '_blank'>
|
|
{ `${UPGRADE_OPTIONS_TEXT}` }
|
|
</a>
|
|
.
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default translate(DialInLimit);
|