From 86534187785fb0ff771411f9236c809f0664ffa1 Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Sun, 13 Sep 2026 20:26:27 +0200
Subject: [PATCH] Match the empty orders icon style to the empty basket state

Drop the tinted circle badge around the icon and use the same plain,
muted-gray sizing as basket.module.scss's empty state instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../orders/OrdersListView.module.scss          | 18 ++++--------------
 src/components/orders/OrdersListView.tsx       |  4 +---
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/components/orders/OrdersListView.module.scss b/src/components/orders/OrdersListView.module.scss
index 5cc21b4..37f5a5d 100644
--- a/src/components/orders/OrdersListView.module.scss
+++ b/src/components/orders/OrdersListView.module.scss
@@ -38,22 +38,12 @@
   @media (prefers-reduced-motion: no-preference) {
     animation: empty-state-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both;
   }
-}
-
-.emptyIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 3.5rem;
-  height: 3.5rem;
-  margin-bottom: $space-2;
-  border-radius: 999px;
-  background: color-mix(in srgb, $color-primary 12%, transparent);
 
   svg {
-    width: 1.75rem;
-    height: 1.75rem;
-    color: $color-primary;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-bottom: $space-2;
+    color: $color-text-muted;
   }
 }
 
diff --git a/src/components/orders/OrdersListView.tsx b/src/components/orders/OrdersListView.tsx
index 5875ef3..5523033 100644
--- a/src/components/orders/OrdersListView.tsx
+++ b/src/components/orders/OrdersListView.tsx
@@ -66,9 +66,7 @@ export const OrdersListView = ({ orders }: OrdersListViewProps) => {
       {displayedOrders.length === 0 ? (
         <div className={styles.empty}>
           <MenuBackdrop />
-          <div className={styles.emptyIcon}>
-            <OrdersIcon />
-          </div>
+          <OrdersIcon />
           <p className={styles.emptyTitle}>No orders yet</p>
           <p className={styles.emptyText}>
             Your placed orders will show up here.