1  import { Trans } from '@lingui/macro';
 2  import { Box, Typography } from '@mui/material';
 3  import { ReactNode } from 'react';
 4  
 5  import { DarkTooltip } from './infoTooltips/DarkTooltip';
 6  
 7  interface CircleIconProps {
 8    downToSM: boolean;
 9    tooltipText: string;
10    children: ReactNode;
11  }
12  
13  export const CircleIcon = ({ downToSM, tooltipText, children }: CircleIconProps) => {
14    return (
15      <DarkTooltip
16        title={
17          <Typography>
18            <Trans>{tooltipText}</Trans>
19          </Typography>
20        }
21      >
22        <Box
23          sx={{
24            display: 'flex',
25            flexDirection: 'column',
26            alignItems: 'center',
27            justifyContent: 'center',
28          }}
29        >
30          <Box
31            sx={{
32              bgcolor: '#383D51',
33              width: downToSM ? '18px' : '24px',
34              height: downToSM ? '18px' : '24px',
35              borderRadius: '50%',
36              display: 'flex',
37              justifyContent: 'center',
38              ml: '8px',
39              border: '0.5px solid rgba(235, 235, 237, 0.12)',
40            }}
41          >
42            {children}
43          </Box>
44        </Box>
45      </DarkTooltip>
46    );
47  };