Reduce plugin UI size and improve colours

This commit is contained in:
Dominik Jain 2025-10-11 22:56:34 +02:00
parent 8a6848a663
commit b5869d185b
3 changed files with 2 additions and 4 deletions

View File

@ -6,8 +6,6 @@
<title>Penpot plugin example</title>
</head>
<body>
<p>Penpot MCP Plugin</p>
<button type="button" data-appearance="secondary" data-handler="connect-mcp">Connect to MCP server</button>
<div id="connection-status" style="margin-top: 10px; font-size: 12px; color: #666">Not connected</div>

View File

@ -14,7 +14,7 @@ const statusElement = document.getElementById("connection-status");
function updateConnectionStatus(status: string, isConnectedState: boolean): void {
if (statusElement) {
statusElement.textContent = status;
statusElement.style.color = isConnectedState ? "#6911d4" : "#600";
statusElement.style.color = isConnectedState ? "var(--accent-primary)" : "var(--error-700)";
}
}

View File

@ -6,7 +6,7 @@ import { Task, TaskHandler } from "./TaskHandler";
*/
const taskHandlers: TaskHandler[] = [new ExecuteCodeTaskHandler()];
penpot.ui.open("Penpot MCP Plugin", `?theme=${penpot.theme}`, { width: 400, height: 300 });
penpot.ui.open("Penpot MCP Plugin", `?theme=${penpot.theme}`, { width: 158, height: 200 });
// Handle both legacy string messages and new request-based messages
penpot.ui.onMessage<string | { id: string; task: string; params: any }>((message) => {