From b0492f3adc9295cec3b2eb2e5a4cd2da6aa5f2f4 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 27 Oct 2023 18:07:12 -0300
Subject: [PATCH] refactor(stackedComponents): change grid columns to 1 to
 improve layout refactor(market-card): remove unnecessary blur effect and add
 opacity on hover to improve visual feedback refactor(market-card): add
 condition to prevent adding to cart while loading to prevent multiple
 requests

---
 src/frontend/src/components/stackedComponents/index.tsx    | 2 +-
 .../src/pages/StorePage/components/market-card.tsx         | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/stackedComponents/index.tsx b/src/frontend/src/components/stackedComponents/index.tsx
index ee91f561e..4591a3a3e 100644
--- a/src/frontend/src/components/stackedComponents/index.tsx
+++ b/src/frontend/src/components/stackedComponents/index.tsx
@@ -7,7 +7,7 @@ interface ElementStackProps {
 const ElementStack: React.FC<ElementStackProps> = ({ children }) => {
   return (
     <div
-      className={`grid grid-cols-3`}
+      className={`grid grid-cols-1`}
       style={{ display: "grid", gridAutoFlow: "row" }}
     >
       {children.map((child, index) => (
diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index ff75c4db1..1c0208c83 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@@ -97,7 +97,7 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
   }
 
   return (
-    <Card className="group relative flex cursor-pointer flex-col justify-between overflow-hidden transition-all hover:shadow-md">
+    <Card className="group relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-md">
       <div>
         <CardHeader>
           {/*
@@ -166,7 +166,7 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
                   </div>
                 }
               >
-                <div className="hover:blur-sm">
+                <div className="pr-2 hover:opacity-40">
                   {testTags.length > 0 ? (
                     <ElementStack>
                       {testTags.map((tag, index) => (
@@ -222,6 +222,9 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
               size="sm"
               className="whitespace-nowrap "
               onClick={() => {
+                if (loading) {
+                  return;
+                }
                 if (!added) {
                   handleAdd();
                 } else {