chore: migrate all to use the new theme system
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user