:art: minor UI tweaks

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "deepcode.review.results.hideInformationIssues": false
+}

assets/css/styles.scss

@@ -7,14 +7,15 @@ $responsiveWidth: 720px;
 
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba(0, 0, 0, .5);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, .6);
 }
 
 ::placeholder {

components/history.vue

@@ -51,7 +51,7 @@
     </ul>
     <ul>
       <li v-if="!isClearingHistory">
-        <button id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">Clear all</button>
+        <button id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">Clear All</button>
       </li>
       <li v-else>
         <div class="flex-wrap">

pages/index.vue

@@ -141,7 +141,7 @@
         <ol v-for="(param, index) in bodyParams" :key="index">
           <li>
             <label :for="'bparam'+index">Key {{index + 1}}</label>
-            <input :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState">
+            <input :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
           </li>
           <li>
             <label :for="'bvalue'+index">Value {{index + 1}}</label>
@@ -251,7 +251,7 @@
       <ol v-for="(header, index) in headers" :key="index">
         <li>
           <label :for="'header'+index">Header {{index + 1}}</label>
-          <input :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState">
+          <input :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
         </li>
         <li>
           <label :for="'value'+index">Value {{index + 1}}</label>
@@ -284,7 +284,7 @@
       <ol v-for="(param, index) in params" :key="index">
         <li>
           <label :for="'param'+index">Parameter {{index + 1}}</label>
-          <input :name="'param'+index" v-model="param.key">
+          <input :name="'param'+index" v-model="param.key" autofocus>
         </li>
         <li>
           <label :for="'value'+index">Value {{index + 1}}</label>