From 5849d351c2321dcb5b0ecf3e5b9381b162e04182 Mon Sep 17 00:00:00 2001
From: Jacob Anavisca <jacobanavisca@gmail.com>
Date: Tue, 25 Feb 2020 23:43:27 -0500
Subject: [PATCH] Minor ui update

---
 pages/index.vue | 316 ++++++++++++++++++++++++------------------------
 1 file changed, 160 insertions(+), 156 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index c1639cc78..53e76da61 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -37,143 +37,145 @@
 
         <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
-            <li>
-              <label for="method">{{ $t("method") }}</label>
-              <span class="select-wrapper">
-                <v-popover>
-                  <input
-                    id="method"
-                    class="method"
-                    v-if="!customMethod"
-                    v-model="method"
-                    readonly
-                  />
-                  <input v-else v-model="method" placeholder="CUSTOM" />
-                  <template slot="popover">
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'GET'
-                        "
-                        v-close-popover
-                      >
-                        GET
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'HEAD'
-                        "
-                        v-close-popover
-                      >
-                        HEAD
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'POST'
-                        "
-                        v-close-popover
-                      >
-                        POST
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'PUT'
-                        "
-                        v-close-popover
-                      >
-                        PUT
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'DELETE'
-                        "
-                        v-close-popover
-                      >
-                        DELETE
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'CONNECT'
-                        "
-                        v-close-popover
-                      >
-                        CONNECT
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'OPTIONS'
-                        "
-                        v-close-popover
-                      >
-                        OPTIONS
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'TRACE'
-                        "
-                        v-close-popover
-                      >
-                        TRACE
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false
-                          method = 'PATCH'
-                        "
-                        v-close-popover
-                      >
-                        PATCH
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = true
-                          method = 'CUSTOM'
-                        "
-                        v-close-popover
-                      >
-                        CUSTOM
-                      </button>
-                    </div>
-                  </template>
-                </v-popover>
-              </span>
-            </li>
+            <div>
+              <li>
+                <label for="method">{{ $t("method") }}</label>
+                <span class="select-wrapper">
+                  <v-popover>
+                    <input
+                      id="method"
+                      class="method"
+                      v-if="!customMethod"
+                      v-model="method"
+                      readonly
+                    />
+                    <input v-else v-model="method" placeholder="CUSTOM" />
+                    <template slot="popover">
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'GET'
+                          "
+                          v-close-popover
+                        >
+                          GET
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'HEAD'
+                          "
+                          v-close-popover
+                        >
+                          HEAD
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'POST'
+                          "
+                          v-close-popover
+                        >
+                          POST
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'PUT'
+                          "
+                          v-close-popover
+                        >
+                          PUT
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'DELETE'
+                          "
+                          v-close-popover
+                        >
+                          DELETE
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'CONNECT'
+                          "
+                          v-close-popover
+                        >
+                          CONNECT
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'OPTIONS'
+                          "
+                          v-close-popover
+                        >
+                          OPTIONS
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'TRACE'
+                          "
+                          v-close-popover
+                        >
+                          TRACE
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false
+                            method = 'PATCH'
+                          "
+                          v-close-popover
+                        >
+                          PATCH
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = true
+                            method = 'CUSTOM'
+                          "
+                          v-close-popover
+                        >
+                          CUSTOM
+                        </button>
+                      </div>
+                    </template>
+                  </v-popover>
+                </span>
+              </li>
+            </div>
             <li>
               <label for="url">{{ $t("url") }}</label>
               <input
@@ -185,26 +187,28 @@
                 v-model="uri"
               />
             </li>
-            <li>
-              <label for="label">{{ $t("label") }}</label>
-              <input
-                id="label"
-                name="label"
-                type="text"
-                v-model="label"
-                :placeholder="$t('optional')"
-              />
-            </li>
-            <li>
-              <label class="hide-on-small-screen" for="send">&nbsp;</label>
-              <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
-                {{ $t("send") }}
-                <span>
-                  <i class="material-icons">send</i>
-                </span>
-              </button>
-            </li>
+            <div>
+              <li>
+                <label class="hide-on-small-screen" for="send">&nbsp;</label>
+                <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
+                  {{ $t("send") }}
+                  <span>
+                    <i class="material-icons">send</i>
+                  </span>
+                </button>
+              </li>
+            </div>
           </ul>
+          <div class="blue">
+            <label for="label">{{ $t("label") }}</label>
+            <input
+              id="label"
+              name="label"
+              type="text"
+              v-model="label"
+              :placeholder="$t('optional')"
+            />
+          </div>
           <div class="blue" label="Request Body" v-if="['POST', 'PUT', 'PATCH'].includes(method)">
             <ul>
               <li>