From 8f553a93e97883a3bd298c29f7b3c72ec64e2796 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 24 Oct 2025 11:52:38 +0000
Subject: [PATCH] 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.
---
 .../Settings/ConfiguredNodeTables.tsx         |  8 +--
 .../src/components/Settings/Settings.tsx      | 61 +++++++++----------
 2 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
index ec9cbd7..8c6b407 100644
--- a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
+++ b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
@@ -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>
diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx
index fa3b2ac..ea76ecb 100644
--- a/frontend-modern/src/components/Settings/Settings.tsx
+++ b/frontend-modern/src/components/Settings/Settings.tsx
@@ -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) {