refactor(ui): better font weight, icon hover states, etc

components/http/Parameters.vue

@@ -13,10 +13,17 @@
         justify-between
       "
     >
-      <label class="font-semibold">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("parameter_list") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear_all')"
@@ -44,7 +51,6 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
           flex-1
           py-1
           px-4
@@ -62,9 +68,7 @@
         v-else
         class="
           bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           py-2
           px-4
           truncate
@@ -89,7 +93,6 @@
         styles="
           bg-primaryLight
           flex
-          font-semibold font-mono
           flex-1
           py-1
           px-4
@@ -107,9 +110,7 @@
         v-else
         class="
           bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
+          flex flex-1
           py-2
           px-4
           truncate
@@ -167,12 +168,12 @@
       v-if="params$.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">post_add</i>
       <span class="text-center pb-4">
         {{ $t("empty.parameters") }}
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
+        icon="add"
         outline
         @click.native="addParam"
       />