Merge pull request #274 from nathanArseneau/dark-mode-fix

fix dark mode color and padding for the tab item

Author: olaservo

client/src/components/ListPane.tsx

@@ -22,7 +22,7 @@ const ListPane = <T extends object>({
   isButtonDisabled,
 }: ListPaneProps<T>) => (
   <div className="bg-card rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+    <div className="p-4 border-b border-gray-200 dark:border-gray-800">
       <h3 className="font-semibold dark:text-white">{title}</h3>
     </div>
     <div className="p-4">

client/src/components/PromptsTab.tsx

@@ -108,7 +108,7 @@ const PromptsTab = ({
         />
 
         <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200">
+          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
             <h3 className="font-semibold">
               {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
             </h3>

client/src/components/ResourcesTab.tsx

@@ -162,7 +162,7 @@ const ResourcesTab = ({
         />
 
         <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+          <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
             <h3
               className="font-semibold truncate"
               title={selectedResource?.name || selectedTemplate?.name}

client/src/components/Sidebar.tsx

@@ -92,7 +92,7 @@ const Sidebar = ({
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
-      <div className="flex items-center justify-between p-4 border-b border-gray-200">
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
         <div className="flex items-center">
           <h1 className="ml-2 text-lg font-semibold">
             MCP Inspector v{version}

client/src/components/ToolsTab.tsx

@@ -140,7 +140,7 @@ const ToolsTab = ({
         />
 
         <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200">
+          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
             <h3 className="font-semibold">
               {selectedTool ? selectedTool.name : "Select a tool"}
             </h3>