load pattern

src/app/[name]/(Dialogs)/order/checkout/[id]/components/TableSection.tsx

@@ -22,7 +22,7 @@ export const TableSection = ({ tableNumber, onIncrement, onDecrement }: TableSec
                     <div className='w-full flex justify-end'>
                         <motion.div
                             whileTap={{ scale: 1.05 }}
-                            className="bg-background active:drop-shadow-xs max-w-[132px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"
+                            className="bg-background pattern-secondary-bg active:drop-shadow-xs max-w-[132px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"
                         >
                             <button
                                 onClick={onIncrement}

src/app/[name]/(Main)/[id]/page.tsx

@@ -231,7 +231,7 @@ function FoodPage({}: Props) {
           <span dir="ltr">{ef(price.toLocaleString("en-US"))} T</span>
           <motion.div
             whileTap={isAvailable ? { scale: 1.05 } : undefined}
-            className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
+            className="bg-background pattern-secondary-bg active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
           >
             {quantity <= 0 ? (
               <button

src/app/[name]/(Main)/about/AboutPage.tsx

@@ -270,7 +270,7 @@ function AboutPage() {
         <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
           <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
             <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
-            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
               <EqualizerIcon className='dark:text-white' />
               <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
             </button>

src/app/[name]/(Main)/components/MenuIndex.tsx

@@ -175,11 +175,11 @@ const MenuIndex = () => {
         <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
           <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
           <div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
-            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
               <Candle2 className="stroke-foreground" size={16} />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
             </button>
-            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2">
+            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center gap-2">
               <TextAlignIcon className="text-foreground" />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
             </button>

src/app/[name]/(Profile)/profile/address/new/components/AddressDetailsModal.tsx

@@ -58,7 +58,7 @@ export const AddressDetailsModal = ({
                                     e.preventDefault();
                                     onChangePosition();
                                 }}
-                                className='bg-background! w-fit! text-foreground! flex items-center gap-2 text-xs'
+                                className='bg-background! pattern-secondary-bg w-fit! text-foreground! flex items-center gap-2 text-xs'
                                 disabled={isPending}
                             >
                                 <Location color='#6b7280' variant='Bold' className='size-4' />

src/app/[name]/(Profile)/profile/address/page.tsx

@@ -132,7 +132,7 @@ function UserAddressesPage({ }: Props) {
                                         onClick={() => handleSetDefault(address.id)}
                                         disabled={isSettingDefault}
                                         pending={isSettingDefault}
-                                        className='bg-background! text-foreground! flex items-center gap-2 text-xs h-8 flex-1'
+                                        className='bg-background! pattern-secondary-bg text-foreground! flex items-center gap-2 text-xs h-8 flex-1'
                                     >
                                         <TickCircle variant='Bold' className='fill-foreground stroke-background size-4.5 mb-0.5' />
                                         تنظیم به عنوان فعال
@@ -140,14 +140,14 @@ function UserAddressesPage({ }: Props) {
                                 )}
                                 <div className="flex gap-2">
                                     <Link href={getEditHref(address.id)}>
-                                        <Button className='bg-background! text-foreground! flex justify-center items-center gap-2 text-xs p-0! size-8!'>
+                                        <Button className='bg-background! pattern-secondary-bg text-foreground! flex justify-center items-center gap-2 text-xs p-0! size-8!'>
                                             <Edit2 className='stroke-foreground size-5 mb-0.5' />
                                         </Button>
                                     </Link>
                                     <Button
                                         onClick={() => handleDeleteClick(address.id)}
                                         disabled={isDeleting}
-                                        className='bg-background! text-foreground! flex justify-center items-center gap-2 text-xs p-0! size-8!'
+                                        className='bg-background! pattern-secondary-bg text-foreground! flex justify-center items-center gap-2 text-xs p-0! size-8!'
                                     >
                                         <Trash className='stroke-foreground size-5 mb-0.5' />
                                     </Button>

src/app/[name]/RestaurantLayoutClient.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import ActiveChecker from "@/components/ActiveChecker";
+import AppBackground from "@/components/background/AppBackground";
 import CartChecker from "@/components/CartChecker";
 import RestaurantHeadManager from "@/components/RestaurantHeadManager";
 import RestaurantNotFoundGuard from "@/components/RestaurantNotFoundGuard";
@@ -15,7 +16,10 @@ export default function RestaurantLayoutClient({ children }: Props) {
     <>
       <RestaurantHeadManager />
       <RestaurantNotFoundGuard>
-        <PreferenceWrapper>{children}</PreferenceWrapper>
+        <PreferenceWrapper>
+          <AppBackground />
+          {children}
+        </PreferenceWrapper>
       </RestaurantNotFoundGuard>
       <CartChecker />
       <ActiveChecker />

src/app/[name]/api/proxy-svg/route.ts

@@ -17,7 +17,7 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: "Invalid URL" }, { status: 400 });
     }
     const res = await fetchWithTimeout(url, {
-      timeoutMs: 5000,
+      timeoutMs: 15_000,
       headers: { Accept: "image/svg+xml, text/xml, text/plain" },
     });
     if (!res.ok) {