Skip to content

Commit 8193227

Browse files
mrubensellipsis-dev[bot]
authored and
hannesrudolph
committed
Revert "Tailwind migration" (#3321)
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
1 parent 1857b8a commit 8193227

40 files changed

+1686
-847
lines changed

‎.changeset/wicked-ways-cry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"roo-cline": patch
3+
---
4+
5+
Revert "Tailwind migration"

‎webview-ui/src/components/chat/Announcement.tsx‎

Lines changed: 96 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,113 @@
1-
import { useState, memo } from "react"
1+
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
2+
import { memo } from "react"
3+
import { useAppTranslation } from "@/i18n/TranslationContext"
24
import { Trans } from "react-i18next"
3-
import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
4-
5-
import { useAppTranslation } from "@src/i18n/TranslationContext"
6-
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@src/components/ui"
75

86
interface AnnouncementProps {
97
hideAnnouncement: () => void
108
}
11-
12-
/**
13-
* You must update the `latestAnnouncementId` in ClineProvider for new
14-
* announcements to show to users. This new id will be compared with what's in
15-
* state for the 'last announcement shown', and if it's different then the
16-
* announcement will render. As soon as an announcement is shown, the id will be
17-
* updated in state. This ensures that announcements are not shown more than
18-
* once, even if the user doesn't close it themselves.
19-
*/
20-
9+
/*
10+
You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
11+
*/
2112
const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
2213
const { t } = useAppTranslation()
23-
const [open, setOpen] = useState(true)
2414

25-
return (
26-
<Dialog
27-
open={open}
28-
onOpenChange={(open) => {
29-
setOpen(open)
15+
const discordLink = (
16+
<VSCodeLink
17+
href="https://discord.gg/roocode"
18+
onClick={(e) => {
19+
e.preventDefault()
20+
window.postMessage(
21+
{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
22+
"*",
23+
)
24+
}}>
25+
Discord
26+
</VSCodeLink>
27+
)
3028

31-
if (!open) {
32-
hideAnnouncement()
33-
}
29+
const redditLink = (
30+
<VSCodeLink
31+
href="https://reddit.com/r/RooCode"
32+
onClick={(e) => {
33+
e.preventDefault()
34+
window.postMessage(
35+
{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
36+
"*",
37+
)
3438
}}>
35-
<DialogContent className="max-w-96">
36-
<DialogHeader>
37-
<DialogTitle>{t("chat:announcement.title")}</DialogTitle>
38-
<DialogDescription>{t("chat:announcement.description")}</DialogDescription>
39-
</DialogHeader>
40-
<div>
41-
<h3>{t("chat:announcement.whatsNew")}</h3>
42-
<ul className="space-y-2">
43-
<li>
44-
•{" "}
45-
<Trans i18nKey="chat:announcement.feature1" components={{ bold: <b />, code: <code /> }} />
46-
</li>
47-
<li>
48-
•{" "}
49-
<Trans i18nKey="chat:announcement.feature2" components={{ bold: <b />, code: <code /> }} />
50-
</li>
51-
<li>
52-
•{" "}
53-
<Trans i18nKey="chat:announcement.feature3" components={{ bold: <b />, code: <code /> }} />
54-
</li>
55-
</ul>
39+
Reddit
40+
</VSCodeLink>
41+
)
42+
43+
return (
44+
<div className="flex flex-col justify-center absolute top-0 bottom-0 left-0 right-0 z-50 p-10 bg-black/50">
45+
<div
46+
style={{
47+
backgroundColor: "var(--vscode-editor-background)",
48+
borderRadius: "3px",
49+
padding: "12px 16px",
50+
margin: "5px 15px 5px 15px",
51+
position: "relative",
52+
flexShrink: 0,
53+
}}>
54+
<VSCodeButton
55+
appearance="icon"
56+
onClick={hideAnnouncement}
57+
title={t("chat:announcement.hideButton")}
58+
style={{ position: "absolute", top: "8px", right: "8px" }}>
59+
<span className="codicon codicon-close"></span>
60+
</VSCodeButton>
61+
<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
62+
63+
<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
64+
65+
<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
66+
<ul style={{ margin: "5px 0" }}>
67+
<li>
68+
•{" "}
69+
<Trans
70+
i18nKey="chat:announcement.feature1"
71+
components={{
72+
bold: <b />,
73+
code: <code />,
74+
}}
75+
/>
76+
</li>
77+
<li>
78+
•{" "}
79+
<Trans
80+
i18nKey="chat:announcement.feature2"
81+
components={{
82+
bold: <b />,
83+
code: <code />,
84+
}}
85+
/>
86+
</li>
87+
<li>
88+
•{" "}
89+
<Trans
90+
i18nKey="chat:announcement.feature3"
91+
components={{
92+
bold: <b />,
93+
code: <code />,
94+
}}
95+
/>
96+
</li>
97+
</ul>
98+
99+
<p style={{ margin: "10px 0px 0px" }}>
56100
<Trans
57101
i18nKey="chat:announcement.detailsDiscussLinks"
58-
components={{ discordLink: <DiscordLink />, redditLink: <RedditLink /> }}
102+
components={{
103+
discordLink: discordLink,
104+
redditLink: redditLink,
105+
}}
59106
/>
60-
</div>
61-
</DialogContent>
62-
</Dialog>
107+
</p>
108+
</div>
109+
</div>
63110
)
64111
}
65112

66-
const DiscordLink = () => (
67-
<VSCodeLink
68-
href="https://discord.gg/roocode"
69-
onClick={(e) => {
70-
e.preventDefault()
71-
window.postMessage(
72-
{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
73-
"*",
74-
)
75-
}}>
76-
Discord
77-
</VSCodeLink>
78-
)
79-
80-
const RedditLink = () => (
81-
<VSCodeLink
82-
href="https://reddit.com/r/RooCode"
83-
onClick={(e) => {
84-
e.preventDefault()
85-
window.postMessage(
86-
{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
87-
"*",
88-
)
89-
}}>
90-
Reddit
91-
</VSCodeLink>
92-
)
93-
94113
export default memo(Announcement)

‎webview-ui/src/components/chat/AutoApproveMenu.tsx‎

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useCallback, useMemo, useState } from "react"
22
import { Trans } from "react-i18next"
33
import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
44

5-
import { cn } from "@/lib/utils"
65
import { vscode } from "@src/utils/vscode"
76
import { useExtensionState } from "@src/context/ExtensionStateContext"
87
import { useAppTranslation } from "@src/i18n/TranslationContext"
@@ -119,13 +118,23 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
119118

120119
return (
121120
<div
122-
className={cn(
123-
"px-[15px] select-none overflow-y-auto",
124-
isExpanded && "border-t-[0.5px] border-vscode-titleBar-inactiveForeground-20",
125-
)}
126-
style={style}>
121+
style={{
122+
padding: "0 15px",
123+
userSelect: "none",
124+
borderTop: isExpanded
125+
? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
126+
: "none",
127+
overflowY: "auto",
128+
...style,
129+
}}>
127130
<div
128-
className={`flex items-center gap-2 cursor-pointer ${isExpanded ? "py-2" : "pt-2 pb-0"}`}
131+
style={{
132+
display: "flex",
133+
alignItems: "center",
134+
gap: "8px",
135+
padding: isExpanded ? "8px 0" : "8px 0 0 0",
136+
cursor: "pointer",
137+
}}
129138
onClick={toggleExpanded}>
130139
<div onClick={(e) => e.stopPropagation()}>
131140
<VSCodeCheckbox
@@ -137,22 +146,49 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
137146
}}
138147
/>
139148
</div>
140-
<div className="flex items-center gap-1 flex-1 min-w-0">
141-
<span className="text-vscode-foreground flex-shrink-0">{t("chat:autoApprove.title")}</span>
142-
<span className="text-vscode-descriptionForeground overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
149+
<div
150+
style={{
151+
display: "flex",
152+
alignItems: "center",
153+
gap: "4px",
154+
flex: 1,
155+
minWidth: 0,
156+
}}>
157+
<span
158+
style={{
159+
color: "var(--vscode-foreground)",
160+
flexShrink: 0,
161+
}}>
162+
{t("chat:autoApprove.title")}
163+
</span>
164+
<span
165+
style={{
166+
color: "var(--vscode-descriptionForeground)",
167+
overflow: "hidden",
168+
textOverflow: "ellipsis",
169+
whiteSpace: "nowrap",
170+
flex: 1,
171+
minWidth: 0,
172+
}}>
143173
{enabledActionsList || t("chat:autoApprove.none")}
144174
</span>
145175
<span
146-
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} flex-shrink-0 ${
147-
isExpanded ? "ml-0.5" : "ml-[-2px]"
148-
}`}
176+
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
177+
style={{
178+
flexShrink: 0,
179+
marginLeft: isExpanded ? "2px" : "-2px",
180+
}}
149181
/>
150182
</div>
151183
</div>
152184

153185
{isExpanded && (
154186
<div className="flex flex-col gap-2">
155-
<div className="text-vscode-descriptionForeground text-xs">
187+
<div
188+
style={{
189+
color: "var(--vscode-descriptionForeground)",
190+
fontSize: "12px",
191+
}}>
156192
<Trans
157193
i18nKey="chat:autoApprove.description"
158194
components={{

0 commit comments

Comments
 (0)