chore: update WhatsNewDialog UI and position (#4252)

Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/src/components/app/WhatsNewDialog.vue

@@ -1,26 +1,33 @@
 <template>
   <div
-    class="flex flex-col py-2 px-4 w-72 relative border border-[#BCB78B] bg-[#FEFFD2] rounded-md text-[#7E7103]"
+    class="flex flex-col p-[1px] w-72 relative border border-dividerDark bg-dividerLight rounded-md text-secondary border-animation overflow-hidden"
+    :class="{
+      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:aspect-square before:w-full before:absolute before:rounded-md': true,
+    }"
   >
-    <button
+    <div
-      class="absolute top-2 right-2 hover:text-black"
+      class="overflow-hidden relative flex flex-1 bg-dividerLight px-4 py-2 rounded-md"
-      @click="$emit('close-toast')"
     >
-      <IconLucideX />
-    </button>
-    <div class="flex flex-col space-y-3">
-      <p class="leading-5 font-semibold">
-        {{ t("app.updated_text", { version: version }) }}
-      </p>
       <button
-        class="flex items-center space-x-1 hover:underline"
+        class="absolute top-2 right-2 hover:text-secondaryLight"
-        @click="openWhatsNew"
+        @click="$emit('close-toast')"
       >
-        <span>
+        <IconLucideX />
-          {{ t("app.see_whats_new") }}
-        </span>
-        <IconLucideArrowUpRight />
       </button>
+      <div class="flex flex-col space-y-3">
+        <p class="leading-5 font-semibold">
+          {{ t("app.updated_text", { version: version }) }}
+        </p>
+        <button
+          class="flex items-center space-x-1 hover:underline"
+          @click="openWhatsNew"
+        >
+          <span>
+            {{ t("app.see_whats_new") }}
+          </span>
+          <IconLucideArrowUpRight />
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -44,3 +51,41 @@ const openWhatsNew = () => {
   if (props.notesUrl) platform.io.openExternalLink(props.notesUrl)
 }
 </script>
+
+<style>
+/* Transition Classes */
+.list-enter-active {
+  transition: all 1s ease;
+}
+.list-leave-active {
+  transition: all 0.4s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+.list-leave-active {
+  position: absolute;
+}
+
+/* Conic gradient */
+.border-animation::before {
+  background: conic-gradient(
+    transparent 270deg,
+    var(--accent-dark-color),
+    transparent
+  );
+  animation: rotate 4s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
+  }
+
+  to {
+    transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
+  }
+}
+</style>

packages/hoppscotch-common/src/composables/whats-new.ts

@@ -43,6 +43,10 @@ export function useWhatsNewDialog() {
             version: hoppscotchCommonPkgVersion,
           },
           position: "bottom-left",
+          style: {
+            bottom: "15px",
+            left: "30px",
+          },
           duration: Infinity,
         })
       }