💄 Minor UI update

assets/css/styles.scss

@@ -65,8 +65,7 @@ footer {
   justify-content: space-between;
 }
 
-
-@media(max-width: $responsiveWidth){
+@media(max-width: $responsiveWidth) {
   header {
     display: block;
     text-align: center;
@@ -78,7 +77,6 @@ footer {
   }
 }
 
-
 nav {
   a:not(:last-of-type) {
     margin-right: 15px;
@@ -173,11 +171,11 @@ fieldset.purple legend {
 }
 
 fieldset.orange {
-  border-color: #FF9800;
+  border-color: #F5A623;
 }
 
 fieldset.orange legend {
-  color: #FF9800;
+  color: #F5A623;
 }
 
 .collapsible.hidden {
@@ -210,7 +208,8 @@ option {
 input[type="checkbox"] {
   width: initial;
 
-  &, & + label {
+  &,
+  & + label {
     vertical-align: middle;
   }
 }
@@ -242,18 +241,15 @@ ol li {
   flex-direction: column;
   flex-grow: 1;
 }
-.flex-wrap{
+
+.flex-wrap {
   display: flex;
   justify-content: space-between;
-}
-.btn-copy{
-    padding: 6px 14px;
-    font-size: 11px;
-    margin-right: 15px;
-
+  align-items: center;
 }
 
 @media (max-width: $responsiveWidth) {
+
   ul,
   ol {
     flex-direction: column;

pages/index.vue

@@ -69,7 +69,8 @@
             <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
           </li>
         </ul>
-      </div><div v-else>
+      </div>
+      <div v-else>
         <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
       </div>
     </pw-section>
@@ -103,7 +104,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="cyan" label="Headers" collapsed>
+    <pw-section class="orange" label="Headers" collapsed>
       <ol v-for="(header, index) in headers">
         <li>
           <label :for="'header'+index">Key {{index + 1}}</label>
@@ -132,7 +133,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="purple" label="Parameters" collapsed>
+    <pw-section class="cyan" label="Parameters" collapsed>
       <ol v-for="(param, index) in params">
         <li>
           <label :for="'param'+index">Key {{index + 1}}</label>
@@ -161,7 +162,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="orange" label="Response" id="response" ref="response">
+    <pw-section class="purple" label="Response" id="response" ref="response">
       <ul>
         <li>
           <label for="status">status</label>
@@ -176,11 +177,11 @@
       </ul>
       <ul>
         <li>
-        <div class="flex-wrap">
-          <label for="body">response</label>
-          <button v-if="response.body" name="action" class="btn-copy" @click="copyResponse">Copy Response</button>
-         </div>
-          <textarea name="body" rows="10" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
+          <div class="flex-wrap">
+            <label for="body">response</label>
+            <button v-if="response.body" name="action" @click="copyResponse">Copy Response</button>
+          </div>
+          <textarea name="body" rows="16" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
         </li>
       </ul>
     </pw-section>