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

refactor: remove pill-shaped badges from settings UI

Browse source 
Replace rounded pill badges with cleaner text and chip styles:
- Remove pill backgrounds from token/user authentication badges in node tables
- Simplify cluster node count from pill to plain text
- Change mobile navigation from pill bubbles to underlined tabs
- Convert subnet selection from rounded-full pills to squared chips

Reduces visual clutter and provides a more modern, minimal interface.
This commit is contained in:
rcourtman 2025-10-24 11:52:38 +00:00
parent ffca20bc38
commit 8f553a93e9
2 changed files with 32 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
View file

@ -131,7 +131,7 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 px-3 py-2 space-y-2">
<div class="flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-300">
<span>{clusterName()} Cluster</span>
<span class="ml-auto rounded-full bg-gray-200 dark:bg-gray-700 px-2 py-0.5 text-[0.65rem] font-medium text-gray-600 dark:text-gray-400">
<span class="ml-auto text-[0.65rem] font-normal text-gray-500 dark:text-gray-500">
{clusterEndpoints().length} nodes
</span>
</div>
@ -166,7 +166,7 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
</div>
</td>
<td class="align-top px-3 py-3">
<span class="inline-flex rounded-full bg-gray-200 dark:bg-gray-600 px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-300">
<span class="text-xs text-gray-600 dark:text-gray-400">
{node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`}
</span>
</td>
@ -345,7 +345,7 @@ export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
</div>
</td>
<td class="align-top px-3 py-3">
<span class="inline-flex rounded-full bg-gray-200 dark:bg-gray-600 px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-300">
<span class="text-xs text-gray-600 dark:text-gray-400">
{node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`}
</span>
</td>
@ -526,7 +526,7 @@ export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
</div>
</td>
<td class="align-top px-3 py-3">
<span class="inline-flex rounded-full bg-gray-200 dark:bg-gray-600 px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-300">
<span class="text-xs text-gray-600 dark:text-gray-400">
{node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`}
</span>
</td>

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

@ -2063,37 +2063,32 @@ const Settings: Component<SettingsProps> = (props) => {
<div class="flex-1 overflow-hidden">
<Show when={flatTabs.length > 0}>
<div class="lg:hidden border-b border-gray-200 dark:border-gray-700">
<div class="p-1">
<div
class="flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5 w-full overflow-x-auto scrollbar-hide"
style="-webkit-overflow-scrolling: touch;"
>
<For each={flatTabs}>
{(tab) => {
const isActive = activeTab() === tab.id;
const disabled = tab.disabled;
return (
<button
type="button"
disabled={disabled}
class={`flex-1 px-3 py-2 text-xs font-medium rounded-md transition-all whitespace-nowrap ${
disabled
? 'opacity-60 cursor-not-allowed text-gray-400 dark:text-gray-600'
: isActive
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
}`}
onClick={() => {
if (disabled) return;
setActiveTab(tab.id);
}}
>
{tab.label}
</button>
);
}}
</For>
</div>
<div class="flex gap-1 px-2 py-1 w-full overflow-x-auto scrollbar-hide" style="-webkit-overflow-scrolling: touch;">
<For each={flatTabs}>
{(tab) => {
const isActive = activeTab() === tab.id;
const disabled = tab.disabled;
return (
<button
type="button"
disabled={disabled}
class={`px-3 py-2 text-xs font-medium border-b-2 transition-colors whitespace-nowrap ${
disabled
? 'opacity-60 cursor-not-allowed text-gray-400 dark:text-gray-600 border-transparent'
: isActive
? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
: 'text-gray-600 dark:text-gray-400 border-transparent hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
}`}
onClick={() => {
if (disabled) return;
setActiveTab(tab.id);
}}
>
{tab.label}
</button>
);
}}
</For>
</div>
</div>
</Show>
@ -3179,10 +3174,10 @@ const Settings: Component<SettingsProps> = (props) => {
return (
<button
type="button"
class={`rounded-full border px-2.5 py-1 text-[0.7rem] transition-colors ${
class={`rounded border px-2.5 py-1 text-[0.7rem] transition-colors ${
isActive
? 'border-blue-500 bg-blue-600 text-white dark:border-blue-400 dark:bg-blue-500'
: 'border-gray-200 bg-gray-100 text-gray-700 hover:border-blue-300 hover:bg-blue-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:bg-blue-900/30'
: 'border-gray-300 text-gray-700 hover:border-blue-400 hover:bg-blue-50 dark:border-gray-600 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:bg-blue-900/30'
}`}
onClick={async () => {
if (envOverrides().discoverySubnet) {