refactor: request section

assets/scss/styles.scss

@@ -54,7 +54,7 @@ html {
 body {
   @apply bg-primary;
   @apply text-secondary;
-  @apply text-sm;
+  @apply !text-sm;
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
@@ -168,14 +168,15 @@ hr {
   @apply w-full;
   @apply px-4;
   @apply py-2;
-  @apply bg-primaryLight;
+  @apply bg-primary;
   @apply truncate;
   @apply rounded-lg;
   @apply font-semibold;
+  @apply border-2;
+  @apply border-divider;
+  @apply transition;
   @apply focus:outline-none;
-  @apply focus-visible:ring;
+  @apply focus:border-accent;
-  @apply focus-visible:ring-inset;
-  @apply focus-visible:ring-accent;
 }
 
 .input[type="file"],

components/app/Sidenav.vue

@@ -20,7 +20,6 @@ export default {
     return {
       primaryNavigation: [
         { target: "index", icon: "home", title: "Home" },
-        { target: "api", icon: "apps", title: "APIs" },
         { target: "realtime", icon: "language", title: "Realtime" },
         { target: "graphql", icon: "code", title: "GraphQL" },
         { target: "doc", icon: "book", title: "Docs" },

components/collections/ChooseType.vue

@@ -25,6 +25,7 @@
                 py-3
                 focus:outline-none
                 border-b border-dividerLight
+                font-medium
                 bg-primaryLight
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"

components/collections/graphql/Request.vue

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

components/collections/graphql/index.vue

@@ -1,6 +1,13 @@
 <template>
-  <AppSection label="collections">
+  <AppSection
-    <div class="flex flex-col sticky top-10 z-10 bg-primary">
+    label="collections"
+    class=""
+    :class="{ 'rounded-lg border-2 border-divider': savingMode }"
+  >
+    <div
+      class="flex flex-col sticky top-10 z-10"
+      :class="{ 'bg-primary': !savingMode }"
+    >
       <input
         v-if="showCollActions"
         v-model="filterText"
@@ -12,6 +19,7 @@
           text-xs
           border-b border-dividerLight
           flex flex-1
+          font-medium
           bg-primaryLight
           focus:outline-none
         "

components/collections/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <AppSection label="collections">
+  <AppSection
-    <div class="flex flex-col sticky top-10 z-10 bg-primary">
+    label="collections"
+    :class="{ 'rounded-lg border-2 border-divider': saveRequest }"
+  >
+    <div
+      class="flex flex-col sticky top-10 z-10"
+      :class="{ 'bg-primary': !saveRequest }"
+    >
       <input
         v-if="!saveRequest"
         v-model="filterText"
@@ -12,6 +18,7 @@
           text-xs
           border-b border-dividerLight
           flex flex-1
+          font-medium
           bg-primaryLight
           focus:outline-none
         "

components/collections/my/Request.vue

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

components/collections/teams/Request.vue

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

components/environments/index.vue

@@ -13,6 +13,7 @@
             py-3
             focus:outline-none
             border-b border-dividerLight
+            font-medium
             bg-primaryLight
           "
         >

components/history/index.vue

@@ -13,7 +13,15 @@
       <input
         v-model="filterText"
         type="search"
-        class="px-4 py-3 text-xs flex flex-1 bg-primaryLight focus:outline-none"
+        class="
+          px-4
+          py-3
+          text-xs
+          flex flex-1
+          font-medium
+          bg-primaryLight
+          focus:outline-none
+        "
         :placeholder="$t('search')"
       />
       <ButtonSecondary

components/http/Parameters.vue

@@ -1,10 +1,12 @@
 <template>
   <AppSection label="parameters">
-    <ul v-if="params.length !== 0">
+    <div
-      <li>
+      v-if="params.length !== 0"
-        <div class="flex flex-1">
+      class="flex flex-1 items-center justify-between pl-4"
-          <label for="paramList">{{ $t("parameter_list") }}</label>
+    >
-          <div>
+      <label for="paramList" class="font-semibold text-xs">
+        {{ $t("parameter_list") }}
+      </label>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('clear')"
@@ -12,13 +14,11 @@
         @click.native="clearContent('parameters', $event)"
       />
     </div>
-        </div>
+    <div
-      </li>
-    </ul>
-    <ul
       v-for="(param, index) in params"
       :key="index"
       class="
+        flex
         border-b border-dashed
         divide-y
         md:divide-x
@@ -28,9 +28,16 @@
       "
       :class="{ 'border-t': index == 0 }"
     >
-      <li>
       <input
-          class="input"
+        class="
+          px-4
+          py-3
+          text-xs
+          flex flex-1
+          font-semibold
+          bg-primaryLight
+          focus:outline-none
+        "
         :placeholder="$t('parameter_count', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
@@ -42,10 +49,16 @@
           })
         "
       />
-      </li>
-      <li>
       <input
-          class="input"
+        class="
+          px-4
+          py-3
+          text-xs
+          flex flex-1
+          font-semibold
+          bg-primaryLight
+          focus:outline-none
+        "
         :placeholder="$t('value_count', { count: index + 1 })"
         :name="'value' + index"
         :value="param.value"
@@ -56,11 +69,21 @@
           })
         "
       />
-      </li>
+      <div class="flex relative">
-      <li>
         <span class="select-wrapper">
           <select
-            class="select"
+            class="
+              flex
+              w-full
+              px-4
+              text-xs
+              py-3
+              mr-8
+              focus:outline-none
+              border-b border-dividerLight
+              font-medium
+              bg-primaryLight
+            "
             :name="'type' + index"
             @change="
               $store.commit('setTypeParams', {
@@ -77,9 +100,8 @@
             </option>
           </select>
         </span>
-      </li>
+      </div>
       <div>
-        <li>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="
@@ -103,28 +125,24 @@
             })
           "
         />
-        </li>
       </div>
       <div>
-        <li>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
           @click.native="removeRequestParam(index)"
         />
-        </li>
       </div>
-    </ul>
+    </div>
-    <ul>
+    <div class="flex sticky bottom-0 bg-primary z-10 flex-1">
-      <li>
       <ButtonSecondary
         icon="add"
+        class="flex-1"
         :label="$t('add_new')"
         @click.native="addRequestParam"
       />
-      </li>
+    </div>
-    </ul>
   </AppSection>
 </template>
 

lang/en-US.json

@@ -26,7 +26,8 @@
   "label": "Label",
   "content_type": "Content Type",
   "raw_input": "Raw input",
-  "parameter_list": "Parameter List",
+  "parameter_list": "Query Parameters",
+  "body": "Body",
   "request_body": "Request Body",
   "raw_request_body": "Raw Request Body",
   "response_body": "Response Body",
@@ -201,10 +202,10 @@
   "deprecated": "DEPRECATED",
   "add_one_header": "(add at least one header)",
   "add_one_parameter": "(add at least one parameter)",
-  "header_count": "header {count}",
+  "header_count": "Header {count}",
-  "parameter_count": "parameter {count}",
+  "parameter_count": "Parameter {count}",
-  "variable_count": "variable {count}",
+  "variable_count": "Variable {count}",
-  "value_count": "value {count}",
+  "value_count": "Value {count}",
   "send_request_first": "Send a request first",
   "generate_docs": "Generate Documentation",
   "generate_docs_message": "Import any Hoppscotch Collection to Generate Documentation on-the-go.",
@@ -340,7 +341,7 @@
   "hide_sidebar": "Hide sidebar",
   "show_sidebar": "Show sidebar",
   "protocols": "Protocols",
-  "protocol_count": "protocol {count}",
+  "protocol_count": "Protocol {count}",
   "share": "Share",
   "interceptor": "Interceptor",
   "profile": "Profile",

nuxt.config.js

@@ -204,10 +204,10 @@ export default {
 
   // Google Fonts module configuration (https://github.com/nuxt-community/google-fonts-module)
   googleFonts: {
-    display: "swap",
+    display: "block",
     families: {
-      "Material+Icons": true,
       Montserrat: [400, 500, 600, 700, 800],
+      "Material+Icons": true,
       "Roboto+Mono": true,
     },
   },

pages/graphql.vue

@@ -343,6 +343,7 @@
                       py-3
                       text-xs
                       flex flex-1
+                      font-medium
                       bg-primaryLight
                       focus:outline-none
                     "
@@ -420,16 +421,27 @@
                     </SmartTab>
                   </div>
                 </SmartTabs>
-                <p
+                <div
                   v-if="
                     queryFields.length === 0 &&
                     mutationFields.length === 0 &&
                     subscriptionFields.length === 0 &&
                     graphqlTypes.length === 0
                   "
+                  class="
+                    flex
+                    items-center
+                    text-secondaryLight
+                    flex-col
+                    p-4
+                    justify-center
+                  "
                 >
+                  <i class="material-icons opacity-50 pb-2">description</i>
+                  <span class="text-xs">
                     {{ $t("send_request_first") }}
-                </p>
+                  </span>
+                </div>
               </AppSection>
             </SmartTab>
 

pages/home.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="flex flex-col space-y-16">
+    <LandingHero />
+    <LandingStats />
+    <LandingUsers />
+    <LandingFeatures />
+    <LandingCTA />
+    <LandingFooter />
+  </div>
+</template>