hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Marginally better dark mode support

Browse Source
This commit is contained in:
Justin Spahr-Summers
2024-11-12 12:34:10 +00:00
parent 584c1076a4
commit 3e46011614
8 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/App.tsx
View File

@@ -23,6 +23,10 @@ import {
ClientNotification,
} from "@modelcontextprotocol/sdk/types.js";
import { useEffect, useRef, useState } from "react";
// Add dark mode class based on system preference
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("dark");
}
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
@@ -348,13 +352,13 @@ const App = () => {
};
return (
<div className="flex h-screen bg-gray-100">
<div className="flex h-screen bg-background">
<Sidebar connectionStatus={connectionStatus} />
<div className="flex-1 flex flex-col overflow-hidden">
<h1 className="text-2xl font-bold p-4">MCP Inspector</h1>
<div className="flex-1 overflow-auto flex">
<div className="flex-1">
<div className="p-4 bg-white shadow-md m-4 rounded-md">
<div className="p-4 bg-card shadow-md m-4 rounded-md">
<h2 className="text-lg font-semibold mb-2">Connect MCP Server</h2>
<div className="flex space-x-2 mb-2">
<Select

12
client/src/components/History.tsx
View File

@@ -29,7 +29,7 @@ const HistoryAndNotifications = ({
};
return (
<div className="w-64 bg-white shadow-md p-4 overflow-hidden flex flex-col h-full">
<div className="w-64 bg-card shadow-md p-4 overflow-hidden flex flex-col h-full">
<div className="flex-1 overflow-y-auto mb-4 border-b pb-4">
<h2 className="text-lg font-semibold mb-4">History</h2>
{requestHistory.length === 0 ? (
@@ -42,7 +42,7 @@ const HistoryAndNotifications = ({
.map((request, index) => (
<li
key={index}
className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
className="text-sm text-foreground bg-secondary p-2 rounded"
>
<div
className="flex justify-between items-center cursor-pointer"
@@ -74,7 +74,7 @@ const HistoryAndNotifications = ({
<Copy size={16} />
</button>
</div>
<pre className="whitespace-pre-wrap break-words bg-blue-50 p-2 rounded">
<pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
{JSON.stringify(JSON.parse(request.request), null, 2)}
</pre>
</div>
@@ -91,7 +91,7 @@ const HistoryAndNotifications = ({
<Copy size={16} />
</button>
</div>
<pre className="whitespace-pre-wrap break-words bg-green-50 p-2 rounded">
<pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
{JSON.stringify(
JSON.parse(request.response),
null,
@@ -119,7 +119,7 @@ const HistoryAndNotifications = ({
.map((notification, index) => (
<li
key={index}
className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
className="text-sm text-foreground bg-secondary p-2 rounded"
>
<div
className="flex justify-between items-center cursor-pointer"
@@ -146,7 +146,7 @@ const HistoryAndNotifications = ({
<Copy size={16} />
</button>
</div>
<pre className="whitespace-pre-wrap break-words bg-purple-50 p-2 rounded">
<pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
{JSON.stringify(notification, null, 2)}
</pre>
</div>

0
client/src/components/HistoryAndNotifications.tsx Normal file
View File

2
client/src/components/ListPane.tsx
View File

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

2
client/src/components/PromptsTab.tsx
View File

@@ -70,7 +70,7 @@ const PromptsTab = ({
isButtonDisabled={!nextCursor && prompts.length > 0}
/>
<div className="bg-white rounded-lg shadow">
<div className="bg-card rounded-lg shadow">
<div className="p-4 border-b border-gray-200">
<h3 className="font-semibold">
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}

2
client/src/components/ResourcesTab.tsx
View File

@@ -111,7 +111,7 @@ const ResourcesTab = ({
isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
/>
<div className="bg-white rounded-lg shadow">
<div className="bg-card rounded-lg shadow">
<div className="p-4 border-b border-gray-200 flex justify-between items-center">
<h3
className="font-semibold truncate"

2
client/src/components/Sidebar.tsx
View File

@@ -2,7 +2,7 @@ import { Menu, Settings } from "lucide-react";
import { Button } from "@/components/ui/button";
const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => (
<div className="w-64 bg-white border-r border-gray-200">
<div className="w-64 bg-card border-r border-border">
<div className="flex items-center p-4 border-b border-gray-200">
<Menu className="w-6 h-6 text-gray-500" />
<h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>

2
client/src/components/ToolsTab.tsx
View File

@@ -96,7 +96,7 @@ const ToolsTab = ({
isButtonDisabled={!nextCursor && tools.length > 0}
/>
<div className="bg-white rounded-lg shadow">
<div className="bg-card rounded-lg shadow">
<div className="p-4 border-b border-gray-200">
<h3 className="font-semibold">
{selectedTool ? selectedTool.name : "Select a tool"}