Skip to content

Commit 63d408c

Browse files
committed
feat: apply visual updates from PR #8470
- Updated ChatTextArea border radius from rounded to rounded-lg - Updated TaskHeader padding and border radius styling - Modified RooHero to remove flex centering and add bounce animation - Updated RooTips with new content, Lucide icons, and improved layout - Modified chat.json translations for updated onboarding content - Updated HistoryPreview layout with header and improved spacing - Modified TaskItem styling with rounded-xl and font-light - Updated TaskItemFooter spacing - Changed history.json viewAllHistory text to "View all" These changes incorporate the visual improvements from PR #8470 without including any CloudAgents functionality or related cloud features.
1 parent 6965e5c commit 63d408c

File tree

9 files changed

+59
-58
lines changed

9 files changed

+59
-58
lines changed

webview-ui/src/components/chat/ChatTextArea.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -979,7 +979,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
979979
"flex-col-reverse",
980980
"min-h-0",
981981
"overflow-hidden",
982-
"rounded",
982+
"rounded-lg",
983983
)}>
984984
<div
985985
ref={highlightLayerRef}
@@ -1005,7 +1005,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
10051005
isEditMode ? "pr-20" : "pr-9",
10061006
"z-10",
10071007
"forced-color-adjust-none",
1008-
"rounded",
1008+
"rounded-lg",
10091009
)}
10101010
style={{
10111011
color: "transparent",

webview-ui/src/components/chat/TaskHeader.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,10 @@ const TaskHeader = ({
112112
)}
113113
<div
114114
className={cn(
115-
"px-2.5 pt-2.5 pb-2 flex flex-col gap-1.5 relative z-1 cursor-pointer",
115+
"px-3 pt-2.5 pb-2 flex flex-col gap-1.5 relative z-1 cursor-pointer",
116116
"bg-vscode-input-background hover:bg-vscode-input-background/90",
117117
"text-vscode-foreground/80 hover:text-vscode-foreground",
118-
"shadow-sm shadow-black/30 rounded-md",
118+
"shadow-sm shadow-black/30 rounded-xl",
119119
hasTodos && "border-b-0",
120120
)}
121121
onClick={(e) => {
@@ -163,7 +163,9 @@ const TaskHeader = ({
163163
</div>
164164
</div>
165165
{!isTaskExpanded && contextWindow > 0 && (
166-
<div className="flex items-center gap-2 text-sm" onClick={(e) => e.stopPropagation()}>
166+
<div
167+
className="flex items-center gap-2 text-sm text-muted-foreground/70"
168+
onClick={(e) => e.stopPropagation()}>
167169
<StandardTooltip
168170
content={
169171
<div className="space-y-1">

webview-ui/src/components/history/HistoryPreview.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,21 @@ const HistoryPreview = () => {
1515
}
1616

1717
return (
18-
<div className="flex flex-col gap-3">
18+
<div className="flex flex-col gap-1">
19+
<div className="flex flex-wrap items-center justify-between mt-4 mb-2">
20+
<h2 className="font-semibold text-lg grow m-0">{t("history:recentTasks")}</h2>
21+
<button
22+
onClick={handleViewAllHistory}
23+
className="text-base text-vscode-descriptionForeground hover:text-vscode-textLink-foreground transition-colors cursor-pointer"
24+
aria-label={t("history:viewAllHistory")}>
25+
{t("history:viewAllHistory")}
26+
</button>
27+
</div>
1928
{tasks.length !== 0 && (
2029
<>
2130
{tasks.slice(0, 3).map((item) => (
2231
<TaskItem key={item.id} item={item} variant="compact" />
2332
))}
24-
<button
25-
onClick={handleViewAllHistory}
26-
className="text-base text-vscode-descriptionForeground hover:text-vscode-textLink-foreground transition-colors cursor-pointer text-center w-full"
27-
aria-label={t("history:viewAllHistory")}>
28-
{t("history:viewAllHistory")}
29-
</button>
3033
</>
3134
)}
3235
</div>

webview-ui/src/components/history/TaskItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const TaskItem = ({
4747
key={item.id}
4848
data-testid={`task-item-${item.id}`}
4949
className={cn(
50-
"cursor-pointer group bg-vscode-editor-background rounded relative overflow-hidden border border-transparent hover:bg-vscode-list-hoverBackground transition-colors",
50+
"cursor-pointer group bg-vscode-editor-background rounded-xl relative overflow-hidden border border-transparent hover:bg-vscode-editor-foreground/10 transition-colors",
5151
className,
5252
)}
5353
onClick={handleClick}>
@@ -70,7 +70,7 @@ const TaskItem = ({
7070
<div className="flex-1 min-w-0">
7171
<div
7272
className={cn(
73-
"overflow-hidden whitespace-pre-wrap text-vscode-foreground text-ellipsis line-clamp-2",
73+
"overflow-hidden whitespace-pre-wrap font-light text-vscode-foreground text-ellipsis line-clamp-3",
7474
{
7575
"text-base": !isCompact,
7676
},

webview-ui/src/components/history/TaskItemFooter.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface TaskItemFooterProps {
1616
const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelectionMode = false, onDelete }) => {
1717
return (
1818
<div className="text-xs text-vscode-descriptionForeground flex justify-between items-center">
19-
<div className="flex gap-2 items-center text-vscode-descriptionForeground/60">
19+
<div className="flex gap-1 items-center text-vscode-descriptionForeground/60">
2020
{/* Datetime with time-ago format */}
2121
<StandardTooltip content={new Date(item.ts).toLocaleString()}>
2222
<span className="first-letter:uppercase">{formatTimeAgo(item.ts)}</span>
@@ -32,7 +32,7 @@ const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelect
3232

3333
{/* Action Buttons for non-compact view */}
3434
{!isSelectionMode && (
35-
<div className="flex flex-row gap-0 items-center text-vscode-descriptionForeground/60 hover:text-vscode-descriptionForeground">
35+
<div className="flex flex-row gap-0 -mx-2 items-center text-vscode-descriptionForeground/60 hover:text-vscode-descriptionForeground">
3636
<CopyButton itemTask={item.task} />
3737
{variant === "full" && <ExportButton itemId={item.id} />}
3838
{onDelete && <DeleteButton itemId={item.id} onDelete={onDelete} />}

webview-ui/src/components/welcome/RooHero.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const RooHero = () => {
77
})
88

99
return (
10-
<div className="flex flex-col items-center justify-center pb-4 forced-color-adjust-none">
10+
<div className="pb-4 forced-color-adjust-none">
1111
<div
1212
style={{
1313
backgroundColor: "var(--vscode-foreground)",
@@ -18,8 +18,8 @@ const RooHero = () => {
1818
maskRepeat: "no-repeat",
1919
maskSize: "contain",
2020
}}
21-
className="mx-auto">
22-
<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
21+
className="mx-auto hover:animate-bounce">
22+
<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0 " />
2323
</div>
2424
</div>
2525
)

webview-ui/src/components/welcome/RooTips.tsx

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,57 @@ import { useTranslation } from "react-i18next"
33
import { Trans } from "react-i18next"
44

55
import { buildDocLink } from "@src/utils/docLinks"
6+
import { ReplaceAll, Users } from "lucide-react"
67

78
const tips = [
89
{
9-
icon: "codicon-account",
10+
icon: <Users className="size-4 shrink-0 mt-0.5" />,
1011
href: buildDocLink("basic-usage/using-modes", "tips"),
1112
titleKey: "rooTips.customizableModes.title",
1213
descriptionKey: "rooTips.customizableModes.description",
1314
},
1415
{
15-
icon: "codicon-list-tree",
16-
href: buildDocLink("features/boomerang-tasks", "tips"),
17-
titleKey: "rooTips.boomerangTasks.title",
18-
descriptionKey: "rooTips.boomerangTasks.description",
16+
icon: <ReplaceAll className="size-4 shrink-0 mt-0.5" />,
17+
href: buildDocLink("getting-started/connecting-api-provider", "tips"),
18+
titleKey: "rooTips.modelAgnostic.title",
19+
descriptionKey: "rooTips.modelAgnostic.description",
1920
},
2021
]
2122

2223
const RooTips = () => {
2324
const { t } = useTranslation("chat")
2425

2526
return (
26-
<div>
27-
<p className="text-vscode-editor-foreground leading-tight font-vscode-font-family text-center text-balance max-w-[380px] mx-auto my-0">
28-
<Trans
29-
i18nKey="chat:about"
30-
components={{
31-
DocsLink: (
32-
<a href={buildDocLink("", "welcome")} target="_blank" rel="noopener noreferrer">
33-
the docs
34-
</a>
35-
),
36-
}}
37-
/>
27+
<div className="flex flex-col gap-2 mb-4 max-w-[450px] font-light text-vscode-descriptionForeground">
28+
<p className="my-0 pr-8">
29+
<Trans i18nKey="chat:about" />
3830
</p>
39-
<div className="flex flex-col items-center justify-center px-5 py-2.5 gap-4">
31+
<div className="gap-4">
4032
{tips.map((tip) => (
41-
<div
42-
key={tip.titleKey}
43-
className="flex items-center gap-2 text-vscode-editor-foreground font-vscode max-w-[250px]">
44-
<span className={`codicon ${tip.icon}`}></span>
33+
<div key={tip.titleKey} className="flex items-start gap-2 mt-2 mr-6 leading-relaxed">
34+
{tip.icon}
4535
<span>
46-
<VSCodeLink className="forced-color-adjust-none" href={tip.href}>
36+
<VSCodeLink className="text-muted-foreground underline" href={tip.href}>
4737
{t(tip.titleKey)}
4838
</VSCodeLink>
4939
: {t(tip.descriptionKey)}
5040
</span>
5141
</div>
5242
))}
5343
</div>
44+
<p className="my-0 pr-8">
45+
<Trans
46+
i18nKey="chat:docs"
47+
components={{
48+
DocsLink: (
49+
<VSCodeLink
50+
className="text-muted-foreground underline"
51+
href={buildDocLink("", "welcome")}
52+
/>
53+
),
54+
}}
55+
/>
56+
</p>
5457
</div>
5558
)
5659
}

webview-ui/src/i18n/locales/en/chat.json

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -96,24 +96,17 @@
9696
"placeholder": "Edit your message..."
9797
},
9898
"scrollToBottom": "Scroll to bottom of chat",
99-
"about": "Generate, refactor, and debug code with AI assistance. Check out our <DocsLink>documentation</DocsLink> to learn more.",
99+
"about": "Roo Code is a whole AI dev team in your editor.",
100+
"docs": "Check our <DocsLink>docs</DocsLink> to learn more.",
100101
"onboarding": "Your task list in this workspace is empty.",
101102
"rooTips": {
102-
"boomerangTasks": {
103-
"title": "Task Orchestration",
104-
"description": "Split tasks into smaller, manageable parts"
105-
},
106-
"stickyModels": {
107-
"title": "Sticky Models",
108-
"description": "Each mode remembers your last used model"
109-
},
110-
"tools": {
111-
"title": "Tools",
112-
"description": "Allow the AI to solve problems by browsing the web, running commands, and more"
113-
},
114103
"customizableModes": {
115-
"title": "Customizable Modes",
116-
"description": "Specialized personas with their own behaviors and assigned models"
104+
"title": "Customizable modes",
105+
"description": "Specialized personas that stay on-task and deliver."
106+
},
107+
"modelAgnostic": {
108+
"title": "Bring your own model",
109+
"description": "Use your own provider key or even run local inference — no markup, lock-in, no restrictions"
117110
}
118111
},
119112
"selectMode": "Select mode for interaction",

webview-ui/src/i18n/locales/en/history.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,5 @@
4141
"mostTokens": "Most Tokens",
4242
"mostRelevant": "Most Relevant"
4343
},
44-
"viewAllHistory": "View all tasks"
44+
"viewAllHistory": "View all"
4545
}

0 commit comments

Comments
 (0)