salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restyle tab headers via tokens

Browse Source
This commit is contained in:
Shantur Rathore
2025-10-28 19:47:05 +00:00
parent a355d9c4b8
commit a541f79910
5 changed files with 140 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/instance-tab.tsx
View File

@@ -27,24 +27,20 @@ function formatFolderName(path: string, instances: Instance[], currentInstance:
const InstanceTab: Component<InstanceTabProps> = (props) => {
return (
<div class="instance-tab-container group">
<div class="group">
<button
class={`instance-tab inline-flex items-center gap-2 px-3 py-2 rounded-t-md max-w-[200px] transition-colors ${
props.active
? "bg-blue-500 text-white"
: "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
}`}
class={`tab-base ${props.active ? "tab-active" : "tab-inactive"}`}
onClick={props.onSelect}
title={props.instance.folder}
role="tab"
aria-selected={props.active}
>
<FolderOpen class="w-4 h-4 flex-shrink-0" />
<span class="tab-label truncate text-sm">
<span class="tab-label">
{props.instance.folder.split("/").pop() || props.instance.folder}
</span>
<span
class="tab-close opacity-0 group-hover:opacity-100 hover:bg-red-500 dark:hover:bg-red-600 hover:text-white rounded p-0.5 transition-opacity ml-auto cursor-pointer"
class="tab-close ml-auto"
onClick={(e) => {
e.stopPropagation()
props.onClose()