Skip to content

Commit 6db38be

Browse files
Acorn221Acorn221
committed
feat: added gradient background to roo code + removed extra margin on the text
1 parent 0ade3a8 commit 6db38be

4 files changed

Lines changed: 96 additions & 61 deletions

File tree

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -813,14 +813,14 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
813813
"flex",
814814
"flex-col",
815815
"gap-2",
816-
"m-[10px_15px]",
816+
// "m-[10px_15px]",
817817
"p-2",
818818
"outline-none",
819819
"border-none",
820-
"w-[calc(100%-30px)]",
820+
// "w-[calc(100%-30px)]",
821821
"rounded-xl",
822-
"ml-auto",
823-
"mr-auto",
822+
// "ml-auto",
823+
// "mr-auto",
824824
"box-border",
825825
textAreaDisabled ? "opacity-50" : "opacity-100",
826826
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1242,7 +1242,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
12421242
{creatorModeConfig?.creatorMode === true && (
12431243
<PlanningBar
12441244
requestedPlan={task?.text || ""}
1245-
isGenerating={isStreaming}
1245+
isStreaming={isStreaming}
12461246
stopCallback={() => vscode.postMessage({ type: "cancelTask" })}
12471247
/>
12481248
)}

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

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,62 @@ import { cn } from "@/lib/utils"
66
import { vscode } from "@src/utils/vscode"
77

88
export type PlanningBarProps = {
9-
isGenerating?: boolean;
10-
requestedPlan: string;
11-
stopCallback?: () => void;
12-
className?: string;
13-
};
9+
isStreaming?: boolean
10+
requestedPlan: string
11+
stopCallback?: () => void
12+
className?: string
13+
}
1414

15-
export const PlanningBar: FC<PlanningBarProps> = ({
16-
isGenerating,
17-
requestedPlan,
18-
stopCallback,
19-
className,
20-
}) => {
21-
return (
22-
<div
23-
className={cn(
24-
"bg-[#000] w-full rounded-full flex text-white justify-between min-w-64 h-10 gap-4 relative overflow-clip",
25-
className,
26-
)}
27-
>
28-
{/* {isGenerating && <div className="absolute inset-0 rainbow-border-glow" />} */}
29-
<div className="flex-1 flex h-full align-middle ml-5 gap-4 relative overflow-hidden">
30-
<div className="relative h-full my-auto mr-1 flex-shrink-0 min-w-4">
31-
<div className={`circle ${isGenerating ? "animated-circle" : ""}`} />
32-
</div>
33-
<div className="my-auto text-sm flex-shrink-0">Creating</div>
34-
<div className="relative my-auto min-w-0 flex-shrink overflow-hidden max-w-64">
35-
<div className="text-white/80 text-sm truncate">
36-
{requestedPlan}
37-
</div>
38-
</div>
39-
</div>
15+
export const PlanningBar: FC<PlanningBarProps> = ({ isStreaming, requestedPlan, stopCallback, className }) => {
16+
return (
17+
<div
18+
className={cn(
19+
"bg-[#000] w-full rounded-full flex text-white justify-between min-w-64 h-10 gap-4 relative",
20+
className,
21+
)}>
22+
<div
23+
className={`${isStreaming ? "rainbow-border-glow-visible" : ""}
24+
absolute inset-0 rainbow-border-glow blur -z-10 rounded-full `}
25+
/>
26+
<div className="flex-1 flex h-full align-middle ml-5 gap-4 relative overflow-hidden">
27+
<div className="relative h-full my-auto mr-1 flex-shrink-0 min-w-4">
28+
<div className={`circle ${isStreaming ? "animated-circle" : ""}`} />
29+
</div>
30+
<div className="my-auto text-sm flex-shrink-0">Creating</div>
31+
<div className="relative my-auto min-w-0 flex-shrink overflow-hidden max-w-64">
32+
<div className="text-white/80 text-sm truncate">{requestedPlan}</div>
33+
</div>
34+
</div>
4035

41-
<div className="flex justify-center align-middle mr-2 gap-4">
42-
<div className="m-auto flex gap-2">
43-
<div className="flex my-auto">
44-
<Button
45-
variant="default"
46-
toggled
47-
className="bg-black hover:bg-black rounded-r-none cursor-default"
48-
>
49-
<SolidDocumentTextIcon />
50-
</Button>
51-
<Button className="rounded-l-none bg-blue-700/60 hover:bg-blue-700/60 cursor-default">
52-
<CodeBracketIcon />
53-
</Button>
54-
</div>
36+
<div className="flex justify-center align-middle mr-2 gap-4">
37+
<div className="m-auto flex gap-2">
38+
<div className="flex my-auto">
39+
<Button
40+
variant="default"
41+
toggled
42+
className="bg-black hover:bg-black rounded-r-none cursor-default">
43+
<SolidDocumentTextIcon />
44+
</Button>
45+
<Button className="rounded-l-none bg-blue-700/60 hover:bg-blue-700/60 cursor-default">
46+
<CodeBracketIcon />
47+
</Button>
48+
</div>
5549

56-
<Button variant="default" className="my-auto" onClick={() => vscode.postMessage({ type: "openPearAICreatorFeedbackOverlay" })}>
57-
Not Working?
58-
</Button>
59-
<Button className="my-auto bg-red-500/20 hover:bg-red-500/40" disabled={!isGenerating} onClick={stopCallback}>
60-
<StopIcon className="fill-red-500" />
61-
</Button>
62-
</div>
63-
{/* <ArrowTurnDownLeftIcon className="size-4" /> */}
64-
</div>
65-
</div>
66-
);
67-
};
50+
<Button
51+
variant="default"
52+
className="my-auto"
53+
onClick={() => vscode.postMessage({ type: "openPearAICreatorFeedbackOverlay" })}>
54+
Not Working?
55+
</Button>
56+
<Button
57+
className="my-auto bg-red-500/20 hover:bg-red-500/40"
58+
disabled={!isStreaming}
59+
onClick={stopCallback}>
60+
<StopIcon className="fill-red-500" />
61+
</Button>
62+
</div>
63+
{/* <ArrowTurnDownLeftIcon className="size-4" /> */}
64+
</div>
65+
</div>
66+
)
67+
}

‎webview-ui/src/index.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,4 +467,39 @@ input[cmdk-input]:focus {
467467
}
468468
}
469469

470+
/* Rainbow border glow effect */
471+
.rainbow-border-glow {
472+
position: absolute;
473+
inset: -2px;
474+
background: linear-gradient(
475+
90deg,
476+
rgba(255, 128, 128, 0.7) 0%,
477+
rgba(255, 192, 128, 0.7) 14%,
478+
rgba(255, 255, 128, 0.7) 28%,
479+
rgba(128, 255, 128, 0.7) 42%,
480+
rgba(128, 255, 255, 0.7) 56%,
481+
rgba(128, 128, 255, 0.7) 70%,
482+
rgba(192, 128, 255, 0.7) 84%,
483+
rgba(255, 128, 192, 0.7) 100%
484+
);
485+
background-size: 200% auto;
486+
filter: blur(5px);
487+
animation: rainbow-flow 3s linear infinite;
488+
z-index: -1; /* Ensure it's behind the button */
489+
opacity: 0; /* Start invisible */
490+
transition: opacity 0.5s ease; /* Add transition for smooth opacity changes */
491+
}
492+
493+
/* Class to show the element */
494+
.rainbow-border-glow-visible {
495+
opacity: 0.7;
496+
}
497+
498+
@keyframes rainbow-flow {
499+
to {
500+
background-position: 200% center;
501+
}
502+
}
503+
504+
470505
/* _-_-_-_-_-_-_-_- PEARAI CREATOR STYLES _-_-_-_-_-_-_-_- */

0 commit comments

Comments
 (0)