Update app.js

app.js

@@ -500,7 +500,7 @@ function populateDemoShell() {
     </div>
     <div class="server-info-row">
       <span class="server-info-label">SSH Access</span>
-      <span class="server-info-val"><a class="server-info-link" href="#" onclick="event.preventDefault();openBillingPortal()">Upgrade</a></span>
+      <span class="server-info-val">Upgrade</span>
     </div>
     <div class="server-info-row">
       <span class="server-info-label">Created</span>
@@ -776,7 +776,7 @@ function renderAgentInfo(info) {
     </div>`
       : `<div class="server-info-row">
       <span class="server-info-label">SSH Access</span>
-      <span class="server-info-val"><a class="server-info-link" href="#" onclick="event.preventDefault();openBillingPortal()">Upgrade</a></span>
+      <span class="server-info-val">Upgrade</span>
     </div>`,
     `<div class="server-info-row">
       <span class="server-info-label">Created</span>
@@ -1419,7 +1419,22 @@ async function loadBackups(uuid) {
       agent.BACKUP === false
     );
   const btn = document.getElementById("make-backup-btn");
-  if (btn) btn.style.display = hasBackup ? "" : "none";
+  if (btn) {
+    if (hasBackup) {
+      btn.style.display = "";
+      btn.innerHTML = "+";
+      btn.onclick = makeBackup;
+      btn.title = "Make Backup";
+    } else {
+      btn.style.display = "";
+      btn.innerHTML = "Upgrade";
+      btn.onclick = openBillingPortal;
+      btn.title = "Upgrade to enable backups";
+      btn.style.fontSize = "";
+      btn.style.lineHeight = "";
+      btn.style.padding = "";
+    }
+  }
 
   try {
     const _backupsUrl = `${BACKUP_URL}?uuid=${encodeURIComponent(uuid)}`;