From 0b0f5e0c073121f70a78e3a7cd7d2cf7e6b51b3b Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Fri, 30 May 2025 08:58:17 +0200
Subject: [PATCH] Refactor CustomButtonAccept

---
 src/App.tsx                                |  8 ++++----
 src/components/GlobalActions/JoinGroup.tsx |  8 ++++----
 src/styles/App-styles.ts                   | 23 +++++++++++-----------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b898a14..92e0965 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3848,8 +3848,8 @@ function App() {
                 }}
               >
                 <CustomButtonAccept
-                  color="black"
-                  bgColor={theme.palette.other.positive}
+                  customColor="black"
+                  customBgColor={theme.palette.other.positive}
                   sx={{
                     minWidth: '102px',
                     opacity:
@@ -3885,8 +3885,8 @@ function App() {
                 </CustomButtonAccept>
 
                 <CustomButtonAccept
-                  color="black"
-                  bgColor={theme.palette.other.danger}
+                  customColor="black"
+                  customBgColor={theme.palette.other.danger}
                   sx={{
                     minWidth: '102px',
                   }}
diff --git a/src/components/GlobalActions/JoinGroup.tsx b/src/components/GlobalActions/JoinGroup.tsx
index aca7e1f..c28176a 100644
--- a/src/components/GlobalActions/JoinGroup.tsx
+++ b/src/components/GlobalActions/JoinGroup.tsx
@@ -276,8 +276,8 @@ export const JoinGroup = () => {
             disabled={isInGroup}
           >
             <CustomButtonAccept
-              color="black"
-              bgColor={theme.palette.other.positive}
+              customColor="black"
+              customBgColor={theme.palette.other.positive}
               sx={{
                 minWidth: '102px',
                 height: '45px',
@@ -292,8 +292,8 @@ export const JoinGroup = () => {
           </ButtonBase>
 
           <CustomButtonAccept
-            color="black"
-            bgColor={theme.palette.other.danger}
+            customColor="black"
+            customBgColor={theme.palette.other.danger}
             sx={{
               minWidth: '102px',
               height: '45px',
diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts
index 1cbe75b..4f3548f 100644
--- a/src/styles/App-styles.ts
+++ b/src/styles/App-styles.ts
@@ -134,20 +134,21 @@ export const CustomButton = styled(Box)(({ theme }) => ({
 }));
 
 interface CustomButtonProps {
-  bgColor?: string;
-  color?: string;
+  customBgColor?: string;
+  customColor?: string;
 }
 
-export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
-  ({ bgColor, color, theme }) => ({
+export const CustomButtonAccept = styled(Box)<CustomButtonProps>((props) => {
+  const { customBgColor, customColor, theme } = props;
+  return {
     alignItems: 'center',
-    backgroundColor: bgColor || theme.palette.background.default,
+    backgroundColor: customBgColor || theme.palette.background.default,
     borderColor: theme.palette.background.paper,
     borderRadius: 5,
     borderStyle: 'solid',
     borderWidth: '0.5px',
     boxSizing: 'border-box',
-    color: color || theme.palette.background.default,
+    color: customColor || theme.palette.background.default,
     cursor: 'pointer',
     display: 'inline-flex',
     filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
@@ -163,16 +164,16 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
     width: 'fit-content',
     '&:hover': {
       opacity: 1,
-      backgroundColor: bgColor || theme.palette.background.default,
-      color: color || '#fff',
+      backgroundColor: customBgColor || theme.palette.background.default,
+      color: customColor || '#fff',
       svg: {
         path: {
-          fill: color || '#fff',
+          fill: customColor || '#fff',
         },
       },
     },
-  })
-);
+  };
+});
 
 export const CustomInput = styled(TextField)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,