chore: visual updates (#128)

* chore: update tests

* chore: observer update

* chore: visual update

* chore: update

Author: hmbanan666

apps/storefront-telegram/app/components/ProductCard.vue

@@ -28,9 +28,9 @@
         <UButton
           variant="soft"
           color="neutral"
-          size="md"
+          size="sm"
           :trailing-icon="withSingleVariant ? 'i-lucide-plus' : 'i-lucide-arrow-right'"
-          class="w-fit hover:bg-muted active:bg-muted"
+          class="py-1 w-fit hover:bg-muted active:bg-muted"
         >
           <div class="text-base font-medium">
             <span v-if="!withSingleVariant" class="pr-1 lowercase">{{ $t('app.cart.from') }}</span>

apps/storefront-telegram/app/components/UserPointsCard.vue

@@ -1,18 +1,16 @@
 <template>
-  {{ x }} / {{ y }} / {{ z }}
-
-  <div ref="target" class="relative w-full h-auto aspect-3/2 perspective-normal motion-preset-slide-down">
+  <div class="relative w-full h-auto aspect-3/2 perspective-normal motion-preset-slide-down">
     <div
       class="absolute inset-0 bg-primary rounded-lg"
       :style="{
-        transform: `rotateX(${x * 6}deg) rotateY(${y * 6}deg)`,
+        transform: `rotateX(${x * 5}deg) rotateY(${y * 5}deg)`,
       }"
     />
 
     <div
       class="z-10 w-full h-full p-4 flex flex-col justify-between tg-text-button"
       :style="{
-        transform: `rotateX(${x * 4}deg) rotateY(${y * 4}deg)`,
+        transform: `rotateX(${x * 3}deg) rotateY(${y * 3}deg)`,
       }"
     >
       <div class="flex flex-row justify-between items-center">
@@ -56,9 +54,6 @@
 import type { EventListener } from '@telegram-apps/sdk-vue'
 import { off, on } from '@telegram-apps/sdk-vue'
 
-const target = useTemplateRef<HTMLElement>('target')
-// const parallax = reactive(useParallax(target))
-
 const x = ref(0)
 const y = ref(0)
 const z = ref(0)

apps/storefront-telegram/app/components/catalog/CategoriesSliderMenu.vue

@@ -6,10 +6,10 @@
           v-for="category in menuStore.menu?.categories"
           :id="`to-${category.slug}`"
           :key="category.id"
-          class="scroll-ml-24 snap-start text-sm text-muted rounded-full"
+          class="scroll-ml-24 snap-start text-sm text-muted font-medium rounded-full"
           :class="{ 'tg-text-button bg-primary': visibleCategory === category.slug }"
         >
-          <button class="px-2.5 py-1" @click="scrollToCategory(category.slug)">
+          <button class="px-2.5 py-1.25" @click="scrollToCategory(category.slug)">
             {{ category.name }}
           </button>
         </div>

apps/storefront-telegram/app/components/catalog/CategoryBlock.vue

@@ -6,7 +6,7 @@
     ]"
     class="flex flex-col gap-3 mb-10"
   >
-    <h2 :id="category?.slug" class="scroll-mt-22 text-2xl/5 font-semibold tracking-tight">
+    <h2 :id="category?.slug" class="scroll-mt-28 text-2xl/5 font-semibold tracking-tight">
       {{ category?.name }}
     </h2>
 

apps/storefront-telegram/app/composables/useCatalog.ts

@@ -1,7 +1,7 @@
 function _useCatalog() {
   const visibleCategory = ref<string | null>(null)
 
-  const observerOptions = { rootMargin: '0px 0px -400px 0px' }
+  const observerOptions = { rootMargin: '0px 0px 0px 0px' }
 
   const scrollToCategory = useDebounceFn(() => {
     const category = window.document.getElementById(`to-${visibleCategory.value}`)

apps/storefront-telegram/app/utils/init.ts

@@ -92,7 +92,7 @@ export async function init(options: {
 
   // Gyroscope
   postEvent('web_app_start_gyroscope', {
-    refresh_rate: 50,
+    refresh_rate: 500,
   })
 
   if (mountViewport.isAvailable()) {