feat: new components and UI improvements

2021-07-13 22:07:01 +05:30
parent 5e740a6ed6
commit 7ec8539540
21 changed files with 170 additions and 66 deletions
--- a/components/app/Announcement.vue
+++ b/components/app/Announcement.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="flex bg-primary border-b border-dividerLight">
+    <SmartLink
+      to="https://forms.gle/8yFiEynXB7h477Ns6"
+      blank
+      class="
+        relative
+        flex
+        items-center
+        justify-center
+        px-4
+        py-3
+        transition
+        group
+      "
+    >
+      <i class="material-icons mr-4">science</i>
+      <span class="text-secondaryDark text-xs">
+        <span class="md:hidden"> Beta Layout </span>
+        <span class="hidden md:inline">
+          You're currently viewing experimental beta layout
+        </span>
+      </span>
+      <span
+        class="
+          flex
+          items-center
+          justify-center
+          pl-4
+          ml-4
+          font-semibold
+          transition
+          border-l
+          group-hover:text-accentDark
+          border-divider
+          text-accent text-xs
+        "
+      >
+        <span class="md:hidden"> Give Feedback </span>
+        <span class="hidden md:inline"> Report a problem </span>
+      </span>
+    </SmartLink>
+  </div>
+</template>
--- a/components/app/GitHubStarButton.vue
+++ b/components/app/GitHubStarButton.vue
@@ -13,7 +13,7 @@
      :data-show-count="true"
      data-text="Star"
      aria-label="Star Hoppscotch on GitHub"
-      data-size="large"
+      :data-size="size"
    />
  </transition>
 </template>
@@ -25,5 +25,11 @@ export default {
  components: {
    GithubButton,
  },
+  props: {
+    size: {
+      type: String,
+      default: undefined,
+    },
+  },
 }
 </script>
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -1,9 +1,10 @@
 <template>
  <header class="flex items-center justify-between p-2 flex-1">
-    <div class="inline-flex space-x-2 items-center flex-shrink-0">
-      <AppLogo class="h-6" />
+    <div class="inline-flex space-x-2 items-center font-bold flex-shrink-0">
+      <AppLogo class="h-6 mx-4" /> Hoppscotch
    </div>
    <div class="inline-flex space-x-2 items-center flex-shrink-0">
+      <AppGitHubStarButton class="mt-1 mr-2" />
      <TabPrimary
        id="installPWA"
        v-tippy="{ theme: 'tooltip' }"
--- a/components/app/Logo.vue
+++ b/components/app/Logo.vue
@@ -1,21 +1,19 @@
 <template>
-  <svg class="logo" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-    <linearGradient
-      id="a"
-      gradientTransform="matrix(1 0 0 -1 0 -24914)"
-      gradientUnits="userSpaceOnUse"
-      x1="0"
-      x2="512"
-      y1="-25170"
-      y2="-25170"
-    >
-      <stop offset="0" stop-color="#31d8ff" />
-      <stop offset="1" stop-color="#ff80ff" />
-    </linearGradient>
-    <path
-      d="M512 256c0 141.387-114.613 256-256 256S0 397.387 0 256 114.613 0 256 0s256 114.613 256 256zm0 0"
-      fill="url(#a)"
-    />
+  <svg
+    class="logo fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 612 612"
+  >
+    <g xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.283 208.326c-28.015 71.685 84.358 182.589 250.992 247.71 166.634 65.121 324.428 59.801 352.442-11.884 17.432-44.606-19.496-104.396-90.027-158.893-.489 22.675-4.952 44.944-13.309 66.328-3.559 9.108-11.697 21.519-30.254 28.923-10.853 4.33-24.392 6.526-40.242 6.526-40.758 0-99.372-14.662-156.792-39.22-27.484-11.755-52.967-25.125-73.694-38.665-23.871-15.594-41.229-31.196-51.592-46.373-15.399-22.551-13.289-40.954-8.807-52.421 8.368-21.412 20.275-40.884 35.185-57.777-88.789-7.765-156.47 11.143-173.902 55.746zm542.506 203.868c7.682-5.648 19.708-2.339 26.861 7.39 7.153 9.729 6.724 22.194-.958 27.842s-19.709 2.339-26.861-7.39c-7.153-9.729-6.724-22.194.958-27.842zm-297.979-5.647c3.842-9.832 16.98-13.886 29.344-9.054 12.363 4.832 19.271 16.719 15.428 26.552-3.842 9.832-16.98 13.887-29.344 9.054-12.363-4.832-19.269-16.72-15.428-26.552zM51.312 246.776c-11.854 2.301-22.937-3.422-24.754-12.782-1.817-9.361 6.321-18.813 18.174-21.114 11.854-2.301 22.937 3.422 24.754 12.782 1.817 9.36-6.319 18.813-18.174 21.114z"
+      />
+      <path
+        d="M433.885 363.563c24.904 0 42.999-6.106 48.633-20.52 9.669-24.741 13.162-50.371 11.229-75.19-4.919-63.176-45.008-121.096-107.987-145.708-20.393-7.97-41.378-11.745-62.027-11.744-43.118.003-84.718 16.481-116.132 45.623-18.252 16.932-33.069 38.136-42.738 62.878-21.567 55.188 173.67 144.661 269.022 144.661z"
+      />
+    </g>
  </svg>
 </template>

--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -33,39 +33,55 @@
              :icon="clearIcon"
              @click.native="clearContent($event)"
            />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              icon="add"
+              :title="$t('add_new')"
+              @click.native="addEnvironmentVariable"
+            />
          </div>
        </div>
-        <ul
-          v-for="(variable, index) in vars"
-          :key="index"
-          class="
-            border-b border-dashed
-            divide-y
-            md:divide-x
-            border-divider
-            divide-dashed divide-divider
-            md:divide-y-0
-          "
-          :class="{ 'border-t': index == 0 }"
-        >
-          <li>
+        <div class="border-2 border-divider">
+          <div
+            v-for="(variable, index) in vars"
+            :key="index"
+            class="
+              flex
+              border-b
+              divide-x
+              border-divider
+              divide-dashed divide-divider
+            "
+          >
            <input
              v-model="variable.key"
-              class="input"
+              class="
+                px-4
+                py-3
+                text-xs
+                flex flex-1
+                font-semibold
+                bg-primaryLight
+                focus:outline-none
+              "
              :placeholder="$t('variable_count', { count: index + 1 })"
              :name="'param' + index"
            />
-          </li>
-          <li>
            <input
              v-model="variable.value"
-              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"
            />
-          </li>
-          <div>
-            <li>
+            <div>
              <ButtonSecondary
                id="variable"
                v-tippy="{ theme: 'tooltip' }"
@@ -73,18 +89,9 @@
                icon="delete"
                @click.native="removeEnvironmentVariable(index)"
              />
-            </li>
+            </div>
          </div>
-        </ul>
-        <ul>
-          <li>
-            <ButtonSecondary
-              icon="add"
-              :label="$t('add_new')"
-              @click.native="addEnvironmentVariable"
-            />
-          </li>
-        </ul>
+        </div>
      </div>
    </template>
    <template #footer>
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -1,8 +1,17 @@
 <template>
  <AppSection label="bodyParameters">
    <div
-      v-if="bodyParams.length !== 0"
-      class="flex flex-1 items-center justify-between pl-4"
+      class="
+        sticky
+        top-110px
+        z-10
+        bg-primary
+        flex flex-1
+        items-center
+        justify-between
+        pl-4
+        border-b border-dividerLight
+      "
    >
      <label for="reqParamList" class="font-semibold text-xs">
        {{ $t("request_body") }}
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -10,6 +10,7 @@
        items-center
        justify-between
        pl-4
+        border-b border-dividerLight
      "
    >
      <label for="headerList" class="font-semibold text-xs">
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -10,6 +10,7 @@
        items-center
        justify-between
        pl-4
+        border-b border-dividerLight
      "
    >
      <label for="paramList" class="font-semibold text-xs">
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -1,6 +1,18 @@
 <template>
  <div>
-    <div class="flex flex-1 items-center justify-between pl-4">
+    <div
+      class="
+        sticky
+        top-110px
+        z-10
+        bg-primary
+        flex flex-1
+        items-center
+        justify-between
+        pl-4
+        border-b border-dividerLight
+      "
+    >
      <label for="rawBody" class="font-semibold text-xs">
        {{ $t("raw_request_body") }}
      </label>
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -41,7 +41,7 @@
        />
        <ButtonSecondary label="Dashboard" icon="chevron_right" />
        <ButtonPrimary label="GitHub" svg="github" large rounded />
-        <AppGitHubStarButton />
+        <AppGitHubStarButton size="large" />
      </div>
    </div>
    <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -9,7 +9,7 @@
        bg-primary
        items-center
        justify-between
-        border-b border-divider
+        border-b border-dividerLight
      "
    >
      <label for="body" class="px-4 font-semibold text-xs">
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -9,7 +9,7 @@
        bg-primary
        items-center
        justify-between
-        border-b border-divider
+        border-b border-dividerLight
      "
    >
      <label for="body" class="px-4 font-semibold text-xs">
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -9,7 +9,7 @@
        bg-primary
        items-center
        justify-between
-        border-b border-divider
+        border-b border-dividerLight
      "
    >
      <label for="body" class="px-4 font-semibold text-xs">
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -9,7 +9,7 @@
        bg-primary
        items-center
        justify-between
-        border-b border-divider
+        border-b border-dividerLight
      "
    >
      <label for="body" class="px-4 font-semibold text-xs">
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -9,7 +9,7 @@
        bg-primary
        items-center
        justify-between
-        border-b border-divider
+        border-b border-dividerLight
      "
    >
      <label for="body" class="px-4 font-semibold text-xs">
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -11,6 +11,7 @@
      font-semibold
      transition
      rounded-lg
+      items-center
      focus:bg-primaryDark focus:text-secondaryDark
      hover:bg-primaryDark hover:text-secondaryDark
      focus:outline-none