dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

chore: migrate all to use the new theme system

Browse Source
This commit is contained in:
LukeGus
2025-12-26 02:24:11 -06:00
parent 94d87ff406
commit 8f9f63c4ae
29 changed files with 258 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
View File

@@ -103,8 +103,8 @@ export function ConsoleTerminal({
.trim();
terminal.options.theme = {
background: backgroundColor || "#ffffff",
foreground: foregroundColor || "#09090b",
background: backgroundColor || "var(--bg-elevated)",
foreground: foregroundColor || "var(--foreground)",
};
setTimeout(() => {

10
src/ui/desktop/apps/features/docker/components/ContainerCard.tsx
View File

@@ -312,7 +312,7 @@ export function ContainerCard({
</div>
</div>
<div className="flex flex-wrap gap-2 pt-2 border-t border-gray-700/50">
<div className="flex flex-wrap gap-2 pt-2 border-t border-edge-panel">
<TooltipProvider>
{container.state !== "running" && (
<Tooltip>
@@ -325,7 +325,7 @@ export function ContainerCard({
disabled={isLoading}
>
{isStarting ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<Play className="h-4 w-4" />
)}
@@ -346,7 +346,7 @@ export function ContainerCard({
disabled={isLoading}
>
{isStopping ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<Square className="h-4 w-4" />
)}
@@ -368,7 +368,7 @@ export function ContainerCard({
disabled={isLoading}
>
{isPausing ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : container.state === "paused" ? (
<PlayCircle className="h-4 w-4" />
) : (
@@ -394,7 +394,7 @@ export function ContainerCard({
disabled={isLoading || container.state === "exited"}
>
{isRestarting ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<RotateCw className="h-4 w-4" />
)}

4
src/ui/desktop/apps/features/docker/components/LogViewer.tsx
View File

@@ -184,7 +184,7 @@ export function LogViewer({
className="flex-1 h-full"
>
{isLoading ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<RefreshCw className="h-4 w-4" />
)}
@@ -197,7 +197,7 @@ export function LogViewer({
className="flex-1 h-full"
>
{isDownloading ? (
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
) : (
<Download className="h-4 w-4" />
)}

8
src/ui/desktop/apps/features/file-manager/FileManagerGrid.tsx
View File

@@ -1091,7 +1091,7 @@ export function FileManagerGrid({
onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm}
className={cn(
"max-w-[120px] min-w-[60px] w-fit rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs shadow-xs transition-[color,box-shadow] outline-none",
"max-w-[120px] min-w-[60px] w-fit rounded-md border border-edge bg-elevated px-2 py-1 text-xs shadow-xs transition-[color,box-shadow] outline-none",
"text-center text-foreground placeholder:text-muted-foreground",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
)}
@@ -1180,7 +1180,7 @@ export function FileManagerGrid({
onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm}
className={cn(
"flex-1 min-w-0 max-w-[200px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
"flex-1 min-w-0 max-w-[200px] rounded-md border border-edge bg-elevated px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
"text-foreground placeholder:text-muted-foreground",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
)}
@@ -1370,7 +1370,7 @@ function CreateIntentGridItem({
onChange={(e) => setInputName(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={() => onConfirm?.(inputName.trim())}
className="w-full max-w-[120px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs text-center text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
className="w-full max-w-[120px] rounded-md border border-edge bg-elevated px-2 py-1 text-xs text-center text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
placeholder={
intent.type === "directory"
? t("fileManager.folderName")
@@ -1426,7 +1426,7 @@ function CreateIntentListItem({
onChange={(e) => setInputName(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={() => onConfirm?.(inputName.trim())}
className="flex-1 min-w-0 max-w-[200px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
className="flex-1 min-w-0 max-w-[200px] rounded-md border border-edge bg-elevated px-2 py-1 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
placeholder={
intent.type === "directory"
? t("fileManager.folderName")

2
src/ui/desktop/apps/features/file-manager/components/FileViewer.tsx
View File

@@ -1255,7 +1255,7 @@ export function FileViewer({
</div>
</div>
<div className="flex-1 overflow-auto thin-scrollbar p-6 bg-gray-100 dark:bg-gray-900">
<div className="flex-1 overflow-auto thin-scrollbar p-6 bg-surface">
<div className="flex justify-center">
{pdfError ? (
<div className="text-center text-muted-foreground p-8">

2
src/ui/desktop/apps/features/server-stats/widgets/NetworkWidget.tsx
View File

@@ -57,7 +57,7 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
className={`text-xs px-2.5 py-0.5 rounded-full font-medium ${
iface.state === "UP"
? "bg-green-500/20 text-green-400"
: "bg-gray-500/20 text-foreground-subtle"
: "bg-surface text-foreground-subtle"
}`}
>
{iface.state}

2
src/ui/desktop/apps/features/terminal/command-history/CommandAutocomplete.tsx
View File

@@ -56,7 +56,7 @@ export function CommandAutocomplete({
className={cn(
"px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors",
"hover:bg-hover",
index === selectedIndex && "bg-gray-500/20 text-muted-foreground",
index === selectedIndex && "bg-surface text-muted-foreground",
)}
onClick={() => onSelect(suggestion)}
onMouseEnter={() => {}}

4
src/ui/desktop/apps/features/tunnel/TunnelManager.tsx
View File

@@ -127,10 +127,10 @@ export function TunnelManager({
) : (
<div className="flex items-center justify-center h-full">
<div className="text-center">
<p className="text-gray-400 text-lg">
<p className="text-foreground-subtle text-lg">
{t("tunnel.noTunnelsConfigured")}
</p>
<p className="text-gray-500 text-sm mt-2">
<p className="text-foreground-subtle text-sm mt-2">
{t("tunnel.configureTunnelsInHostSettings")}
</p>
</div>

4
src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx
View File

@@ -616,12 +616,12 @@ export function CredentialEditor({
(tag: string, idx: number) => (
<span
key={`${tag}-${idx}`}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

105
src/ui/desktop/apps/host-manager/credentials/CredentialViewer.tsx
View File

@@ -108,9 +108,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
const getAuthIcon = (authType: string) => {
return authType === "password" ? (
<Key className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<Key className="h-5 w-5 text-foreground-subtle" />
) : (
<Shield className="h-5 w-5 text-zinc-500 dark:text-zinc-400" />
<Shield className="h-5 w-5 text-foreground-subtle" />
);
};
@@ -127,7 +127,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
<label className="text-sm font-medium text-foreground-secondary">
{label}
</label>
<div className="flex items-center space-x-2">
@@ -152,7 +152,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
</div>
<div
className={`p-3 rounded-md bg-zinc-800 dark:bg-zinc-800 ${isMultiline ? "" : "min-h-[2.5rem]"}`}
className={`p-3 rounded-md bg-surface ${isMultiline ? "" : "min-h-[2.5rem]"}`}
>
{isVisible ? (
<pre
@@ -161,7 +161,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{value}
</pre>
) : (
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{"•".repeat(isMultiline ? 50 : 20)}
</div>
)}
@@ -175,7 +175,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Sheet open={true} onOpenChange={onClose}>
<SheetContent className="w-[600px] max-w-[50vw]">
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-zinc-600"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground-subtle"></div>
</div>
</SheetContent>
</Sheet>
@@ -187,28 +187,25 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<SheetContent className="w-[600px] max-w-[50vw] overflow-y-auto thin-scrollbar">
<SheetHeader className="space-y-6 pb-8">
<SheetTitle className="flex items-center space-x-4">
<div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
<div className="p-2 rounded-lg bg-surface">
{getAuthIcon(credentialDetails.authType)}
</div>
<div className="flex-1">
<div className="text-xl font-semibold">
{credentialDetails.name}
</div>
<div className="text-sm font-normal text-zinc-600 dark:text-zinc-400 mt-1">
<div className="text-sm font-normal text-foreground-subtle mt-1">
{credentialDetails.description}
</div>
</div>
<div className="flex items-center space-x-2">
<Badge
variant="outline"
className="border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400"
>
<Badge variant="outline" className="text-foreground-subtle">
{credentialDetails.authType}
</Badge>
{credentialDetails.keyType && (
<Badge
variant="secondary"
className="bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300"
className="bg-surface text-foreground-secondary"
>
{credentialDetails.keyType}
</Badge>
@@ -218,7 +215,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</SheetHeader>
<div className="space-y-10">
<div className="flex space-x-2 p-2 bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
<div className="flex space-x-2 p-2 bg-surface border border-border rounded-lg">
<Button
variant={activeTab === "overview" ? "default" : "ghost"}
size="sm"
@@ -250,7 +247,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{activeTab === "overview" && (
<div className="grid gap-10 lg:grid-cols-2">
<Card className="border-zinc-200 dark:border-zinc-700">
<Card className="border-border">
<CardHeader className="pb-8">
<CardTitle className="text-lg font-semibold">
{t("credentials.basicInformation")}
@@ -258,14 +255,14 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</CardHeader>
<CardContent className="space-y-8">
<div className="flex items-center space-x-5">
<div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
<User className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<div className="p-2 rounded-lg bg-surface">
<User className="h-4 w-4 text-foreground-subtle" />
</div>
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("common.username")}
</div>
<div className="font-medium text-zinc-800 dark:text-zinc-200">
<div className="font-medium text-foreground">
{credentialDetails.username}
</div>
</div>
@@ -273,9 +270,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{credentialDetails.folder && (
<div className="flex items-center space-x-4">
<Folder className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<Folder className="h-4 w-4 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("common.folder")}
</div>
<div className="font-medium">
@@ -287,9 +284,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{credentialDetails.tags.length > 0 && (
<div className="flex items-start space-x-4">
<Hash className="h-4 w-4 text-zinc-500 dark:text-zinc-400 mt-1" />
<Hash className="h-4 w-4 text-foreground-subtle mt-1" />
<div className="flex-1">
<div className="text-sm text-zinc-500 dark:text-zinc-400 mb-3">
<div className="text-sm text-foreground-subtle mb-3">
{t("hosts.tags")}
</div>
<div className="flex flex-wrap gap-2">
@@ -310,9 +307,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Separator />
<div className="flex items-center space-x-4">
<Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<Calendar className="h-4 w-4 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.created")}
</div>
<div className="font-medium">
@@ -322,9 +319,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
<div className="flex items-center space-x-4">
<Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
<Calendar className="h-4 w-4 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.lastModified")}
</div>
<div className="font-medium">
@@ -342,20 +339,20 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="text-center p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<div className="text-3xl font-bold text-zinc-600 dark:text-zinc-400">
<div className="text-center p-6 bg-surface rounded-lg">
<div className="text-3xl font-bold text-foreground-subtle">
{credentialDetails.usageCount}
</div>
<div className="text-sm text-zinc-600 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.timesUsed")}
</div>
</div>
{credentialDetails.lastUsed && (
<div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<Clock className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
<Clock className="h-5 w-5 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.lastUsed")}
</div>
<div className="font-medium">
@@ -365,10 +362,10 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
)}
<div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
<Server className="h-5 w-5 text-foreground-subtle" />
<div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{t("credentials.connectedHosts")}
</div>
<div className="font-medium">{hostsUsing.length}</div>
@@ -383,7 +380,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center space-x-2">
<Shield className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<Shield className="h-5 w-5 text-foreground-subtle" />
<span>{t("credentials.securityDetails")}</span>
</CardTitle>
<CardDescription>
@@ -391,13 +388,13 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<CheckCircle className="h-6 w-6 text-zinc-600 dark:text-zinc-400" />
<div className="flex items-center space-x-4 p-6 bg-surface rounded-lg">
<CheckCircle className="h-6 w-6 text-foreground-subtle" />
<div>
<div className="font-medium text-zinc-800 dark:text-zinc-200">
<div className="font-medium text-foreground">
{t("credentials.credentialSecured")}
</div>
<div className="text-sm text-zinc-700 dark:text-zinc-300">
<div className="text-sm text-foreground-secondary">
{t("credentials.credentialSecuredDescription")}
</div>
</div>
@@ -424,7 +421,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<div className="grid gap-6 md:grid-cols-2">
<div>
<div className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3">
<div className="text-sm font-medium text-foreground-secondary mb-3">
{t("credentials.keyType")}
</div>
<Badge variant="outline" className="text-sm">
@@ -450,13 +447,13 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
</div>
)}
<div className="flex items-start space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
<AlertTriangle className="h-5 w-5 text-zinc-600 dark:text-zinc-400 mt-0.5" />
<div className="flex items-start space-x-4 p-6 bg-surface rounded-lg">
<AlertTriangle className="h-5 w-5 text-foreground-subtle mt-0.5" />
<div className="text-sm">
<div className="font-medium text-zinc-800 dark:text-zinc-200 mb-2">
<div className="font-medium text-foreground mb-2">
{t("credentials.securityReminder")}
</div>
<div className="text-zinc-700 dark:text-zinc-300">
<div className="text-foreground-secondary">
{t("credentials.securityReminderText")}
</div>
</div>
@@ -469,15 +466,15 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center space-x-2">
<Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
<Server className="h-5 w-5 text-foreground-subtle" />
<span>{t("credentials.hostsUsingCredential")}</span>
<Badge variant="secondary">{hostsUsing.length}</Badge>
</CardTitle>
</CardHeader>
<CardContent>
{hostsUsing.length === 0 ? (
<div className="text-center py-10 text-zinc-500 dark:text-zinc-400">
<Server className="h-12 w-12 mx-auto mb-6 text-zinc-300 dark:text-zinc-600" />
<div className="text-center py-10 text-foreground-subtle">
<Server className="h-12 w-12 mx-auto mb-6 text-foreground-subtle" />
<p>{t("credentials.noHostsUsingCredential")}</p>
</div>
) : (
@@ -486,22 +483,22 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
{hostsUsing.map((host) => (
<div
key={host.id}
className="flex items-center justify-between p-4 border rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800"
className="flex items-center justify-between p-4 border rounded-lg hover:bg-surface"
>
<div className="flex items-center space-x-3">
<div className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded">
<Server className="h-4 w-4 text-zinc-600 dark:text-zinc-400" />
<div className="p-2 bg-surface rounded">
<Server className="h-4 w-4 text-foreground-subtle" />
</div>
<div>
<div className="font-medium">
{host.name || `${host.ip}:${host.port}`}
</div>
<div className="text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-sm text-foreground-subtle">
{host.ip}:{host.port}
</div>
</div>
</div>
<div className="text-right text-sm text-zinc-500 dark:text-zinc-400">
<div className="text-right text-sm text-foreground-subtle">
{formatDate(host.createdAt)}
</div>
</div>

4
src/ui/desktop/apps/host-manager/credentials/tabs/CredentialGeneralTab.tsx
View File

@@ -176,12 +176,12 @@ export function CredentialGeneralTab({
{(field.value || []).map((tag: string, idx: number) => (
<span
key={`${tag}-${idx}`}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

10
src/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx
View File

@@ -1348,7 +1348,7 @@ export function HostManagerEditor({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => handleFolderClick(folder)}
>
{folder}
@@ -1372,12 +1372,12 @@ export function HostManagerEditor({
{field.value.map((tag: string, idx: number) => (
<span
key={tag + idx}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={() => {
const newTags = field.value.filter(
(_: string, i: number) => i !== idx,
@@ -1683,7 +1683,7 @@ export function HostManagerEditor({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => {
field.onChange(opt.value);
setKeyTypeDropdownOpen(false);
@@ -3231,7 +3231,7 @@ export function HostManagerEditor({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() =>
handleSshConfigClick(
config,

2
src/ui/desktop/apps/host-manager/hosts/tabs/HostAuthenticationSection.tsx
View File

@@ -268,7 +268,7 @@ export function HostAuthenticationSection({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => {
field.onChange(opt.value);
setKeyTypeDropdownOpen(false);

6
src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx
View File

@@ -226,7 +226,7 @@ export function HostGeneralTab({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() => handleFolderClick(folder)}
>
{folder}
@@ -250,12 +250,12 @@ export function HostGeneralTab({
{field.value.map((tag: string, idx: number) => (
<span
key={tag + idx}
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
>
{tag}
<button
type="button"
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
onClick={() => {
const newTags = field.value.filter(
(_: string, i: number) => i !== idx,

113
src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx
View File

@@ -106,6 +106,119 @@ export function HostTerminalTab({
)}
/>
<FormField
control={control}
name="terminalConfig.theme"
render={({ field }) => (
<FormItem>
<FormLabel>{t("hosts.terminalTheme")}</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t("hosts.selectTheme")} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="termix">Termix Default</SelectItem>
<SelectItem value="termixDark">Termix Dark</SelectItem>
<SelectItem value="termixLight">Termix Light</SelectItem>
<SelectItem value="dracula">Dracula</SelectItem>
<SelectItem value="monokai">Monokai</SelectItem>
<SelectItem value="nord">Nord</SelectItem>
<SelectItem value="gruvboxDark">Gruvbox Dark</SelectItem>
<SelectItem value="gruvboxLight">Gruvbox Light</SelectItem>
<SelectItem value="solarizedDark">
Solarized Dark
</SelectItem>
<SelectItem value="solarizedLight">
Solarized Light
</SelectItem>
<SelectItem value="oneDark">One Dark</SelectItem>
<SelectItem value="tokyoNight">Tokyo Night</SelectItem>
<SelectItem value="ayuDark">Ayu Dark</SelectItem>
<SelectItem value="ayuLight">Ayu Light</SelectItem>
<SelectItem value="materialTheme">
Material Theme
</SelectItem>
<SelectItem value="palenight">Palenight</SelectItem>
<SelectItem value="oceanicNext">Oceanic Next</SelectItem>
<SelectItem value="nightOwl">Night Owl</SelectItem>
<SelectItem value="synthwave84">Synthwave '84</SelectItem>
<SelectItem value="cobalt2">Cobalt2</SelectItem>
<SelectItem value="snazzy">Snazzy</SelectItem>
<SelectItem value="atomOneDark">Atom One Dark</SelectItem>
<SelectItem value="catppuccinMocha">
Catppuccin Mocha
</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t("hosts.chooseTerminalTheme")}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.fontFamily"
render={({ field }) => (
<FormItem>
<FormLabel>{t("hosts.terminalFont")}</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t("hosts.selectFont")} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Caskaydia Cove Nerd Font Mono">
Caskaydia Cove Nerd Font Mono
</SelectItem>
<SelectItem value="JetBrains Mono">
JetBrains Mono
</SelectItem>
<SelectItem value="Fira Code">Fira Code</SelectItem>
<SelectItem value="Cascadia Code">Cascadia Code</SelectItem>
<SelectItem value="Source Code Pro">
Source Code Pro
</SelectItem>
<SelectItem value="SF Mono">SF Mono</SelectItem>
<SelectItem value="Consolas">Consolas</SelectItem>
<SelectItem value="Monaco">Monaco</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t("hosts.chooseTerminalFont")}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.fontSize"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("hosts.fontSizeValue", {
value: field.value,
})}
</FormLabel>
<FormControl>
<Slider
min={8}
max={24}
step={1}
value={[field.value]}
onValueChange={([value]) => field.onChange(value)}
/>
</FormControl>
<FormDescription>{t("hosts.adjustFontSize")}</FormDescription>
</FormItem>
)}
/>
<FormField
control={control}
name="terminalConfig.cursorStyle"

2
src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx
View File

@@ -314,7 +314,7 @@ export function HostTunnelTab({
type="button"
variant="ghost"
size="sm"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
onClick={() =>
handleSshConfigClick(
config,

14
src/ui/desktop/apps/tools/SSHToolsSidebar.tsx
View File

@@ -1184,7 +1184,7 @@ export function SSHToolsSidebar({
size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedTabIds.includes(tab.id)
? "text-foreground bg-gray-700"
? "text-foreground bg-surface"
: "text-foreground-subtle"
}`}
onClick={() => handleTabToggle(tab.id)}
@@ -1266,7 +1266,7 @@ export function SSHToolsSidebar({
size="sm"
className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
selectedSnippetTabIds.includes(tab.id)
? "text-foreground bg-gray-700"
? "text-foreground bg-surface"
: "text-foreground-subtle"
}`}
onClick={() => handleSnippetTabToggle(tab.id)}
@@ -1415,7 +1415,7 @@ export function SSHToolsSidebar({
}
onDrop={(e) => handleDrop(e, snippet)}
onDragEnd={handleDragEnd}
className={`bg-field border border-input rounded-lg cursor-move hover:shadow-lg hover:border-gray-400/50 hover:bg-hover-alt transition-all duration-200 p-3 group ${
className={`bg-field border border-input rounded-lg cursor-move hover:shadow-lg hover:border-edge-hover hover:bg-hover-alt transition-all duration-200 p-3 group ${
draggedSnippet?.id === snippet.id
? "opacity-50"
: ""
@@ -1638,7 +1638,7 @@ export function SSHToolsSidebar({
{filteredCommands.map((command, index) => (
<div
key={index}
className="bg-canvas border-2 border-edge rounded-md px-3 py-2.5 hover:bg-hover-alt hover:border-gray-600 transition-all duration-200 group h-12 flex items-center"
className="bg-canvas border-2 border-edge rounded-md px-3 py-2.5 hover:bg-hover-alt hover:border-edge-hover transition-all duration-200 group h-12 flex items-center"
>
<div className="flex items-center justify-between gap-2 w-full min-w-0">
<span
@@ -1729,7 +1729,7 @@ export function SSHToolsSidebar({
${
isAssigned
? "bg-canvas/50 text-muted-foreground cursor-not-allowed opacity-50"
: "bg-canvas border border-edge hover:border-gray-400 hover:bg-field"
: "bg-canvas border border-edge hover:border-edge-hover hover:bg-field"
}
${isDragging ? "opacity-50" : ""}
`}
@@ -1786,11 +1786,11 @@ export function SSHToolsSidebar({
${
isEmpty
? "border-dashed border-edge"
: "border-solid border-gray-400 bg-gray-500/10"
: "border-solid border-edge-hover bg-surface"
}
${
isHovered && draggedTabId
? "border-gray-500 bg-gray-500/20 ring-2 ring-gray-500/50"
? "border-edge-hover bg-surface ring-2 ring-edge-hover"
: ""
}
`}