Wrap Manage Collaborators interface in tpen-page component

[Copilot]

The Manage Collaborators interface used a custom wrapper instead of the standard <tpen-page> component, making it inconsistent with other TPEN interfaces.

Changes

HTML Structure

• Wrapped interface in <tpen-page> and <tpen-card> components following established patterns
• Removed custom header (tpen-page provides standardized navigation)
• Added required component imports (gui/site/index.js, gui/card/Card.js)

CSS Variables

• Replaced hardcoded colors with CSS variables from main.css:
  • #007BFF → var(--primary-color)
  • #b14628 → var(--accent)
  • #28a745 → var(--success-color)
  • #dc3545 → var(--error-color)
  • 30+ similar replacements across all component styles

Code Cleanup

• Removed 86 lines of unused CSS for obsolete wrapper structure
• Deleted custom return button (redundant with tpen-page navigation)

Example

Before:

<div class="manage-interface collaborators-container">
  <header class="title">
    <h1>TRANSCRIPTION PROJECT MANAGEMENT</h1>
  </header>
  <main>
    <project-collaborators></project-collaborators>
  </main>
</div>

After:

<tpen-page class="grid">
  <tpen-card>
    <h2 slot="header">Manage Collaborators</h2>
    <div slot="body">
      <project-collaborators></project-collaborators>
    </div>
  </tpen-card>
</tpen-page>

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Manage Collaborators Interface as a <tpen-page></issue_title>
<issue_description>It would be nice if the component for this was wrapped in the <tpen-page> UI component for consistency. It will feel more integrated that way. This could mean other minor adjustments to that component/interface for look-and-feel or even UX. </issue_description>

<agent_instructions>use the tpen page wrapper and follow the patterns in the other interfaces. Use main.css variables where possible instead of inline colors and such.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Manage Collaborators Interface as a <tpen-page> #338

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

🚀 Deployed on https://6944b76f64292676328c0834--tpen-interfaces-preview.netlify.app