From 7ec8539540daa32fa6eda76836f59780d8c0cc1d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 13 Jul 2021 22:07:01 +0530
Subject: [PATCH] feat: new components and UI improvements

---
 assets/scss/styles.scss                       |  2 +-
 components/app/Announcement.vue               | 44 ++++++++++++
 components/app/GitHubStarButton.vue           |  8 ++-
 components/app/Header.vue                     |  5 +-
 components/app/Logo.vue                       | 32 ++++-----
 components/environments/Edit.vue              | 71 ++++++++++---------
 components/http/BodyParameters.vue            | 13 +++-
 components/http/Headers.vue                   |  1 +
 components/http/Parameters.vue                |  1 +
 components/http/RawBody.vue                   | 14 +++-
 components/landing/Hero.vue                   |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  2 +-
 .../lenses/renderers/ImageLensRenderer.vue    |  2 +-
 .../lenses/renderers/JSONLensRenderer.vue     |  2 +-
 .../lenses/renderers/RawLensRenderer.vue      |  2 +-
 .../lenses/renderers/XMLLensRenderer.vue      |  2 +-
 components/smart/Item.vue                     |  1 +
 layouts/default.vue                           |  1 +
 newstore/RESTSession.ts                       |  2 +-
 pages/index.vue                               | 28 +++++++-
 windi.config.js                               |  1 -
 21 files changed, 170 insertions(+), 66 deletions(-)
 create mode 100644 components/app/Announcement.vue

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index bcc2e932a..9985eb87a 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -153,7 +153,7 @@ a {
 
 hr {
   @apply border-b;
-  @apply border-divider;
+  @apply border-dividerLight;
 }
 
 .heading {
diff --git a/components/app/Announcement.vue b/components/app/Announcement.vue
new file mode 100644
index 000000000..74a6ccde4
--- /dev/null
+++ 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>
diff --git a/components/app/GitHubStarButton.vue b/components/app/GitHubStarButton.vue
index aaca1bf69..75d02a7b8 100644
--- 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>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index fb6776349..c86203920 100644
--- 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' }"
diff --git a/components/app/Logo.vue b/components/app/Logo.vue
index b4e968888..de3fa21c5 100644
--- 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>
 
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 12d61e782..eeafe8e6b 100644
--- 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>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index a6a6930a7..a45165d7e 100644
--- 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") }}
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index efc6fbbfa..3f52c7b4c 100644
--- 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">
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 0f3502c29..04e8b2594 100644
--- 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">
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 2e6d1a6f3..c6ea5d3ee 100644
--- 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>
diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue
index 05acbb9a9..c344bf569 100644
--- 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">
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 920a61fad..07f57d598 100644
--- 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">
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index dca558c32..4de707958 100644
--- 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">
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index a6cb92a80..8bff094d5 100644
--- 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">
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index b11b53ab7..556ddc527 100644
--- 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">
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index d27a3d84c..62fdc859e 100644
--- 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">
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index be31da7a7..c2abcc74a 100644
--- 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
diff --git a/layouts/default.vue b/layouts/default.vue
index ba23eda8b..1927edcdd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,6 +13,7 @@
           <Pane class="flex flex-1 overflow-auto">
             <Splitpanes horizontal :dbl-click-splitter="false">
               <Pane v-if="!zenMode" style="height: auto">
+                <!-- <AppAnnouncement /> -->
                 <AppHeader />
               </Pane>
               <Pane class="flex flex-1 overflow-auto">
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index e6670a6f5..34963c0bd 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -115,7 +115,7 @@ type RESTSession = {
 
 const defaultRESTSession: RESTSession = {
   request: {
-    endpoint: "https://httpbin.org/",
+    endpoint: "https://httpbin.org/get",
     params: [],
     headers: [],
     method: "GET",
diff --git a/pages/index.vue b/pages/index.vue
index 1adaf4e8f..eb65d5fc8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -320,7 +320,19 @@
                 :label="$t('pre_request_script')"
               >
                 <AppSection v-if="showPreRequestScript" label="preRequest">
-                  <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 class="font-semibold text-xs">
                       {{ $t("javascript_code") }}
                     </label>
@@ -349,7 +361,19 @@
 
               <SmartTab :id="'tests'" :label="$t('tests')">
                 <AppSection v-if="testsEnabled" label="postRequestTests">
-                  <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 class="font-semibold text-xs">
                       {{ $t("javascript_code") }}
                     </label>
diff --git a/windi.config.js b/windi.config.js
index a27906ac0..e12c5f77c 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -1,7 +1,6 @@
 import { defineConfig } from "windicss/helpers"
 
 export default defineConfig({
-  dark: "class",
   theme: {
     container: {
       center: true,