⚡ Minor UI tweaks

components/history.vue

@@ -12,37 +12,33 @@
       </li>
     </ul>
     <ul>
-      <li style="max-width: 44px"></li>
+      <li></li>
       <li @click="sort_by_label()">
-        <label class="flex-wrap">
+        <label>
           Label
-          <i class="material-icons">unfold_more</i>
         </label>
       </li>
       <li @click="sort_by_time()">
-        <label class="flex-wrap">
+        <label>
           Time
-          <i class="material-icons">unfold_more</i>
         </label>
       </li>
       <li @click="sort_by_status_code()">
-        <label class="flex-wrap">
+        <label>
           Status
-          <i class="material-icons">unfold_more</i>
         </label>
       </li>
       <li @click="sort_by_url()">
-        <label class="flex-wrap">
+        <label>
           URL
-          <i class="material-icons">unfold_more</i>
         </label>
       </li>
       <li @click="sort_by_path()">
-        <label class="flex-wrap">
+        <label>
           Path
-          <i class="material-icons">unfold_more</i>
         </label>
       </li>
+      <li></li>
     </ul>
     <virtual-list
       class="virtual-list"
@@ -51,11 +47,19 @@
       :remain="Math.min(5, filteredHistory.length)"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
-        <li style="width: 44px">
+        <li>
           <button v-if="entry.usesScripts"
-            v-tooltip="'This entry used pre-request scripts.'"
+            v-tooltip="'This entry used pre-request scripts'"
             class="icon"
-          ><i class="material-icons" style="z-index: 10050;">code</i></button>
+          >
+            <i class="material-icons">code</i>
+          </button>
+          <button v-else
+            v-tooltip="'No pre-request scripts'"
+            class="icon"
+          >
+            <i class="material-icons">http</i>
+          </button>
         </li>
         <li>
           <input
@@ -67,7 +71,7 @@
           />
         </li>
         <li>
-          <input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date" />
+          <input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
         </li>
         <li class="method-list-item">
           <input
@@ -139,7 +143,7 @@
         </button>
       </li>
       <li v-else>
-        <div class="flex-wrap">
+        <div>
           <label for="clear-history-button">Are you sure?</label>
           <div>
             <button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>
@@ -158,8 +162,12 @@
     }
   }
 
-  .flex-wrap {
-    cursor: pointer;
+  label {
+
+    &:hover {
+      cursor: pointer;
+      color: var(--fg-color);
+    }
   }
 
   @media (max-width: 720px) {

layouts/default.vue

@@ -209,7 +209,7 @@
     flex: 1;
     order: 2;
     position: relative;
-    padding: 0 8px;
+    padding: 0 16px;
   }
 
   .nav-second {
@@ -294,7 +294,7 @@
       background-color: var(--brd-color);
       color: var(--fg-light-color);
       margin: 8px;
-      transition: border-radius .2s ease-in-out;
+      transition: all .2s ease-in-out;
 
       &:hover {
         color: var(--fg-color);
@@ -332,6 +332,9 @@
     nav.secondary-nav {
       display: none;
     }
+    .main {
+      padding: 0 8px;
+    }
   }
 </style>
 

pages/index.vue

@@ -41,7 +41,7 @@
     </pw-modal>
 
     <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest">
-      <textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="rawParams" spellcheck="false"></textarea>
+      <textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="preRequestScript" spellcheck="false" placeholder='pw.environment.set("variable", "value");'></textarea>
     </pw-section>
 
     <pw-section class="blue" label="Request" ref="request">
@@ -282,10 +282,15 @@
       </ul>
     </pw-section>
 
+    <br>
+
     <section id="options">
       <input id="tab-one" type="radio" name="grp" checked="checked" />
       <label for="tab-one">Authentication</label>
       <div class="tab">
+
+        <br>
+
         <pw-section class="cyan" label="Authentication" ref="authentication">
           <ul>
             <li>
@@ -348,6 +353,9 @@
       <input id="tab-two" type="radio" name="grp" />
       <label for="tab-two">Headers</label>
       <div class="tab">
+
+        <br>
+
         <pw-section class="orange" label="Headers" ref="headers">
           <ul>
             <li>
@@ -411,6 +419,9 @@
       <input id="tab-three" type="radio" name="grp" />
       <label for="tab-three">Parameters</label>
       <div class="tab">
+
+        <br>
+
         <pw-section class="pink" label="Parameters" ref="parameters">
           <ul>
             <li>