style: ui modifications to data sharing and newsletter component

packages/hoppscotch-sh-admin/locales/en.json

@@ -22,6 +22,7 @@
       "title": "Data Sharing",
       "description": "Help improve Hoppscotch by sharing anonymous data",
       "enable": "Enable Data Sharing",
+      "secondary_title": "Data Sharing Configurations",
       "see_shared": "See what is shared",
       "toggle_description": "Share anonymous data",
       "update_failure": "Failed to update data sharing configurations!!"

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -29,10 +29,8 @@ declare module '@vue/runtime-core' {
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
     HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
     HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideUser: typeof import('~icons/lucide/user')['default']
     SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
     SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
     SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']

packages/hoppscotch-sh-admin/src/components/setup/DataSharingAndNewsletter.vue

@@ -1,67 +1,63 @@
 <template>
-  <div class="flex flex-col items-center justify-center min-h-screen">
-    <div class="text-center">
+  <div
+    class="flex flex-col items-center justify-center min-h-screen space-y-10"
+  >
+    <div class="flex items-center justify-center flex-col space-y-2">
       <h2 class="text-lg">{{ t('data_sharing.welcome') }}</h2>
-      <img src="/assets/images/hoppscotch-title.svg" alt="" class="mt-2 w-56" />
+      <img src="/assets/images/hoppscotch-title.svg" alt="" class="w-52" />
     </div>
     <div
-      class="bg-primaryLight mt-10 p-10 border-2 border-dividerLight rounded-lg"
+      class="bg-primaryLight p-10 border-2 border-dividerLight rounded-lg flex flex-col space-y-8"
     >
-      <section>
-        <div class="flex flex-col">
+      <div class="flex flex-col space-y-5 items-start">
+        <span>
           <p class="text-lg font-bold text-white">
             {{ t('data_sharing.title') }}
           </p>
-          <p class="text-sm font-light">
+          <p class="font-light">
             {{ t('data_sharing.description') }}
           </p>
-          <HoppSmartToggle
-            :on="dataSharingToggle"
-            @change="dataSharingToggle = !dataSharingToggle"
-            class="my-5 text-white w-min justify-start"
-          >
-            {{ t('data_sharing.toggle_description') }}
-          </HoppSmartToggle>
-          <HoppButtonSecondary
-            outline
-            filled
-            :icon="IconShieldQuestion"
-            :label="t('data_sharing.see_shared')"
-            to="http://docs.hoppscotch.io"
-            class="w-min mx-auto mb-2"
-          />
-        </div>
-
-        <div class="mt-5">
+        </span>
+        <HoppSmartToggle
+          :on="dataSharingToggle"
+          @change="dataSharingToggle = !dataSharingToggle"
+        >
+          {{ t('data_sharing.toggle_description') }}
+        </HoppSmartToggle>
+        <HoppSmartAnchor
+          blank
+          to="http://docs.hoppscotch.io"
+          :label="t('data_sharing.see_shared')"
+          class="underline"
+        />
+      </div>
+      <div class="flex flex-col items-start space-y-5">
+        <span>
           <p class="text-lg font-bold text-white">
             {{ t('newsletter.title') }}
           </p>
-          <p>{{ t('newsletter.description') }}</p>
-          <HoppSmartToggle
-            :on="newsletterToggle"
-            @change="newsletterToggle = !newsletterToggle"
-            class="my-5 text-white"
-          >
-            {{ t('newsletter.toggle_description') }}
-          </HoppSmartToggle>
-        </div>
-      </section>
-
-      <div class="flex flex-col w-48 mx-auto mt-5">
+          <p class="font-light">{{ t('newsletter.description') }}</p>
+        </span>
+        <HoppSmartToggle
+          :on="newsletterToggle"
+          @change="newsletterToggle = !newsletterToggle"
+        >
+          {{ t('newsletter.toggle_description') }}
+        </HoppSmartToggle>
+      </div>
+      <div class="flex flex-col space-y-5">
         <HoppButtonPrimary
           :icon="IconLogIn"
           :label="t('app.continue_to_dashboard')"
+          class="mx-10"
           @click="submitSelection"
         />
-        <a href="http://docs.hoppscotch.io">
-          <HoppButtonSecondary
-            outline
-            filled
-            :icon="IconBookOpenText"
-            :label="t('app.read_documentation')"
-            class="mt-3 px-5"
-          />
-        </a>
+        <HoppSmartAnchor
+          blank
+          to="http://docs.hoppscotch.io"
+          :icon="IconBookOpenText"
+          :label="t('app.read_documentation')"
+        />
       </div>
     </div>
   </div>
@@ -136,9 +132,6 @@ const submitSelection = async () => {
   const setupDataComplete = !dataSharingToggle.value || dataSharingResult;
   const setupNewsletterComplete = !newsletterToggle.value || newsletterResult;
 
-  emit(
-    'onSetupComplete',
-    setupDataComplete && setupNewsletterComplete ? true : false
-  );
+  emit('onSetupComplete', setupDataComplete && setupNewsletterComplete);
 };
 </script>