refactor: remove pill-shaped badges from settings UI
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
parent
ffca20bc38
commit
8f553a93e9
2 changed files with 32 additions and 37 deletions
|
|
@ -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="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">
|
<div class="flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-300">
|
||||||
<span>{clusterName()} Cluster</span>
|
<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
|
{clusterEndpoints().length} nodes
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -166,7 +166,7 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="align-top px-3 py-3">
|
<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}`}
|
{node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
@ -345,7 +345,7 @@ export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="align-top px-3 py-3">
|
<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}`}
|
{node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
@ -526,7 +526,7 @@ export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="align-top px-3 py-3">
|
<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}`}
|
{node.user ? `User: ${node.user}` : `Token: ${node.tokenName}`}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
|
||||||
|
|
@ -2063,37 +2063,32 @@ const Settings: Component<SettingsProps> = (props) => {
|
||||||
<div class="flex-1 overflow-hidden">
|
<div class="flex-1 overflow-hidden">
|
||||||
<Show when={flatTabs.length > 0}>
|
<Show when={flatTabs.length > 0}>
|
||||||
<div class="lg:hidden border-b border-gray-200 dark:border-gray-700">
|
<div class="lg:hidden border-b border-gray-200 dark:border-gray-700">
|
||||||
<div class="p-1">
|
<div class="flex gap-1 px-2 py-1 w-full overflow-x-auto scrollbar-hide" style="-webkit-overflow-scrolling: touch;">
|
||||||
<div
|
<For each={flatTabs}>
|
||||||
class="flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5 w-full overflow-x-auto scrollbar-hide"
|
{(tab) => {
|
||||||
style="-webkit-overflow-scrolling: touch;"
|
const isActive = activeTab() === tab.id;
|
||||||
>
|
const disabled = tab.disabled;
|
||||||
<For each={flatTabs}>
|
return (
|
||||||
{(tab) => {
|
<button
|
||||||
const isActive = activeTab() === tab.id;
|
type="button"
|
||||||
const disabled = tab.disabled;
|
disabled={disabled}
|
||||||
return (
|
class={`px-3 py-2 text-xs font-medium border-b-2 transition-colors whitespace-nowrap ${
|
||||||
<button
|
disabled
|
||||||
type="button"
|
? 'opacity-60 cursor-not-allowed text-gray-400 dark:text-gray-600 border-transparent'
|
||||||
disabled={disabled}
|
: isActive
|
||||||
class={`flex-1 px-3 py-2 text-xs font-medium rounded-md transition-all whitespace-nowrap ${
|
? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
|
||||||
disabled
|
: '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'
|
||||||
? 'opacity-60 cursor-not-allowed text-gray-400 dark:text-gray-600'
|
}`}
|
||||||
: isActive
|
onClick={() => {
|
||||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
if (disabled) return;
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
setActiveTab(tab.id);
|
||||||
}`}
|
}}
|
||||||
onClick={() => {
|
>
|
||||||
if (disabled) return;
|
{tab.label}
|
||||||
setActiveTab(tab.id);
|
</button>
|
||||||
}}
|
);
|
||||||
>
|
}}
|
||||||
{tab.label}
|
</For>
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
@ -3179,10 +3174,10 @@ const Settings: Component<SettingsProps> = (props) => {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="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
|
isActive
|
||||||
? 'border-blue-500 bg-blue-600 text-white dark:border-blue-400 dark:bg-blue-500'
|
? '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 () => {
|
onClick={async () => {
|
||||||
if (envOverrides().discoverySubnet) {
|
if (envOverrides().discoverySubnet) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue