From dbdf8f58cc4ca68fcaeb98cda31e8de4a61358ca Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 16 Dec 2025 22:43:45 +0000
Subject: [PATCH 1/4] Initial plan


From 1e4701bcf4e22c5bbb31e90ad96baa2ec4cf08ac Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 16 Dec 2025 22:51:26 +0000
Subject: [PATCH 2/4] Convert navigation buttons to anchor tags for right-click
 support

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
---
 .../annotorious-annotator/line-parser.js      | 10 ++--
 components/copy-existing-project/index.js     |  6 +-
 .../copy-project-with-customization/index.js  |  6 +-
 .../copy-project-with-group-member/index.js   |  6 +-
 .../copy-project-without-annotations/index.js |  6 +-
 components/import-image/index.js              |  6 +-
 components/import-project/index.js            |  6 +-
 components/user-profile/userStats.js          |  4 +-
 interfaces/import-tpen28/index.html           |  4 +-
 interfaces/import-tpen28/index.js             |  4 +-
 interfaces/manage-project/index.html          | 12 ++--
 interfaces/manage-project/index.js            | 55 +++++++++++--------
 interfaces/project/index.html                 |  8 +--
 interfaces/project/quick-guide.html           |  2 +-
 manage/collaboration.html                     |  4 +-
 manage/index.js                               |  9 +--
 16 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/components/annotorious-annotator/line-parser.js b/components/annotorious-annotator/line-parser.js
index 8fca5500..5c345b52 100644
--- a/components/annotorious-annotator/line-parser.js
+++ b/components/annotorious-annotator/line-parser.js
@@ -164,6 +164,10 @@ class AnnotoriousAnnotator extends HTMLElement {
           cursor: pointer;
           width: 100%;
           margin-top: 1em;
+          display: block;
+          text-align: center;
+          text-decoration: none;
+          border: none;
         }
         #saveBtn[disabled], #createColumnsBtn[disabled], #deleteAllBtn[disabled] {
           background-color: gray;
@@ -269,7 +273,7 @@ class AnnotoriousAnnotator extends HTMLElement {
            <input type="checkbox" id="seeTool" checked> 
           </label>
           <input id="deleteAllBtn" type="button" value="Delete All Annotations"/>
-          <input id="createColumnsBtn" type="button" value="Manage Columns"/>
+          <a id="createColumnsBtn" href="#" class="button-style-link">Manage Columns</a>
           <input id="saveBtn" type="button" value="Save Annotations"/>
         </div>
         <button id="autoParseBtn">Auto Parse</button>
@@ -350,9 +354,7 @@ class AnnotoriousAnnotator extends HTMLElement {
     editTool.addEventListener("change", (e) => this.toggleEditingMode(e))
     eraseTool.addEventListener("change", (e) => this.toggleErasingMode(e))
     seeTool.addEventListener("change", (e) => this.toggleAnnotationVisibility(e))
-    createColumnsBtn.addEventListener("click", () =>
-      window.location.href = `../../components/create-column/?projectID=${TPEN.activeProject._id}&pageID=${this.#annotationPageID}`
-    )
+    createColumnsBtn.href = `../../components/create-column/?projectID=${TPEN.activeProject._id}&pageID=${this.#annotationPageID}`
     saveButton.addEventListener("click", (e) => {
       this.#annotoriousInstance.cancelSelected()
       // Timeout required in order to allow the unfocus native functionality to complete for $isDirty.
diff --git a/components/copy-existing-project/index.js b/components/copy-existing-project/index.js
index 3ce06971..1fc50d22 100644
--- a/components/copy-existing-project/index.js
+++ b/components/copy-existing-project/index.js
@@ -142,12 +142,10 @@ class CopyExistingProject extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)
diff --git a/components/copy-project-with-customization/index.js b/components/copy-project-with-customization/index.js
index 5f18b36c..420457e0 100644
--- a/components/copy-project-with-customization/index.js
+++ b/components/copy-project-with-customization/index.js
@@ -477,12 +477,10 @@ class CopyExistingProjectWithCustomizations extends HTMLElement {
                 const projectTitle = document.createElement('span')
                 projectTitle.textContent = data.label
 
-                const manageButton = document.createElement('button')
+                const manageButton = document.createElement('a')
                 manageButton.className = 'manage-btn'
                 manageButton.textContent = 'Manage'
-                manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                }
+                manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                 projectInfo.appendChild(projectTitle)
                 projectInfo.appendChild(manageButton)
diff --git a/components/copy-project-with-group-member/index.js b/components/copy-project-with-group-member/index.js
index 9c518611..804f3811 100644
--- a/components/copy-project-with-group-member/index.js
+++ b/components/copy-project-with-group-member/index.js
@@ -143,12 +143,10 @@ class CopyProjectWithGroupMember extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)
diff --git a/components/copy-project-without-annotations/index.js b/components/copy-project-without-annotations/index.js
index 08f7e33f..6717e81c 100644
--- a/components/copy-project-without-annotations/index.js
+++ b/components/copy-project-without-annotations/index.js
@@ -142,12 +142,10 @@ class CopyExistingProjectWithoutAnnotations extends HTMLElement {
                     const projectTitle = document.createElement('span')
                     projectTitle.textContent = data.label
 
-                    const manageButton = document.createElement('button')
+                    const manageButton = document.createElement('a')
                     manageButton.className = 'manage-btn'
                     manageButton.textContent = 'Manage'
-                    manageButton.onclick = () => {
-                    window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
-                    }
+                    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${data._id}`
 
                     projectInfo.appendChild(projectTitle)
                     projectInfo.appendChild(manageButton)
diff --git a/components/import-image/index.js b/components/import-image/index.js
index bb127c75..5bf6710c 100644
--- a/components/import-image/index.js
+++ b/components/import-image/index.js
@@ -182,12 +182,10 @@ class ImageImporter extends HTMLElement {
     const pageTitle = document.createElement('span')
     pageTitle.textContent = project.label || 'Untitled Page'
 
-    const manageButton = document.createElement('button')
+    const manageButton = document.createElement('a')
     manageButton.className = 'manage-btn'
     manageButton.textContent = 'Manage'
-    manageButton.onclick = () => {
-      window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
-    }
+    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
     pageInfo.appendChild(pageTitle)
     pageInfo.appendChild(manageButton)
diff --git a/components/import-project/index.js b/components/import-project/index.js
index 3a5b549a..575e532c 100644
--- a/components/import-project/index.js
+++ b/components/import-project/index.js
@@ -133,12 +133,10 @@ class ProjectImporter extends HTMLElement {
     const projectTitle = document.createElement('span')
     projectTitle.textContent = project.label
 
-    const manageButton = document.createElement('button')
+    const manageButton = document.createElement('a')
     manageButton.className = 'manage-btn'
     manageButton.textContent = 'Manage'
-    manageButton.onclick = () => {
-      window.location.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
-    }
+    manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
     projectInfo.appendChild(projectTitle)
     projectInfo.appendChild(manageButton)
diff --git a/components/user-profile/userStats.js b/components/user-profile/userStats.js
index 8253b295..070f6040 100644
--- a/components/user-profile/userStats.js
+++ b/components/user-profile/userStats.js
@@ -473,7 +473,9 @@ class UserStats extends HTMLElement {
                     <div class="collaborators">
                         ${collaborators.map(c => `
                             <div class="collaborator">
-                                <img src="${c.img}" alt="${c.name}" onclick="window.location.href='${TPEN.BASEURL}/public-profile?userId=${c._id}'">
+                                <a href="${TPEN.BASEURL}/public-profile?userId=${c._id}">
+                                    <img src="${c.img}" alt="${c.name}">
+                                </a>
                                 <div class="collaborator-name">${c.name}</div>
                             </div>
                         `).join('')}
diff --git a/interfaces/import-tpen28/index.html b/interfaces/import-tpen28/index.html
index 3824be97..ceaeacbe 100644
--- a/interfaces/import-tpen28/index.html
+++ b/interfaces/import-tpen28/index.html
@@ -38,9 +38,9 @@ <h2>Invite the Collaborators :</h2>
                 <div class="collaborator-list" id="collaboratorList"></div>
             </section>
         
-            <button id="openProject" class="btn secondary-btn hidden">
+            <a id="openProject" class="btn secondary-btn hidden" href="#">
                 Open the Project
-            </button>
+            </a>
             </div>
         </tpen-page>
     </body>
diff --git a/interfaces/import-tpen28/index.js b/interfaces/import-tpen28/index.js
index 3d775338..0da68dca 100644
--- a/interfaces/import-tpen28/index.js
+++ b/interfaces/import-tpen28/index.js
@@ -55,9 +55,7 @@ async function importProject(selectedId) {
 
     const openBtn = document.getElementById("openProject")
     openBtn.classList.remove("hidden")
-    openBtn.addEventListener("click", () => {
-        window.location.href = `/project/manage?projectID=${project.importData._id}`
-    })
+    openBtn.href = `/project/manage?projectID=${project.importData._id}`
 
     return { projectTPEN28Data: project.parsedData, projectTPEN3Data: project.importData }
 }
diff --git a/interfaces/manage-project/index.html b/interfaces/manage-project/index.html
index 436168b1..440cb825 100644
--- a/interfaces/manage-project/index.html
+++ b/interfaces/manage-project/index.html
@@ -35,27 +35,27 @@ <h2 slot="header">This Project</h2>
                     </tpen-can>
                 </div>
             </div>
-            <button id="leave-project-btn" slot="footer" type="button">LEAVE PROJECT</button>
+            <a id="leave-project-btn" slot="footer" class="button-link" href="#">LEAVE PROJECT</a>
         </tpen-card>
         <tpen-card tpen-scope="metadata">
             <h2 slot="header">Metadata</h2>
             <tpen-project-metadata slot="body"></tpen-project-metadata>
-            <button id="update-metadata-btn" slot="footer" type="button">EDIT METADATA</button>
+            <a id="update-metadata-btn" slot="footer" class="button-link" href="#">EDIT METADATA</a>
         </tpen-card>
         <tpen-card tpen-entity="member">
             <h2 slot="header">Collaborators</h2>
             <project-collaborators slot="body"></project-collaborators>
-            <button id="manage-collaboration-btn" slot="footer" type="button">MANAGE COLLABORATORS</button>
+            <a id="manage-collaboration-btn" slot="footer" class="button-link" href="#">MANAGE COLLABORATORS</a>
         </tpen-card>
         <tpen-card tpen-entity="layer">
             <h2 slot="header">Layers & Pages</h2>
             <tpen-project-layers slot="body"></tpen-project-layers>
-            <button id="manage-layers-btn" slot="footer" type="button">SEE DETAILS / MODIFY</button>
+            <a id="manage-layers-btn" slot="footer" class="button-link" href="#">SEE DETAILS / MODIFY</a>
         </tpen-card>
         <tpen-card tpen-entity="role">
             <h2 slot="header">Project Roles</h2>
             <tpen-project-permissions slot="body"></tpen-project-permissions>
-            <button id="manage-custom-role-btn" slot="footer" type="button">MANAGE ROLE</button>
+            <a id="manage-custom-role-btn" slot="footer" class="button-link" href="#">MANAGE ROLE</a>
         </tpen-card>
         <tpen-card tpen-scope="options">
             <h2 slot="header">Project Options</h2>
@@ -64,7 +64,7 @@ <h2 slot="header">Project Options</h2>
                     Default Transcription Interface: /transcribe
                 </div>
             </tpen-project-options>
-            <button id="manage-project-options-btn" slot="footer" type="button">SEE DETAILS</button>
+            <a id="manage-project-options-btn" slot="footer" class="button-link" href="#">SEE DETAILS</a>
         </tpen-card>
         <tpen-card tpen-entity="tools">
             <h2 slot="header">Tools</h2>
diff --git a/interfaces/manage-project/index.js b/interfaces/manage-project/index.js
index 5a4b607a..13c52c36 100644
--- a/interfaces/manage-project/index.js
+++ b/interfaces/manage-project/index.js
@@ -13,17 +13,34 @@ TPEN.eventDispatcher.on('tpen-project-loaded', () => render())
 const container = document.body
 TPEN.attachAuthentication(container)
 
-document.getElementById('manage-collaboration-btn').addEventListener('click', () => {
-    const url = `/project/manage/collaborators?projectID=${TPEN.screen.projectInQuery}`
-    window.location.href = url
-})
-
-document.getElementById("update-metadata-btn").addEventListener('click', () => {  
-    window.location.href = `/components/update-metadata/index.html?projectID=${TPEN.screen.projectInQuery}`
-})
-
-document.getElementById('manage-layers-btn').addEventListener('click', () => {
-    window.location.href = `/components/manage-layers/index.html?projectID=${TPEN.screen.projectInQuery}`
+// Set href for navigation links once project ID is available
+TPEN.eventDispatcher.on('tpen-project-loaded', () => {
+    const projectID = TPEN.screen.projectInQuery
+    
+    const manageCollabBtn = document.getElementById('manage-collaboration-btn')
+    if (manageCollabBtn) {
+        manageCollabBtn.href = `/project/manage/collaborators?projectID=${projectID}`
+    }
+    
+    const updateMetadataBtn = document.getElementById("update-metadata-btn")
+    if (updateMetadataBtn) {
+        updateMetadataBtn.href = `/components/update-metadata/index.html?projectID=${projectID}`
+    }
+    
+    const manageLayersBtn = document.getElementById('manage-layers-btn')
+    if (manageLayersBtn) {
+        manageLayersBtn.href = `/components/manage-layers/index.html?projectID=${projectID}`
+    }
+    
+    const manageProjectOptionsBtn = document.getElementById('manage-project-options-btn')
+    if (manageProjectOptionsBtn) {
+        manageProjectOptionsBtn.href = `/project/options?projectID=${projectID}`
+    }
+    
+    const leaveProjectBtn = document.getElementById('leave-project-btn')
+    if (leaveProjectBtn) {
+        leaveProjectBtn.href = `/project/leave?projectID=${projectID}`
+    }
 })
 
 document.getElementById('export-project-btn').addEventListener('click', async () => {
@@ -43,14 +60,6 @@ document.getElementById('export-project-btn').addEventListener('click', async ()
     })
 })
 
-document.getElementById('manage-project-options-btn').addEventListener('click', () => {
-    window.location.href = `/project/options?projectID=${TPEN.screen.projectInQuery}`
-})
-
-document.getElementById('leave-project-btn').addEventListener('click', (e) => {
-    window.location.href = `/project/leave?projectID=${TPEN.screen.projectInQuery}`
-})
-
 async function render() {
     const isManageProjectPermission = await CheckPermissions.checkEditAccess('PROJECT')
     if(!isManageProjectPermission) {
@@ -58,7 +67,9 @@ async function render() {
         document.location.href = `/project?projectID=${TPEN.screen.projectInQuery}`
     }
     document.querySelector('tpen-project-details').setAttribute('tpen-project-id', TPEN.screen.projectInQuery)
-    document.getElementById("manage-custom-role-btn").addEventListener('click', async () => {
-        window.location.href = `/components/manage-role/index.html?projectID=${TPEN.screen.projectInQuery}`  
-    })
+    
+    const manageCustomRoleBtn = document.getElementById("manage-custom-role-btn")
+    if (manageCustomRoleBtn) {
+        manageCustomRoleBtn.href = `/components/manage-role/index.html?projectID=${TPEN.screen.projectInQuery}`
+    }
 }
diff --git a/interfaces/project/index.html b/interfaces/project/index.html
index c7ba232a..a4677f25 100644
--- a/interfaces/project/index.html
+++ b/interfaces/project/index.html
@@ -72,7 +72,7 @@ <h2 slot="header">Project Details</h2>
                         </tpen-can>
                     </div>
                 </div>
-                <button id="leaveProject" slot="footer" type="button">LEAVE PROJECT</button>
+                <a id="leaveProject" slot="footer" href="#">LEAVE PROJECT</a>
             </tpen-card>
         </div>
     </tpen-page>
@@ -83,9 +83,9 @@ <h2 slot="header">Project Details</h2>
         const goParse = document.getElementById("goParse")
         const goTranscribe = document.getElementById("goTranscribe")
         const leaveProject = document.getElementById("leaveProject")
-        leaveProject.addEventListener('click', (e) => {
-            window.location.href = `/project/leave?projectID=${ev.detail._id}`
-        })
+        if (leaveProject) {
+            leaveProject.href = `/project/leave?projectID=${ev.detail._id}`
+        }
         if(goParse) goParse.setAttribute("href", `/annotator?projectID=${ev.detail._id}`)
         if(goTranscribe) goTranscribe.setAttribute("href", `/transcribe?projectID=${ev.detail._id}`)
     })
diff --git a/interfaces/project/quick-guide.html b/interfaces/project/quick-guide.html
index 29dcb9fb..14b3291a 100644
--- a/interfaces/project/quick-guide.html
+++ b/interfaces/project/quick-guide.html
@@ -78,7 +78,7 @@ <h2>Save and Start Transcribing :</h2>
                 </div>
             </div>
             <div class="bottom-panel">
-                <button class="get-started-button" onclick="window.location.href='/components/quick-guide/'">Get Started</button>
+                <a class="get-started-button" href="/components/quick-guide/">Get Started</a>
             </div>
         </section>
     </tpen-page>
diff --git a/manage/collaboration.html b/manage/collaboration.html
index cd56df59..0a8169f1 100644
--- a/manage/collaboration.html
+++ b/manage/collaboration.html
@@ -5,10 +5,10 @@
        <span class="text">Share Publicly</span>
        <span class="btn-icon share"></span>
      </button> 
-      <button class="default-btn" id="modify-team-btn" >
+      <a class="default-btn" id="modify-team-btn" href="#">
        <span class="text">Modify Project Team</span>
        <span class="btn-icon team"></span>
-     </button> 
+     </a> 
 
  <div class="project-owner" id="project-owner">
   <p>
diff --git a/manage/index.js b/manage/index.js
index 9a4a4ee8..67d8d68e 100644
--- a/manage/index.js
+++ b/manage/index.js
@@ -47,12 +47,9 @@ function loadManageInterface(){
         const modifyTeamBtn = document.getElementById("modify-team-btn")
 
         if (modifyTeamBtn) {
-          modifyTeamBtn.addEventListener("click", () => {
-            const URLParams = new URLSearchParams(window.location.search)
-            const projectID = URLParams.get("projectID")
-            const url = `/project/manage/collaborators?projectID=${projectID}`
-            window.location.href = url
-          })
+          const URLParams = new URLSearchParams(window.location.search)
+          const projectID = URLParams.get("projectID")
+          modifyTeamBtn.href = `/project/manage/collaborators?projectID=${projectID}`
         } 
         const { projectData } = await getActiveProject()
         console.log(projectData)

From bdeaca819fe3a7045a3c8fb9e15cdc5c22b32083 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 16 Dec 2025 22:57:32 +0000
Subject: [PATCH 3/4] Fix CSS classes - use default-btn and inline styles for
 button links

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
---
 components/annotorious-annotator/line-parser.js |  2 +-
 components/import-project/index.js              |  2 +-
 interfaces/manage-project/index.html            | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/annotorious-annotator/line-parser.js b/components/annotorious-annotator/line-parser.js
index 5c345b52..449aaee6 100644
--- a/components/annotorious-annotator/line-parser.js
+++ b/components/annotorious-annotator/line-parser.js
@@ -273,7 +273,7 @@ class AnnotoriousAnnotator extends HTMLElement {
            <input type="checkbox" id="seeTool" checked> 
           </label>
           <input id="deleteAllBtn" type="button" value="Delete All Annotations"/>
-          <a id="createColumnsBtn" href="#" class="button-style-link">Manage Columns</a>
+          <a id="createColumnsBtn" href="#" style="display: inline-block; padding: 4px 8px; background: #f0f0f0; border: 1px solid #ccc; text-decoration: none; color: #000; cursor: pointer; border-radius: 3px;">Manage Columns</a>
           <input id="saveBtn" type="button" value="Save Annotations"/>
         </div>
         <button id="autoParseBtn">Auto Parse</button>
diff --git a/components/import-project/index.js b/components/import-project/index.js
index 575e532c..cf28acbd 100644
--- a/components/import-project/index.js
+++ b/components/import-project/index.js
@@ -134,7 +134,7 @@ class ProjectImporter extends HTMLElement {
     projectTitle.textContent = project.label
 
     const manageButton = document.createElement('a')
-    manageButton.className = 'manage-btn'
+    manageButton.style.cssText = 'display: inline-block; padding: 6px 12px; background: linear-gradient(to bottom, #a8d2e4, #d0f0ff); border: 1px solid #69acc9; text-decoration: none; color: #000; cursor: pointer; border-radius: 3px; margin-top: 5px;'
     manageButton.textContent = 'Manage'
     manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
diff --git a/interfaces/manage-project/index.html b/interfaces/manage-project/index.html
index 440cb825..14cd75e8 100644
--- a/interfaces/manage-project/index.html
+++ b/interfaces/manage-project/index.html
@@ -35,27 +35,27 @@ <h2 slot="header">This Project</h2>
                     </tpen-can>
                 </div>
             </div>
-            <a id="leave-project-btn" slot="footer" class="button-link" href="#">LEAVE PROJECT</a>
+            <a id="leave-project-btn" slot="footer" class="default-btn" href="#">LEAVE PROJECT</a>
         </tpen-card>
         <tpen-card tpen-scope="metadata">
             <h2 slot="header">Metadata</h2>
             <tpen-project-metadata slot="body"></tpen-project-metadata>
-            <a id="update-metadata-btn" slot="footer" class="button-link" href="#">EDIT METADATA</a>
+            <a id="update-metadata-btn" slot="footer" class="default-btn" href="#">EDIT METADATA</a>
         </tpen-card>
         <tpen-card tpen-entity="member">
             <h2 slot="header">Collaborators</h2>
             <project-collaborators slot="body"></project-collaborators>
-            <a id="manage-collaboration-btn" slot="footer" class="button-link" href="#">MANAGE COLLABORATORS</a>
+            <a id="manage-collaboration-btn" slot="footer" class="default-btn" href="#">MANAGE COLLABORATORS</a>
         </tpen-card>
         <tpen-card tpen-entity="layer">
             <h2 slot="header">Layers & Pages</h2>
             <tpen-project-layers slot="body"></tpen-project-layers>
-            <a id="manage-layers-btn" slot="footer" class="button-link" href="#">SEE DETAILS / MODIFY</a>
+            <a id="manage-layers-btn" slot="footer" class="default-btn" href="#">SEE DETAILS / MODIFY</a>
         </tpen-card>
         <tpen-card tpen-entity="role">
             <h2 slot="header">Project Roles</h2>
             <tpen-project-permissions slot="body"></tpen-project-permissions>
-            <a id="manage-custom-role-btn" slot="footer" class="button-link" href="#">MANAGE ROLE</a>
+            <a id="manage-custom-role-btn" slot="footer" class="default-btn" href="#">MANAGE ROLE</a>
         </tpen-card>
         <tpen-card tpen-scope="options">
             <h2 slot="header">Project Options</h2>
@@ -64,7 +64,7 @@ <h2 slot="header">Project Options</h2>
                     Default Transcription Interface: /transcribe
                 </div>
             </tpen-project-options>
-            <a id="manage-project-options-btn" slot="footer" class="button-link" href="#">SEE DETAILS</a>
+            <a id="manage-project-options-btn" slot="footer" class="default-btn" href="#">SEE DETAILS</a>
         </tpen-card>
         <tpen-card tpen-entity="tools">
             <h2 slot="header">Tools</h2>

From c260264f157b6842f682a6215a95bf8807b257ab Mon Sep 17 00:00:00 2001
From: cubap <cubap@slu.edu>
Date: Wed, 17 Dec 2025 13:10:34 -0600
Subject: [PATCH 4/4] minor changes

---
 components/annotorious-annotator/line-parser.js |  6 ++++--
 components/classroom/groups/package-lock.json   |  1 +
 components/import-project/index.js              |  2 +-
 interfaces/import-tpen28/index.html             |  6 +++---
 interfaces/import-tpen28/index.js               |  6 ++++--
 interfaces/manage-project/index.html            | 16 ++++++++--------
 6 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/components/annotorious-annotator/line-parser.js b/components/annotorious-annotator/line-parser.js
index 449aaee6..2899df47 100644
--- a/components/annotorious-annotator/line-parser.js
+++ b/components/annotorious-annotator/line-parser.js
@@ -273,7 +273,7 @@ class AnnotoriousAnnotator extends HTMLElement {
            <input type="checkbox" id="seeTool" checked> 
           </label>
           <input id="deleteAllBtn" type="button" value="Delete All Annotations"/>
-          <a id="createColumnsBtn" href="#" style="display: inline-block; padding: 4px 8px; background: #f0f0f0; border: 1px solid #ccc; text-decoration: none; color: #000; cursor: pointer; border-radius: 3px;">Manage Columns</a>
+          <a id="createColumnsBtn" href="#">Manage Columns</a>
           <input id="saveBtn" type="button" value="Save Annotations"/>
         </div>
         <button id="autoParseBtn">Auto Parse</button>
@@ -354,7 +354,9 @@ class AnnotoriousAnnotator extends HTMLElement {
     editTool.addEventListener("change", (e) => this.toggleEditingMode(e))
     eraseTool.addEventListener("change", (e) => this.toggleErasingMode(e))
     seeTool.addEventListener("change", (e) => this.toggleAnnotationVisibility(e))
-    createColumnsBtn.href = `../../components/create-column/?projectID=${TPEN.activeProject._id}&pageID=${this.#annotationPageID}`
+    createColumnsBtn.addEventListener("click", () =>
+      window.location.href = `../../components/create-column/?projectID=${TPEN.activeProject._id}&pageID=${this.#annotationPageID}`
+    )
     saveButton.addEventListener("click", (e) => {
       this.#annotoriousInstance.cancelSelected()
       // Timeout required in order to allow the unfocus native functionality to complete for $isDirty.
diff --git a/components/classroom/groups/package-lock.json b/components/classroom/groups/package-lock.json
index c7e32ede..08928c53 100644
--- a/components/classroom/groups/package-lock.json
+++ b/components/classroom/groups/package-lock.json
@@ -4,6 +4,7 @@
   "requires": true,
   "packages": {
     "": {
+      "license": "Apache-2.0",
       "devDependencies": {
         "@babel/preset-env": "^7.25.7",
         "babel-jest": "^29.7.0",
diff --git a/components/import-project/index.js b/components/import-project/index.js
index cf28acbd..575e532c 100644
--- a/components/import-project/index.js
+++ b/components/import-project/index.js
@@ -134,7 +134,7 @@ class ProjectImporter extends HTMLElement {
     projectTitle.textContent = project.label
 
     const manageButton = document.createElement('a')
-    manageButton.style.cssText = 'display: inline-block; padding: 6px 12px; background: linear-gradient(to bottom, #a8d2e4, #d0f0ff); border: 1px solid #69acc9; text-decoration: none; color: #000; cursor: pointer; border-radius: 3px; margin-top: 5px;'
+    manageButton.className = 'manage-btn'
     manageButton.textContent = 'Manage'
     manageButton.href = `${TPEN.BASEURL}/project/manage?projectID=${project._id}`
 
diff --git a/interfaces/import-tpen28/index.html b/interfaces/import-tpen28/index.html
index ceaeacbe..4fccba19 100644
--- a/interfaces/import-tpen28/index.html
+++ b/interfaces/import-tpen28/index.html
@@ -27,7 +27,7 @@ <h1 class="header">Select a Project :</h1>
             <div id="message" class="message">Loading projects...</div>
         
             <div class="form-group">
-                <select id="projectSelect" class="dropdown">
+                <select id="projectSelect" title="projectSelect" class="dropdown">
                 <option value="">-- Choose a Project --</option>
                 </select>
                 <button id="importProjectBtn" class="btn primary-btn">Import</button>
@@ -38,10 +38,10 @@ <h2>Invite the Collaborators :</h2>
                 <div class="collaborator-list" id="collaboratorList"></div>
             </section>
         
-            <a id="openProject" class="btn secondary-btn hidden" href="#">
+            <a id="openProject" class="btn secondary-btn hidden" href="#" role="button">
                 Open the Project
             </a>
             </div>
         </tpen-page>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/interfaces/import-tpen28/index.js b/interfaces/import-tpen28/index.js
index 0da68dca..74bc7b89 100644
--- a/interfaces/import-tpen28/index.js
+++ b/interfaces/import-tpen28/index.js
@@ -55,7 +55,9 @@ async function importProject(selectedId) {
 
     const openBtn = document.getElementById("openProject")
     openBtn.classList.remove("hidden")
-    openBtn.href = `/project/manage?projectID=${project.importData._id}`
+    openBtn.addEventListener("click", () => {
+        window.location.href = `/project/manage?projectID=${project.importData._id}`
+    })
 
     return { projectTPEN28Data: project.parsedData, projectTPEN3Data: project.importData }
 }
@@ -122,4 +124,4 @@ async function openProject() {
     await importCollaborators(projectTPEN28Data, projectID)
 } 
  
-fetchProjects()
\ No newline at end of file
+fetchProjects()
diff --git a/interfaces/manage-project/index.html b/interfaces/manage-project/index.html
index 14cd75e8..52bd1505 100644
--- a/interfaces/manage-project/index.html
+++ b/interfaces/manage-project/index.html
@@ -23,39 +23,39 @@ <h2 slot="header">This Project</h2>
                 <tpen-project-details></tpen-project-details>
                 <div class="action-links">
                     <tpen-can tpen-view="*_SELECTOR_LINE"> 
-                        <a id="goParse" title="Go Parse Lines" class="left"><img src="../../assets/icons/parse-lines.svg"/>
+                        <a id="goParse" title="Go Parse Lines" class="left"><img src="../../assets/icons/parse-lines.svg" alt="icon"/>
                             <span>Parse Lines</span>
                         </a>
                     </tpen-can>
                     <tpen-can tpen-view="READ_TEXT_LINE"> 
                         <a id="goTranscribe" title="Go Transcribe" class="right">
                             <span>Transcribe Text</span>
-                            <img src="../../assets/icons/transcribe.png"/>
+                            <img src="../../assets/icons/transcribe.png" alt="icon"/>
                         </a>
                     </tpen-can>
                 </div>
             </div>
-            <a id="leave-project-btn" slot="footer" class="default-btn" href="#">LEAVE PROJECT</a>
+            <a id="leave-project-btn" slot="footer" class="default-btn" href="#" role="button">LEAVE PROJECT</a>
         </tpen-card>
         <tpen-card tpen-scope="metadata">
             <h2 slot="header">Metadata</h2>
             <tpen-project-metadata slot="body"></tpen-project-metadata>
-            <a id="update-metadata-btn" slot="footer" class="default-btn" href="#">EDIT METADATA</a>
+            <a id="update-metadata-btn" slot="footer" class="default-btn" href="#" role="button">EDIT METADATA</a>
         </tpen-card>
         <tpen-card tpen-entity="member">
             <h2 slot="header">Collaborators</h2>
             <project-collaborators slot="body"></project-collaborators>
-            <a id="manage-collaboration-btn" slot="footer" class="default-btn" href="#">MANAGE COLLABORATORS</a>
+            <a id="manage-collaboration-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE COLLABORATORS</a>
         </tpen-card>
         <tpen-card tpen-entity="layer">
             <h2 slot="header">Layers & Pages</h2>
             <tpen-project-layers slot="body"></tpen-project-layers>
-            <a id="manage-layers-btn" slot="footer" class="default-btn" href="#">SEE DETAILS / MODIFY</a>
+            <a id="manage-layers-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS / MODIFY</a>
         </tpen-card>
         <tpen-card tpen-entity="role">
             <h2 slot="header">Project Roles</h2>
             <tpen-project-permissions slot="body"></tpen-project-permissions>
-            <a id="manage-custom-role-btn" slot="footer" class="default-btn" href="#">MANAGE ROLE</a>
+            <a id="manage-custom-role-btn" slot="footer" class="default-btn" href="#" role="button">MANAGE ROLE</a>
         </tpen-card>
         <tpen-card tpen-scope="options">
             <h2 slot="header">Project Options</h2>
@@ -64,7 +64,7 @@ <h2 slot="header">Project Options</h2>
                     Default Transcription Interface: /transcribe
                 </div>
             </tpen-project-options>
-            <a id="manage-project-options-btn" slot="footer" class="default-btn" href="#">SEE DETAILS</a>
+            <a id="manage-project-options-btn" slot="footer" class="default-btn" href="#" role="button">SEE DETAILS</a>
         </tpen-card>
         <tpen-card tpen-entity="tools">
             <h2 slot="header">Tools</h2>