feat: minor ui tweaks

components/app/Section.vue

@@ -26,7 +26,7 @@ export default Vue.extend({
     },
     noLegend: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   computed: {

components/collections/SaveRequest.vue

@@ -232,6 +232,7 @@ export default {
       this.hideModal()
     },
     hideModal() {
+      this.picked = null
       this.$emit("hide-modal")
     },
   },

components/collections/graphql/Collection.vue

@@ -36,7 +36,7 @@
         >
           <i class="material-icons">topic</i>
         </button>
-        <v-popover v-if="!savingMode">
+        <v-popover>
           <button v-tooltip.left="$t('more')" class="tooltip-target icon">
             <i class="material-icons">more_vert</i>
           </button>

components/collections/graphql/Folder.vue

@@ -28,7 +28,7 @@
           <span>{{ folder.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!savingMode">
+      <v-popover>
         <button v-tooltip.left="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>

components/collections/graphql/Request.vue

@@ -25,7 +25,7 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!savingMode">
+      <v-popover>
         <button v-tooltip="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>

components/collections/graphql/index.vue

@@ -1,12 +1,8 @@
 <template>
-  <AppSection
+  <AppSection ref="collections" :label="$t('collections')">
-    ref="collections"
-    class="yellow"
-    :label="$t('collections')"
-    no-legend
-  >
     <div class="show-on-large-screen">
       <input
+        v-if="showCollActions"
         v-model="filterText"
         aria-label="Search"
         type="search"
@@ -50,11 +46,7 @@
       @hide-modal="displayModalImportExport(false)"
     />
     <div class="border-b row-wrapper border-divider">
-      <button
+      <button class="icon" @click="displayModalAdd(true)">
-        v-if="showCollActions"
-        class="icon"
-        @click="displayModalAdd(true)"
-      >
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>

components/collections/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="collections" :label="$t('collections')" no-legend>
+  <AppSection ref="collections" :label="$t('collections')">
     <div class="show-on-large-screen">
       <input
         v-if="!saveRequest"
@@ -57,8 +57,7 @@
         v-if="
           collectionsType.type == 'team-collections' &&
           (collectionsType.selectedTeam == undefined ||
-            collectionsType.selectedTeam.myRole == 'VIEWER') &&
+            collectionsType.selectedTeam.myRole == 'VIEWER')
-          !saveRequest
         "
         class="icon"
         disabled
@@ -69,11 +68,7 @@
           <span>{{ $t("new") }}</span>
         </div>
       </button>
-      <button
+      <button v-else class="icon" @click="displayModalAdd(true)">
-        v-else-if="!saveRequest"
-        class="icon"
-        @click="displayModalAdd(true)"
-      >
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>

components/collections/my/Collection.vue

@@ -44,7 +44,7 @@
         >
           <i class="material-icons">check_box</i>
         </button>
-        <v-popover v-if="!saveRequest">
+        <v-popover>
           <button v-tooltip.left="$t('more')" class="tooltip-target icon">
             <i class="material-icons">more_vert</i>
           </button>

components/collections/my/Folder.vue

@@ -27,7 +27,7 @@
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button v-tooltip.left="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>

components/collections/my/Request.vue

@@ -27,7 +27,7 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button v-tooltip="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>

components/collections/teams/Collection.vue

@@ -33,7 +33,7 @@
         >
           <i class="material-icons">check_box</i>
         </button>
-        <v-popover v-if="!saveRequest">
+        <v-popover>
           <button
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tooltip.left="$t('more')"

components/collections/teams/Folder.vue

@@ -18,7 +18,7 @@
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tooltip.left="$t('more')"

components/collections/teams/Request.vue

@@ -17,7 +17,7 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tooltip="$t('more')"

components/environments/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <AppSection
+  <AppSection ref="environments" :label="$t('environments')">
-    ref="environments"
-    icon="history"
-    :label="$t('environments')"
-    no-legend
-  >
     <div class="show-on-large-screen">
       <span class="select-wrapper">
         <select

components/history/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="history" icon="history" :label="$t('history')" no-legend>
+  <AppSection ref="history" :label="$t('history')">
     <div class="show-on-large-screen">
       <input
         v-model="filterText"

components/http/Headers.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="headers" label="Headers" no-legend>
+  <AppSection ref="headers" label="Headers">
     <ul v-if="headers.length !== 0">
       <li>
         <div class="row-wrapper">

components/http/Notes.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="sync" :label="$t('notes')" no-legend>
+  <AppSection ref="sync" :label="$t('notes')">
     <div v-if="fb.currentUser">
       <FirebaseInputform />
       <FirebaseFeeds />

components/http/Parameters.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="parameters" label="Parameters" no-legend>
+  <AppSection ref="parameters" label="Parameters">
     <ul v-if="params.length !== 0">
       <li>
         <div class="row-wrapper">

components/http/Response.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="response" ref="response" :label="$t('response')" no-legend>
+  <AppSection id="response" ref="response" :label="$t('response')">
     <HttpResponseMeta :response="response" :active="active" />
     <div v-if="response.body && response.body !== $t('loading')">
       <LensesResponseBodyRenderer :response="response" />

components/realtime/Mqtt.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection :label="$t('request')" no-legend>
+    <AppSection :label="$t('request')">
       <ul>
         <li>
           <label for="mqtt-url">{{ $t("url") }}</label>
@@ -34,7 +34,7 @@
       </ul>
     </AppSection>
 
-    <AppSection :label="$t('communication')" no-legend>
+    <AppSection :label="$t('communication')">
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="log" />

components/realtime/Socketio.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
       <ul>
         <li>
           <label for="socketio-url">{{ $t("url") }}</label>
@@ -43,12 +43,7 @@
       </ul>
     </AppSection>
 
-    <AppSection
+    <AppSection id="response" ref="response" :label="$t('communication')">
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="communication.log" />

components/realtime/Sse.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
       <ul>
         <li>
           <label for="server">{{ $t("server") }}</label>
@@ -36,12 +36,7 @@
       </ul>
     </AppSection>
 
-    <AppSection
+    <AppSection id="response" ref="response" :label="$t('communication')">
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
       <ul>
         <li>
           <RealtimeLog :title="$t('events')" :log="events.log" />

components/realtime/Websocket.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
       <ul>
         <li>
           <label for="websocket-url">{{ $t("url") }}</label>
@@ -37,12 +37,7 @@
       </ul>
     </AppSection>
 
-    <AppSection
+    <AppSection id="response" ref="response" :label="$t('communication')">
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="communication.log" />

components/teams/index.vue

@@ -1,11 +1,5 @@
 <template>
-  <AppSection
+  <AppSection ref="teams" :label="$t('teams')">
-    ref="teams"
-    class="green"
-    icon="history"
-    :label="$t('teams')"
-    no-legend
-  >
     <div class="flex flex-col">
       <label>{{ $t("teams") }}</label>
       <div v-if="fb.currentUser"></div>

pages/doc.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection ref="import" :label="$t('import')" no-legend>
+        <AppSection ref="import" :label="$t('import')">
           <div class="flex flex-col">
             <label>{{ $t("collection") }}</label>
             <p class="info">
@@ -55,7 +55,7 @@
           </div>
         </AppSection>
 
-        <AppSection ref="documentation" :label="$t('documentation')" no-legend>
+        <AppSection ref="documentation" :label="$t('documentation')">
           <div class="flex flex-col">
             <label>{{ $t("documentation") }}</label>
             <p v-if="items.length === 0" class="info">

pages/graphql.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection ref="endpoint" :label="$t('endpoint')" no-legend>
+        <AppSection ref="endpoint" :label="$t('endpoint')">
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -37,7 +37,7 @@
           </ul>
         </AppSection>
 
-        <AppSection ref="headers" :label="$t('headers')" no-legend>
+        <AppSection ref="headers" :label="$t('headers')">
           <div class="flex flex-col">
             <label>{{ $t("headers") }}</label>
             <ul v-if="headers.length !== 0">
@@ -150,7 +150,7 @@
           </div>
         </AppSection>
 
-        <AppSection ref="schema" :label="$t('schema')" no-legend>
+        <AppSection ref="schema" :label="$t('schema')">
           <div class="row-wrapper">
             <label>{{ $t("schema") }}</label>
             <div v-if="schema">
@@ -212,7 +212,7 @@
           />
         </AppSection>
 
-        <AppSection ref="query" :label="$t('query')" no-legend>
+        <AppSection ref="query" :label="$t('query')">
           <div class="row-wrapper gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
@@ -266,7 +266,7 @@
           />
         </AppSection>
 
-        <AppSection ref="variables" :label="$t('variables')" no-legend>
+        <AppSection ref="variables" :label="$t('variables')">
           <div class="flex flex-col">
             <label>{{ $t("variables") }}</label>
             <SmartAceEditor
@@ -285,7 +285,7 @@
           </div>
         </AppSection>
 
-        <AppSection ref="response" :label="$t('response')" no-legend>
+        <AppSection ref="response" :label="$t('response')">
           <div class="flex flex-col">
             <label>{{ $t("response") }}</label>
             <div class="row-wrapper">
@@ -347,7 +347,7 @@
         >
           <SmartTabs>
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
-              <AppSection ref="docs" :label="$t('docs')" no-legend>
+              <AppSection ref="docs" :label="$t('docs')">
                 <section class="flex-col">
                   <input
                     v-model="graphqlFieldsFilterText"

pages/index.vue

@@ -3,7 +3,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection :label="$t('request')" ref="request" no-legend>
+        <AppSection :label="$t('request')" ref="request">
           <ul>
             <li class="shrink">
               <label for="method">{{ $t("method") }}</label>
@@ -253,11 +253,7 @@
             </SmartTab>
 
             <SmartTab :id="'authentication'" :label="$t('authentication')">
-              <AppSection
+              <AppSection :label="$t('authentication')" ref="authentication">
-                :label="$t('authentication')"
-                ref="authentication"
-                no-legend
-              >
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -358,7 +354,6 @@
 
               <AppSection
                 v-if="showTokenRequest"
-                class="red"
                 label="Access Token Request"
                 ref="accessTokenRequest"
               >
@@ -485,10 +480,8 @@
             >
               <AppSection
                 v-if="showPreRequestScript"
-                class="orange"
                 :label="$t('pre_request_script')"
                 ref="preRequest"
-                no-legend
               >
                 <ul>
                   <li>
@@ -527,10 +520,8 @@
             <SmartTab :id="'tests'" :label="$t('tests')">
               <AppSection
                 v-if="testsEnabled"
-                class="orange"
                 :label="$t('tests')"
                 ref="postRequestTests"
-                no-legend
               >
                 <ul>
                   <li>

pages/settings.vue

@@ -4,7 +4,7 @@
       <Teams />
     </div>
 
-    <AppSection ref="account" :label="$t('account')" no-legend>
+    <AppSection ref="account" :label="$t('account')">
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>
         <div v-if="fb.currentUser">
@@ -74,7 +74,7 @@
       </div>
     </AppSection>
 
-    <AppSection ref="theme" :label="$t('theme')" no-legend>
+    <AppSection ref="theme" :label="$t('theme')">
       <div class="flex flex-col">
         <label>{{ $t("theme") }}</label>
         <SmartColorModePicker />
@@ -91,7 +91,7 @@
       </div>
     </AppSection>
 
-    <AppSection ref="extensions" :label="$t('extensions')" no-legend>
+    <AppSection ref="extensions" :label="$t('extensions')">
       <div class="flex flex-col">
         <label>{{ $t("extensions") }}</label>
         <div class="row-wrapper">
@@ -113,7 +113,7 @@
       </div>
     </AppSection>
 
-    <AppSection ref="proxy" :label="$t('proxy')" no-legend>
+    <AppSection ref="proxy" :label="$t('proxy')">
       <div class="flex flex-col">
         <label>{{ $t("proxy") }}</label>
         <div class="row-wrapper">
@@ -184,7 +184,7 @@
       -->
     </AppSection>
 
-    <AppSection ref="experiments" :label="$t('experiments')" no-legend>
+    <AppSection ref="experiments" :label="$t('experiments')">
       <div class="flex flex-col">
         <label>{{ $t("experiments") }}</label>
         <p class="info">