Skip to content

Commit 700006a

Browse files
roomote[bot]roomotemrubens
authored
feat: Move Teams banner to all pages with dismissible functionality (#368)
Co-authored-by: Roo Code <[email protected]> Co-authored-by: Matt Rubens <[email protected]>
1 parent 7969511 commit 700006a

File tree

5 files changed

+148
-54
lines changed

5 files changed

+148
-54
lines changed

‎src/components/TeamsBanner/index.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useState, useEffect } from 'react';
2+
import styles from './styles.module.css';
3+
4+
export function TeamsBanner(): React.ReactElement | null {
5+
const [isVisible, setIsVisible] = useState(false);
6+
7+
useEffect(() => {
8+
// Check localStorage to see if banner was dismissed
9+
const isDismissed = localStorage.getItem('teamsBannerDismissed');
10+
if (!isDismissed) {
11+
setIsVisible(true);
12+
}
13+
}, []);
14+
15+
const handleDismiss = () => {
16+
setIsVisible(false);
17+
localStorage.setItem('teamsBannerDismissed', 'true');
18+
};
19+
20+
if (!isVisible) {
21+
return null;
22+
}
23+
24+
return (
25+
<div className={styles.teamsBanner} role="banner" aria-label="Roo Code Teams announcement">
26+
<div className={styles.teamsBannerContent}>
27+
<span className={styles.teamsBannerHeadline}>Ship Faster with Roo Code Teams.</span>
28+
<a
29+
className={styles.teamsBannerLink}
30+
href="https://app.roocode.com/l/teams?utm_source=docs&utm_medium=banner&utm_campaign=teams_promo"
31+
target="_blank"
32+
rel="noopener noreferrer">
33+
Get early access now.
34+
</a>
35+
</div>
36+
<button
37+
className={styles.teamsBannerDismiss}
38+
onClick={handleDismiss}
39+
aria-label="Dismiss banner"
40+
type="button">
41+
<svg
42+
width="16"
43+
height="16"
44+
viewBox="0 0 16 16"
45+
fill="none"
46+
xmlns="http://www.w3.org/2000/svg"
47+
aria-hidden="true">
48+
<path
49+
d="M12.5 3.5L3.5 12.5M3.5 3.5L12.5 12.5"
50+
stroke="currentColor"
51+
strokeWidth="1.5"
52+
strokeLinecap="round"
53+
strokeLinejoin="round"
54+
/>
55+
</svg>
56+
</button>
57+
</div>
58+
);
59+
}
60+
61+
export default TeamsBanner;

‎src/components/TeamsBanner/styles.module.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.teamsBanner {
2+
position: relative;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
padding: 0.85rem 1.1rem;
7+
background: linear-gradient(90deg, #4f46e5, #2563eb);
8+
color: #ffffff;
9+
}
10+
11+
.teamsBannerContent {
12+
display: flex;
13+
align-items: center;
14+
gap: 0.75rem;
15+
}
16+
17+
.teamsBannerHeadline {
18+
font-weight: 600;
19+
}
20+
21+
.teamsBannerLink {
22+
color: #ffffff;
23+
font-weight: 600;
24+
text-decoration: underline;
25+
text-decoration-color: rgba(255, 255, 255, 0.7);
26+
text-decoration-thickness: 2px;
27+
}
28+
29+
.teamsBannerLink:hover {
30+
color: #ffffff;
31+
text-decoration-color: rgba(255, 255, 255, 0.95);
32+
}
33+
34+
.teamsBannerDismiss {
35+
position: absolute;
36+
right: 1rem;
37+
background: transparent;
38+
border: none;
39+
color: #ffffff;
40+
cursor: pointer;
41+
padding: 0.25rem;
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
border-radius: 4px;
46+
transition: background-color 0.2s ease;
47+
}
48+
49+
.teamsBannerDismiss:hover {
50+
background-color: rgba(255, 255, 255, 0.1);
51+
}
52+
53+
.teamsBannerDismiss:focus {
54+
outline: 2px solid rgba(255, 255, 255, 0.5);
55+
outline-offset: 2px;
56+
}
57+
58+
@media (max-width: 768px) {
59+
.teamsBanner {
60+
padding: 0.75rem 1rem;
61+
}
62+
63+
.teamsBannerContent {
64+
flex-direction: row;
65+
align-items: center;
66+
gap: 0.5rem;
67+
padding-right: 2rem; /* Space for close button */
68+
font-size: 0.875rem; /* Smaller font size for mobile */
69+
}
70+
71+
.teamsBannerHeadline {
72+
font-weight: 600;
73+
white-space: nowrap;
74+
}
75+
76+
.teamsBannerLink {
77+
white-space: nowrap;
78+
}
79+
80+
.teamsBannerDismiss {
81+
right: 0.5rem;
82+
top: 50%;
83+
transform: translateY(-50%);
84+
}
85+
}

‎src/theme/DocBreadcrumbs/index.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -60,24 +60,9 @@ export default function DocBreadcrumbs(): ReactNode {
6060
return null;
6161
}
6262

63-
const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
64-
const showTeamsBanner = lastBreadcrumb?.label === 'Welcome';
65-
6663
return (
6764
<>
6865
<DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
69-
{showTeamsBanner && (
70-
<div className={styles.teamsPromo} role="complementary" aria-label="Roo Code Teams announcement">
71-
<span className={styles.teamsPromoHeadline}>Ship Faster with Roo Code Teams.</span>
72-
<a
73-
className={styles.teamsPromoLink}
74-
href="https://app.roocode.com/l/teams?utm_source=docs&utm_medium=banner&utm_campaign=teams_promo"
75-
target="_blank"
76-
rel="noopener noreferrer">
77-
Get early access now.
78-
</a>
79-
</div>
80-
)}
8166
<nav
8267
className={clsx(
8368
ThemeClassNames.docs.docBreadcrumbs,

‎src/theme/DocBreadcrumbs/styles.module.css‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,42 +14,3 @@
1414
margin: 0;
1515
flex: 1;
1616
}
17-
18-
.teamsPromo {
19-
display: flex;
20-
align-items: center;
21-
justify-content: center;
22-
gap: 0.75rem;
23-
padding: 0.85rem 1.1rem;
24-
border-radius: calc(var(--radius) + 8px);
25-
background: linear-gradient(90deg, #4f46e5, #2563eb);
26-
border: 1px solid rgba(147, 197, 253, 0.5);
27-
margin-bottom: 1rem;
28-
color: #ffffff;
29-
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
30-
}
31-
32-
.teamsPromoHeadline {
33-
font-weight: 600;
34-
}
35-
36-
.teamsPromoLink {
37-
color: #ffffff;
38-
font-weight: 600;
39-
text-decoration: underline;
40-
text-decoration-color: rgba(255, 255, 255, 0.7);
41-
text-decoration-thickness: 2px;
42-
}
43-
44-
.teamsPromoLink:hover {
45-
text-decoration-color: rgba(255, 255, 255, 0.95);
46-
}
47-
48-
@media (max-width: 768px) {
49-
.teamsPromo {
50-
flex-direction: column;
51-
align-items: flex-start;
52-
gap: 0.5rem;
53-
padding: 1rem;
54-
}
55-
}

‎src/theme/Layout/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import OriginalLayout from '@theme-original/Layout';
33
import { AnimatedBackground } from '../../components/AnimatedBackground';
44
import { CookieConsent } from '../../components/CookieConsent';
55
import { PostHogProvider } from '../../components/PostHogProvider';
6+
import { TeamsBanner } from '../../components/TeamsBanner';
67

78
export default function Layout(props) {
89
return (
910
<PostHogProvider>
11+
<TeamsBanner />
1012
<AnimatedBackground />
1113
<OriginalLayout {...props} />
1214
<CookieConsent />

0 commit comments

Comments
 (0)