chore: visual rework (#140)

Author: hmbanan666

apps/storefront-telegram/app/app.config.ts

@@ -53,7 +53,7 @@ export default defineAppConfig({
     },
     drawer: {
       slots: {
-        content: '!max-h-10/12',
+        content: '!max-h-10/12 ring-default',
       },
     },
     navigationMenu: {

apps/storefront-telegram/app/components/cart/Button.vue

@@ -3,7 +3,7 @@
     v-if="isCartButtonShown"
     variant="solid"
     color="secondary"
-    class="flex-1 transition-all duration-200 ease-in-out"
+    class="flex-1 transition-all duration-200 ease-in-out motion-preset-slide-down motion-duration-500"
     :ui="{
       base: 'px-4 py-2 h-14',
     }"

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

@@ -33,8 +33,8 @@
             :key="category.id"
             variant="ghost"
             color="neutral"
-            size="lg"
-            class="px-0 motion-preset-slide-left"
+            size="xl"
+            class="-ml-2 px-2 py-1.5 font-medium motion-preset-slide-left"
             :class="[
               visibleCategory === category.slug
                 ? 'font-semibold text-primary'

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

@@ -3,12 +3,12 @@
     ref="target"
     class="flex flex-col gap-3 mb-10"
   >
-    <h2 :id="category?.slug" class="scroll-mt-34 text-2xl/5 font-semibold tracking-tight">
+    <h2 :id="category?.slug" class="scroll-mt-36 text-2xl/5 font-semibold tracking-tight">
       {{ category?.name }}
     </h2>
 
     <div class="grid grid-cols-2 gap-2 items-start justify-between">
-      <ProductCard
+      <CatalogProductCard
         v-for="product in products"
         :key="product.id"
         :product-id="product.id"

…-telegram/app/components/ProductCard.vue …m/app/components/catalog/ProductCard.vueapps/storefront-telegram/app/components/ProductCard.vue renamed to apps/storefront-telegram/app/components/catalog/ProductCard.vue apps/storefront-telegram/app/components/ProductCard.vue renamed to apps/storefront-telegram/app/components/catalog/ProductCard.vue

@@ -10,7 +10,7 @@
       </div>
 
       <div class="px-3 py-1 flex-1 flex flex-col gap-1">
-        <p class="text-sm/4 font-medium">
+        <p class="text-sm/4 font-semibold">
           {{ product?.name }}
         </p>
 

apps/storefront-telegram/app/pages/menu.vue

@@ -29,7 +29,7 @@
       <UButton
         variant="ghost"
         color="primary"
-        class="p-0 text-lg font-medium"
+        class="p-0 text-lg font-semibold"
         :label="formatted"
         @click="handleCall()"
       />
@@ -40,13 +40,14 @@
         variant="ghost"
         to="https://vk.com/sushiloveru"
         target="_blank"
-        color="neutral"
+        color="primary"
         size="xl"
         icon="simple-icons:vk"
         class="p-0"
         :ui="{
           leadingIcon: 'size-8',
         }"
+        @click="vibrate()"
       />
     </div>
   </PageContainer>
@@ -61,7 +62,7 @@ const channelStore = useChannelStore()
 
 const tel = '79959999999'
 const formatted = parsePhoneNumberWithError(tel, 'RU').format('INTERNATIONAL')
-const formattedToCall = `tel:${tel}`
+const formattedToCall = `tel:+${tel}`
 
 async function handleCall() {
   vibrate()