From 7da427c669676a5ed6e46fb2dfa53dd00811ec64 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 28 Aug 2021 20:48:13 +0530
Subject: [PATCH] feat: share and support modals

---
 assets/icons/logos/twitter.svg |  1 +
 assets/icons/reddit.svg        |  2 +-
 components/app/Footer.vue      | 19 ++++++++++--
 components/app/Header.vue      | 33 ++++++++++++++++++--
 components/app/Sidenav.vue     | 57 +---------------------------------
 components/app/Support.vue     |  4 +--
 netlify.toml                   |  6 ++++
 7 files changed, 59 insertions(+), 63 deletions(-)
 create mode 100644 assets/icons/logos/twitter.svg

diff --git a/assets/icons/logos/twitter.svg b/assets/icons/logos/twitter.svg
new file mode 100644
index 000000000..ff6f523a8
--- /dev/null
+++ b/assets/icons/logos/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="39.2" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 209"><path d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435c0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45" fill="#55acee"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/reddit.svg b/assets/icons/reddit.svg
index ea61eec05..de992be10 100644
--- a/assets/icons/reddit.svg
+++ b/assets/icons/reddit.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><circle fill="#FF4500" cx="128" cy="128" r="128"></circle><path d="M213.15 129.22c0-10.376-8.391-18.617-18.617-18.617a18.74 18.74 0 0 0-12.97 5.189c-12.818-9.157-30.368-15.107-49.9-15.87l8.544-39.981l27.773 5.95c.307 7.02 6.104 12.667 13.278 12.667c7.324 0 13.275-5.95 13.275-13.278c0-7.324-5.95-13.275-13.275-13.275c-5.188 0-9.768 3.052-11.904 7.478l-30.976-6.562c-.916-.154-1.832 0-2.443.458c-.763.458-1.22 1.22-1.371 2.136l-9.464 44.558c-19.837.612-37.692 6.562-50.662 15.872a18.74 18.74 0 0 0-12.971-5.188c-10.377 0-18.617 8.391-18.617 18.617c0 7.629 4.577 14.037 10.988 16.939a33.598 33.598 0 0 0-.458 5.646c0 28.686 33.42 52.036 74.621 52.036c41.202 0 74.622-23.196 74.622-52.036a35.29 35.29 0 0 0-.458-5.646c6.408-2.902 10.985-9.464 10.985-17.093zM85.272 142.495c0-7.324 5.95-13.275 13.278-13.275c7.324 0 13.275 5.95 13.275 13.275s-5.95 13.278-13.275 13.278c-7.327.15-13.278-5.953-13.278-13.278zm74.317 35.251c-9.156 9.157-26.553 9.768-31.588 9.768c-5.188 0-22.584-.765-31.59-9.768c-1.371-1.373-1.371-3.51 0-4.883c1.374-1.371 3.51-1.371 4.884 0c5.8 5.8 18.008 7.782 26.706 7.782c8.699 0 21.058-1.983 26.704-7.782c1.374-1.371 3.51-1.371 4.884 0c1.22 1.373 1.22 3.51 0 4.883zm-2.443-21.822c-7.325 0-13.275-5.95-13.275-13.275s5.95-13.275 13.275-13.275c7.327 0 13.277 5.95 13.277 13.275c0 7.17-5.95 13.275-13.277 13.275z" fill="#FFF"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g class="icon-tabler" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8c2.648 0 5.028.826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59-4.03 6.5-9 6.5c-4.875 0-8.845-2.8-9-6.294l-1-.206a2.5 2.5 0 0 1 2.326-4.36C5.973 8.827 8.353 8 11.001 8z"></path><path d="M12 8l1-5l6 1"></path><circle cx="19" cy="4" r="1"></circle><circle cx="9" cy="13" r=".5" fill="currentColor"></circle><circle cx="15" cy="13" r=".5" fill="currentColor"></circle><path d="M10 17c.667.333 1.333.5 2 .5s1.333-.167 2-.5"></path></g></svg>
\ No newline at end of file
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index b0552750d..fe8edb17b 100644
--- a/components/app/Footer.vue
+++ b/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: {
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 5c7467340..8be8e3f4f 100644
--- a/components/app/Header.vue
+++ b/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() {
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index ca24d5627..f5ddd0754 100644
--- a/components/app/Sidenav.vue
+++ b/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 {
diff --git a/components/app/Support.vue b/components/app/Support.vue
index 3306690bd..04521ba88 100644
--- a/components/app/Support.vue
+++ b/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"
diff --git a/netlify.toml b/netlify.toml
index 62dc8c958..ede59fb2a 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -31,3 +31,9 @@
   to = "http://eepurl.com/hy0eWH"
   status = 301
   force = true
+
+[[redirects]]
+  from = "/twitter"
+  to = "https://twitter.com/hoppscotch_io"
+  status = 301
+  force = true