From 249af016a0b01a29d151622c2bd617e1577cf24f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 7 Oct 2019 21:21:48 +0530
Subject: [PATCH] :sparkles: Added label to request and History. Fixes #133

---
 assets/css/styles.scss |  8 ++++++++
 components/history.vue |  6 +++---
 pages/index.vue        | 10 ++++++++--
 pages/settings.vue     |  6 +++---
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 5abcd74e6..d55f62f6a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -302,6 +302,10 @@ ol li {
   justify-content: space-between;
 }
 
+.show-on-small-screen {
+  display: flex;
+}
+
 @media (max-width: $responsiveWidth) {
   header div {
     display: flex;
@@ -327,6 +331,10 @@ ol li {
   .hide-on-small-screen {
     display: none;
   }
+
+  .show-on-small-screen {
+    display: inline-flex;
+  }
 }
 
 #installPWA {
diff --git a/components/history.vue b/components/history.vue
index 5d2595ea1..cfbb28a91 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -7,7 +7,7 @@
     </ul>
     <ul>
       <li @click="sort_by_label()">
-        <label for="" class="flex-wrap">Name<i class="material-icons">sort</i></label>
+        <label for="" class="flex-wrap">Label<i class="material-icons">sort</i></label>
       </li>
       <li @click="sort_by_time()">
         <label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
@@ -25,7 +25,7 @@
     <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
         <li>
-          <input aria-label="Label" type="text" readonly :value="entry.label" :title="entry.label">
+          <input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label">
         </li>
         <li>
           <input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date">
@@ -38,7 +38,7 @@
           <input aria-label="URL" type="text" readonly :value="entry.url">
         </li>
         <li>
-          <input aria-label="Path" type="text" readonly :value="entry.path">
+          <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path">
         </li>
         <div class="show-on-small-screen">
           <li>
diff --git a/pages/index.vue b/pages/index.vue
index 5199f0bf3..94c6b69d9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="page">
-      <input @keyup.enter="requestName" id="label" name="label" type="label" v-model="label">
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -135,6 +134,11 @@
           </ul>
         </div>
       </div>
+      <ul>
+        <li>
+          <input id="label" name="label" type="text" v-model="label" placeholder="Label request">
+        </li>
+      </ul>
       <div class="flex-wrap">
         <button class="icon" id="show-modal" @click="showModal = true">
           <i class="material-icons">import_export</i>
@@ -420,7 +424,7 @@
     },
     data() {
       return {
-        label:'Enter request name',
+        label: '',
         showModal: false,
         copyButton: '<i class="material-icons">file_copy</i>',
         copiedButton: '<i class="material-icons">done</i>',
@@ -683,10 +687,12 @@
     },
     methods: {
       handleUseHistory({
+        label,
         method,
         url,
         path
       }) {
+        this.label = label;
         this.method = method;
         this.url = url;
         this.path = path;
diff --git a/pages/settings.vue b/pages/settings.vue
index 254ce4cfc..fbbc5cb56 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -81,18 +81,18 @@
         themes: [
           {
             "color": "rgb(37, 38, 40)",
-            "name": "Dark",
+            "name": "Kinda Dark",
             "class": ""
           },
           {
             "color": "#ffffff",
-            "name": "Light",
+            "name": "Clearly White",
             "vibrant": true,
             "class": "light"
           },
           {
             "color": "#000000",
-            "name": "Black",
+            "name": "Just Black",
             "class": "black"
           },
           {