refactor: improve ui consistency

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)

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

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>