refactor: settings page + ui components

components/app/Extensions.vue

@@ -7,30 +7,28 @@
       </div>
     </template>
     <template #body>
-      <p class="info">
-        {{ $t("extensions_info1") }}
-      </p>
-      <div class="px-2">
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
+      <div class="flex flex-col px-2 space-y-2">
+        <SmartItem
           to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
           blank
-          :title="{ hasFirefoxExtInstalled: $t('installed') }"
           svg="firefox"
           label="Firefox"
+          :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
         />
-      </div>
-      <div class="px-2">
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
+        <SmartItem
           to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
           blank
-          :title="{ hasChromeExtInstalled: $t('installed') }"
           svg="chrome"
           label="Chrome"
+          :info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
         />
       </div>
     </template>
+    <template #footer>
+      <div class="px-2 text-secondaryLight text-xs">
+        {{ $t("extensions_info1") }}
+      </div>
+    </template>
   </SmartModal>
 </template>
 

components/app/Header.vue

@@ -12,10 +12,11 @@
         @click.native="showInstallPrompt()"
       />
       <span tabindex="-1">
-        <span v-if="currentUser === null">
-          <ButtonSecondary label="Sign in" @click.native="showLogin = true" />
-          <ButtonPrimary label="Sign up" @click.native="showLogin = true" />
-        </span>
+        <ButtonPrimary
+          v-if="currentUser === null"
+          label="Get Started"
+          @click.native="showLogin = true"
+        />
         <tippy v-else tabindex="-1" trigger="click" theme="popover" arrow>
           <template #trigger>
             <ProfilePicture
@@ -84,13 +85,12 @@
         </tippy>
       </span>
     </div>
-    <AppLogin :show="showLogin" @hide-modal="showLogin = false" />
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <AppExtensions
       :show="showExtensions"
       @hide-modal="showExtensions = false"
     />
     <AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
-    <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
   </header>
 </template>
 
@@ -110,7 +110,6 @@ export default {
       showLogin: false,
       showExtensions: false,
       showShortcuts: false,
-      showEmail: false,
       navigatorShare: navigator.share,
     }
   },
@@ -222,31 +221,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-.logo {
-  @apply text-xl;
-  @apply transition-colors;
-  @apply ease-in-out;
-  @apply duration-150;
-  @apply hover:text-accent;
-}
-
-@keyframes slideIn {
-  0% {
-    @apply opacity-0;
-    @apply -left-4;
-  }
-
-  100% {
-    @apply opacity-100;
-    @apply left-0;
-  }
-}
-
-.slide-in {
-  @apply relative;
-
-  animation: slideIn 0.2s forwards ease-in-out;
-}
-</style>

components/app/Login.vue

@@ -1,26 +0,0 @@
-<template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("login") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
-    </template>
-    <template #body>
-      <FirebaseLogin />
-    </template>
-  </SmartModal>
-</template>
-
-<script>
-export default {
-  props: {
-    show: Boolean,
-  },
-  methods: {
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-}
-</script>

components/app/Sidenav.vue

@@ -7,15 +7,15 @@
         :to="localePath(navigation.target)"
         class="
           p-4
-          text-xs
           flex-col flex-1
-          hover:bg-primaryLight
+          hover:bg-primaryDark hover:text-secondaryDark
           items-center
           justify-center
+          transition
         "
       >
-        <i class="material-icons">{{ navigation.icon }}</i>
-        <span class="mt-2">{{ navigation.title }}</span>
+        <i class="material-icons opacity-75">{{ navigation.icon }}</i>
+        <span class="mt-2 text-xs font-semibold">{{ navigation.title }}</span>
       </nuxt-link>
     </nav>
   </aside>
@@ -36,67 +36,11 @@ export default {
       ],
     }
   },
-  computed: {
-    currentNavigation() {
-      return this.navigation.filter((item) =>
-        this.$route.name.includes(item.primary)
-      )
-    },
-  },
-  mounted() {
-    window.addEventListener("scroll", () => {
-      const mainNavLinks = document.querySelectorAll("nav.secondary-nav a")
-      const fromTop = window.scrollY
-      mainNavLinks.forEach(({ hash, classList }) => {
-        const section = document.querySelector(hash)
-        if (
-          section &&
-          section.offsetTop <= fromTop &&
-          section.offsetTop + section.offsetHeight > fromTop
-        ) {
-          classList.add("current")
-        } else {
-          classList.remove("current")
-        }
-      })
-    })
-  },
 }
 </script>
 
 <style scoped lang="scss">
-nav.secondary-nav {
-  @apply flex flex-col flex-nowrap;
-  @apply items-center;
-  @apply justify-center;
-  @apply border-t-2 border-dashed border-divider;
-  @apply pt-2;
-  @apply space-y-2;
-
-  a {
-    @apply inline-flex;
-    @apply items-center;
-    @apply justify-center;
-    @apply flex-shrink-0;
-    @apply p-4;
-    @apply rounded-full;
-    @apply bg-primaryDark;
-    @apply text-secondaryLight;
-    @apply fill-current;
-    @apply outline-none;
-
-    @apply ease-in-out;
-    @apply duration-150;
-
-    &:hover {
-      @apply text-secondary;
-      @apply fill-current;
-    }
-
-    &.current {
-      @apply text-accent;
-      @apply fill-current;
-    }
-  }
+.active {
+  @apply text-accent;
 }
 </style>