Skip to content

🤖 Replace hardcoded colors with Tailwind semantic utilities #388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 23, 2025
Merged

🤖 Replace hardcoded colors with Tailwind semantic utilities #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
754cd59
🤖 Replace hardcoded colors with Tailwind semantic utilities
kylecarbs Oct 23, 2025
7cbe844
Fix prettier formatting
kylecarbs Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -662,7 +662,7 @@ function AppInner() {

return (
<>
<div className="flex h-screen overflow-hidden bg-[#1e1e1e] [@media(max-width:768px)]:flex-col">
<div className="flex h-screen overflow-hidden bg-bg-dark [@media(max-width:768px)]:flex-col">
<LeftSidebar
projects={projects}
workspaceMetadata={workspaceMetadata}
Expand Down Expand Up @@ -701,7 +701,7 @@ function AppInner() {
</ErrorBoundary>
) : (
<div
className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-[#888] [&_p]:leading-[1.6]"
className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-muted [&_p]:leading-[1.6]"
style={{
padding: "clamp(40px, 10vh, 100px) 20px",
fontSize: "clamp(14px, 2vw, 16px)",
Expand Down
16 changes: 8 additions & 8 deletions src/components/AIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
Expand Down Expand Up @@ -286,7 +286,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
Expand All @@ -302,7 +302,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
Expand All @@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
Expand All @@ -329,8 +329,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
ref={chatAreaRef}
className="flex-1 min-w-[400px] flex flex-col [@media(max-width:768px)]:min-w-0 [@media(max-width:768px)]:w-full [@media(max-width:768px)]:max-h-full"
>
<div className="py-1 px-[15px] bg-[#252526] border-b border-[#3e3e42] flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
<div className="font-semibold text-[#ccc] flex items-center gap-2 min-w-0 overflow-hidden">
<div className="py-1 px-[15px] bg-separator border-b border-border-light flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
<div className="font-semibold text-foreground flex items-center gap-2 min-w-0 overflow-hidden">
<StatusIndicator
streaming={canInterrupt}
title={
Expand All @@ -345,13 +345,13 @@ const AIViewInner: React.FC<AIViewProps> = ({
<span className="font-mono text-xs whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
{projectName} / {branch}
</span>
<span className="font-mono text-[#888] font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
<span className="font-mono text-muted font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
{namedWorkspacePath}
</span>
<TooltipWrapper inline>
<button
onClick={handleOpenTerminal}
className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-[#888] transition-colors hover:text-[#ccc] [&_svg]:w-4 [&_svg]:h-4"
className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-muted transition-colors hover:text-foreground [&_svg]:w-4 [&_svg]:h-4"
>
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ChatInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -704,7 +704,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({

return (
<div
className="relative pt-[5px] px-[15px] pb-[15px] bg-[#252526] border-t border-[#3e3e42] flex flex-col gap-1"
className="relative pt-[5px] px-[15px] pb-[15px] bg-separator border-t border-border-light flex flex-col gap-1"
style={{ containerType: "inline-size" }}
data-component="ChatInputSection"
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ChatInputToast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
<span className="text-sm leading-none">⚠</span>
<div className="flex-1">
{toast.title && <div className="font-semibold mb-1.5">{toast.title}</div>}
<div className="text-[#d4d4d4] leading-[1.4] mt-1.5">{toast.message}</div>
<div className="text-text-light leading-[1.4] mt-1.5">{toast.message}</div>
{toast.solution && (
<div className="bg-[#1e1e1e] rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
<div className="bg-bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
{toast.solution}
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ChatMetaSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const ChatMetaSidebarComponent: React.FC<ChatMetaSidebarProps> = ({ workspaceId,
return (
<div
className={cn(
"bg-[#252526] border-l border-[#3e3e42] flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
"bg-separator border-l border-border-light flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
showCollapsed ? "w-5 sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]" : "w-[300px]"
)}
role="complementary"
Expand Down
4 changes: 2 additions & 2 deletions src/components/CommandSuggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
activeSuggestion ? `${resolvedListId}-option-${activeSuggestion.id}` : undefined
}
data-command-suggestions
className="absolute bottom-full left-0 right-0 mb-2 bg-[#252526] border border-[#3e3e42] rounded shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-h-[200px] overflow-y-auto z-[100] flex flex-col"
className="absolute bottom-full left-0 right-0 mb-2 bg-separator border border-border-light rounded shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-h-[200px] overflow-y-auto z-[100] flex flex-col"
>
{suggestions.map((suggestion, index) => (
<div
Expand All @@ -116,7 +116,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
</div>
</div>
))}
<div className="px-2.5 py-1 border-t border-[#3e3e42] bg-[#1e1e1e] text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
<div className="px-2.5 py-1 border-t border-border-light bg-bg-dark text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
<span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
</div>
</div>
Expand Down
8 changes: 3 additions & 5 deletions src/components/Context1MCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,17 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin

return (
<div className="flex items-center gap-1.5 ml-2">
<label className="flex items-center gap-1 text-[10px] text-[#ccc] cursor-pointer select-none whitespace-nowrap overflow-hidden text-ellipsis hover:text-white">
<label className="flex items-center gap-1 text-[10px] text-foreground cursor-pointer select-none whitespace-nowrap overflow-hidden text-ellipsis hover:text-white">
<input
type="checkbox"
checked={use1M}
onChange={(e) => setUse1M(e.target.checked)}
className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-[#3e3e42] rounded-sm bg-[#1e1e1e] relative hover:border-[#007acc] checked:bg-[#007acc] checked:border-[#007acc] checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
/>
1M Context
</label>
<TooltipWrapper inline>
<span className="cursor-help text-[#888] text-[10px] leading-none flex items-center">
?
</span>
<span className="cursor-help text-muted text-[10px] leading-none flex items-center">?</span>
<Tooltip className="tooltip" align="center" width="auto">
Enable 1M token context window (beta feature for Claude Sonnet 4/4.5)
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion src/components/DirectorySelectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
onKeyDown={handleKeyDown}
placeholder="/home/user/projects/my-project"
autoFocus
className="w-full px-3 py-2 bg-[#2d2d2d] border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-[#007acc] placeholder:text-[#888]"
className="w-full px-3 py-2 bg-modal-bg border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
/>
{error && <div className="text-error text-xs -mt-3 mb-3">{error}</div>}
<ModalActions>
Expand Down
8 changes: 4 additions & 4 deletions src/components/GitStatusIndicatorView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
))}
<span style={{ color: getIndicatorColor(header.columnIndex) }}>!</span>
</span>
<span className="text-[#cccccc]">[{header.branch}]</span>
<span className="text-foreground">[{header.branch}]</span>
</div>
))}
</div>
Expand All @@ -134,7 +134,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
{displayFiles.map((line, index) => (
<div
key={index}
className="text-[#cccccc] font-mono text-[11px] leading-snug whitespace-pre"
className="text-foreground font-mono text-[11px] leading-snug whitespace-pre"
>
{line}
</div>
Expand Down Expand Up @@ -174,7 +174,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
{renderIndicators(commit.indicators)}
<span className="text-[#569cd6] flex-shrink-0 select-all">{commit.hash}</span>
<span className="text-[#808080] flex-shrink-0">{commit.date}</span>
<span className="text-[#cccccc] flex-1 break-words">{commit.subject}</span>
<span className="text-foreground flex-1 break-words">{commit.subject}</span>
</div>
</div>
))}
Expand All @@ -187,7 +187,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
const tooltipElement = (
<div
className={cn(
"fixed z-[10000] bg-[#2d2d30] text-[#cccccc] border border-[#464647] rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
"fixed z-[10000] bg-modal-bg text-foreground border border-[#464647] rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
showTooltip ? "opacity-100 visible" : "opacity-0 invisible"
)}
style={{
Expand Down
2 changes: 1 addition & 1 deletion src/components/ImageAttachments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const ImageAttachments: React.FC<ImageAttachmentsProps> = ({ images, onRe
{images.map((image) => (
<div
key={image.id}
className="relative w-20 h-20 rounded overflow-hidden border border-[#3e3e42] bg-[#1e1e1e]"
className="relative w-20 h-20 rounded overflow-hidden border border-border-light bg-bg-dark"
>
<img src={image.url} alt="Attached image" className="w-full h-full object-cover" />
<button
Expand Down
10 changes: 5 additions & 5 deletions src/components/KebabMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
ref={buttonRef}
onClick={() => setIsOpen(!isOpen)}
className={cn(
"border border-white/20 text-[#cccccc] text-[10px] py-0.5 px-2 rounded-[3px] cursor-pointer transition-all duration-200 font-primary flex items-center justify-center whitespace-nowrap",
"border border-white/20 text-foreground text-[10px] py-0.5 px-2 rounded-[3px] cursor-pointer transition-all duration-200 font-primary flex items-center justify-center whitespace-nowrap",
isOpen ? "bg-white/10" : "bg-none",
"hover:bg-white/10 hover:border-white/30",
"disabled:opacity-50 disabled:cursor-not-allowed",
Expand All @@ -98,7 +98,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
createPortal(
<div
ref={menuRef}
className="fixed bg-[#1e1e1e] border border-[#3e3e42] rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.8)] z-[10000] min-w-[160px] overflow-hidden"
className="fixed bg-bg-dark border border-border-light rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.8)] z-[10000] min-w-[160px] overflow-hidden"
style={{
top: `${dropdownPosition.top}px`,
left: `${dropdownPosition.left}px`,
Expand All @@ -113,10 +113,10 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
"w-full border-none border-b border-[#2d2d30] text-xs py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
"last:border-b-0",
item.disabled
? "bg-[#1e1e1e] text-[#808080] cursor-not-allowed opacity-50 hover:bg-[#1e1e1e] hover:text-[#808080]"
? "bg-bg-dark text-[#808080] cursor-not-allowed opacity-50 hover:bg-bg-dark hover:text-[#808080]"
: item.active
? "bg-white/15 text-[#cccccc] cursor-pointer hover:bg-white/15 hover:text-white"
: "bg-[#1e1e1e] text-[#cccccc] cursor-pointer hover:bg-white/15 hover:text-white"
? "bg-white/15 text-foreground cursor-pointer hover:bg-white/15 hover:text-white"
: "bg-bg-dark text-foreground cursor-pointer hover:bg-white/15 hover:text-white"
)}
>
{item.emoji && (
Expand Down
8 changes: 4 additions & 4 deletions src/components/LeftSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ export function LeftSidebar(props: LeftSidebarProps) {
aria-label="Open sidebar menu"
className={cn(
"hidden max-md:flex fixed top-3 left-3 z-[998]",
"w-10 h-10 bg-[#252526] border border-[#3c3c3c] rounded-md cursor-pointer",
"items-center justify-center text-[#ccc] text-xl transition-all duration-200",
"w-10 h-10 bg-separator border border-[#3c3c3c] rounded-md cursor-pointer",
"items-center justify-center text-foreground text-xl transition-all duration-200",
"shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
"hover:bg-[#2a2a2b] hover:border-[#4c4c4c]",
"hover:bg-bg-hover hover:border-[#4c4c4c]",
"active:scale-95"
)}
>
Expand All @@ -69,7 +69,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
{/* Sidebar */}
<div
className={cn(
"h-screen bg-[#252526] border-r border-[#1e1e1e] flex flex-col shrink-0",
"h-screen bg-separator border-r border-[#1e1e1e] flex flex-col shrink-0",
"transition-all duration-200 overflow-hidden relative z-[100]",
collapsed ? "w-8" : "w-[280px]",
"max-md:fixed max-md:left-0 max-md:top-0 max-md:w-[280px] max-md:z-[1000]",
Expand Down
6 changes: 4 additions & 2 deletions src/components/Messages/ChatBarrier/StreamingBarrier.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
{tokenCount !== undefined && (
<span className="font-mono text-[11px] text-assistant-border select-none whitespace-nowrap">
~{tokenCount.toLocaleString()} tokens
{tps !== undefined && tps > 0 && <span className="text-[#666] ml-1">@ {tps} t/s</span>}
{tps !== undefined && tps > 0 && (
<span className="text-text-dim ml-1">@ {tps} t/s</span>
)}
</span>
)}
</div>
<div className="text-[11px] text-[#888] select-none whitespace-nowrap ml-auto">
<div className="text-[11px] text-muted select-none whitespace-nowrap ml-auto">
{cancelText}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Messages/HistoryHiddenMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const HistoryHiddenMessage: React.FC<HistoryHiddenMessageProps> = ({
<div
className={cn(
"my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-[#569cd6] rounded-sm",
"text-[#888] text-xs font-normal text-center font-sans",
"text-muted text-xs font-normal text-center font-sans",
className
)}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Messages/MessageWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
</div>
<div className="relative z-10 p-3" data-message-content>
{showJson ? (
<pre className="m-0 font-mono text-[11px] leading-snug whitespace-pre-wrap text-[#d4d4d4] bg-black/30 p-2 rounded-sm overflow-x-auto">
<pre className="m-0 font-mono text-[11px] leading-snug whitespace-pre-wrap text-text-light bg-black/30 p-2 rounded-sm overflow-x-auto">
{JSON.stringify(message, null, 2)}
</pre>
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/components/Messages/TerminalOutput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const TerminalOutput: React.FC<TerminalOutputProps> = ({
className={cn(
"m-0 p-2 bg-black/30 rounded-sm font-mono text-[11px] leading-relaxed",
"overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap break-all",
isError ? "text-[#f48771]" : "text-[#d4d4d4]",
isError ? "text-[#f48771]" : "text-text-light",
className
)}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Messages/UserMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
key={idx}
src={img.url}
alt={`Attachment ${idx + 1}`}
className="max-w-[300px] max-h-[300px] rounded border border-[#3e3e42]"
className="max-w-[300px] max-h-[300px] rounded border border-border-light"
/>
))}
</div>
Expand Down
Loading