marginBottom: spacing()

in public/src/components/utilities/QrCodePage.tsx [44:100]

• 13 lines of code
• 4 McCabe index (conditional complexity)

      marginBottom: spacing(2),
    },
  },
  codeContainer: {
    minWidth: '90%',
    marginTop: spacing(4),
    marginBottom: spacing(4),
    padding: spacing(4),
    display: 'flex',
    justifyContent: 'center',
  },
}));

const userAdviceStyles = makeStyles({
  card: {
    alignSelf: 'start',
    justifySelf: 'center',
    maxWidth: '360px',
  },
  paragraph: {
    marginBottom: '1rem',
  },
});

function UserAdvice() {
  const classes = userAdviceStyles();
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography className={classes.paragraph}>
          When using the QR code to track a reader by linking it to a URL you must ensure that the
          reader&apos;s CMP choice is respected either by reference to the reader choice logged with
          Sourcepoint, or by reference to the correct pageview table.
        </Typography>
        <Typography>For further guidance contact the T&C team or the Data Privacy team.</Typography>
      </CardContent>
    </Card>
  );
}

const decodeUrlFromParam = (params: URLSearchParams): string | undefined => {
  const url = params.get('url');
  if (url) {
    return lzstring.decompressFromEncodedURIComponent(url);
  }
};

export default function QrCodePage(): JSX.Element {
  const [searchParams] = useSearchParams();
  const [url, setUrl] = useState(decodeUrlFromParam(searchParams) ?? '');
  const [fileName, setFileName] = useState('');
  const [codeSize, setCodeSize] = useState(256);
  const classes = useStyles();

  function onSvgDownload() {
    const svg = document.querySelector<SVGElement>('#QRCode');
    if (svg && url) {