From d9dc5b796765b2d80af4bf438a6478a68d0b3ab5 Mon Sep 17 00:00:00 2001
From: AmirGoodarzi <amirgoodarzi.web@gmail.com>
Date: Fri, 2 May 2025 23:36:44 +0330
Subject: [PATCH] Update call to artist button styles -- Fix a responsive bug

---
 package.json                                             | 2 +-
 .../appointments/+component/AppointmentListItem.tsx      | 9 ++++-----
 src/pages/explore/+components/ExploreCard.tsx            | 1 +
 src/pages/explore/index.tsx                              | 7 +++++--
 .../loyalty-cards/+components/LoyaltyCardListItem.tsx    | 6 +++---
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 3ced19b..0ea433c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "enduser.salona",
   "private": true,
-  "version": "0.8.6",
+  "version": "0.8.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/pages/appointments/+component/AppointmentListItem.tsx b/src/pages/appointments/+component/AppointmentListItem.tsx
index cb7e232..9d8408b 100644
--- a/src/pages/appointments/+component/AppointmentListItem.tsx
+++ b/src/pages/appointments/+component/AppointmentListItem.tsx
@@ -21,20 +21,19 @@ const AppointmentListItem = ({ data }: Props) => {
           <b>آرایشگر: </b>
           <p className="inline-block break-word">{data.artist.name}</p>
         </div>
-        <div className="flex items-center gap-2 whitespace-nowrap">
-          <b>موبایل: </b>
+        <div className="flex items-center justify-between gap-2 whitespace-nowrap">
           <p className="inline-block break-word">{data.artist.phone_number}</p>
           <HoverTooltip label="تماس">
             <a
-              className="rounded-full bg-[#AF00FA] hover:bg-[#AF00FA] size-9 inline-flex items-center justify-center ms-1"
+              className="rounded-full bg-[#AF00FA] hover:bg-[#AF00FA] size-11 inline-flex items-center justify-center mr-auto animate-bounce duration-1000"
               href={`tel:${data.artist.phone_number}`}
             >
-              <PhoneCallIcon className="text-white size-4" />
+              <PhoneCallIcon className="text-white size-5" />
             </a>
           </HoverTooltip>
         </div>
       </div>
-      <div className="flex relative w-44 -mr-14">
+      <div className="flex relative w-44 -mr-[70px]">
         <img
           src={cardTimeBg}
           className="absolute -top-[15px] w-full h-[124px]"
diff --git a/src/pages/explore/+components/ExploreCard.tsx b/src/pages/explore/+components/ExploreCard.tsx
index 2f16c0d..32c8244 100644
--- a/src/pages/explore/+components/ExploreCard.tsx
+++ b/src/pages/explore/+components/ExploreCard.tsx
@@ -30,6 +30,7 @@ const CardComponent = ({
       className="flex flex-col items-center gap-2 size-full text-center cursor-pointer p-2 active:scale-95 transition-all"
       data-aos="fade-up"
       data-aos-delay={100 * index}
+      data-aos-offset="-200"
       {...otherProps}
     >
       <div
diff --git a/src/pages/explore/index.tsx b/src/pages/explore/index.tsx
index 060e9cd..1007e6f 100644
--- a/src/pages/explore/index.tsx
+++ b/src/pages/explore/index.tsx
@@ -102,12 +102,15 @@ const Explore = () => {
 
   return (
     <div className="explore-page-wrapper bg-slate-50 min-h-[100dvh] flex flex-col gap-4 pt-20">
-      <div className="absolute -top-1/3 -right-0 size-full bg-[url('@/assets/images/bg-light-effect.png')] bg-cover bg-no-repeat opacity-10" />
+      <div className="absolute -top-1/3 -right-0 size-full bg-[url('@/assets/images/bg-light-effect.png')] bg-cover bg-no-repeat opacity-30 md:opacity-50 rotate-180" />
       <div>
         <TopSlider />
       </div>
       <div className="w-full relative p-2 flex-1 overflow-hidden">
-        <div className="absolute bottom-0 -left-1/4 size-full bg-[url('@/assets/images/bg-light-effect.png')] bg-cover bg-no-repeat opacity-20" />
+        <div
+          className="absolute bottom-0 -left-1/4 lg:left-0 size-full bg-[url('@/assets/images/bg-light-effect.png')]  
+        bg-cover bg-no-repeat opacity-20 md:opacity-50"
+        />
         <Swiper dir="rtl" {...sliderProps} className="max-w-3xl mx-auto">
           {groupedCards.map((slideGroup, index) => (
             <SwiperSlide key={index} className="min-h-[480px]">
diff --git a/src/pages/loyalty-cards/+components/LoyaltyCardListItem.tsx b/src/pages/loyalty-cards/+components/LoyaltyCardListItem.tsx
index eac2143..d6395f1 100644
--- a/src/pages/loyalty-cards/+components/LoyaltyCardListItem.tsx
+++ b/src/pages/loyalty-cards/+components/LoyaltyCardListItem.tsx
@@ -38,10 +38,10 @@ const LoyaltyCardListItem = ({ data }: Props) => {
             </p>
             <HoverTooltip label="تماس">
               <a
-                className="rounded-full bg-[#AF00FA] hover:bg-[#AF00FA] size-9 inline-flex items-center justify-center ms-1"
+                className="rounded-full bg-[#AF00FA] hover:bg-[#AF00FA] size-11 inline-flex items-center justify-center mr-auto animate-bounce duration-1000"
                 href={`tel:${data.artist.phone_number}`}
               >
-                <PhoneCallIcon className="text-white size-4" />
+                <PhoneCallIcon className="text-white size-5" />
               </a>
             </HoverTooltip>
           </div>
@@ -70,7 +70,7 @@ const LoyaltyCardListItem = ({ data }: Props) => {
         </Link>
         <AccordionTrigger className="[&>svg]:hidden p-0">
           <Button
-            className="border-primary text-gray-700 font-bold"
+            className="w-full border-primary text-gray-700 font-bold"
             variant="outline"
           >
             <EyeIcon />