refactor: polish request section

packages/hoppscotch-embed/src/components.d.ts

@@ -4,6 +4,8 @@
 
 declare module "vue" {
   export interface GlobalComponents {
+    Carbon3dCursor: typeof import("~icons/carbon/3d-cursor")["default"]
+    CarbonArrowUpRight: typeof import("~icons/carbon/arrow-up-right")["default"]
     CarbonCampsite: typeof import("~icons/carbon/campsite")["default"]
     CarbonCircleDash: typeof import("~icons/carbon/circle-dash")["default"]
     CarbonDicomOverlay: typeof import("~icons/carbon/dicom-overlay")["default"]
@@ -15,6 +17,7 @@ declare module "vue" {
     CarbonSun: typeof import("~icons/carbon/sun")["default"]
     CarbonWarning: typeof import("~icons/carbon/warning")["default"]
     Footer: typeof import("./components/Footer.vue")["default"]
+    Header: typeof import("./components/Header.vue")["default"]
     README: typeof import("./components/README.md")["default"]
     Request: typeof import("./components/Request.vue")["default"]
     "Request copy": typeof import("./components/Response.vueue")["default"]

packages/hoppscotch-embed/src/components/Footer.vue

@@ -12,9 +12,9 @@ const toggleLocales = () => {
 
 <template>
   <nav class="mt-6 text-xl">
-    <router-link class="mx-2 icon-btn" to="/" :title="t('button.home')">
+    <RouterLink class="mx-2 icon-btn" to="/" :title="t('button.home')">
       <carbon-home />
-    </router-link>
+    </RouterLink>
 
     <button
       class="mx-2 icon-btn !outline-none"

packages/hoppscotch-embed/src/components/Header.vue

@@ -0,0 +1,16 @@
+<template>
+  <header class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between">
+    <span class="rounded font-bold text-secondaryDark tracking-wide py-2 px-4">
+      HOPPSCOTCH
+    </span>
+    <a
+      href="/"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="buttonSecondary buttonSecondaryFilled"
+    >
+      <span class="mr-2 hidden sm:flex"> Open in Hoppscotch </span>
+      <carbon-arrow-up-right />
+    </a>
+  </header>
+</template>

packages/hoppscotch-embed/src/layouts/404.vue

@@ -4,7 +4,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <main class="text-center py-10 px-4 text-teal-700 dark:text-gray-200">
+  <main>
     <div>
       <p class="text-4xl">
         <carbon-warning class="inline-block" />

packages/hoppscotch-embed/src/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="text-center py-10 px-4 text-gray-800 dark:text-gray-200">
+  <main>
     <router-view />
     <Footer />
   </main>

packages/hoppscotch-embed/src/layouts/embed.vue

@@ -1,5 +1,8 @@
 <template>
-  <main class="text-gray-700 dark:text-gray-200">
-    <router-view />
+  <main>
+    <Header />
+    <div class="p-2">
+      <router-view />
+    </div>
   </main>
 </template>

packages/hoppscotch-embed/src/layouts/home.vue

@@ -1,9 +1,6 @@
 <template>
-  <main class="text-center py-10 px-4 text-gray-700 dark:text-gray-200">
+  <main>
     <router-view />
     <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Home Layout]
-    </div>
   </main>
 </template>

packages/hoppscotch-embed/src/pages/index.vue

@@ -4,10 +4,10 @@ const { t } = useI18n()
 
 <template>
   <div>
-    <h1 class="font-semibold text-2xl">
+    <h1 class="font-semibold text-secondaryDark text-2xl">
       {{ t("app.title") }}
     </h1>
-    <p class="mt-2 text-gray-400 dark:text-gray-500">
+    <p class="mt-2 text-secondaryLight">
       {{ t("app.description") }}
     </p>
   </div>

packages/hoppscotch-embed/src/styles/main.css

@@ -3,16 +3,34 @@
   --font-mono: "Roboto Mono", monospace;
   --body-font-size: 0.75rem;
   --body-line-height: 1rem;
+  --accent-color: theme("colors.purple.500");
+  --accent-light-color: theme("colors.purple.400");
+  --accent-dark-color: theme("colors.purple.600");
+  --accent-contrast-color: theme("colors.white");
+}
+
+:root {
+  --primary-color: theme("colors.white");
+  --primary-light-color: theme("colors.true-gray.50");
+  --primary-dark-color: theme("colors.true-gray.100");
+  --secondary-color: theme("colors.true-gray.500");
+  --secondary-light-color: theme("colors.true-gray.400");
+  --secondary-dark-color: theme("colors.true-gray.900");
+  --divider-color: theme("colors.true-gray.200");
+  --divider-light-color: theme("colors.true-gray.100");
+  --divider-dark-color: theme("colors.true-gray.300");
+  --error-color: theme("colors.yellow.100");
+  --tooltip-color: theme("colors.true-gray.800");
+  --popover-color: theme("colors.white");
+}
+
+:root.dark {
   --primary-color: theme("colors.true-gray.900");
   --primary-light-color: theme("colors.dark.600");
   --primary-dark-color: theme("colors.true-gray.800");
   --secondary-color: theme("colors.true-gray.400");
   --secondary-light-color: theme("colors.true-gray.500");
   --secondary-dark-color: theme("colors.true-gray.100");
-  --accent-color: theme("colors.purple.500");
-  --accent-light-color: theme("colors.purple.400");
-  --accent-dark-color: theme("colors.purple.600");
-  --accent-contrast-color: theme("colors.white");
   --divider-color: theme("colors.true-gray.800");
   --divider-light-color: theme("colors.dark.500");
   --divider-dark-color: theme("colors.dark.300");
@@ -29,7 +47,7 @@
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-transparent;
+  @apply bg-accent;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -130,10 +148,7 @@ body,
   padding: 0;
 
   @apply font-sans;
-}
-
-html.dark {
-  @apply bg-dark-800;
+  @apply font-semibold;
 }
 
 #nprogress {
@@ -167,20 +182,41 @@ html.dark {
 }
 
 .buttonPrimary {
-  @apply bg-teal-600 text-white;
-  @apply rounded py-2 px-6;
-  @apply font-sans;
+  @apply bg-accent rounded font-bold text-accentContrast py-2 px-4 transition whitespace-nowrap inline-flex items-center justify-center hover:bg-accentDark focus:outline-none focus-visible:bg-accentDark;
+}
+
+.buttonSecondary {
+  @apply rounded font-semibold py-2 px-4 transition whitespace-nowrap inline-flex items-center justify-center hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark;
+}
+
+.buttonSecondaryFilled {
+  @apply bg-primaryLight;
 }
 
 .inputPrimary {
   @apply flex flex-1;
-  @apply bg-dark-500;
+  @apply bg-primaryLight;
   @apply rounded py-2 px-4;
+  @apply font-semibold;
   @apply font-sans;
+  @apply focus:outline-none;
+  @apply focus-visible:border-dividerDark;
+  @apply focus-visible:bg-primary;
+  @apply border;
+  @apply border-divider;
+  @apply hover:border-dividerDark;
 }
 
 .selectPrimary {
-  @apply bg-dark-500;
+  @apply bg-primaryLight;
   @apply rounded py-2 px-4;
+  @apply font-semibold;
   @apply font-sans;
+  @apply focus:outline-none;
+  @apply appearance-none;
+  @apply focus-visible:border-dividerDark;
+  @apply focus-visible:bg-primary;
+  @apply border;
+  @apply border-divider;
+  @apply hover:border-dividerDark;
 }

packages/hoppscotch-embed/windi.config.ts

@@ -5,25 +5,25 @@ export default defineConfig({
   // https://windicss.org/posts/v30.html#attributify-mode
   attributify: true,
   theme: {
-    colors: {
-      primary: "var(--primary-color)",
-      primaryLight: "var(--primary-light-color)",
-      primaryDark: "var(--primary-dark-color)",
-      secondary: "var(--secondary-color)",
-      secondaryLight: "var(--secondary-light-color)",
-      secondaryDark: "var(--secondary-dark-color)",
-      accent: "var(--accent-color)",
-      accentLight: "var(--accent-light-color)",
-      accentDark: "var(--accent-dark-color)",
-      accentContrast: "var(--accent-contrast-color)",
-      divider: "var(--divider-color)",
-      dividerLight: "var(--divider-light-color)",
-      dividerDark: "var(--divider-dark-color)",
-      error: "var(--error-color)",
-      tooltip: "var(--tooltip-color)",
-      popover: "var(--popover-color)",
-    },
     extend: {
+      colors: {
+        primary: "var(--primary-color)",
+        primaryLight: "var(--primary-light-color)",
+        primaryDark: "var(--primary-dark-color)",
+        secondary: "var(--secondary-color)",
+        secondaryLight: "var(--secondary-light-color)",
+        secondaryDark: "var(--secondary-dark-color)",
+        accent: "var(--accent-color)",
+        accentLight: "var(--accent-light-color)",
+        accentDark: "var(--accent-dark-color)",
+        accentContrast: "var(--accent-contrast-color)",
+        divider: "var(--divider-color)",
+        dividerLight: "var(--divider-light-color)",
+        dividerDark: "var(--divider-dark-color)",
+        error: "var(--error-color)",
+        tooltip: "var(--tooltip-color)",
+        popover: "var(--popover-color)",
+      },
       fontFamily: {
         sans: "var(--font-sans)",
         mono: "var(--font-mono)",