Repository: mui/material-ui
File: docs/src/modules/components/AnalyticsProvider.tsx (TypeScript)

Code before:
          pointerEvents: 'auto',
          m: 2,
          maxWidth: 340,
        },
      }}
      aria-labelledby="cookie-consent-dialog-title"
      aria-describedby="cookie-consent-dialog-description"
    >
      <DialogTitle id="cookie-consent-dialog-title" sx={{ pb: 1 }}>
        Cookie Preferences
      </DialogTitle>
      <DialogContent sx={{ pb: 1 }}>
        <DialogContentText id="cookie-consent-dialog-description" variant="body2">
          We use cookies to understand site usage and improve our content. This includes third-party
          analytics.
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onEssential} color="inherit" size="small">
          Essential only
        </Button>
        <Button onClick={onAnalytics} variant="contained" size="small">
          Allow analytics
        </Button>
      </DialogActions>
    </Dialog>
  );
}

function updateGoogleConsent(hasAnalytics: boolean) {
  if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
    window.gtag('consent', 'update', {
      ad_storage: 'denied',
      ad_user_data: 'denied',
      ad_personalization: 'denied',
      analytics_storage: hasAnalytics ? 'granted' : 'denied',
    });

    // Initialize Apollo when analytics consent is granted
    const win = window as typeof window & { initApollo?: () => void };
    if (hasAnalytics && typeof win.initApollo === 'function') {
      win.initApollo();
    }
  }
}

export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
  const [consentStatus, setConsentStatus] = useLocalStorageState(COOKIE_CONSENT_KEY, null);
  const doNotTrack = useDoNotTrack();

  // Respect Do Not Track - don't show dialog and treat as essential only

Review comment (suggestion):
Great work on this! 🎉 Sorry for noticing the notification so late 🙈 
Chiming in here with some design feedback -> I fixed some of the spacing and took the liberty of adding a cookie icon for fun 😄 
I also changed from Dialog -> non-modal dialog as described [here](https://mui.com/material-ui/react-dialog/#non-modal-dialog)

```suggestion
    <TrapFocus open disableAutoFocus disableEnforceFocus>
      <Fade appear={false} in={open}>
        <Paper
          role="dialog"
          aria-modal="false"
          aria-labelledby="cookie-consent-dialog-title"
          aria-describedby="cookie-consent-dialog-description"
          variant="outlined"
          tabIndex={-1}
          sx={{
            position: 'fixed',
            bottom: 0,
            right: 0,
            p: 2,
            borderWidth: 0,
            borderTopWidth: 1,
            m: 2,
            maxWidth: 340,
            pointerEvents: 'auto',
          }}
        >
          <Stack direction="column" spacing={3} sx={{ justifyContent: 'flex-start' }}>
            <Stack
              spacing={1}
              sx={{ flexShrink: 1, alignSelf: { xs: 'flex-start', sm: 'center' } }}
            >
              <Box
                sx={(theme) => ({
                  borderRadius: '50%',
                  bgcolor: alpha(theme.palette.primary.main, 0.1),
                  p: 1,
                  display: 'inline-block',
                  width: 40,
                  height: 40,
                  mb: -1,
                  alignSelf: { xs: 'center', sm: 'flex-start' },
                })}
              >
                <CookieOutlinedIcon color="primary" strokeWidth={1.5} />
              </Box>
              <Stack spacing={0.5}>
                <Typography
                  variant="subtitle2"
                  id="cookie-consent-dialog-title"
                  textAlign={{ xs: 'center', sm: 'start' }}
                >
                  Cookie Preferences
                </Typography>
                <Typography
                  id="cookie-consent-dialog-description"
                  variant="body2"
                  textAlign={{ xs: 'center', sm: 'start' }}
                >
                  example.com relies on cookies to improve your experience.
                </Typography>
              </Stack>
            </Stack>

            <Stack direction="row" spacing={1} sx={{ justifyContent: 'flex-start' }}>
              <Button onClick={onAnalytics} variant="contained" size="small">
                Allow analytics
              </Button>
              <Button onClick={onEssential} size="small">
                Essential only
              </Button>
            </Stack>
          </Stack>
        </Paper>
      </Fade>
    </TrapFocus>
```

Before: 
<img width="814" height="576" alt="image" src="https://github.com/user-attachments/assets/6962ac7c-8c38-4cf8-a94d-e7ae4b3d6d67" />

After: 
<img width="902" height="641" alt="image" src="https://github.com/user-attachments/assets/b264ecfa-95e4-4893-8649-96ad22963850" />



Just one more small note: I think the cookie banner should also react to light/dark theme switches. Right now it stays light always



Code after:
          sx={{
            position: 'fixed',
            bottom: 0,
            right: 0,
            p: 2,
            borderWidth: 0,
            borderTopWidth: 1,
            m: 2,
            maxWidth: 340,
            pointerEvents: 'auto',
          }}
        >
          <Stack direction="column" spacing={3} sx={{ justifyContent: 'flex-start' }}>
            <Stack
              spacing={1}
              sx={{ flexShrink: 1, alignSelf: { xs: 'flex-start', sm: 'center' } }}
            >
              <Box
                sx={(theme) => ({
                  borderRadius: '50%',
                  bgcolor: alpha(theme.palette.primary.main, 0.1),
                  p: 1,
                  display: 'inline-block',
                  width: 40,
                  height: 40,
                  mb: -1,
                  alignSelf: { xs: 'center', sm: 'flex-start' },
                })}
              >
                <CookieOutlinedIcon color="primary" strokeWidth={1.5} />
              </Box>
              <Stack spacing={0.5}>
                <Typography
                  variant="subtitle2"
                  id="cookie-consent-dialog-title"
                  textAlign={{ xs: 'center', sm: 'start' }}
                >
                  Cookie Preferences
                </Typography>
                <Typography
                  id="cookie-consent-dialog-description"
                  variant="body2"
                  textAlign={{ xs: 'center', sm: 'start' }}
                >
                  example.com relies on cookies to improve your experience.
                </Typography>
              </Stack>
            </Stack>

            <Stack direction="row" spacing={1} sx={{ justifyContent: 'flex-start' }}>
              <Button onClick={onAnalytics} variant="contained" size="small">