Skip to content

Commit dac579c

Browse files
chadgauthchadgauth
committed
refactor to tailwind
1 parent 74712d6 commit dac579c

File tree

7 files changed

+81
-195
lines changed

7 files changed

+81
-195
lines changed

‎webview-ui/src/components/chat/ChatTextArea/ChatTextArea.module.css‎

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

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

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react"
22
import { vscode } from "../../../utils/vscode"
3-
import styles from "./ChatTextArea.module.css"
3+
import { cn } from "@/lib/utils"
44

55
interface ChatTextAreaActionsProps {
66
textAreaDisabled: boolean
@@ -13,6 +13,18 @@ interface ChatTextAreaActionsProps {
1313
setIsEnhancingPrompt: (value: boolean) => void
1414
}
1515

16+
const baseActionButton = [
17+
"text-base relative inline-flex items-center justify-center",
18+
"bg-transparent border-none outline-none opacity-50",
19+
"p-1.5 rounded-md transition-all duration-200",
20+
"min-w-[28px] min-h-[28px] cursor-pointer",
21+
"text-vscode-foreground",
22+
"hover:bg-[color:color-mix(in_srgb,var(--vscode-button-hoverBackground)_40%,transparent)]",
23+
"hover:opacity-75",
24+
]
25+
26+
const disabledButton = "opacity-35 cursor-not-allowed grayscale-[30%] hover:bg-transparent"
27+
1628
const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
1729
textAreaDisabled,
1830
shouldDisableImages,
@@ -42,47 +54,46 @@ const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
4254
}
4355

4456
return (
45-
<div
46-
style={{
47-
display: "flex",
48-
alignItems: "center",
49-
gap: "2px",
50-
flexWrap: "wrap",
51-
justifyContent: "flex-end",
52-
minWidth: 0,
53-
}}>
54-
<div
55-
style={{
56-
display: "flex",
57-
alignItems: "center",
58-
gap: "2px",
59-
flexShrink: 0,
60-
}}>
57+
<div className="flex items-center gap-0.5 flex-wrap justify-end min-w-0">
58+
<div className="flex items-center gap-0.5 shrink-0">
6159
<span
6260
role="button"
6361
aria-label="Enhance prompt with additional context"
6462
title="Enhance prompt with additional context"
6563
data-testid="enhance-prompt-button"
6664
onClick={() => !textAreaDisabled && !isEnhancingPrompt && handleEnhancePrompt()}
67-
style={{ fontSize: 16 }}
68-
className={`codicon codicon-sparkle ${styles["action-button"]} ${styles["codicon-sparkle"]} ${textAreaDisabled ? styles.disabled : ""} ${isEnhancingPrompt ? styles.enhancing : ""}`}
65+
className={cn(
66+
"codicon codicon-sparkle",
67+
baseActionButton,
68+
"transition-all duration-300 z-[1] hover:brightness-120",
69+
textAreaDisabled && disabledButton,
70+
isEnhancingPrompt && [
71+
"!bg-transparent !opacity-100",
72+
"after:content-[''] after:absolute after:inset-[-2px]",
73+
"after:rounded-lg after:bg-gradient-to-r",
74+
"after:from-vscode-button-background",
75+
"after:via-vscode-textLink-foreground",
76+
"after:via-vscode-symbolIcon-classForeground",
77+
"after:to-vscode-button-background",
78+
"after:bg-[length:400%_400%] after:opacity-[0.08]",
79+
"after:z-0 after:animate-border-flow",
80+
],
81+
)}
6982
/>
7083
</div>
7184
<span
7285
role="button"
7386
aria-label="Add images to message"
7487
title="Add images to message"
75-
className={`codicon codicon-device-camera ${styles["action-button"]} ${shouldDisableImages ? styles.disabled : ""}`}
7688
onClick={() => !shouldDisableImages && onSelectImages()}
77-
style={{ fontSize: 16 }}
89+
className={cn("codicon codicon-device-camera", baseActionButton, shouldDisableImages && disabledButton)}
7890
/>
7991
<span
8092
role="button"
8193
aria-label="Send message"
8294
title="Send message"
83-
className={`codicon codicon-send ${styles["action-button"]} ${textAreaDisabled ? styles.disabled : ""}`}
8495
onClick={() => !textAreaDisabled && onSend()}
85-
style={{ fontSize: 16 }}
96+
className={cn("codicon codicon-send", baseActionButton, textAreaDisabled && disabledButton)}
8697
/>
8798
</div>
8899
)

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

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react"
2-
import styles from "./ChatTextArea.module.css"
2+
import { cn } from "@/lib/utils"
33

44
interface ChatTextAreaLayoutProps {
55
children: {
@@ -10,29 +10,33 @@ interface ChatTextAreaLayoutProps {
1010
}
1111

1212
const ChatTextAreaLayout: React.FC<ChatTextAreaLayoutProps> = ({ children: { input, selections, actions } }) => {
13+
const containerClasses = cn(
14+
"relative flex flex-col",
15+
"bg-vscode-input-background",
16+
"m-[8px_12px_10px] p-[3px]",
17+
"outline-none",
18+
"border border-solid border-vscode-input-background rounded-md",
19+
"max-w-[1200px] w-[calc(100%-22px)] mx-auto",
20+
"box-border",
21+
)
22+
23+
const footerClasses = cn(
24+
"flex pt-2 pl-[2px]",
25+
"gap-[10px]",
26+
"[&>*]:flex-wrap",
27+
"min-[480px]:flex-row min-[480px]:justify-between min-[480px]:items-center",
28+
)
29+
30+
const selectionsClasses = cn("flex gap-[6px] items-center", "flex-1 min-w-0 flex-wrap")
31+
32+
const actionsClasses = cn("flex gap-[6px] items-center", "justify-end flex-wrap")
33+
1334
return (
14-
<div
15-
style={{
16-
position: "relative",
17-
display: "flex",
18-
flexDirection: "column",
19-
backgroundColor: "var(--vscode-input-background)",
20-
margin: "8px 12px 10px 12px",
21-
padding: "3px",
22-
outline: "none",
23-
border: `1px solid`,
24-
borderColor: "var(--vscode-input-background)",
25-
borderRadius: "5px",
26-
maxWidth: "1200px",
27-
width: "calc(100% - 22px)",
28-
marginLeft: "auto",
29-
marginRight: "auto",
30-
boxSizing: "border-box",
31-
}}>
32-
<div style={{ position: "relative" }}>{input}</div>
33-
<div className={styles.footer}>
34-
<div className={styles.selections}>{selections}</div>
35-
<div className={styles.actions}>{actions}</div>
35+
<div className={containerClasses}>
36+
<div className="relative">{input}</div>
37+
<div className={footerClasses}>
38+
<div className={selectionsClasses}>{selections}</div>
39+
<div className={actionsClasses}>{actions}</div>
3640
</div>
3741
</div>
3842
)

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,7 @@ const ChatTextAreaSelections: React.FC<ChatTextAreaSelectionsProps> = ({
2121
modeShortcutText,
2222
}) => {
2323
return (
24-
<div
25-
style={{
26-
display: "flex",
27-
alignItems: "center",
28-
gap: "4px",
29-
fontSize: "12px",
30-
minWidth: 0, // Allow container to shrink
31-
flex: "1 1 auto", // Allow growing and shrinking
32-
flexWrap: "wrap", // Allow wrapping on small screens
33-
}}>
24+
<div className="flex items-center gap-1 text-xs min-w-0 flex-1 flex-wrap">
3425
{/* Editor Mode Dropdown */}
3526
<SelectDropdown
3627
value={mode}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useDeepCompareEffect, useEvent, useMount } from "react-use"
55
import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
66
import styled from "styled-components"
77
import {
8-
ClineAsk,
98
ClineMessage,
109
ClineSayBrowserAction,
1110
ClineSayTool,
@@ -30,6 +29,7 @@ import { AudioType } from "../../../../src/shared/WebviewMessage"
3029
import { validateCommand } from "../../utils/command-validation"
3130
import { getAllModes } from "../../../../src/shared/modes"
3231
import TelemetryBanner from "../common/TelemetryBanner"
32+
import { ClineAsk } from "../../../../src/exports/roo-code"
3333

3434
interface ChatViewProps {
3535
isHidden: boolean

‎webview-ui/src/components/ui/select-dropdown.tsx‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -76,23 +76,6 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
7676
setOpen(false)
7777
}
7878

79-
// const caretContainerStyle = {
80-
// position: "absolute" as const,
81-
// right: 4,
82-
// top: "50%",
83-
// transform: "translateY(-45%)",
84-
// pointerEvents: "none" as const,
85-
// opacity: 0.6,
86-
// fontSize: "10px", // Slightly smaller caret
87-
// }
88-
89-
// const selectContainerStyle = {
90-
// position: "relative" as const,
91-
// display: "inline-block",
92-
// minWidth: 0, // Allow container to shrink
93-
// flex: "0 1 auto", // Allow shrinking but not growing
94-
// }
95-
9679
return (
9780
<div
9881
className="relative inline-block min-w-0 flex-[0_1_auto]" // Select container styles
@@ -108,7 +91,7 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
10891
"text-vscode-input-foreground px-2 py-1 min-h-[20px] max-w-[120px] truncate",
10992
"hover:border-vscode-input-border hover:bg-vscode-input-background",
11093
"focus:outline-1 focus:outline-vscode-focusBorder focus:outline-offset-1",
111-
disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 cursor-pointer hover:opacity-100",
94+
disabled ? "opacity-50 cursor-not-allowed" : "opacity-60 cursor-pointer hover:opacity-75",
11295
triggerClassName,
11396
)}
11497
style={{

‎webview-ui/src/index.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,23 @@
164164
code {
165165
background-color: var(--vscode-textCodeBlock-background);
166166
}
167+
@keyframes border-flow {
168+
0%,
169+
100% {
170+
background-position: 0% 50%;
171+
opacity: 0.08;
172+
}
173+
50% {
174+
background-position: 100% 50%;
175+
opacity: 0.12;
176+
}
177+
}
178+
}
179+
180+
@layer utilities {
181+
.animate-border-flow {
182+
animation: border-flow 2s ease-in-out infinite;
183+
}
167184
}
168185

169186
/* Form Element Focus States */

0 commit comments

Comments
 (0)