refactor(ui): better color schemes and empty states

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);

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

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>

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')"

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')"

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;

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 }"

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>

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

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>
 

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>
 

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 }"

components/smart/AceEditor.vue

@@ -9,7 +9,6 @@
         flex flex-nowrap
         font-mono
         flex-1
-        shadow-lg
         py-1
         px-4
         bottom-0

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
           "
         >

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"
+}

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"
 }

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>