vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-05-07 08:57:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: unify navigation icons across settings UI

Browse source 
Ensure consistent icon usage between top navigation tabs and settings sidebar:
- Proxmox: Use ProxmoxIcon in both locations
- Docker: Use DockerIcon (Simple Icons whale logo) in both locations
- Hosts: Simplify HostsIcon to use lucide Monitor icon everywhere

This improves visual consistency and reduces confusion between navigation contexts.
This commit is contained in:
rcourtman 2025-10-24 11:48:22 +00:00
parent 851a61ca31
commit ffca20bc38
2 changed files with 6 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend-modern/src/components/Settings/Settings.tsx
View file

@ -25,7 +25,6 @@ import { formField, labelClass, controlClass, formHelpText } from '@/components/
import Server from 'lucide-solid/icons/server';
import HardDrive from 'lucide-solid/icons/hard-drive';
import Mail from 'lucide-solid/icons/mail';
import Container from 'lucide-solid/icons/container';
import Shield from 'lucide-solid/icons/shield';
import Lock from 'lucide-solid/icons/lock';
import Key from 'lucide-solid/icons/key';
@ -38,6 +37,8 @@ import Sliders from 'lucide-solid/icons/sliders-horizontal';
import RefreshCw from 'lucide-solid/icons/refresh-cw';
import Clock from 'lucide-solid/icons/clock';
import { ApiIcon } from '@/components/icons/ApiIcon';
import { ProxmoxIcon } from '@/components/icons/ProxmoxIcon';
import { DockerIcon } from '@/components/icons/DockerIcon';
import type { NodeConfig } from '@/types/nodes';
import type { UpdateInfo, VersionInfo } from '@/api/updates';
import type { APITokenRecord } from '@/api/security';
@ -857,8 +858,8 @@ const Settings: Component<SettingsProps> = (props) => {
id: 'platforms',
label: 'Platforms',
items: [
{ id: 'proxmox', label: 'Proxmox', icon: <Server class="w-4 h-4" strokeWidth={2} /> },
{ id: 'docker', label: 'Docker', icon: <Container class="w-4 h-4" strokeWidth={2} /> },
{ id: 'proxmox', label: 'Proxmox', icon: <ProxmoxIcon class="w-4 h-4" /> },
{ id: 'docker', label: 'Docker', icon: <DockerIcon class="w-4 h-4" /> },
{ id: 'hosts', label: 'Hosts', icon: <Monitor class="w-4 h-4" strokeWidth={2} /> },
{ id: 'podman', label: 'Podman', icon: <Boxes class="w-4 h-4" strokeWidth={2} />, disabled: true },
{ id: 'kubernetes', label: 'Kubernetes', icon: <Network class="w-4 h-4" strokeWidth={2} />, disabled: true },

15
frontend-modern/src/components/icons/HostsIcon.tsx
View file

@ -1,21 +1,10 @@
import type { Component } from 'solid-js';
import Monitor from 'lucide-solid/icons/monitor';
interface HostsIconProps {
class?: string;
}
export const HostsIcon: Component<HostsIconProps> = (props) => (
<svg
class={props.class}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.5 4.125C4.5 3.504 5.004 3 5.625 3h12.75c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125H5.625A1.125 1.125 0 0 1 4.5 7.875v-3.75Zm1.875.75a.375.375 0 0 0-.375.375v1.125c0 .207.168.375.375.375h2.25a.375.375 0 0 0 .375-.375V5.25a.375.375 0 0 0-.375-.375h-2.25Zm5.625.375a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm3 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm-8.25 5.25c0-.621.504-1.125 1.125-1.125h12.75c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125H7.875A1.125 1.125 0 0 1 6.75 14.25v-3.75Zm1.875.75a.375.375 0 0 0-.375.375v1.125c0 .207.168.375.375.375h2.25a.375.375 0 0 0 .375-.375V11.25a.375.375 0 0 0-.375-.375h-2.25Zm5.625.375a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm3 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM6.75 18.375c0-.621.504-1.125 1.125-1.125h12.75c.621 0 1.125.504 1.125 1.125v1.5A1.125 1.125 0 0 1 20.625 21H7.875a1.125 1.125 0 0 1-1.125-1.125v-1.5Zm1.5.375a.375.375 0 0 0-.375.375v.375c0 .207.168.375.375.375h1.5a.375.375 0 0 0 .375-.375v-.375a.375.375 0 0 0-.375-.375h-1.5Zm4.875.375a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm3 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"
clip-rule="evenodd"
/>
</svg>
<Monitor class={props.class} />
);