refactor(ui): improved empty state for env variables and response sections

components/environments/Edit.vue

@@ -88,6 +88,26 @@
               />
             </div>
           </div>
+          <div
+            v-if="vars.length === 0"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <i class="opacity-75 pb-2 material-icons">layers</i>
+            <span class="text-center pb-4">
+              {{ $t("environments_empty") }}
+            </span>
+            <ButtonSecondary
+              :label="$t('add_new')"
+              outline
+              @click.native="addEnvironmentVariable"
+            />
+          </div>
         </div>
       </div>
     </template>

components/environments/Environment.vue

@@ -24,39 +24,41 @@
         {{ environment.name }}
       </span>
     </span>
-    <tippy
+    <span>
-      ref="options"
+      <tippy
-      interactive
+        ref="options"
-      tabindex="-1"
+        interactive
-      trigger="click"
+        tabindex="-1"
-      theme="popover"
+        trigger="click"
-      arrow
+        theme="popover"
-    >
+        arrow
-      <template #trigger>
+      >
-        <ButtonSecondary
+        <template #trigger>
-          v-tippy="{ theme: 'tooltip' }"
+          <ButtonSecondary
-          :title="$t('more')"
+            v-tippy="{ theme: 'tooltip' }"
-          icon="more_vert"
+            :title="$t('more')"
+            icon="more_vert"
+          />
+        </template>
+        <SmartItem
+          icon="create"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-environment')
+            $refs.options.tippy().hide()
+          "
         />
-      </template>
+        <SmartItem
-      <SmartItem
+          icon="delete"
-        icon="create"
+          color="red"
-        :label="$t('edit')"
+          :label="$t('delete')"
-        @click.native="
+          @click.native="
-          $emit('edit-environment')
+            confirmRemove = true
-          $refs.options.tippy().hide()
+            $refs.options.tippy().hide()
-        "
+          "
-      />
+        />
-      <SmartItem
+      </tippy>
-        icon="delete"
+    </span>
-        color="red"
-        :label="$t('delete')"
-        @click.native="
-          confirmRemove = true
-          $refs.options.tippy().hide()
-        "
-      />
-    </tippy>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_environment')"

components/http/ResponseMeta.vue

@@ -9,10 +9,29 @@
         justify-center
       "
     >
-      <i class="opacity-75 pb-2 material-icons">send</i>
+      <div class="flex space-x-2 pb-8">
-      <span class="text-center pb-4">
+        <div class="flex flex-col space-y-4 items-end">
-        {{ $t("waiting_send_req") }}
+          <span class="flex flex-1 items-center">{{ $t("send_request") }}</span>
-      </span>
+          <span class="flex flex-1 items-center">{{
+            $t("reset_request")
+          }}</span>
+          <span class="flex flex-1 items-center"> Show all Shortcuts </span>
+        </div>
+        <div class="flex flex-col space-y-4">
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">G</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">I</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">?</span>
+          </div>
+        </div>
+      </div>
       <ButtonSecondary
         :label="$t('documentation')"
         to="https://docs.hoppscotch.io"
@@ -48,6 +67,7 @@
 
 <script>
 import findStatusGroup from "~/helpers/findStatusGroup"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
 export default {
   props: {
@@ -61,5 +81,19 @@ export default {
       return findStatusGroup(this.response.statusCode)
     },
   },
+  methods: {
+    getSpecialKey: getPlatformSpecialKey,
+  },
 }
 </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>