From 5b816422d74bc6108dbd9f35192ad57d3552c26e Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 26 Feb 2022 17:39:57 +0530
Subject: [PATCH] refactor: improve ui consistency

---
 .../hoppscotch-app/components/collections/ChooseType.vue   | 6 ++++--
 packages/hoppscotch-app/components/environments/index.vue  | 7 ++++---
 packages/hoppscotch-app/components/graphql/Response.vue    | 6 ++++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/ChooseType.vue b/packages/hoppscotch-app/components/collections/ChooseType.vue
index f784165cf..77a1b76d0 100644
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -28,13 +28,14 @@
               >
                 <ButtonSecondary
                   v-if="collectionsType.selectedTeam"
+                  svg="users"
                   :label="collectionsType.selectedTeam.name"
-                  class="flex-1 pr-8 rounded-none"
+                  class="flex-1 !justify-start pr-8 rounded-none"
                 />
                 <ButtonSecondary
                   v-else
                   :label="`${$t('collection.select_team')}`"
-                  class="flex-1 pr-8 rounded-none"
+                  class="flex-1 !justify-start pr-8 rounded-none"
                 />
               </span>
             </template>
@@ -46,6 +47,7 @@
                 team.id === collectionsType.selectedTeam?.id ? 'done' : ''
               "
               :active-info-icon="team.id === collectionsType.selectedTeam?.id"
+              svg="users"
               @click.native="
                 () => {
                   updateSelectedTeam(team)
diff --git a/packages/hoppscotch-app/components/environments/index.vue b/packages/hoppscotch-app/components/environments/index.vue
index c885e51b4..e6c0259bd 100644
--- a/packages/hoppscotch-app/components/environments/index.vue
+++ b/packages/hoppscotch-app/components/environments/index.vue
@@ -11,12 +11,12 @@
             <ButtonSecondary
               v-if="selectedEnvironmentIndex !== -1"
               :label="environments[selectedEnvironmentIndex].name"
-              class="flex-1 pr-8 rounded-none"
+              class="flex-1 !justify-start pr-8 rounded-none"
             />
             <ButtonSecondary
               v-else
-              :label="`${$t('environment.no_environment')}`"
-              class="flex-1 pr-8 rounded-none"
+              :label="`${$t('environment.select')}`"
+              class="flex-1 !justify-start pr-8 rounded-none"
             />
           </span>
         </template>
@@ -31,6 +31,7 @@
             }
           "
         />
+        <hr />
         <SmartItem
           v-for="(gen, index) in environments"
           :key="`gen-${index}`"
diff --git a/packages/hoppscotch-app/components/graphql/Response.vue b/packages/hoppscotch-app/components/graphql/Response.vue
index 067ea485f..8cc2fc326 100644
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="flex flex-col flex-1 h-full">
+  <div
+    class="sticky top-0 z-10 flex items-center p-4 overflow-auto bg-primary hide-scrollbar whitespace-nowrap"
+  >
     <div
       v-if="responseString === 'loading'"
-      class="flex flex-col items-center justify-center p-4"
+      class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
     >
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>