refactor: cleanup documentation page

components/collections/my/Request.vue

@@ -50,7 +50,7 @@
         <span class="truncate"> {{ request.name }} </span>
       </span>
       <ButtonSecondary
-        v-if="!saveRequest"
+        v-if="!saveRequest && !doc"
         v-tippy="{ theme: 'tooltip' }"
         icon="replay"
         :title="$t('restore')"

components/collections/teams/Request.vue

@@ -43,7 +43,7 @@
         <span class="truncate"> {{ request.name }} </span>
       </span>
       <ButtonSecondary
-        v-if="!saveRequest"
+        v-if="!saveRequest && !doc"
         v-tippy="{ theme: 'tooltip' }"
         icon="replay"
         :title="$t('restore')"

lang/en-US.json

@@ -203,8 +203,8 @@
   "variable_count": "Variable {count}",
   "value_count": "Value {count}",
   "send_request_first": "Send a request first",
-  "generate_docs": "Generate Documentation",
+  "generate_docs": "Generate documentation",
-  "generate_docs_message": "Import any Hoppscotch Collection to Generate Documentation on-the-go.",
+  "generate_docs_message": "Import any Hoppscotch collection to generate API documentation on-the-go.",
   "generate_docs_first": "Generate documentation first",
   "docs_generated": "Documentation generated",
   "import_collections": "Import collections",

pages/documentation.vue

@@ -1,17 +1,40 @@
 <template>
-  <div>
   <Splitpanes :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
-              <div class="flex flex-col">
+            <div class="flex p-4 items-start justify-between">
-                <label>{{ $t("collection") }}</label>
+              <label class="font-semibold">
-                <p>
                 {{ $t("generate_docs_message") }}
-                </p>
+              </label>
-                <div class="flex flex-1">
+              <span
-                  <label for="collectionUpload">
+                class="
+                  bg-accentLight
+                  rounded
+                  font-semibold
+                  text-primary
+                  py-1
+                  px-2
+                  inline-flex
+                "
+              >
+                BETA
+              </span>
+            </div>
+            <div
+              class="
+                bg-primary
+                border-b border-dividerLight
+                flex
+                top-0
+                z-10
+                items-start
+                justify-between
+                sticky
+              "
+            >
+              <label for="collectionUpload" class="font-semibold">
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   title="JSON"
@@ -27,7 +50,6 @@
                 type="file"
                 @change="uploadCollection"
               />
-                  <div>
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('clear')"
@@ -35,22 +57,32 @@
                 @click.native="collectionJSON = '[]'"
               />
             </div>
-                </div>
             <SmartAceEditor
               v-model="collectionJSON"
               :lang="'json'"
               :lint="false"
               :options="{
-                    maxLines: 16,
+                maxLines: Infinity,
-                    minLines: 8,
+                minLines: 16,
                 fontSize: '12px',
                 autoScrollEditorIntoView: true,
                 showPrintMargin: false,
                 useWorker: false,
               }"
             />
-                <ButtonSecondary
+            <div
-                  icon="topic"
+              class="
+                bg-primary
+                flex
+                p-4
+                bottom-0
+                z-10
+                justify-between
+                items-start
+                sticky
+              "
+            >
+              <ButtonPrimary
                 :label="$t('generate_docs')"
                 @click.native="getDoc"
               />
@@ -60,22 +92,48 @@
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="documentation">
             <div class="flex flex-col">
-                <label>{{ $t("documentation") }}</label>
+              <div
-                <p v-if="items.length === 0">
+                v-if="items.length === 0"
+                class="
+                  flex flex-col
+                  text-secondaryLight
+                  p-4
+                  items-center
+                  justify-center
+                "
+              >
+                <i class="opacity-75 pb-2 material-icons">topic</i>
+                <span class="text-center">
                   {{ $t("generate_docs_first") }}
-                </p>
+                </span>
-                <div v-else class="flex flex-1">
+              </div>
+              <div
+                v-else
+                class="
+                  bg-primary
+                  border-b border-dividerLight
+                  flex flex-1
+                  p-4
+                  top-0
+                  z-10
+                  sticky
+                "
+              >
                 <div
                   v-tippy="{ theme: 'tooltip' }"
                   :title="
                     !currentUser
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
+                      ? `${$t('login_with_github_to')} ${$t(
+                          'create_secret_gist'
+                        ).toLowerCase()}`
                       : currentUser.provider !== 'github.com'
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
+                      ? `${$t('login_with_github_to')} ${$t(
-                        : null
+                          'create_secret_gist'
+                        ).toLowerCase()}`
+                      : 'Beta'
                   "
                 >
-                    <ButtonSecondary
+                  <ButtonPrimary
                     :disabled="
                       !currentUser
                         ? true
@@ -83,19 +141,16 @@
                         ? true
                         : false
                     "
-                      icon="assignment"
+                    :label="$t('create_secret_gist')"
-                      label="$t('create_secret_gist')"
                     @click.native="createDocsGist"
                   />
                 </div>
               </div>
-                <div>
+              <div
-                  <span
                 v-for="(collection, index) in items"
                 :key="`collection-${index}`"
               >
                 <DocsCollection :collection="collection" />
-                  </span>
               </div>
             </div>
           </AppSection>
@@ -119,7 +174,6 @@
       </aside>
     </Pane>
   </Splitpanes>
-  </div>
 </template>
 
 <script>