feat: new components and UI improvements

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

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>