fix(docs): refactor Google Analytics to use config and CSS classes

Address PR review feedback:
- Move Google Analytics tracking ID to docusaurus.config.ts customFields
- Use useDocusaurusContext hook to access config in Root.tsx
- Move cookie consent inline styles to src/css/custom.css
- Use CSS classes with Docusaurus theme variables for consistency
- Add hover states for improved UX

Addresses comments from PR #174

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

Author: jp-ayyappan

docusaurus.config.ts

@@ -36,6 +36,7 @@ const config: Config = {
   trailingSlash: false,
   customFields: {
     javaSdkVersion,
+    googleGtagId: 'G-JH0PNJK88L',
   },
 
   // GitHub pages deployment config.

src/css/custom.css

@@ -200,6 +200,54 @@ a[class*="embed_documentation_footer-"] {
   }
 }
 
+/**************
+** COOKIE CONSENT BANNER
+***************/
+
+.cookie-consent-banner {
+  background: #1c1e21;
+  align-items: center;
+  padding: 1rem;
+}
+
+.cookie-consent-banner a {
+  color: var(--ifm-color-primary);
+  text-decoration: underline;
+}
+
+.cookie-consent-banner a:hover {
+  color: var(--ifm-color-primary-light);
+}
+
+.cookie-consent-accept-button {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  font-size: 14px;
+  padding: 10px 24px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+.cookie-consent-accept-button:hover {
+  background: var(--ifm-color-primary-dark);
+}
+
+.cookie-consent-decline-button {
+  background: transparent;
+  color: #fff;
+  font-size: 14px;
+  padding: 10px 24px;
+  border-radius: 4px;
+  border: 1px solid #fff;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.cookie-consent-decline-button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 /**************
 ** HOMEPAGE
 

src/theme/Root.tsx

@@ -1,26 +1,24 @@
 import React from 'react';
 import CookieConsent from 'react-cookie-consent';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-// This component wraps the entire application
 export default function Root({ children }: { children: React.ReactNode }) {
+  const { siteConfig } = useDocusaurusContext();
+  const { googleGtagId } = siteConfig.customFields as { googleGtagId?: string };
+
   const handleAcceptCookie = () => {
-    // Initialize Google Analytics when user accepts cookies
-    if (typeof window !== 'undefined') {
-      // Load gtag.js script
+    if (typeof window !== 'undefined' && googleGtagId) {
       const script = document.createElement('script');
-      script.src = 'https://www.googletagmanager.com/gtag/js?id=G-JH0PNJK88L';
+      script.src = `https://www.googletagmanager.com/gtag/js?id=${googleGtagId}`;
       script.async = true;
       document.head.appendChild(script);
 
-      // Initialize gtag
       window.dataLayer = window.dataLayer || [];
       function gtag(...args: any[]) {
         window.dataLayer.push(args);
       }
       gtag('js', new Date());
-      gtag('config', 'G-JH0PNJK88L', { anonymize_ip: true });
-
-      // Store gtag globally for future use
+      gtag('config', googleGtagId, { anonymize_ip: true });
       (window as any).gtag = gtag;
     }
   };
@@ -33,56 +31,24 @@ export default function Root({ children }: { children: React.ReactNode }) {
         buttonText="Accept"
         declineButtonText="Decline"
         cookieName="opentdf-cookie-consent"
-        style={{
-          background: '#1c1e21',
-          alignItems: 'center',
-          padding: '1rem',
-        }}
-        buttonStyle={{
-          background: '#4CAF50',
-          color: '#fff',
-          fontSize: '14px',
-          padding: '10px 24px',
-          borderRadius: '4px',
-          border: 'none',
-          cursor: 'pointer',
-        }}
-        declineButtonStyle={{
-          background: 'transparent',
-          color: '#fff',
-          fontSize: '14px',
-          padding: '10px 24px',
-          borderRadius: '4px',
-          border: '1px solid #fff',
-          cursor: 'pointer',
-          marginLeft: '10px',
-        }}
+        containerClasses="cookie-consent-banner"
+        buttonClasses="cookie-consent-accept-button"
+        declineButtonClasses="cookie-consent-decline-button"
         expires={365}
         enableDeclineButton
         onAccept={handleAcceptCookie}
       >
         This website uses cookies to improve user experience and analyze website traffic.
         By clicking "Accept", you consent to our use of cookies. See our{' '}
-        <a
-          href="/privacy-policy"
-          style={{ color: '#4CAF50', textDecoration: 'underline' }}
-        >
-          Privacy Policy
-        </a>
+        <a href="/privacy-policy">Privacy Policy</a>
         {' '}and{' '}
-        <a
-          href="/cookie-policy"
-          style={{ color: '#4CAF50', textDecoration: 'underline' }}
-        >
-          Cookie Policy
-        </a>
+        <a href="/cookie-policy">Cookie Policy</a>
         {' '}for more information.
       </CookieConsent>
     </>
   );
 }
 
-// Extend Window interface for TypeScript
 declare global {
   interface Window {
     dataLayer: any[];