feat: minor ui tweaks

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
-                :label="$t('authentication')"
-                ref="authentication"
-                no-legend
-              >
+              <AppSection :label="$t('authentication')" ref="authentication">
                 <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">