diff --git a/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx b/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx index 7a8974a3a..f72d28452 100644 --- a/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx +++ b/frontend/src/core/components/shared/AdminAnalyticsChoiceModal.tsx @@ -1,4 +1,13 @@ -import { Modal, Stack, Button, Text, Title, Anchor } from '@mantine/core'; +import { + Modal, + Stack, + Button, + Text, + Title, + Anchor, + useMantineTheme, + useComputedColorScheme, +} from '@mantine/core'; import { useTranslation } from 'react-i18next'; import { useState } from 'react'; import { Z_ANALYTICS_MODAL } from '@app/styles/zIndex'; @@ -15,6 +24,21 @@ export default function AdminAnalyticsChoiceModal({ opened, onClose }: AdminAnal const { refetch } = useAppConfig(); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); + const theme = useMantineTheme(); + const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true }); + const isDark = computedColorScheme === 'dark'; + const privacyHighlightStyles = { + color: isDark ? '#FFFFFF' : theme.colors.blue[7], + padding: `${theme.spacing.xs} ${theme.spacing.sm}`, + borderRadius: theme.radius.md, + fontWeight: 700, + textAlign: 'center' as const, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: theme.spacing.xs, + letterSpacing: 0.3, + }; const handleChoice = async (enableAnalytics: boolean) => { setLoading(true); @@ -60,7 +84,10 @@ export default function AdminAnalyticsChoiceModal({ opened, onClose }: AdminAnal {t('analytics.title', 'Do you want make Stirling PDF better?')} - {t('analytics.paragraph1', 'Stirling PDF has opt in analytics to help us improve the product. We do not track any personal information or file contents.')} + {t('analytics.paragraph1', 'Stirling PDF has opt in analytics to help us improve the product.')} + + + • {t('analytics.privacyAssurance', 'We do not track any personal information or the contents of your files.')} • diff --git a/frontend/src/core/hooks/useCookieConsent.ts b/frontend/src/core/hooks/useCookieConsent.ts index 2603505e0..58b7683c6 100644 --- a/frontend/src/core/hooks/useCookieConsent.ts +++ b/frontend/src/core/hooks/useCookieConsent.ts @@ -25,14 +25,14 @@ export const useCookieConsent = ({ const { t } = useTranslation(); const { config } = useAppConfig(); const [isInitialized, setIsInitialized] = useState(false); - const [hasResponded, setHasResponded] = useState(!analyticsEnabled); + const [hasRespondedInternal, setHasRespondedInternal] = useState(false); useEffect(() => { if (typeof window === 'undefined') { return; } - const markResponded = () => setHasResponded(true); + const markResponded = () => setHasRespondedInternal(true); const removeConsentListeners = () => { window.removeEventListener('cc:onFirstConsent', markResponded); window.removeEventListener('cc:onConsent', markResponded); @@ -44,12 +44,12 @@ export const useCookieConsent = ({ window.addEventListener('cc:onChange', markResponded); if (analyticsEnabled) { - setHasResponded(window.CookieConsent?.validConsent?.() ?? false); + setHasRespondedInternal(window.CookieConsent?.validConsent?.() ?? false); } if (!analyticsEnabled) { console.log('Cookie consent not enabled - analyticsEnabled is false'); - markResponded(); + setHasRespondedInternal(false); return () => { removeConsentListeners(); }; @@ -238,6 +238,8 @@ export const useCookieConsent = ({ } if (window.CookieConsent?.validConsent?.()) { markResponded(); + } else { + setHasRespondedInternal(false); } setIsInitialized(true); }, 100); // Small delay to ensure DOM is ready @@ -284,11 +286,13 @@ export const useCookieConsent = ({ return window.CookieConsent.acceptedService(service, category); }, []); + const effectiveHasResponded = analyticsEnabled ? hasRespondedInternal : true; + return { showCookieConsent, showCookiePreferences, isServiceAccepted, isInitialized, - hasResponded, + hasResponded: effectiveHasResponded, }; };