From e60e8545a176d8fc12b1b784c8675004ba4cfc0c Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 26 Jul 2021 21:39:39 +0530
Subject: [PATCH] refactor(ui): better color schemes and empty states

---
 assets/scss/styles.scss                  |  2 +-
 assets/scss/themes.scss                  | 36 +++++++-------
 components/app/Shortcuts.vue             | 60 ++++++++++++------------
 components/collections/graphql/index.vue |  3 +-
 components/collections/index.vue         |  3 +-
 components/docs/Request.vue              |  2 +-
 components/environments/Edit.vue         |  4 +-
 components/firebase/Login.vue            | 12 +++--
 components/http/BodyParameters.vue       |  6 +--
 components/http/Headers.vue              | 15 ++++--
 components/http/Parameters.vue           | 15 ++++--
 components/realtime/Websocket.vue        |  4 +-
 components/smart/AceEditor.vue           |  1 -
 components/teams/Edit.vue                |  4 +-
 helpers/platformutils.js                 |  4 ++
 lang/en-US.json                          |  9 ++--
 pages/graphql.vue                        | 19 +++++++-
 17 files changed, 111 insertions(+), 88 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 5ccd57ca..f2a2976a 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -167,7 +167,7 @@ hr {
   @apply truncate;
   @apply rounded;
   @apply text-xs;
-  @apply font-semibold font-mono;
+  @apply font-semibold;
   @apply border border-divider;
   @apply transition;
   @apply focus:(outline-none border-accent);
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 33e0869f..c6fb51ee 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -8,7 +8,7 @@
   // Background color
   --primary-color: theme("colors.true-gray.900");
   // Light Background color
-  --primary-light-color: theme("colors.true-gray.800");
+  --primary-light-color: theme("colors.dark.600");
   // Dark Background color
   --primary-dark-color: theme("colors.dark.900");
   // Text color
@@ -18,11 +18,11 @@
   // Dark Text color
   --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
-  --divider-color: theme("colors.true-gray.700");
+  --divider-color: theme("colors.true-gray.800");
   // Light Border color
-  --divider-light-color: theme("colors.dark.600");
+  --divider-light-color: theme("colors.dark.500");
   // Dark Border color
-  --divider-dark-color: theme("colors.dark.200");
+  --divider-dark-color: theme("colors.dark.300");
   // Error color
   --error-color: theme("colors.dark.800");
   // Tooltip color
@@ -35,25 +35,25 @@
   // Background color
   --primary-color: theme("colors.white");
   // Light Background color
-  --primary-light-color: theme("colors.true-gray.50");
+  --primary-light-color: theme("colors.blue-gray.50");
   // Dark Background color
-  --primary-dark-color: theme("colors.true-gray.100");
+  --primary-dark-color: theme("colors.blue-gray.100");
   // Text color
-  --secondary-color: theme("colors.true-gray.600");
+  --secondary-color: theme("colors.blue-gray.600");
   // Light Text color
-  --secondary-light-color: theme("colors.true-gray.500");
+  --secondary-light-color: theme("colors.blue-gray.500");
   // Dark Text color
-  --secondary-dark-color: theme("colors.true-gray.800");
+  --secondary-dark-color: theme("colors.blue-gray.700");
   // Border color
-  --divider-color: theme("colors.true-gray.200");
+  --divider-color: theme("colors.blue-gray.200");
   // Light Border color
-  --divider-light-color: theme("colors.true-gray.100");
+  --divider-light-color: theme("colors.blue-gray.100");
   // Dark Border color
-  --divider-dark-color: theme("colors.true-gray.300");
+  --divider-dark-color: theme("colors.blue-gray.300");
   // Error color
-  --error-color: theme("colors.true-gray.700");
+  --error-color: theme("colors.blue-gray.700");
   // Tooltip color
-  --tooltip-color: theme("colors.true-gray.800");
+  --tooltip-color: theme("colors.blue-gray.800");
   // Editor theme
   --editor-theme: "textmate";
 }
@@ -62,9 +62,9 @@
   // Background color
   --primary-color: theme("colors.dark.900");
   // Light Background color
-  --primary-light-color: theme("colors.dark.800");
+  --primary-light-color: theme("colors.true-gray.900");
   // Dark Background color
-  --primary-dark-color: theme("colors.true-gray.900");
+  --primary-dark-color: theme("colors.dark.800");
   // Text color
   --secondary-color: theme("colors.true-gray.400");
   // Light Text color
@@ -74,9 +74,9 @@
   // Border color
   --divider-color: theme("colors.true-gray.800");
   // Light Border color
-  --divider-light-color: theme("colors.true-gray.900");
+  --divider-light-color: theme("colors.dark.700");
   // Dark Border color
-  --divider-dark-color: theme("colors.dark.200");
+  --divider-dark-color: theme("colors.dark.300");
   // Error color
   --error-color: theme("colors.dark.800");
   // Tooltip color
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 8a39eafb..063517ef 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -20,25 +20,14 @@
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
       </div>
-      <div class="search-wrapper">
+      <!-- <div class="search-wrapper">
         <input
           v-model="filterText"
           type="search"
-          class="
-            bg-primaryLight
-            border-b border-dividerLight
-            flex
-            font-semibold font-mono
-            w-full
-            py-2
-            pr-2
-            pl-8
-            focus:outline-none
-            truncate
-          "
+          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 focus:outline-none truncate"
           :placeholder="$t('search')"
         />
-      </div>
+      </div> -->
       <div
         class="
           divide-y divide-dividerLight
@@ -52,7 +41,7 @@
           :key="`map-${mapIndex}`"
           class="space-y-4 p-4"
         >
-          <h5 class="font-bold text-secondaryDark text-base">
+          <h5 class="font-bold text-secondaryDark text-sm">
             {{ map.section }}
           </h5>
           <div
@@ -66,7 +55,7 @@
             <span
               v-for="(key, keyIndex) in shortcut.keys"
               :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
-              class="bg-dividerLight rounded ml-1 py-1 px-2 inline-flex"
+              class="shortcut-key"
             >
               {{ key }}
             </span>
@@ -78,7 +67,10 @@
 </template>
 
 <script>
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import {
+  getPlatformSpecialKey,
+  getPlatformAlternateKey,
+} from "~/helpers/platformutils"
 
 export default {
   props: {
@@ -92,19 +84,19 @@ export default {
           section: "General",
           shortcuts: [
             {
-              keys: [this.getSpecialKey(), "G"],
+              keys: [getPlatformSpecialKey(), "G"],
               label: this.$t("send_request"),
             },
             {
-              keys: [this.getSpecialKey(), "S"],
+              keys: [getPlatformSpecialKey(), "S"],
               label: this.$t("save_to_collections"),
             },
             {
-              keys: [this.getSpecialKey(), "K"],
+              keys: [getPlatformSpecialKey(), "K"],
               label: this.$t("copy_request_link"),
             },
             {
-              keys: [this.getSpecialKey(), "I"],
+              keys: [getPlatformSpecialKey(), "I"],
               label: this.$t("reset_request"),
             },
           ],
@@ -113,31 +105,31 @@ export default {
           section: "Request",
           shortcuts: [
             {
-              keys: ["Alt", "↑"],
+              keys: [getPlatformAlternateKey(), "↑"],
               label: this.$t("select_next_method"),
             },
             {
-              keys: ["Alt", "↓"],
+              keys: [getPlatformAlternateKey(), "↓"],
               label: this.$t("select_previous_method"),
             },
             {
-              keys: ["Alt", "G"],
+              keys: [getPlatformAlternateKey(), "G"],
               label: this.$t("select_get_method"),
             },
             {
-              keys: ["Alt", "H"],
+              keys: [getPlatformAlternateKey(), "H"],
               label: this.$t("select_head_method"),
             },
             {
-              keys: ["Alt", "P"],
+              keys: [getPlatformAlternateKey(), "P"],
               label: this.$t("select_post_method"),
             },
             {
-              keys: ["Alt", "U"],
+              keys: [getPlatformAlternateKey(), "U"],
               label: this.$t("select_put_method"),
             },
             {
-              keys: ["Alt", "X"],
+              keys: [getPlatformAlternateKey(), "X"],
               label: this.$t("select_delete_method"),
             },
           ],
@@ -151,10 +143,20 @@ export default {
     },
   },
   methods: {
-    getSpecialKey: getPlatformSpecialKey,
     close() {
       this.$emit("close")
     },
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 46035345..a258d4ef 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -7,9 +7,8 @@
       class="flex flex-col top-8 z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
-      <div class="search-wrapper">
+      <div v-if="showCollActions" class="search-wrapper">
         <input
-          v-if="showCollActions"
           v-model="filterText"
           type="search"
           :placeholder="$t('search')"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 45749157..2d7521ff 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -7,9 +7,8 @@
       class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
       :class="{ '!top-8': !saveRequest && !doc }"
     >
-      <div class="search-wrapper">
+      <div v-if="!saveRequest" class="search-wrapper">
         <input
-          v-if="!saveRequest"
           v-model="filterText"
           type="search"
           :placeholder="$t('search')"
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
index 6c8cd403..7421e779 100644
--- a/components/docs/Request.vue
+++ b/components/docs/Request.vue
@@ -137,7 +137,7 @@ export default {
   @apply p-4;
   @apply m-0;
   @apply text-secondaryLight;
-  @apply border-b border-dashed border-divider;
+  @apply border-b border-divider;
 
   &:last-child {
     @apply border-b-0;
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index f4dfc5fd..ee692019 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -43,8 +43,8 @@
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
             class="
-              divide-x divide-dashed divide-divider
-              border-b border-dashed border-divider
+              divide-x divide-dividerLight
+              border-b border-dividerLight
               flex
             "
             :class="{ 'border-t': index == 0 }"
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index c0ed2b23..bac8709b 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -27,17 +27,17 @@
         />
       </div>
       <div v-if="mode === 'email'" class="flex flex-col space-y-2">
-        <div class="flex items-center">
-          <label for="email" class="flex px-4 items-center">
+        <div class="flex relative items-center">
+          <label for="email" class="flex px-4 absolute items-center">
             <i class="opacity-75 material-icons">mail</i>
           </label>
           <input
             id="email"
             v-model="form.email"
-            class="rounded flex outline-none flex-1 py-2 px-4"
+            class="input !pl-12"
             type="email"
             name="email"
-            placeholder="enter your email"
+            :placeholder="$t('email')"
             autocomplete="email"
             required
             spellcheck="false"
@@ -62,7 +62,9 @@
       </div>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
         <div class="flex flex-col max-w-md justify-center items-center">
-          <i class="text-accent text-4xl material-icons"> verified </i>
+          <i class="text-accent material-icons !text-4xl">
+            mark_email_unread
+          </i>
           <h3 class="font-bold my-2 text-center text-lg">
             {{ $t("we_sent_magic_link") }}
           </h3>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index ec5bd3f7..4d6fe675 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -28,11 +28,7 @@
     <div
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
-      class="
-        divide-x divide-dashed divide-divider
-        border-b border-dashed border-divider
-        flex
-      "
+      class="divide-x divide-dividerLight border-b border-dividerLight flex"
       :class="{ 'border-t': index == 0 }"
     >
       <input
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 6c84f361..770a4ac8 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -34,11 +34,7 @@
     <div
       v-for="(header, index) in headers$"
       :key="`header-${index}`"
-      class="
-        divide-x divide-dashed divide-divider
-        border-b border-dashed border-divider
-        flex
-      "
+      class="divide-x divide-dividerLight border-b border-dividerLight flex"
       :class="{ 'border-t': index == 0 }"
     >
       <SmartAutoComplete
@@ -113,6 +109,15 @@
         />
       </div>
     </div>
+    <div
+      v-if="headers$.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">post_add</i>
+      <span class="text-center">
+        {{ $t("headers_empty") }}
+      </span>
+    </div>
   </AppSection>
 </template>
 
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 820ffd5f..dadd0996 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -34,11 +34,7 @@
     <div
       v-for="(param, index) in params$"
       :key="`param-${index}`"
-      class="
-        divide-x divide-dashed divide-divider
-        border-b border-dashed border-divider
-        flex
-      "
+      class="divide-x divide-dividerLight border-b border-dividerLight flex"
       :class="{ 'border-t': index == 0 }"
     >
       <input
@@ -121,6 +117,15 @@
         />
       </div>
     </div>
+    <div
+      v-if="params$.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">post_add</i>
+      <span class="text-center">
+        {{ $t("parameters_empty") }}
+      </span>
+    </div>
   </AppSection>
 </template>
 
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 3a8cee05..136c5866 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -76,8 +76,8 @@
             v-for="(protocol, index) of protocols"
             :key="`protocol-${index}`"
             class="
-              divide-x divide-dashed divide-divider
-              border-b border-dashed border-divider
+              divide-x divide-dividerLight
+              border-b border-dividerLight
               flex
             "
             :class="{ 'border-t': index == 0 }"
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 08c9c69d..7fb2adc5 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -9,7 +9,6 @@
         flex flex-nowrap
         font-mono
         flex-1
-        shadow-lg
         py-1
         px-4
         bottom-0
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 1b5e2b65..4aff70af 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -25,7 +25,7 @@
           :key="`member-${index}`"
           class="
             divide-y divide-dashed divide-divider
-            border-b border-dashed border-divider
+            border-b border-divider
             md:divide-x md:divide-y-0
           "
           :class="{ 'border-t': index == 0 }"
@@ -104,7 +104,7 @@
           :key="`member-${index}`"
           class="
             divide-y divide-dashed divide-divider
-            border-b border-dashed border-divider
+            border-b border-divider
             md:divide-x md:divide-y-0
           "
         >
diff --git a/helpers/platformutils.js b/helpers/platformutils.js
index 8c285c1d..0cc1d691 100644
--- a/helpers/platformutils.js
+++ b/helpers/platformutils.js
@@ -1,3 +1,7 @@
 export function getPlatformSpecialKey() {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl"
 }
+
+export function getPlatformAlternateKey() {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌥" : "Alt"
+}
diff --git a/lang/en-US.json b/lang/en-US.json
index 164a6773..15e37180 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -165,7 +165,6 @@
   "log": "Log",
   "no_url": "No URL",
   "run": "Run",
-  "copy": "Copy Query",
   "loading": "Loading...",
   "fetching": "Fetching...",
   "waiting_send_req": "Waiting to send request",
@@ -192,10 +191,6 @@
   "import_json": "Import from JSON",
   "download_file": "Download file",
   "upload_file": "Upload file",
-  "copy": "Copy response",
-  "copy": "Copy code",
-  "copy": "Copy schema",
-  "copy": "Copy variables",
   "use_request": "Use request",
   "documentation": "Documentation",
   "docs": "Docs",
@@ -355,5 +350,7 @@
   "zen_mode": "Zen mode",
   "notifications": "Notifications",
   "connect_graphql_endpoint": "Connect to a GraphQL endpoint",
-  "copy": "Copy"
+  "copy": "Copy",
+  "parameters_empty": "Parameters are empty",
+  "headers_empty": "Headers are empty"
 }
diff --git a/pages/graphql.vue b/pages/graphql.vue
index f6dff6d9..ca4772d0 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -193,8 +193,8 @@
                     v-for="(header, index) in headers"
                     :key="`header-${index}`"
                     class="
-                      divide-x divide-dashed divide-divider
-                      border-b border-dashed border-divider
+                      divide-x divide-dividerLight
+                      border-b border-dividerLight
                       flex
                     "
                     :class="{ 'border-t': index == 0 }"
@@ -271,6 +271,21 @@
                       />
                     </div>
                   </div>
+                  <div
+                    v-if="headers.length === 0"
+                    class="
+                      flex flex-col
+                      text-secondaryLight
+                      p-4
+                      items-center
+                      justify-center
+                    "
+                  >
+                    <i class="opacity-75 pb-2 material-icons">post_add</i>
+                    <span class="text-center">
+                      {{ $t("headers_empty") }}
+                    </span>
+                  </div>
                 </AppSection>
               </SmartTab>
             </SmartTabs>