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

ts_web/elements/domains/dns-provider-form.ts

@@ -80,22 +80,6 @@ export class DnsProviderForm extends DeesElement {
         margin-bottom: 12px;
       }
 
-      .helpText {
-        font-size: 12px;
-        opacity: 0.7;
-        margin-top: -6px;
-        margin-bottom: 8px;
-      }
-
-      .typeDescription {
-        font-size: 12px;
-        opacity: 0.8;
-        margin: 4px 0 16px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
-        border-radius: 6px;
-      }
-
       .credentialsHint {
         font-size: 12px;
         opacity: 0.7;
@@ -130,6 +114,7 @@ export class DnsProviderForm extends DeesElement {
                 <dees-input-text
                   .key=${'__type_display'}
                   .label=${'Type'}
+                  .infoText=${descriptor?.description || ''}
                   .value=${descriptor?.displayName ?? this.selectedType}
                   .disabled=${true}
                 ></dees-input-text>
@@ -140,6 +125,7 @@ export class DnsProviderForm extends DeesElement {
                 <dees-input-dropdown
                   .key=${'__type'}
                   .label=${'Provider type'}
+                  .infoText=${descriptor?.description || ''}
                   .options=${descriptors.map((d) => ({ option: d.displayName, key: d.type }))}
                   .selectedOption=${descriptor
                     ? { option: descriptor.displayName, key: descriptor.type }
@@ -158,7 +144,6 @@ export class DnsProviderForm extends DeesElement {
             `}
         ${descriptor
           ? html`
-              <div class="typeDescription">${descriptor.description}</div>
               ${this.credentialsHint
                 ? html`<div class="credentialsHint">${this.credentialsHint}</div>`
                 : ''}
@@ -168,9 +153,9 @@ export class DnsProviderForm extends DeesElement {
                     <dees-input-text
                       .key=${f.key}
                       .label=${f.label}
+                      .description=${f.helpText || ''}
                       .required=${f.required && !this.lockType}
                     ></dees-input-text>
-                    ${f.helpText ? html`<div class="helpText">${f.helpText}</div>` : ''}
                   </div>
                 `,
               )}