feat: new components and UI improvements

assets/scss/styles.scss

@@ -153,7 +153,7 @@ a {
 
 hr {
   @apply border-b;
-  @apply border-divider;
+  @apply border-dividerLight;
 }
 
 .heading {

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>

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>

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">
+    <div class="inline-flex space-x-2 items-center font-bold flex-shrink-0">
-      <AppLogo class="h-6" />
+      <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' }"

components/app/Logo.vue

@@ -1,21 +1,19 @@
 <template>
-  <svg class="logo" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <svg
-    <linearGradient
+    class="logo fill-current"
-      id="a"
+    xmlns="http://www.w3.org/2000/svg"
-      gradientTransform="matrix(1 0 0 -1 0 -24914)"
+    width="20"
-      gradientUnits="userSpaceOnUse"
+    height="20"
-      x1="0"
+    viewBox="0 0 612 612"
-      x2="512"
+  >
-      y1="-25170"
+    <g xmlns="http://www.w3.org/2000/svg">
-      y2="-25170"
+      <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"
-      <stop offset="0" stop-color="#31d8ff" />
+      />
-      <stop offset="1" stop-color="#ff80ff" />
+      <path
-    </linearGradient>
+        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"
-    <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"
+    </g>
-      fill="url(#a)"
-    />
   </svg>
 </template>
 

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
+        <div class="border-2 border-divider">
-          v-for="(variable, index) in vars"
+          <div
-          :key="index"
+            v-for="(variable, index) in vars"
-          class="
+            :key="index"
-            border-b border-dashed
+            class="
-            divide-y
+              flex
-            md:divide-x
+              border-b
-            border-divider
+              divide-x
-            divide-dashed divide-divider
+              border-divider
-            md:divide-y-0
+              divide-dashed divide-divider
-          "
+            "
-          :class="{ 'border-t': index == 0 }"
+          >
-        >
-          <li>
             <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>
-          <div>
-            <li>
               <ButtonSecondary
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
@@ -73,18 +89,9 @@
                 icon="delete"
                 @click.native="removeEnvironmentVariable(index)"
               />
-            </li>
+            </div>
           </div>
-        </ul>
+        </div>
-        <ul>
-          <li>
-            <ButtonSecondary
-              icon="add"
-              :label="$t('add_new')"
-              @click.native="addEnvironmentVariable"
-            />
-          </li>
-        </ul>
       </div>
     </template>
     <template #footer>

components/http/BodyParameters.vue

@@ -1,8 +1,17 @@
 <template>
   <AppSection label="bodyParameters">
     <div
-      v-if="bodyParams.length !== 0"
+      class="
-      class="flex flex-1 items-center justify-between pl-4"
+        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") }}

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">

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">

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>

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">

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">

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">

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">

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">

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">

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

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">

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",

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>

windi.config.js

@@ -1,7 +1,6 @@
 import { defineConfig } from "windicss/helpers"
 
 export default defineConfig({
-  dark: "class",
   theme: {
     container: {
       center: true,