feat: share and support modals

components/app/Footer.vue

@@ -33,7 +33,7 @@
           >
             <template #trigger>
               <ButtonSecondary
-                svg="life-buoy"
+                svg="help-circle"
                 class="!rounded-none"
                 :label="$t('app.help')"
               />
@@ -73,10 +73,18 @@
               <SmartItem
                 svg="twitter"
                 :label="$t('app.twitter')"
-                to="https://twitter.com/hoppscotch_io"
+                to="https://hoppscotch.io/twitter"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
+              <SmartItem
+                svg="user-plus"
+                :label="$t('app.invite')"
+                @click.native="
+                  showShare = true
+                  $refs.options.tippy().hide()
+                "
+              />
               <SmartItem
                 svg="lock"
                 :label="$t('app.terms_and_privacy')"
@@ -115,6 +123,7 @@
       </div>
     </div>
     <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
+    <AppShare :show="showShare" @hide-modal="showShare = false" />
   </div>
 </template>
 
@@ -127,11 +136,16 @@ import { useSetting } from "~/newstore/settings"
 export default defineComponent({
   setup() {
     const showShortcuts = ref(false)
+    const showShare = ref(false)
 
     defineActionHandler("flyouts.keybinds.toggle", () => {
       showShortcuts.value = !showShortcuts.value
     })
 
+    defineActionHandler("modals.share.toggle", () => {
+      showShare.value = !showShare.value
+    })
+
     return {
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
@@ -140,6 +154,7 @@ export default defineComponent({
       navigatorShare: !!navigator.share,
 
       showShortcuts,
+      showShare,
     }
   },
   watch: {

components/app/Header.vue

@@ -20,6 +20,20 @@
           class="rounded"
           @click.native="showInstallPrompt()"
         />
+        <!-- <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${$t('app.search')} <kbd>/</kbd>`"
+          svg="search"
+          class="rounded"
+          @click.native="showSearch = true"
+        /> -->
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${$t('support.title')} <kbd>?</kbd>`"
+          svg="life-buoy"
+          class="rounded"
+          @click.native="showSupport = true"
+        />
         <ButtonSecondary
           v-if="currentUser === null"
           svg="upload-cloud"
@@ -33,7 +47,7 @@
           :label="$t('header.login')"
           @click.native="showLogin = true"
         />
-        <span v-else class="pr-2">
+        <span v-else class="px-2">
           <tippy ref="user" interactive trigger="click" theme="popover" arrow>
             <template #trigger>
               <ProfilePicture
@@ -68,20 +82,35 @@
     </header>
     <AppAnnouncement v-if="!isOnLine" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
+    <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" /> -->
   </div>
 </template>
 
 <script>
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
 import { useReadonlyStream } from "~/helpers/utils/composables"
+import { defineActionHandler } from "~/helpers/actions"
 
 export default defineComponent({
   setup() {
+    const showSupport = ref(false)
+    // const showSearch = ref(false)
+
+    defineActionHandler("modals.support.toggle", () => {
+      showSupport.value = !showSupport.value
+    })
+    // defineActionHandler("modals.search.toggle", () => {
+    //   showSearch.value = !showSearch.value
+    // })
+
     return {
       currentUser: useReadonlyStream(currentUser$, null),
+      showSupport,
+      // showSearch,
     }
   },
   data() {

components/app/Sidenav.vue

@@ -17,71 +17,16 @@
         <span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
       </NuxtLink>
     </nav>
-    <!-- <nav
-      class="
-        flex flex-nowrap
-        p-2
-        items-center
-        justify-center
-        md:(flex-col
-        space-x-0 space-y-2)
-        "
-    >
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip', placement: 'top' }"
-        :title="`${$t('app.search')} <kbd>/</kbd>`"
-        svg="search"
-        class="rounded"
-        @click.native="showSearch = true"
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip', placement: 'top' }"
-        :title="$t('app.invite')"
-        svg="user-plus"
-        class="rounded"
-        @click.native="showShare = true"
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip', placement: 'top' }"
-        :title="`${$t('support.title')} <kbd>?</kbd>`"
-        svg="life-buoy"
-        class="rounded"
-        @click.native="showSupport = true"
-      />
-    </nav> -->
-    <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
-    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-    <AppShare :show="showShare" @hide-modal="showShare = false" /> -->
   </aside>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
 import { useSetting } from "~/newstore/settings"
-// import { defineActionHandler } from "~/helpers/actions"
 
 export default defineComponent({
   setup() {
-    // const showSearch = ref(false)
-    // const showSupport = ref(false)
-    // const showShare = ref(false)
-
-    // defineActionHandler("modals.search.toggle", () => {
-    //   showSearch.value = !showSearch.value
-    // })
-
-    // defineActionHandler("modals.support.toggle", () => {
-    //   showSupport.value = !showSupport.value
-    // })
-
-    // defineActionHandler("modals.share.toggle", () => {
-    //   showShare.value = !showShare.value
-    // })
-
     return {
-      //     showSearch,
-      //     showSupport,
-      //     showShare,
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
     }
   },
@@ -159,7 +104,7 @@ export default defineComponent({
     @apply mt-2;
     @apply font-font-medium;
 
-    font-size: 90%;
+    font-size: calc(var(--body-font-size) - 0.062rem);
   }
 
   &.exact-active-link {

components/app/Support.vue

@@ -59,9 +59,9 @@
           @click.native="hideModal()"
         />
         <SmartItem
-          svg="twitter"
+          svg="logos/twitter"
           :label="$t('app.twitter')"
-          to="https://twitter.com/hoppscotch_io"
+          to="https://hoppscotch.io/twitter"
           blank
           :description="$t('support.twitter')"
           info-icon="chevron_right"