51 lines
1.1 KiB
JavaScript
51 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Trans } from '@lingui/macro';
|
|
import makeStyles from '@mui/styles/makeStyles';
|
|
import withStyles from '@mui/styles/withStyles';
|
|
import Chip from '@mui/material/Chip';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
color: theme.palette.text.primary,
|
|
backgroundColor: theme.palette.error.main,
|
|
borderRadius: 4,
|
|
fontWeight: 'bold',
|
|
height: 20,
|
|
},
|
|
labelSmall: {
|
|
paddingLeft: 6,
|
|
paddingRight: 6,
|
|
},
|
|
}));
|
|
|
|
const HtmlTooltip = withStyles((theme) => ({
|
|
tooltip: {
|
|
backgroundColor: theme.palette.error.main,
|
|
color: theme.palette.text.primary,
|
|
maxWidth: 100,
|
|
fontSize: '.8rem',
|
|
},
|
|
arrow: {
|
|
color: theme.palette.error.main,
|
|
},
|
|
}))(Tooltip);
|
|
|
|
export default function Component({ style = null }) {
|
|
const classes = useStyles();
|
|
return (
|
|
<HtmlTooltip
|
|
title={
|
|
<React.Fragment>
|
|
<Trans>An environment variable sets this value.</Trans>
|
|
</React.Fragment>
|
|
}
|
|
placement="right"
|
|
arrow
|
|
>
|
|
<Chip size="small" label="ENV" className={classes.root} style={style} />
|
|
</HtmlTooltip>
|
|
);
|
|
}
|