From aa8b4231e27d1c77755ee9788eca2b65b576b4a9 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 9 Aug 2021 17:55:30 +0530
Subject: [PATCH] feat: share and support modals

---
 assets/icons/email.svg              |   1 +
 assets/icons/facebook.svg           |   1 +
 assets/icons/linkedin.svg           |   1 +
 assets/icons/reddit.svg             |   1 +
 assets/icons/twitter.svg            |   2 +-
 assets/scss/styles.scss             |   6 +-
 components/app/Footer.vue           |  11 +++
 components/app/Share.vue            | 123 ++++++++++++++++++++++++++++
 components/app/Shortcuts.vue        |  14 +++-
 components/app/Sidenav.vue          |  57 +++++++++++--
 components/app/Support.vue          |  86 +++++++++++++++++++
 components/http/Body.vue            |   1 +
 components/http/CodegenModal.vue    |   1 +
 components/http/Request.vue         |   1 +
 components/http/ResponseMeta.vue    |   2 +-
 components/smart/ChangeLanguage.vue |   4 +-
 components/smart/FontSizePicker.vue |   1 +
 components/smart/Item.vue           |  30 ++++++-
 components/smart/Modal.vue          |   1 +
 helpers/actions.ts                  |   2 +
 helpers/keybindings.ts              |  54 ++++++++++--
 helpers/support.js                  |   4 +
 lang/en-US.json                     |  25 +++++-
 nuxt.config.js                      |   1 +
 pages/graphql.vue                   |   2 +-
 pages/settings.vue                  |   2 +
 plugins/crisp.js                    |  18 ++++
 27 files changed, 425 insertions(+), 27 deletions(-)
 create mode 100644 assets/icons/email.svg
 create mode 100644 assets/icons/facebook.svg
 create mode 100644 assets/icons/linkedin.svg
 create mode 100644 assets/icons/reddit.svg
 create mode 100644 components/app/Share.vue
 create mode 100644 components/app/Support.vue
 create mode 100644 helpers/support.js
 create mode 100644 plugins/crisp.js

diff --git a/assets/icons/email.svg b/assets/icons/email.svg
new file mode 100644
index 000000000..b17bcedd1
--- /dev/null
+++ b/assets/icons/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" ><path fill="currentColor" d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zM18.99 7L12 12.666 5.009 7H18.99zM19 17H5V8.495l7 5.673 7-5.672V17z"/></svg>
diff --git a/assets/icons/facebook.svg b/assets/icons/facebook.svg
new file mode 100644
index 000000000..42bc1bac0
--- /dev/null
+++ b/assets/icons/facebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" ><path fill="currentColor" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
diff --git a/assets/icons/linkedin.svg b/assets/icons/linkedin.svg
new file mode 100644
index 000000000..621e2f09b
--- /dev/null
+++ b/assets/icons/linkedin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" ><path fill="currentColor" d="M19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5zM8 19H5V8h3v11zM6.5 6.732c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zM20 19h-3v-5.604c0-3.368-4-3.113-4 0V19h-3V8h3v1.765c1.396-2.586 7-2.777 7 2.476V19z"/></svg>
diff --git a/assets/icons/reddit.svg b/assets/icons/reddit.svg
new file mode 100644
index 000000000..96ddae1e0
--- /dev/null
+++ b/assets/icons/reddit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="currentColor" d="M24 11.779a2.654 2.654 0 00-4.497-1.899c-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058a2.17 2.17 0 002.174 2.163c1.198 0 2.172-.97 2.172-2.163a2.171 2.171 0 00-4.193-.785l-4.329-1.015a.37.37 0 00-.44.249L11.755 7.82c-2.838.034-5.409.798-7.3 2.025a2.643 2.643 0 00-1.799-.712A2.654 2.654 0 000 11.779c0 .97.533 1.811 1.317 2.271a4.716 4.716 0 00-.086.857C1.231 18.818 6.039 22 11.95 22s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81A2.633 2.633 0 0024 11.779zM6.776 13.595c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179L12 19.44l-.013.003c-1.777 0-3.028-.386-3.824-1.179a.369.369 0 010-.523.372.372 0 01.526 0c.65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962a.373.373 0 01.526 0 .37.37 0 010 .524zm-.189-3.095a1.58 1.58 0 01-1.581-1.574c0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg>
diff --git a/assets/icons/twitter.svg b/assets/icons/twitter.svg
index 06e576275..57887d3b7 100644
--- a/assets/icons/twitter.svg
+++ b/assets/icons/twitter.svg
@@ -1 +1 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" height="1684" stroke-linejoin="round" stroke-miterlimit="2" viewBox="-89.00934757 -46.8841404 643.93723344 446.8841404" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m154.729 400c185.669 0 287.205-153.876 287.205-287.312 0-4.37-.089-8.72-.286-13.052a205.304 205.304 0 0 0 50.352-52.29c-18.087 8.044-37.55 13.458-57.968 15.899 20.841-12.501 36.84-32.278 44.389-55.852a202.42 202.42 0 0 1 -64.098 24.511c-18.42-19.628-44.644-31.904-73.682-31.904-55.744 0-100.948 45.222-100.948 100.965 0 7.925.887 15.631 2.619 23.025-83.895-4.223-158.287-44.405-208.074-105.504a100.739 100.739 0 0 0 -13.668 50.754c0 35.034 17.82 65.961 44.92 84.055a100.172 100.172 0 0 1 -45.716-12.63c-.015.424-.015.837-.015 1.29 0 48.903 34.794 89.734 80.982 98.986a101.036 101.036 0 0 1 -26.617 3.553c-6.493 0-12.821-.639-18.971-1.82 12.851 40.122 50.115 69.319 94.296 70.135-34.549 27.089-78.07 43.224-125.371 43.224a204.9 204.9 0 0 1 -24.078-1.399c44.674 28.645 97.72 45.359 154.734 45.359" fill="#1da1f2" fill-rule="nonzero"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 96da0afa8..0d729ea30 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -111,16 +111,14 @@ a {
     @apply py-1 px-2;
     @apply shadow;
 
-    font-size: var(--body-font-size);
+    font-size: 88%;
     line-height: var(--body-line-height);
 
     kbd {
-      @apply first:ml-2;
-      @apply last:-mr-1;
       @apply font-sans;
       @apply bg-secondaryDark;
       @apply text-primaryDark;
-      @apply rounded;
+      @apply rounded-sm;
       @apply px-1;
       @apply ml-1;
     }
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 383b3bc6a..57f597229 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -58,6 +58,13 @@
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
+              <SmartItem
+                :label="$t('app.chat_with_us')"
+                @click.native="
+                  chatWithUs()
+                  $refs.options.tippy().hide()
+                "
+              />
               <hr />
               <SmartItem
                 :label="$t('app.twitter')"
@@ -109,6 +116,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
@@ -149,6 +157,9 @@ export default defineComponent({
         // fallback
       }
     },
+    chatWithUs() {
+      showChat()
+    },
   },
 })
 </script>
diff --git a/components/app/Share.vue b/components/app/Share.vue
new file mode 100644
index 000000000..214059f0c
--- /dev/null
+++ b/components/app/Share.vue
@@ -0,0 +1,123 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('app.invite_your_friends')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <p class="text-secondaryLight mb-8 px-2">
+        {{ $t("app.invite_description") }}
+      </p>
+      <div class="flex flex-col space-y-2 px-2">
+        <div class="grid gap-4 grid-cols-3">
+          <a
+            v-for="(platform, index) in platforms"
+            :key="`platform-${index}`"
+            :href="platform.link"
+            target="_blank"
+            class="share-link"
+          >
+            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <span class="mt-3">
+              {{ platform.name }}
+            </span>
+          </a>
+          <button class="share-link" @click="copyAppLink">
+            <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
+            <span class="font-medium mt-3">
+              {{ $t("app.copy") }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+export default {
+  props: {
+    show: Boolean,
+  },
+  data() {
+    const url = "https://hoppscotch.io"
+    const text = "Hoppscotch - Open source API development ecosystem."
+    const description =
+      "Helps you create requests faster, saving precious time on development."
+    const subject =
+      "Checkout Hoppscotch - an open source API development ecosystem"
+    const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
+    const twitter = "hoppscotch_io"
+
+    return {
+      url: "https://hoppscotch.io",
+      copyIcon: "content_copy",
+      platforms: [
+        {
+          name: "Email",
+          icon: "email",
+          link: `mailto:?subject=${subject}&body=${summary}`,
+        },
+        {
+          name: "Twitter",
+          icon: "twitter",
+          link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
+        },
+        {
+          name: "Facebook",
+          icon: "facebook",
+          link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+        },
+        {
+          name: "Reddit",
+          icon: "reddit",
+          link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
+        },
+        {
+          name: "LinkedIn",
+          icon: "linkedin",
+          link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+        },
+      ],
+    }
+  },
+  methods: {
+    copyAppLink() {
+      copyToClipboard(this.url)
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("copied_to_clipboard").toString(), {
+        icon: "done",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.share-link {
+  @apply border border-dividerLight;
+  @apply rounded;
+  @apply flex-col flex;
+  @apply p-4;
+  @apply transition;
+  @apply items-center;
+  @apply justify-center;
+  @apply hover:(bg-primaryLight text-secondaryDark);
+  @apply focus:(border-divider outline-none);
+
+  svg {
+    @apply opacity-80;
+  }
+
+  &:hover {
+    svg {
+      @apply opacity-100;
+    }
+  }
+}
+</style>
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index a890945b5..8b669cc10 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -86,7 +86,19 @@ export default {
           shortcuts: [
             {
               keys: ["?"],
-              label: this.$t("shortcut.show_all"),
+              label: this.$t("shortcut.general.help_menu"),
+            },
+            {
+              keys: ["/"],
+              label: this.$t("shortcut.general.show_all"),
+            },
+            {
+              keys: [getPlatformSpecialKey(), "K"],
+              label: this.$t("shortcut.general.command_menu"),
+            },
+            {
+              keys: ["Esc"],
+              label: this.$t("shortcut.general.close_current_menu"),
             },
           ],
         },
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index add64ef20..6489fa821 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -1,7 +1,7 @@
 <template>
-  <aside>
+  <aside class="flex h-full justify-between md:flex-col">
     <nav class="flex flex-nowrap md:flex-col">
-      <nuxt-link
+      <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"
         :to="localePath(navigation.target)"
@@ -14,13 +14,58 @@
           <SmartIcon :name="navigation.svg" class="svg-icons" />
         </div>
         <span>{{ navigation.title }}</span>
-      </nuxt-link>
+      </NuxtLink>
     </nav>
+    <nav
+      class="
+        flex flex-nowrap
+        p-4
+        items-center
+        justify-center
+        md:(flex-col
+        space-x-0 space-y-2)
+      "
+    >
+      <TabPrimary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="$t('app.invite')"
+        icon="person_add_alt"
+        @click.native="showShare = true"
+      />
+      <TabPrimary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="`${$t('support.title')} <kbd>?</kbd>`"
+        icon="support"
+        @click.native="showSupport = true"
+      />
+    </nav>
+    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
+    <AppShare :show="showShare" @hide-modal="showShare = false" />
   </aside>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { defineActionHandler } from "~/helpers/actions"
+
+export default defineComponent({
+  setup() {
+    const showSupport = ref(false)
+    const showShare = ref(false)
+
+    defineActionHandler("modals.support.toggle", () => {
+      showSupport.value = !showSupport.value
+    })
+
+    defineActionHandler("modals.share.toggle", () => {
+      showShare.value = !showShare.value
+    })
+
+    return {
+      showSupport,
+      showShare,
+    }
+  },
   data() {
     return {
       primaryNavigation: [
@@ -52,7 +97,7 @@ export default {
       ],
     }
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/app/Support.vue b/components/app/Support.vue
new file mode 100644
index 000000000..8127a83cf
--- /dev/null
+++ b/components/app/Support.vue
@@ -0,0 +1,86 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('support.title')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col space-y-2 px-2">
+        <SmartItem
+          icon="menu_book"
+          :label="$t('app.documentation')"
+          to="https://github.com/hoppscotch/hoppscotch/wiki"
+          :description="$t('support.documentation')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          icon="keyboard"
+          :label="$t('app.keyboard_shortcuts')"
+          :description="$t('support.shortcuts')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            showShortcuts()
+            hideModal()
+          "
+        />
+        <SmartItem
+          icon="auto_awesome"
+          :label="$t('app.whats_new')"
+          to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+          :description="$t('support.changelog')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          icon="contact_support"
+          :label="$t('app.chat_with_us')"
+          :description="$t('support.chat')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            chatWithUs()
+            hideModal()
+          "
+        />
+        <SmartItem
+          svg="twitter"
+          :label="$t('app.twitter')"
+          to="https://twitter.com/hoppscotch_io"
+          blank
+          :description="$t('support.twitter')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { invokeAction } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    chatWithUs() {
+      showChat()
+    },
+    showShortcuts() {
+      invokeAction("flyouts.keybinds.toggle")
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
diff --git a/components/http/Body.vue b/components/http/Body.vue
index 640e43779..772b440ef 100644
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -20,6 +20,7 @@
           :key="`contentTypeItem-${index}`"
           :label="contentTypeItem"
           :info-icon="contentTypeItem === contentType ? 'done' : ''"
+          :active-info-icon="contentTypeItem === contentType"
           @click.native="
             contentType = contentTypeItem
             $refs.contentTypeOptions.tippy().hide()
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 705f8dea0..bcab8c371 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -41,6 +41,7 @@
                 :key="`gen-${index}`"
                 :label="gen.name"
                 :info-icon="gen.id === codegenType ? 'done' : ''"
+                :active-info-icon="gen.id === codegenType"
                 @click.native="
                   codegenType = gen.id
                   $refs.options.tippy().hide()
diff --git a/components/http/Request.vue b/components/http/Request.vue
index 6079e4881..cdbdc488d 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -93,6 +93,7 @@
         id="send"
         class="rounded-none min-w-20"
         :label="!loading ? $t('send') : $t('cancel')"
+        :shortcut="[getSpecialKey(), 'G']"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="inline-flex">
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index ebc235a4b..d341b41a0 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -18,7 +18,7 @@
             {{ $t("shortcut.reset_request") }}
           </span>
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.show_all") }}
+            {{ $t("shortcut.general.show_all") }}
           </span>
         </div>
         <div class="flex flex-col space-y-4">
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index dc9e66be4..7a9986456 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -14,7 +14,7 @@
             }`"
           />
         </template>
-        <nuxt-link
+        <NuxtLink
           v-for="(locale, index) in $i18n.locales.filter(
             ({ code }) => code !== $i18n.locale
           )"
@@ -23,7 +23,7 @@
           @click="$refs.language.tippy().hide()"
         >
           <SmartItem :label="locale.name" />
-        </nuxt-link>
+        </NuxtLink>
       </tippy>
     </span>
   </span>
diff --git a/components/smart/FontSizePicker.vue b/components/smart/FontSizePicker.vue
index a96712403..686f8d9ba 100644
--- a/components/smart/FontSizePicker.vue
+++ b/components/smart/FontSizePicker.vue
@@ -17,6 +17,7 @@
           :key="`size-${index}`"
           :label="size.name"
           :info-icon="size.code === active.code ? 'done' : ''"
+          :active-info-icon="size.code === active.code"
           @click.native="
             setActiveFont(size)
             $refs.fontSize.tippy().hide()
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index 927237cc3..85e3496fc 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -30,10 +30,17 @@
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
   >
-    <span v-if="!loading" class="inline-flex items-center">
+    <span
+      v-if="!loading"
+      class="inline-flex items-center"
+      :class="{ 'self-start': infoIcon }"
+    >
       <i
         v-if="icon"
-        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        :class="[
+          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          { 'text-accent': active },
+        ]"
         class="material-icons"
       >
         {{ icon }}
@@ -41,7 +48,10 @@
       <SmartIcon
         v-if="svg"
         :name="svg"
-        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        :class="[
+          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          { 'text-accent': active },
+        ]"
         class="svg-icons"
       />
     </span>
@@ -57,7 +67,11 @@
         {{ description }}
       </p>
     </div>
-    <i v-if="infoIcon" class="text-accent ml-6 self-end material-icons">
+    <i
+      v-if="infoIcon"
+      class="ml-6 self-center material-icons items-center"
+      :class="{ 'text-accent': activeInfoIcon }"
+    >
       {{ infoIcon }}
     </i>
   </SmartLink>
@@ -110,6 +124,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    activeInfoIcon: {
+      type: Boolean,
+      default: false,
+    },
     infoIcon: {
       type: String,
       default: "",
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 1e209948b..612508993 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -162,6 +162,7 @@ export default defineComponent({
       }
     },
     onTransitionLeaveStart() {
+      this.close()
       this.shouldCleanupDomOnUnmount = false
     },
     $getPortal() {
diff --git a/helpers/actions.ts b/helpers/actions.ts
index 7796bb1b5..422ad14d4 100644
--- a/helpers/actions.ts
+++ b/helpers/actions.ts
@@ -17,6 +17,8 @@ export type HoppAction =
   | "request.method.put" // Select PUT Method
   | "request.method.delete" // Select DELETE Method
   | "flyouts.keybinds.toggle" // Shows the keybinds flyout
+  | "modals.support.toggle" // Shows the support modal
+  | "modals.share.toggle" // Shows the share modal
 
 type BoundActionList = {
   // eslint-disable-next-line no-unused-vars
diff --git a/helpers/keybindings.ts b/helpers/keybindings.ts
index 0dc336527..bb785afb1 100644
--- a/helpers/keybindings.ts
+++ b/helpers/keybindings.ts
@@ -17,10 +17,49 @@ let keybindingsEnabled = true
 type ModifierKeys = "ctrl" | "alt"
 
 /* eslint-disable prettier/prettier */
-type Key = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k'
-| 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' 
-| 'y' | 'z' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
-| "up" | "down" | "left" | "right" | "?"
+type Key =
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f"
+  | "g"
+  | "h"
+  | "i"
+  | "j"
+  | "k"
+  | "l"
+  | "m"
+  | "n"
+  | "o"
+  | "p"
+  | "q"
+  | "r"
+  | "s"
+  | "t"
+  | "u"
+  | "v"
+  | "w"
+  | "x"
+  | "y"
+  | "z"
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "up"
+  | "down"
+  | "left"
+  | "right"
+  | "/"
+  | "?"
 /* eslint-enable */
 
 type ModifierBasedShortcutKey = `${ModifierKeys}-${Key}`
@@ -44,7 +83,9 @@ export const bindings: {
   "alt-p": "request.method.post",
   "alt-u": "request.method.put",
   "alt-x": "request.method.delete",
-  "?": "flyouts.keybinds.toggle",
+  "/": "flyouts.keybinds.toggle",
+  "?": "modals.support.toggle",
+  "ctrl-x": "modals.share.toggle",
 }
 
 /**
@@ -115,6 +156,9 @@ function getPressedKey(ev: KeyboardEvent): Key | null {
   // Check if question mark
   if (val === "?") return "?"
 
+  // Check if question mark
+  if (val === "/") return "/"
+
   // If no other cases match, this is not a valid key
   return null
 }
diff --git a/helpers/support.js b/helpers/support.js
new file mode 100644
index 000000000..61717b2fd
--- /dev/null
+++ b/helpers/support.js
@@ -0,0 +1,4 @@
+export const showChat = () => {
+  $crisp.push(["do", "chat:show"])
+  $crisp.push(["do", "chat:open"])
+}
diff --git a/lang/en-US.json b/lang/en-US.json
index 6751e917a..937332b2e 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -64,17 +64,33 @@
     "more": "Hide more",
     "preview": "Hide Preview"
   },
+  "support": {
+    "title": "Support",
+    "documentation": "Read more about Hoppscotch",
+    "changelog": "Read more about latest releases",
+    "twitter": "Follow us on Twitter",
+    "chat": "Questions? Chat with us!",
+    "forum": "Ask questions and get answers",
+    "team": "Get in touch with the team",
+    "shortcuts": "Become more efficient"
+  },
   "app": {
     "name": "Hoppscotch",
     "version": "v2.0",
     "documentation": "Documentation",
     "whats_new": "What's new?",
+    "chat_with_us": "Chat with us",
     "keyboard_shortcuts": "Keyboard shortcuts",
     "new_version_found": "New version found. Refresh to update.",
     "twitter": "Twitter",
     "terms_and_privacy": "Terms and privacy",
     "status": "Status",
-    "help": "Help, feedback and</br>documentation"
+    "help": "Help, feedback and</br>documentation",
+    "invite": "Invite",
+    "invite_your_friends": "Invite your friends",
+    "invite_description": "In Hoppscotch, we designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
+    "share": "Share",
+    "copy": "Copy"
   },
   "collection": {
     "save_as": "Save as",
@@ -189,7 +205,12 @@
     "results": "Results"
   },
   "shortcut": {
-    "show_all": "Show all Shortcuts",
+    "general": {
+      "help_menu": "Help menu",
+      "show_all": "Keyboard shortcuts",
+      "command_menu": "Command menu",
+      "close_current_menu": "Close current menu"
+    },
     "send_request": "Send Request",
     "save_to_collections": "Save to Collections",
     "copy_request_link": "Copy Request Link",
diff --git a/nuxt.config.js b/nuxt.config.js
index 431e36e06..33cf6f8db 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -98,6 +98,7 @@ export default {
     "~/plugins/vuex-persist",
     "~/plugins/vue-rx",
     "~/plugins/vue-apollo",
+    "~/plugins/crisp",
     { src: "~/plugins/web-worker", ssr: false },
   ],
 
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 9457bb304..3aa865e07 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -375,7 +375,7 @@
                       {{ $t("shortcut.reset_request") }}
                     </span>
                     <span class="flex flex-1 items-center">
-                      {{ $t("shortcut.show_all") }}
+                      {{ $t("shortcut.general.show_all") }}
                     </span>
                   </div>
                   <div class="flex flex-col space-y-4">
diff --git a/pages/settings.vue b/pages/settings.vue
index 8f7e9597f..847ca83f8 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -242,6 +242,7 @@
                   svg="firefox"
                   label="Firefox"
                   :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
+                  :active-info-icon="hasFirefoxExtInstalled"
                   outline
                 />
               </span>
@@ -252,6 +253,7 @@
                   svg="chrome"
                   label="Chrome"
                   :info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
+                  :active-info-icon="hasChromeExtInstalled"
                   outline
                 />
               </span>
diff --git a/plugins/crisp.js b/plugins/crisp.js
new file mode 100644
index 000000000..45e6b5743
--- /dev/null
+++ b/plugins/crisp.js
@@ -0,0 +1,18 @@
+export default () => {
+  window.$crisp = []
+  window.CRISP_WEBSITE_ID = "3ad30257-c192-4773-955d-fb05a4b41af3"
+  const d = document
+  const s = d.createElement("script")
+
+  s.src = "https://client.crisp.chat/l.js"
+  s.async = 1
+  d.getElementsByTagName("head")[0].appendChild(s)
+  $crisp.push(["do", "chat:hide"])
+  $crisp.push([
+    "on",
+    "chat:closed",
+    () => {
+      $crisp.push(["do", "chat:hide"])
+    },
+  ])
+}