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/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,