style changes to xxx-of key description in schema based on ux feedback

Author: mrin9

src/components/api-request.js

@@ -915,7 +915,7 @@ export default class ApiRequest extends LitElement {
         this.parameters.length > 0 || this.request_body
           ? html`
             <button class="m-btn thin-border" style="margin-right:5px;" @click="${this.onFillRequestData}" title="Fills with example data (if provided)">
-              FILL
+              FILL EXAMPLE
             </button>
             <button class="m-btn thin-border" style="margin-right:5px;" @click="${this.onClearRequestData}">
               CLEAR

src/components/schema-table.js

@@ -144,7 +144,7 @@ export default class SchemaTable extends LitElement {
                   : ''
                 }
                 ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || prevKey.startsWith('::OPTION')
-                  ? html`<span class="xxx-of-key" style="margin-left:-6px">${newPrevKey}</span><span class="xxx-of-key xxx-of-subkey">${subKey}</span>`
+                  ? html`<span class="xxx-of-key" style="margin-left:-6px">${newPrevKey}</span><span class="xxx-of-descr">${subKey}</span>`
                   : newPrevKey.endsWith('*')
                     ? html`<span style="display:inline-block; margin-left:-6px;"> ${newPrevKey.substring(0, newPrevKey.length - 1)}</span><span style='color:var(--red);'>*</span>`
                     : html`<span style="display:inline-block; margin-left:-6px;">${newPrevKey}</span>`

src/components/schema-tree.js

@@ -168,7 +168,7 @@ export default class SchemaTree extends LitElement {
         <div class="tr ${level < this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}">
           <div class='td key' style='min-width:${minFieldColWidth}px'>
             ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || prevKey.startsWith('::OPTION')
-              ? html`<span class='xxx-of-key'>${newPrevKey}</span><span class="xxx-of-key xxx-of-subkey">${subKey}</span>`
+              ? html`<span class='xxx-of-key'>${newPrevKey}</span><span class="xxx-of-descr">${subKey}</span>`
               : newPrevKey.endsWith('*')
                 ? html`${newPrevKey.substring(0, newPrevKey.length - 1)} ${prevDataType === 'array' ? 'ARRAY OF' : ''} <span style='color:var(--red);'>*</span>`
                 : html`${newPrevKey === '::props' || newPrevKey === '::ARRAY~OF' ? '' : newPrevKey}`

src/styles/schema-styles.js

@@ -55,10 +55,11 @@ export default css`
   display:inline-block;
 }
 
-.xxx-of-subkey {
-  color:var(--primary-color);
-  background-color:var(--primary-color-invert);
-  font-size: var(--font-size-small);
+.xxx-of-descr {
+    font-family: var(--font-regular);
+    color: var(--primary-color);
+    font-size: calc(var(--font-size-small) - 1px);
+    margin-left: 2px;
 }
 
 .stri, .string, .uri, .url, .byte, .bina, .date, .pass, .ipv4, .ipv4, .uuid, .emai, .host {color:var(--green);}