made minor style changes to download binary content button based on UX feedback

Author: mrin9

docs/specs/binary-response.json

@@ -12,12 +12,14 @@
   "paths" : {
     "/{width}/{height}" : {
       "get" : {
+        "tags": ["The Lorem Ipsum for photos"],
         "description" : "Return a photo",
         "parameters" : [ {
           "name" : "width",
           "in" : "path",
           "description" : "photo width",
           "required" : true,
+          "example": 100,
           "schema" : {
             "minimum" : 100,
             "type" : "integer",
@@ -28,6 +30,7 @@
           "in" : "path",
           "description" : "photo height",
           "required" : true,
+          "example": 100,
           "schema" : {
             "minimum" : 100,
             "type" : "integer",

src/components/api-request.js

@@ -677,9 +677,9 @@ export default class ApiRequest extends LitElement {
         ${this.responseIsBlob
           ? html`
             <div class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
-              <button class="m-btn" @click="${this.downloadResponseBlob}">DOWNLOAD</button>
+              <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}">DOWNLOAD</button>
               ${this.responseBlobType === 'view'
-                ? html`<button class="m-btn" @click="${this.viewResponseBlob}">VIEW (NEW TAB)</button>`
+                ? html`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}">VIEW (NEW TAB)</button>`
                 : ''
               }
             </div>`

src/styles/border-styles.js

@@ -20,4 +20,8 @@ a { color: var(--blue); }
 .pad-top-8{
   padding-top: 8px;
 }
+.mar-top-8{
+  margin-top: 8px;
+}
+
 `;