v1.30.1

changelog.md

@@ -3,6 +3,15 @@
 ## Pending
 
 
+## 2026-05-24 - 1.30.1
+
+### Fixes
+
+- align Onebox settings gateway cards with the dees-tile footer action pattern
+- align settings gateway cards with dees-tile footer actions (settings-ui)
+  - Replaces custom gateway card wrappers with dees-tile header and footer slots.
+  - Uses tile-styled action buttons for Admin UI and dcrouter settings saves.
+
 ## 2026-05-24 - 1.30.0
 
 ### Features

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.30.0",
+  "version": "1.30.1",
   "exports": "./mod.ts",
   "tasks": {
     "test": "deno test --allow-all test/",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.30.0",
+  "version": "1.30.1",
   "description": "Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers",
   "main": "mod.ts",
   "type": "module",

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/onebox',
-  version: '1.30.0',
+  version: '1.30.1',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/onebox',
-  version: '1.30.0',
+  version: '1.30.1',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts_web/elements/ob-view-settings.ts

@@ -48,31 +48,45 @@ export class ObViewSettings extends DeesElement {
     cssManager.defaultStyles,
     shared.viewHostCss,
     css`
-      .gateway-card {
+      dees-tile {
+        display: block;
         margin-bottom: 24px;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 12px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        overflow: hidden;
-        box-shadow: 0 1px 2px ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.2)')};
       }
 
       .gateway-header {
-        padding: 16px 20px;
+        height: 36px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        display: flex;
-        background: ${cssManager.bdTheme('#fafafa', '#101013')};
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .gateway-heading {
+        flex: 1;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .gateway-title {
-        font-size: 15px;
+        font-size: 13px;
-        font-weight: 600;
+        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .gateway-subtitle {
-        margin-top: 4px;
+        font-size: 12px;
-        font-size: 13px;
+        color: var(--dees-color-text-muted);
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .gateway-content {
@@ -176,8 +190,51 @@ export class ObViewSettings extends DeesElement {
 
       .gateway-footer {
         display: flex;
+        flex-direction: row;
         justify-content: flex-end;
-        padding: 0 20px 20px;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       @media (max-width: 700px) {
@@ -249,24 +306,23 @@ export class ObViewSettings extends DeesElement {
   private renderAdminUiSettings(): TemplateResult {
     const settings = this.settingsState.settings;
     return html`
-      <section class="gateway-card">
+      <dees-tile>
-        <div class="gateway-header">
+        <div slot="header" class="gateway-header">
-          <div class="gateway-title">Onebox Admin UI</div>
+          <div class="gateway-heading">
-          <div class="gateway-subtitle">Configure the public hostname for this Onebox dashboard. Onebox keeps this route separate from app service domains.</div>
+            <span class="gateway-title">Onebox Admin UI</span>
+            <span class="gateway-subtitle">Configure the public hostname for this Onebox dashboard</span>
+          </div>
         </div>
         <div class="gateway-content">
           ${this.renderGatewayInput('adminUiDomain', 'Admin UI Domain', settings?.adminUiDomain || '', 'Example: onebox.example.com. Leave empty to disable the public Admin UI route.')}
           ${this.renderGatewayReadonly('Local Target', 'Onebox OpsServer on port 3000', 'The external gateway forwards to SmartProxy, which forwards this hostname to the Onebox Admin UI.')}
         </div>
-        <div class="gateway-footer">
+        <div slot="footer" class="gateway-footer">
-          <dees-button
+          <button class="tile-button primary" type="button" @click=${() => this.saveAdminUiSettings()}>
-            .text=${'Save Admin UI Domain'}
+            Save Admin UI Domain
-            .type=${'default'}
+          </button>
-            .icon=${'lucide:Save'}
-            @click=${() => this.saveAdminUiSettings()}
-          ></dees-button>
         </div>
-      </section>
+      </dees-tile>
     `;
   }
 
@@ -274,10 +330,12 @@ export class ObViewSettings extends DeesElement {
     const settings = this.settingsState.settings;
     const mode = settings?.dcrouterMode || 'managed';
     return html`
-      <section class="gateway-card">
+      <dees-tile>
-        <div class="gateway-header">
+        <div slot="header" class="gateway-header">
-          <div class="gateway-title">dcrouter Gateway</div>
+          <div class="gateway-heading">
-          <div class="gateway-subtitle">Run a local managed dcrouter or delegate routing, DNS, and certificates to an external dcrouter.</div>
+            <span class="gateway-title">dcrouter Gateway</span>
+            <span class="gateway-subtitle">Run a local managed dcrouter or delegate routing to an external dcrouter</span>
+          </div>
         </div>
         <div class="gateway-mode-row">
           ${this.renderModeButton('managed', 'Managed Local', mode)}
@@ -303,15 +361,12 @@ export class ObViewSettings extends DeesElement {
             <div class="gateway-disabled">dcrouter route delegation is disabled. Onebox will keep using its local SmartProxy directly.</div>
           `}
         </div>
-        <div class="gateway-footer">
+        <div slot="footer" class="gateway-footer">
-          <dees-button
+          <button class="tile-button primary" type="button" @click=${() => this.saveExternalGatewaySettings()}>
-            .text=${'Save dcrouter Settings'}
+            Save dcrouter Settings
-            .type=${'default'}
+          </button>
-            .icon=${'lucide:Save'}
-            @click=${() => this.saveExternalGatewaySettings()}
-          ></dees-button>
         </div>
-      </section>
+      </dees-tile>
     `;
   }