danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: restore Apple and Windows icons, use Monitor for Linux

Browse source 
Keep the original Apple and Windows logo SVGs which were perfect, only replace the weird-looking Linux penguin with lucide Monitor icon. Mixed approach uses lucide Monitor component for Linux and SVG elements for macOS/Windows.
This commit is contained in:
rcourtman 2025-10-24 11:21:15 +00:00
parent aaa3a578af
commit 53430d9b2c
1 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend-modern/src/components/Settings/HostAgents.tsx
View file

@ -12,8 +12,6 @@ import type { SecurityStatus } from '@/types/config';
import type { APITokenRecord } from '@/api/security'; import type { APITokenRecord } from '@/api/security';
import { useScopedTokenManager } from '@/hooks/useScopedTokenManager'; import { useScopedTokenManager } from '@/hooks/useScopedTokenManager';
import Monitor from 'lucide-solid/icons/monitor'; import Monitor from 'lucide-solid/icons/monitor';
import Laptop from 'lucide-solid/icons/laptop';
import Computer from 'lucide-solid/icons/computer';
type HostAgentVariant = 'all' | 'linux' | 'macos' | 'windows'; type HostAgentVariant = 'all' | 'linux' | 'macos' | 'windows';
@ -23,7 +21,7 @@ interface HostAgentsProps {
type HostPlatform = 'linux' | 'macos' | 'windows'; type HostPlatform = 'linux' | 'macos' | 'windows';
const hostPlatformOptions: { id: HostPlatform; label: string; description: string; icon: typeof Monitor }[] = [ const hostPlatformOptions: { id: HostPlatform; label: string; description: string; icon: typeof Monitor | JSX.Element }[] = [
{ {
id: 'linux', id: 'linux',
label: 'Linux', label: 'Linux',
@ -34,13 +32,21 @@ const hostPlatformOptions: { id: HostPlatform; label: string; description: strin
id: 'macos', id: 'macos',
label: 'macOS', label: 'macOS',
description: 'Use the universal binary with launchd to keep desktops and hosts reporting in the background.', description: 'Use the universal binary with launchd to keep desktops and hosts reporting in the background.',
icon: Laptop, icon: (
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52 4.17 4.17 0 0 0-1 3.09 3.69 3.69 0 0 0 2.94-1.42zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81 4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87A4.92 4.92 0 0 0 4.69 9.39C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85 4.41 4.41 0 0 1-2.68-4.08z" />
</svg>
),
}, },
{ {
id: 'windows', id: 'windows',
label: 'Windows', label: 'Windows',
description: 'Native Windows service with automatic startup. PowerShell script handles binary download and service installation.', description: 'Native Windows service with automatic startup. PowerShell script handles binary download and service installation.',
icon: Computer, icon: (
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
</svg>
),
}, },
]; ];
@ -334,7 +340,6 @@ export const HostAgents: Component<HostAgentsProps> = (props) => {
<For each={hostPlatformOptions}> <For each={hostPlatformOptions}>
{(option) => { {(option) => {
const isActive = () => selectedPlatform() === option.id; const isActive = () => selectedPlatform() === option.id;
const Icon = option.icon;
return ( return (
<button <button
type="button" type="button"
@ -359,7 +364,11 @@ export const HostAgents: Component<HostAgentsProps> = (props) => {
: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200' : 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
}`} }`}
> >
<Icon size={20} stroke-width={2} /> {typeof option.icon === 'function' ? (
<option.icon size={20} stroke-width={2} />
) : (
option.icon
)}
</div> </div>
<div class="flex-1"> <div class="flex-1">
<p class="font-semibold text-gray-900 dark:text-gray-100">{option.label}</p> <p class="font-semibold text-gray-900 dark:text-gray-100">{option.label}</p>