feat(ui): restyle cookie consent banner with design tokens

Replace fixed-size layout and hardcoded hex colors with --cs-* tokens.
Banner now uses the surface/border/ink palette and orange CTA button
consistent with the rest of the UI.

Author: ziracmo

crowdsec-docs/plugins/gtag/theme/cookieconsent.js

@@ -1,42 +1,56 @@
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import {createStorageSlot} from '@docusaurus/theme-common';
-import React, {useState} from 'react';
+import { createStorageSlot } from "@docusaurus/theme-common";
+import React, { useState } from "react";
 
-const storage = createStorageSlot('docusaurus.cookieConsent');
+const storage = createStorageSlot("docusaurus.cookieConsent");
 
 export default function CookieConsent() {
-  const [dismissed, setDismissed] = useState(false);
-  if (dismissed) {
-    return null;
-  }
-  return (
-    <div className={styles.banner}>
-      <p className={styles.text}>
-        This website uses cookies to help us improve. Click &quot;accept&quot;
-        to allow us to continue using cookies.
-      </p>
-      <div className={styles.buttons}>
-        <button
-          type="button"
-          className={clsx('clean-btn', styles.button)}
-          onClick={() => {
-            storage.set('true');
-            window.dispatchEvent(new CustomEvent('cookieConsentAccepted'));
-            setDismissed(true);
-          }}>
-          Accept
-        </button>
-        <button
-          type="button"
-          className={clsx('clean-btn', styles.button)}
-          onClick={() => {
-            storage.set('false');
-            setDismissed(true);
-          }}>
-          Decline
-        </button>
-      </div>
-    </div>
-  );
+	const [dismissed, setDismissed] = useState(false);
+	if (dismissed) return null;
+
+	return (
+		<div className="fixed bottom-6 right-6 w-80 rounded-[14px] bg-cs-surface border border-cs-border-hi z-[9999] flex flex-col gap-3.5 p-5 pb-4"
+			style={{ boxShadow: "0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(148,163,184,0.06)" }}
+		>
+			{/* Eyebrow */}
+			<div className="font-cs-mono text-[10px] tracking-[0.18em] uppercase text-cs-orange font-semibold">
+				CrowdSec Docs
+			</div>
+
+			{/* Title + body */}
+			<div>
+				<div className="text-sm font-semibold text-cs-ink mb-1.5">
+					We use cookies
+				</div>
+				<p className="m-0 text-[13px] text-cs-ink-dim leading-[1.55]">
+					This site uses cookies to help us improve your experience. You can
+					accept or decline below.
+				</p>
+			</div>
+
+			{/* Actions */}
+			<div className="flex gap-2">
+				<button
+					type="button"
+					onClick={() => {
+						storage.set("true");
+						window.dispatchEvent(new CustomEvent("cookieConsentAccepted"));
+						setDismissed(true);
+					}}
+					className="flex-1 py-2 px-3 rounded-lg bg-cs-orange text-cs-btn-text font-sans text-[13px] font-semibold border-0 cursor-pointer"
+				>
+					Accept
+				</button>
+				<button
+					type="button"
+					onClick={() => {
+						storage.set("false");
+						setDismissed(true);
+					}}
+					className="flex-1 py-2 px-3 rounded-lg bg-cs-surface-2 text-cs-ink-dim font-sans text-[13px] font-semibold border border-cs-border-hi cursor-pointer"
+				>
+					Decline
+				</button>
+			</div>
+		</div>
+	);
 }

crowdsec-docs/plugins/gtag/theme/styles.module.css

@@ -1,38 +1 @@
-.banner {
-    background-color: var(--ifm-color-emphasis-200);
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 300px;
-    height: 200px;
-    border-radius: var(--ifm-global-radius);
-    box-shadow: 0 1.5px 6px 0 rgba(0, 0, 0, 0.15) inset;
-    z-index: 1000;
-  }
-  
-  .text {
-    font-size: small;
-    padding: 30px;
-  }
-  
-  .buttons {
-    position: absolute;
-    bottom: 20px;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-  
-  .button {
-    width: 100px;
-    background-color: #d0d0d0 !important;
-    margin: 10px;
-    /* TODO this is because the CSS is imported as a client module as well, and happens to be before Infima */
-    padding: 5px !important;
-    border-radius: var(--ifm-global-radius);
-  }
-  
-  html[data-theme='dark'] .button {
-    background: #333333 !important;
-  }
-  
+/* Cookie consent styles moved to inline styles in cookieconsent.js */