From 09a88b4a9762f24ff5e3b4931f04fe4c83258f4e Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 3 Feb 2020 08:38:40 +0530
Subject: [PATCH] :lipstick: Updating the UI and style files

---
 components/firebase/feeds.vue     | 15 +++----
 components/firebase/inputform.vue | 71 +++++++++++++++++--------------
 components/graphql/argument.vue   |  2 +-
 components/graphql/field.vue      |  2 +-
 components/graphql/type.vue       |  2 +-
 components/graphql/typelink.vue   |  2 +-
 components/history.vue            | 21 +++++----
 components/section.vue            |  2 +-
 lang/en-US.js                     |  2 +-
 lang/es-ES.js                     |  2 +-
 lang/fr-FR.js                     |  2 +-
 lang/ja-JP.js                     |  2 +-
 pages/index.vue                   | 27 ++++++------
 13 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index 1d51a98dd..cf3144f47 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -8,15 +8,10 @@
   >
     <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
       <div class="show-on-large-screen">
-        <li>
-          <input
-            :aria-label="$t('label')"
-            type="text"
-            readonly
-            :value="feed.label"
-            :placeholder="$t('no_label')"
-            class="bg-color"
-          />
+        <li class="info">
+          <label>
+            {{ feed.label || $t("no_label") }}
+          </label>
         </li>
         <button class="icon" @click="deleteFeed(feed)">
           <i class="material-icons">delete</i>
@@ -24,7 +19,7 @@
       </div>
       <div class="show-on-large-screen">
         <li class="info clamb-3">
-          <label>{{ feed.message }}</label>
+          <label>{{ feed.message || $t("empty") }}</label>
         </li>
       </div>
     </ul>
diff --git a/components/firebase/inputform.vue b/components/firebase/inputform.vue
index 56aaf9c52..6dbce852c 100644
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -1,41 +1,50 @@
 <template>
   <div>
     <ul>
-      <li>
-        <input
-          :aria-label="$t('label')"
-          type="text"
-          autofocus
-          v-model="message"
-          :placeholder="$t('paste_a_note')"
-          @keyup.enter="formPost"
-        />
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <input
-          :aria-label="$t('label')"
-          type="text"
-          autofocus
-          v-model="label"
-          :placeholder="$t('label')"
-          @keyup.enter="formPost"
-        />
-      </li>
-      <button
-        class="icon"
-        :disabled="!(this.message || this.label)"
-        value="Save"
-        @click="formPost"
-      >
-        <i class="material-icons">add</i>
-        <span>Add</span>
-      </button>
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            autofocus
+            v-model="message"
+            :placeholder="$t('paste_a_note')"
+            @keyup.enter="formPost"
+          />
+        </li>
+      </div>
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            autofocus
+            v-model="label"
+            :placeholder="$t('label')"
+            @keyup.enter="formPost"
+          />
+        </li>
+        <button
+          class="icon"
+          :disabled="!(this.message || this.label)"
+          value="Save"
+          @click="formPost"
+        >
+          <i class="material-icons">add</i>
+          <span>Add</span>
+        </button>
+      </div>
     </ul>
   </div>
 </template>
 
+<style scoped lang="scss">
+ul,
+ol {
+  flex-direction: column;
+}
+</style>
+
 <script>
 import { fb } from "../../functions/fb";
 
diff --git a/components/graphql/argument.vue b/components/graphql/argument.vue
index d70f0d01c..e70b2961e 100644
--- a/components/graphql/argument.vue
+++ b/components/graphql/argument.vue
@@ -8,7 +8,7 @@
   </span>
 </template>
 
-<style></style>
+<style scoped lang="scss"></style>
 
 <script>
 import typelink from "./typelink";
diff --git a/components/graphql/field.vue b/components/graphql/field.vue
index a6f5a6f6d..077077555 100644
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -28,7 +28,7 @@
   </div>
 </template>
 
-<style>
+<style scoped lang="scss">
 .field-box {
   padding: 16px;
   margin: 4px;
diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 0c93299a2..c714d6f69 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<style>
+<style scoped lang="scss">
 .type-box {
   padding: 16px;
   margin: 4px 0;
diff --git a/components/graphql/typelink.vue b/components/graphql/typelink.vue
index 2d1c97d8e..7ac56d20f 100644
--- a/components/graphql/typelink.vue
+++ b/components/graphql/typelink.vue
@@ -2,7 +2,7 @@
   <span class="typelink" @click="jumpToType">{{ typeString }}</span>
 </template>
 
-<style>
+<style scoped lang="scss">
 .typelink {
   color: var(--ac-color);
   font-family: "Roboto Mono", monospace;
diff --git a/components/history.vue b/components/history.vue
index 7a2820ea4..342dca8c3 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -1,14 +1,19 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('history')" ref="history">
     <ul>
-      <li id="filter-history">
-        <input
-          aria-label="Search"
-          type="text"
-          :placeholder="$t('search_history')"
-          v-model="filterText"
-        />
-      </li>
+      <div class="show-on-large-screen">
+        <li id="filter-history">
+          <input
+            aria-label="Search"
+            type="text"
+            :placeholder="$t('search')"
+            v-model="filterText"
+          />
+        </li>
+        <button class="icon">
+          <i class="material-icons">search</i>
+        </button>
+      </div>
     </ul>
     <virtual-list
       class="virtual-list"
diff --git a/components/section.vue b/components/section.vue
index cd5e41e66..368da65c7 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -15,7 +15,7 @@
   </fieldset>
 </template>
 
-<style>
+<style scoped lang="scss">
 fieldset.no-colored-frames legend {
   color: var(--fg-color);
 }
diff --git a/lang/en-US.js b/lang/en-US.js
index 9a734df10..0847e18f6 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -111,7 +111,7 @@ export default {
   no_label: "No label",
   prerequest_script: "Pre-Request Script",
   no_prerequest_script: "No pre-request script",
-  search_history: "search history",
+  search: "Search",
   history_empty: "History is empty",
   history_deleted: "History Deleted",
   clear: "Clear",
diff --git a/lang/es-ES.js b/lang/es-ES.js
index 89953c08d..147cdcfb2 100644
--- a/lang/es-ES.js
+++ b/lang/es-ES.js
@@ -111,7 +111,7 @@ export default {
   no_label: "Sin etiqueta",
   prerequest_script: "Pre-Request Script",
   no_prerequest_script: "Script sin pre-requisito",
-  search_history: "buscar historial",
+  search: "buscar historial",
   history_empty: "Historial vacío",
   history_deleted: "Historial borrado",
   clear: "Limpiar",
diff --git a/lang/fr-FR.js b/lang/fr-FR.js
index ca18098e2..3dcb61d69 100644
--- a/lang/fr-FR.js
+++ b/lang/fr-FR.js
@@ -111,7 +111,7 @@ export default {
   no_label: "Aucun label",
   prerequest_script: "Pre-Request Script",
   no_prerequest_script: "No pre-request script",
-  search_history: "Historique de la recherche",
+  search: "Historique de la recherche",
   history_empty: "L'historique est vide",
   history_deleted: "Historique supprimé",
   clear: "Nettoyer",
diff --git a/lang/ja-JP.js b/lang/ja-JP.js
index c1844b914..578396afa 100644
--- a/lang/ja-JP.js
+++ b/lang/ja-JP.js
@@ -111,7 +111,7 @@ export default {
   no_label: "ラベル無し",
   prerequest_script: "プレリクエストスクリプト",
   no_prerequest_script: "プレリクエストスクリプト無し",
-  search_history: "検索履歴",
+  search: "検索履歴",
   history_empty: "履歴が空です",
   history_deleted: "履歴が削除された",
   clear: "クリア",
diff --git a/pages/index.vue b/pages/index.vue
index b7c1ba214..300204ede 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -934,21 +934,18 @@
           <input id="sync-tab" type="radio" name="side" />
           <label for="sync-tab">{{ $t("notes") }}</label>
           <div class="tab">
-            <pw-section
-              v-if="fb.currentUser"
-              class="pink"
-              :label="$t('notes')"
-              ref="sync"
-            >
-              <inputform />
-              <ballsfeed />
-            </pw-section>
-            <pw-section v-else>
-              <ul>
-                <li>
-                  <label>{{ $t("login_first") }}</label>
-                </li>
-              </ul>
+            <pw-section class="pink" :label="$t('notes')" ref="sync">
+              <div v-if="fb.currentUser">
+                <inputform />
+                <ballsfeed />
+              </div>
+              <div v-else>
+                <ul>
+                  <li>
+                    <label>{{ $t("login_first") }}</label>
+                  </li>
+                </ul>
+              </div>
             </pw-section>
           </div>
         </section>