Skip to content

Commit 2d9d6e2

Browse files
sachasayansachasayan
committed
Migrate history views to Tailwind CSS from explcit styles.
1 parent 4fc47eb commit 2d9d6e2

File tree

2 files changed

+26
-127
lines changed

2 files changed

+26
-127
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,11 @@ const HistoryPreview = () => {
2929
<CopyButton itemTask={item.task} />
3030
</div>
3131
<div
32-
className="text-vscode-foreground overflow-hidden whitespace-pre-wrap"
32+
className="text-vscode-foreground overflow-hidden whitespace-pre-wrap break-words overflow-wrap-anywhere"
3333
style={{
3434
display: "-webkit-box",
3535
WebkitLineClamp: 2,
3636
WebkitBoxOrient: "vertical",
37-
wordBreak: "break-word",
38-
overflowWrap: "anywhere",
3937
}}>
4038
{item.task}
4139
</div>

‎webview-ui/src/components/history/HistoryView.tsx‎

Lines changed: 25 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
9999
</div>
100100
<div className="flex flex-col gap-2">
101101
<VSCodeTextField
102-
style={{ width: "100%" }}
102+
className="w-full"
103103
placeholder={t("history:searchPlaceholder")}
104104
value={searchQuery}
105105
data-testid="history-search-input"
@@ -111,28 +111,18 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
111111
setSortOption("mostRelevant")
112112
}
113113
}}>
114-
<div
115-
slot="start"
116-
className="codicon codicon-search"
117-
style={{ fontSize: 13, marginTop: 2.5, opacity: 0.8 }}
118-
/>
114+
<div slot="start" className="codicon codicon-search text-[13px] mt-[2.5px] opacity-80" />
119115
{searchQuery && (
120116
<div
121-
className="input-icon-button codicon codicon-close"
117+
className="input-icon-button codicon codicon-close flex justify-center items-center h-full"
122118
aria-label="Clear search"
123119
onClick={() => setSearchQuery("")}
124120
slot="end"
125-
style={{
126-
display: "flex",
127-
justifyContent: "center",
128-
alignItems: "center",
129-
height: "100%",
130-
}}
131121
/>
132122
)}
133123
</VSCodeTextField>
134124
<VSCodeRadioGroup
135-
style={{ display: "flex", flexWrap: "wrap" }}
125+
className="flex flex-wrap"
136126
value={sortOption}
137127
role="radiogroup"
138128
onChange={(e) => setSortOption((e.target as HTMLInputElement).value as SortOption)}>
@@ -152,7 +142,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
152142
value="mostRelevant"
153143
disabled={!searchQuery}
154144
data-testid="radio-most-relevant"
155-
style={{ opacity: searchQuery ? 1 : 0.5 }}>
145+
className={searchQuery ? "opacity-100" : "opacity-50"}>
156146
{t("history:mostRelevant")}
157147
</VSCodeRadio>
158148
</VSCodeRadioGroup>
@@ -197,10 +187,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
197187

198188
<TabContent className="p-0">
199189
<Virtuoso
200-
style={{
201-
flexGrow: 1,
202-
overflowY: "scroll",
203-
}}
190+
className="flex-grow overflow-y-scroll"
204191
data={tasks}
205192
data-testid="virtuoso-container"
206193
initialTopMostItemIndex={0}
@@ -274,76 +261,33 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
274261
</div>
275262
</div>
276263
<div
264+
className="text-vscode-font-size text-vscode-foreground overflow-hidden whitespace-pre-wrap break-words overflow-wrap-anywhere"
277265
style={{
278-
fontSize: "var(--vscode-font-size)",
279-
color: "var(--vscode-foreground)",
280266
display: "-webkit-box",
281267
WebkitLineClamp: 3,
282268
WebkitBoxOrient: "vertical",
283-
overflow: "hidden",
284-
whiteSpace: "pre-wrap",
285-
wordBreak: "break-word",
286-
overflowWrap: "anywhere",
287269
}}
288270
data-testid="task-content"
289271
dangerouslySetInnerHTML={{ __html: item.task }}
290272
/>
291-
<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
273+
<div className="flex flex-col gap-1">
292274
<div
293275
data-testid="tokens-container"
294-
style={{
295-
display: "flex",
296-
justifyContent: "space-between",
297-
alignItems: "center",
298-
}}>
299-
<div
300-
style={{
301-
display: "flex",
302-
alignItems: "center",
303-
gap: "4px",
304-
flexWrap: "wrap",
305-
}}>
306-
<span
307-
style={{
308-
fontWeight: 500,
309-
color: "var(--vscode-descriptionForeground)",
310-
}}>
276+
className="flex justify-between items-center">
277+
<div className="flex items-center gap-1 flex-wrap">
278+
<span className="font-medium text-vscode-descriptionForeground">
311279
{t("history:tokensLabel")}
312280
</span>
313281
<span
314282
data-testid="tokens-in"
315-
style={{
316-
display: "flex",
317-
alignItems: "center",
318-
gap: "3px",
319-
color: "var(--vscode-descriptionForeground)",
320-
}}>
321-
<i
322-
className="codicon codicon-arrow-up"
323-
style={{
324-
fontSize: "12px",
325-
fontWeight: "bold",
326-
marginBottom: "-2px",
327-
}}
328-
/>
283+
className="flex items-center gap-[3px] text-vscode-descriptionForeground">
284+
<i className="codicon codicon-arrow-up text-xs font-bold mb-[-2px]" />
329285
{formatLargeNumber(item.tokensIn || 0)}
330286
</span>
331287
<span
332288
data-testid="tokens-out"
333-
style={{
334-
display: "flex",
335-
alignItems: "center",
336-
gap: "3px",
337-
color: "var(--vscode-descriptionForeground)",
338-
}}>
339-
<i
340-
className="codicon codicon-arrow-down"
341-
style={{
342-
fontSize: "12px",
343-
fontWeight: "bold",
344-
marginBottom: "-2px",
345-
}}
346-
/>
289+
className="flex items-center gap-[3px] text-vscode-descriptionForeground">
290+
<i className="codicon codicon-arrow-down text-xs font-bold mb-[-2px]" />
347291
{formatLargeNumber(item.tokensOut || 0)}
348292
</span>
349293
</div>
@@ -358,75 +302,32 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
358302
{!!item.cacheWrites && (
359303
<div
360304
data-testid="cache-container"
361-
style={{
362-
display: "flex",
363-
alignItems: "center",
364-
gap: "4px",
365-
flexWrap: "wrap",
366-
}}>
367-
<span
368-
style={{
369-
fontWeight: 500,
370-
color: "var(--vscode-descriptionForeground)",
371-
}}>
305+
className="flex items-center gap-1 flex-wrap">
306+
<span className="font-medium text-vscode-descriptionForeground">
372307
{t("history:cacheLabel")}
373308
</span>
374309
<span
375310
data-testid="cache-writes"
376-
style={{
377-
display: "flex",
378-
alignItems: "center",
379-
gap: "3px",
380-
color: "var(--vscode-descriptionForeground)",
381-
}}>
382-
<i
383-
className="codicon codicon-database"
384-
style={{
385-
fontSize: "12px",
386-
fontWeight: "bold",
387-
marginBottom: "-1px",
388-
}}
389-
/>
311+
className="flex items-center gap-[3px] text-vscode-descriptionForeground">
312+
<i className="codicon codicon-database text-xs font-bold mb-[-1px]" />
390313
+{formatLargeNumber(item.cacheWrites || 0)}
391314
</span>
392315
<span
393316
data-testid="cache-reads"
394-
style={{
395-
display: "flex",
396-
alignItems: "center",
397-
gap: "3px",
398-
color: "var(--vscode-descriptionForeground)",
399-
}}>
400-
<i
401-
className="codicon codicon-arrow-right"
402-
style={{
403-
fontSize: "12px",
404-
fontWeight: "bold",
405-
marginBottom: 0,
406-
}}
407-
/>
317+
className="flex items-center gap-[3px] text-vscode-descriptionForeground">
318+
<i className="codicon codicon-arrow-right text-xs font-bold mb-0" />
408319
{formatLargeNumber(item.cacheReads || 0)}
409320
</span>
410321
</div>
411322
)}
412323

413324
{!!item.totalCost && (
414-
<div
415-
style={{
416-
display: "flex",
417-
justifyContent: "space-between",
418-
alignItems: "center",
419-
marginTop: -2,
420-
}}>
421-
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
422-
<span
423-
style={{
424-
fontWeight: 500,
425-
color: "var(--vscode-descriptionForeground)",
426-
}}>
325+
<div className="flex justify-between items-center mt-[-2px]">
326+
<div className="flex items-center gap-1">
327+
<span className="font-medium text-vscode-descriptionForeground">
427328
{t("history:apiCostLabel")}
428329
</span>
429-
<span style={{ color: "var(--vscode-descriptionForeground)" }}>
330+
<span className="text-vscode-descriptionForeground">
430331
${item.totalCost?.toFixed(4)}
431332
</span>
432333
</div>

0 commit comments

Comments
 (0)