fix(web-ui): improve form field descriptions and align certificate settings with tile components

ts_web/elements/domains/ops-view-certificates.ts

@@ -54,35 +54,31 @@ export class OpsViewCertificates extends DeesElement {
         gap: 24px;
       }
 
-      .acmeCard {
-        padding: 16px 20px;
-        background: ${cssManager.bdTheme('#f9fafb', '#111827')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
-        border-radius: 8px;
-      }
-
-      .acmeCard.acmeCardEmpty {
-        background: ${cssManager.bdTheme('#fffbeb', '#1c1917')};
-        border-color: ${cssManager.bdTheme('#fde68a', '#78350f')};
-      }
-
-      .acmeCardHeader {
+      .acmeTileHeader {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 12px;
+        width: 100%;
+        padding: 8px 12px;
       }
 
-      .acmeCardTitle {
+      .acmeTileHeading {
         font-size: 14px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
+      }
+
+      .acmeEmptyContent {
+        padding: 16px;
+        font-size: 13px;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('#78350f', '#fde68a')};
       }
 
       .acmeGrid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
         gap: 12px 24px;
+        padding: 16px;
       }
 
       .acmeField {
@@ -103,13 +99,6 @@ export class OpsViewCertificates extends DeesElement {
         color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
       }
 
-      .acmeEmptyHint {
-        margin: 0;
-        font-size: 13px;
-        line-height: 1.5;
-        color: ${cssManager.bdTheme('#78350f', '#fde68a')};
-      }
-
       .statusBadge {
         display: inline-flex;
         align-items: center;
@@ -226,41 +215,40 @@ export class OpsViewCertificates extends DeesElement {
       <dees-heading level="3">Certificates</dees-heading>
 
       <div class="certificatesContainer">
-        ${this.renderAcmeSettingsCard()}
         ${this.renderStatsTiles(summary)}
+        ${this.renderAcmeSettingsTile()}
         ${this.renderCertificateTable()}
       </div>
     `;
   }
 
-  private renderAcmeSettingsCard(): TemplateResult {
+  private renderAcmeSettingsTile(): TemplateResult {
     const config = this.acmeState.config;
 
     if (!config) {
       return html`
-        <div class="acmeCard acmeCardEmpty">
-          <div class="acmeCardHeader">
-            <span class="acmeCardTitle">ACME Settings</span>
+        <dees-tile .heading=${'ACME Settings'}>
+          <div slot="header" class="acmeTileHeader">
+            <span class="acmeTileHeading">ACME Settings</span>
             <dees-button
-              eventName="edit-acme"
               @click=${() => this.showEditAcmeDialog()}
               .type=${'highlighted'}
             >Configure</dees-button>
           </div>
-          <p class="acmeEmptyHint">
+          <div class="acmeEmptyContent">
             No ACME configuration yet. Click <strong>Configure</strong> to set up automated TLS
             certificate issuance via Let's Encrypt. You'll also need at least one DNS provider
             under <strong>Domains &gt; Providers</strong>.
-          </p>
-        </div>
+          </div>
+        </dees-tile>
       `;
     }
 
     return html`
-      <div class="acmeCard">
-        <div class="acmeCardHeader">
-          <span class="acmeCardTitle">ACME Settings</span>
-          <dees-button eventName="edit-acme" @click=${() => this.showEditAcmeDialog()}>Edit</dees-button>
+      <dees-tile>
+        <div slot="header" class="acmeTileHeader">
+          <span class="acmeTileHeading">ACME Settings</span>
+          <dees-button @click=${() => this.showEditAcmeDialog()}>Edit</dees-button>
         </div>
         <div class="acmeGrid">
           <div class="acmeField">
@@ -292,7 +280,7 @@ export class OpsViewCertificates extends DeesElement {
             <span class="acmeValue">${config.renewThresholdDays} days</span>
           </div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 
@@ -317,7 +305,8 @@ export class OpsViewCertificates extends DeesElement {
           ></dees-input-checkbox>
           <dees-input-checkbox
             .key=${'useProduction'}
-            .label=${"Use Let's Encrypt production (uncheck for staging)"}
+            .label=${"Use Let's Encrypt production"}
+            .description=${'Uncheck to use the staging environment'}
             .value=${current?.useProduction ?? true}
           ></dees-input-checkbox>
           <dees-input-checkbox
@@ -327,7 +316,8 @@ export class OpsViewCertificates extends DeesElement {
           ></dees-input-checkbox>
           <dees-input-text
             .key=${'renewThresholdDays'}
-            .label=${'Renewal threshold (days)'}
+            .label=${'Renewal threshold'}
+            .description=${'Number of days before expiry to trigger renewal'}
             .value=${String(current?.renewThresholdDays ?? 30)}
           ></dees-input-text>
         </dees-form>
@@ -456,11 +446,12 @@ export class OpsViewCertificates extends DeesElement {
                 content: html`
                   <dees-form>
                     <dees-input-fileupload
-                      key="certJsonFile"
-                      label="Certificate JSON (.tsclass.cert.json)"
-                      accept=".json"
+                      .key=${'certJsonFile'}
+                      .label=${'Certificate JSON'}
+                      .description=${'Upload a .tsclass.cert.json file'}
+                      .accept=${'.json'}
                       .multiple=${false}
-                      required
+                      .required=${true}
                     ></dees-input-fileupload>
                   </dees-form>
                 `,