refactor: request section

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">
-    <div class="flex flex-col sticky top-10 z-10 bg-primary">
+  <AppSection
+    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">
-    <div class="flex flex-col sticky top-10 z-10 bg-primary">
+  <AppSection
+    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,24 +1,24 @@
 <template>
   <AppSection label="parameters">
-    <ul v-if="params.length !== 0">
-      <li>
-        <div class="flex flex-1">
-          <label for="paramList">{{ $t("parameter_list") }}</label>
-          <div>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('clear')"
-              icon="clear_all"
-              @click.native="clearContent('parameters', $event)"
-            />
-          </div>
-        </div>
-      </li>
-    </ul>
-    <ul
+    <div
+      v-if="params.length !== 0"
+      class="flex flex-1 items-center justify-between pl-4"
+    >
+      <label for="paramList" class="font-semibold text-xs">
+        {{ $t("parameter_list") }}
+      </label>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('clear')"
+        icon="clear_all"
+        @click.native="clearContent('parameters', $event)"
+      />
+    </div>
+    <div
       v-for="(param, index) in params"
       :key="index"
       class="
+        flex
         border-b border-dashed
         divide-y
         md:divide-x
@@ -28,39 +28,62 @@
       "
       :class="{ 'border-t': index == 0 }"
     >
-      <li>
-        <input
-          class="input"
-          :placeholder="$t('parameter_count', { count: index + 1 })"
-          :name="'param' + index"
-          :value="param.key"
-          autofocus
-          @change="
-            $store.commit('setKeyParams', {
-              index,
-              value: $event.target.value,
-            })
-          "
-        />
-      </li>
-      <li>
-        <input
-          class="input"
-          :placeholder="$t('value_count', { count: index + 1 })"
-          :name="'value' + index"
-          :value="param.value"
-          @change="
-            $store.commit('setValueParams', {
-              index,
-              value: $event.target.value,
-            })
-          "
-        />
-      </li>
-      <li>
+      <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"
+        autofocus
+        @change="
+          $store.commit('setKeyParams', {
+            index,
+            value: $event.target.value,
+          })
+        "
+      />
+      <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"
+        @change="
+          $store.commit('setValueParams', {
+            index,
+            value: $event.target.value,
+          })
+        "
+      />
+      <div class="flex relative">
         <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,54 +100,49 @@
             </option>
           </select>
         </span>
-      </li>
-      <div>
-        <li>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              param.hasOwnProperty('active')
-                ? param.active
-                  ? $t('turn_off')
-                  : $t('turn_on')
-                : $t('turn_off')
-            "
-            :icon="
-              param.hasOwnProperty('active')
-                ? param.active
-                  ? 'check_box'
-                  : 'check_box_outline_blank'
-                : 'check_box'
-            "
-            @click.native="
-              $store.commit('setActiveParams', {
-                index,
-                value: param.hasOwnProperty('active') ? !param.active : false,
-              })
-            "
-          />
-        </li>
       </div>
       <div>
-        <li>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('delete')"
-            icon="delete"
-            @click.native="removeRequestParam(index)"
-          />
-        </li>
-      </div>
-    </ul>
-    <ul>
-      <li>
         <ButtonSecondary
-          icon="add"
-          :label="$t('add_new')"
-          @click.native="addRequestParam"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? $t('turn_off')
+                : $t('turn_on')
+              : $t('turn_off')
+          "
+          :icon="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          @click.native="
+            $store.commit('setActiveParams', {
+              index,
+              value: param.hasOwnProperty('active') ? !param.active : false,
+            })
+          "
         />
-      </li>
-    </ul>
+      </div>
+      <div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          @click.native="removeRequestParam(index)"
+        />
+      </div>
+    </div>
+    <div class="flex sticky bottom-0 bg-primary z-10 flex-1">
+      <ButtonSecondary
+        icon="add"
+        class="flex-1"
+        :label="$t('add_new')"
+        @click.native="addRequestParam"
+      />
+    </div>
   </AppSection>
 </template>