Skip to content

Commit 53fb082

Browse files
brunobergherbrunobergher
committed
Fixes Roo's work, makes the banner actually work
1 parent c985d99 commit 53fb082

File tree

9 files changed

+401
-224
lines changed

9 files changed

+401
-224
lines changed

‎apps/web-docs/src/components/CookieConsent.tsx‎

Lines changed: 0 additions & 138 deletions
This file was deleted.

‎apps/web-roo-code/src/app/layout.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from "react"
22
import type { Metadata } from "next"
33
import { Inter } from "next/font/google"
4-
import Script from "next/script"
54
import { SEO } from "@/lib/seo"
6-
import { CookieConsent } from "@/components/CookieConsent"
5+
import { CookieConsentWrapper } from "@/components/CookieConsentWrapper"
76

87
import { Providers } from "@/components/providers"
98

@@ -94,23 +93,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
9493
/>
9594
</head>
9695
<body className={inter.className}>
97-
{/* Google tag (gtag.js) */}
98-
<Script src="https://www.googletagmanager.com/gtag/js?id=AW-17391954825" strategy="afterInteractive" />
99-
<Script id="google-analytics" strategy="afterInteractive">
100-
{`
101-
window.dataLayer = window.dataLayer || [];
102-
function gtag(){dataLayer.push(arguments);}
103-
gtag('js', new Date());
104-
gtag('config', 'AW-17391954825');
105-
`}
106-
</Script>
10796
<div itemScope itemType="https://schema.org/WebSite">
10897
<link itemProp="url" href={SEO.url} />
10998
<meta itemProp="name" content={SEO.name} />
11099
</div>
111100
<Providers>
112101
<Shell>{children}</Shell>
113-
<CookieConsent />
102+
<CookieConsentWrapper />
114103
</Providers>
115104
</body>
116105
</html>

‎apps/web-roo-code/src/components/CookieConsent.tsx‎

Lines changed: 35 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,9 @@
22

33
import React from "react"
44
import ReactCookieConsent from "react-cookie-consent"
5-
import { useTheme } from "next-themes"
5+
import { Cookie } from "lucide-react"
66

77
export interface CookieConsentProps {
8-
/**
9-
* The text to display in the cookie consent banner
10-
*/
11-
text?: string
12-
/**
13-
* The text for the accept button
14-
*/
15-
buttonText?: string
168
/**
179
* Callback when cookies are accepted
1810
*/
@@ -45,90 +37,85 @@ export interface CookieConsentProps {
4537

4638
/**
4739
* GDPR-compliant cookie consent banner component
48-
* Uses Tailwind classes for styling and next-themes for dark mode detection
40+
* Uses Tailwind classes for styling
4941
*/
5042
export function CookieConsent({
51-
text = "Like pretty much everyone else, we use cookies. We assume you're OK with it, but you can opt out if you want.",
52-
buttonText = "Accept",
5343
onAccept,
5444
onDecline,
55-
enableDeclineButton = true,
56-
declineButtonText = "Decline",
5745
className = "",
5846
cookieName = "roo-code-cookie-consent",
5947
debug = false,
6048
}: CookieConsentProps) {
61-
const { theme } = useTheme()
62-
const isDarkMode = theme === "dark"
63-
64-
// Tailwind classes for the container
6549
const containerClasses = `
66-
fixed bottom-0 left-0 right-0 z-[999]
67-
${isDarkMode ? "bg-black/95" : "bg-white/95"}
50+
fixed bottom-2 left-2 right-2 z-[999]
51+
bg-black/95 dark:bg-white/95
52+
text-white dark:text-black
53+
border-t-neutral-800 dark:border-t-gray-200
6854
backdrop-blur-xl
69-
${isDarkMode ? "border-t-neutral-800" : "border-t-gray-200"}
7055
border-t
56+
font-semibold
57+
rounded-t-lg
7158
px-4 py-4 md:px-8 md:py-4
7259
flex flex-wrap items-center justify-between gap-4
7360
text-sm font-sans
7461
${className}
7562
`.trim()
7663

77-
// Tailwind classes for the accept button
64+
const buttonWrapperClasses = `
65+
flex
66+
flex-row-reverse
67+
items-center
68+
gap-2
69+
`.trim()
70+
7871
const acceptButtonClasses = `
79-
${isDarkMode ? "bg-white text-black" : "bg-black text-white"}
80-
hover:opacity-90
72+
bg-white text-black border-neutral-800
73+
dark:bg-black dark:text-white dark:border-gray-200
74+
hover:opacity-50
8175
transition-opacity
8276
rounded-md
83-
px-4 py-2
84-
text-sm font-medium
77+
px-4 py-2 mr-2
78+
text-sm font-bold
8579
cursor-pointer
8680
focus:outline-none focus:ring-2 focus:ring-offset-2
87-
${isDarkMode ? "focus:ring-white" : "focus:ring-black"}
8881
`.trim()
8982

90-
// Tailwind classes for the decline button
9183
const declineButtonClasses = `
92-
bg-transparent
93-
${isDarkMode ? "text-white border-neutral-800" : "text-black border-gray-200"}
94-
border
95-
hover:opacity-90
84+
dark:bg-white dark:text-black dark:border-gray-200
85+
bg-black text-white border-neutral-800
86+
hover:opacity-50
87+
border border-border
9688
transition-opacity
9789
rounded-md
9890
px-4 py-2
99-
text-sm font-medium
91+
text-sm font-bold
10092
cursor-pointer
10193
focus:outline-none focus:ring-2 focus:ring-offset-2
102-
${isDarkMode ? "focus:ring-white" : "focus:ring-black"}
103-
`.trim()
104-
105-
// Tailwind classes for the content
106-
const contentClasses = `
107-
flex-1
108-
${isDarkMode ? "text-neutral-200" : "text-gray-700"}
109-
mr-4
11094
`.trim()
11195

11296
return (
11397
<div role="banner" aria-label="Cookie consent banner" aria-live="polite">
11498
<ReactCookieConsent
11599
location="bottom"
116-
buttonText={buttonText}
117-
declineButtonText={declineButtonText}
100+
buttonText="Accept"
101+
declineButtonText="Decline"
118102
cookieName={cookieName}
119103
expires={365}
120-
enableDeclineButton={enableDeclineButton}
104+
enableDeclineButton={true}
121105
onAccept={onAccept}
122106
onDecline={onDecline}
123107
debug={debug}
124108
containerClasses={containerClasses}
125109
buttonClasses={acceptButtonClasses}
110+
buttonWrapperClasses={buttonWrapperClasses}
126111
declineButtonClasses={declineButtonClasses}
127-
contentClasses={contentClasses}
128112
disableStyles={true}
129-
ariaAcceptLabel={`Accept ${buttonText}`}
130-
ariaDeclineLabel={`Decline ${declineButtonText}`}>
131-
{text}
113+
ariaAcceptLabel={`Accept`}
114+
ariaDeclineLabel={`Decline`}>
115+
<div className="flex items-center gap-2">
116+
<Cookie className="size-5 hidden md:block" />
117+
<span>Like most of the internet, we use cookies. Are you OK with that?</span>
118+
</div>
132119
</ReactCookieConsent>
133120
</div>
134121
)

‎apps/web-roo-code/src/components/CookieConsentWrapper.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
"use client"
2+
3+
import React from "react"
4+
import { CookieConsent } from "./CookieConsent"
5+
import { dispatchConsentEvent } from "@/lib/analytics/consent-manager"
6+
7+
/**
8+
* Wrapper component for CookieConsent that handles consent callbacks
9+
* This is needed because we can't pass event handlers from server components
10+
*/
11+
export function CookieConsentWrapper() {
12+
const handleAccept = () => {
13+
dispatchConsentEvent(true)
14+
}
15+
16+
const handleDecline = () => {
17+
dispatchConsentEvent(false)
18+
}
19+
20+
return <CookieConsent onAccept={handleAccept} onDecline={handleDecline} enableDeclineButton={true} />
21+
}

0 commit comments

Comments
 (0)