add

public/manifest.json

@@ -8,12 +8,12 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "deckIcon2.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "deckIcon2.png",
       "type": "image/png",
       "sizes": "512x512"
     }

src/App.js

@@ -36,40 +36,38 @@ const App = () => {
   // const user = cookies?.user;
   // const userId = user?.id;
   const [currentPage, setCurrentPage] = useState('');
-  // const { setContext } = useAppContext(); // Assuming useAppContext provides setContext
   const { fetchAllCollectionsForUser, selectedCollection } =
     useCollectionStore();
   const { user, fetchUser } = useUserContext();
   const userId = user?.id;
-  console.log('user', user);
-  console.log('userId', userId);
   const [showLoginDialog, setShowLoginDialog] = useState(false);
 
   const { allDecks, fetchAllDecksForUser, selectedDeck } = useDeckStore();
   const { fetchUserCart, cartData } = useCartStore();
   const { isLoading, setIsLoading } = useUtilityContext();
-  const handleLoginSuccess = (isLoggedIn, userId) => {
-    // Close the dialog and perform other actions if needed
-    setShowLoginDialog(false);
-    console.log('isLoggedIn', isLoggedIn);
-    console.log('userId', userId);
-  };
 
   // useEffect(() => {
   //   getRandomCardImages(10); // Fetch 10 random images on app start
   // }, []); // Add this useEffect
+  const handleLoginSuccess = (isLoggedIn, userId) => {
+    setShowLoginDialog(false);
+    setIsLoading(false);
+    // Perform other actions after login
+  };
+
   useEffect(() => {
-    // Open the login dialog if there's no userId
+    // Open the login dialog and pause splash page if there's no userId
     if (!userId) {
-      setIsLoading(false);
       setShowLoginDialog(true);
+      setIsLoading(true); // Continue showing splash page
     } else {
       setShowLoginDialog(false);
+      setIsLoading(false); // Hide splash page
     }
   }, [userId]);
 
   useEffect(() => {
-    if (userId) {
+    if (userId && typeof userId === 'string') {
       fetchAllCollectionsForUser()
         .then(() => {
           setIsLoading(false);
@@ -84,20 +82,24 @@ const App = () => {
   //   console.log('Checking userId in useEffect:', userId);
   //   setShowLoginDialog(!userId);
   // }, [userId]);
+  useEffect(() => {
+    if (userId && typeof userId === 'string') {
+      fetchAllDecksForUser()
+        .then(() => {
+          setIsLoading(false);
+        })
+        .catch((error) => console.error('Error fetching decks:', error));
+    }
+  }, [userId, fetchAllDecksForUser, selectedDeck, setIsLoading]);
   // useEffect(() => {
-  //   if (user) {
-  //     fetchAllDecksForUser(user?.id).catch((err) =>
-  //       console.error('Failed to get all decks:', err)
-  //     );
-  //   }
-  // }, [fetchAllDecksForUser]);
-  // useEffect(() => {
-  //   if (user) {
-  //     fetchUserCart(user?.id).catch((err) =>
-  //       console.error('Failed to get cart:', err)
-  //     );
+  //   if (userId && typeof userId === 'string') {
+  //     fetchUserCart()
+  //       .then(() => {
+  //         setIsLoading(false);
+  //       })
+  //       .catch((error) => console.error('Error fetching cart:', error));
   //   }
-  // }, [fetchUserCart]);
+  // }, [userId, fetchUserCart, cartData, setIsLoading]);
 
   // Handle initial loading state
   useEffect(() => {
@@ -124,10 +126,6 @@ const App = () => {
         <SplashPage />
       ) : (
         <React.Fragment>
-          {console.log(
-            'Login Dialog should be:',
-            showLoginDialog ? 'Open' : 'Closed'
-          )}
           <LoginDialog
             open={showLoginDialog}
             onClose={() => setShowLoginDialog(false)}
@@ -179,7 +177,7 @@ const App = () => {
               <Route path="/cardDeck" element={<CardDeckAnimation />} />
               {/* Add a Route for 404 Not Found page if needed */}
             </Routes>
-            <Footer />
+            {/* <Footer /> */}
           </AppContainer>
         </React.Fragment>
       )}

src/assets/themeSettings.jsx

@@ -69,6 +69,8 @@ export const themeSettings = (mode) => {
       },
       success: {
         light: colors.greenAccent[100],
+        lighter: colors.greenAccent[200],
+        evenLighter: colors.greenAccent[300],
         main: colors.greenAccent[500],
         dark: colors.greenAccent[200],
         contrastText: '#fff',
@@ -85,41 +87,50 @@ export const themeSettings = (mode) => {
         hover: mode === 'dark' ? colors.grey[800] : colors.grey[200],
       },
     },
-    // chart: {
-    //   palette: {
-    //     primary: {
-    //       main: colors.greenAccent[500],
-    //       light: colors.greenAccent[300],
-    //       dark: colors.greenAccent[700],
-    //       contrastText: '#fff',
-    //     },
-    //     secondary: {
-    //       main: colors.greenAccent[200],
-    //       light: colors.greenAccent[100],
-    //       dark: colors.greenAccent[400],
-    //       contrastText: '#000',
-    //     },
-    //     background: {
-    //       paper: colors.greenAccent[100],
-    //       default: colors.greenAccent[200],
-    //     },
-    //     text: {
-    //       primary: colors.greenAccent[800],
-    //       secondary: colors.greenAccent[600],
-    //     },
-    //     chartColors: [
-    //       colors.greenAccent[500],
-    //       colors.greenAccent[400],
-    //       colors.greenAccent[300],
-    //       colors.greenAccent[200],
-    //       colors.greenAccent[100],
-    //     ],
-    //   },
-    //   typography: {
-    //     // Define typography styles if needed
-    //   },
-    // },
-
+    chart: {
+      axis: {
+        domain: {
+          line: {
+            stroke: colors.greenAccent[800],
+            strokeWidth: 1,
+          },
+        },
+        ticks: {
+          line: {
+            stroke: colors.greenAccent[700],
+            strokeWidth: 1,
+          },
+          text: {
+            fill: colors.greenAccent[900],
+            fontSize: 12,
+          },
+        },
+      },
+      grid: {
+        line: {
+          stroke: colors.greenAccent[200],
+          strokeWidth: 1,
+        },
+      },
+      legends: {
+        text: {
+          fill: colors.greenAccent[800],
+          fontSize: 12,
+        },
+      },
+      tooltip: {
+        container: {
+          background: colors.greenAccent[100],
+          color: colors.greenAccent[800],
+          fontSize: 12,
+          borderRadius: 4,
+          boxShadow: '0 2px 4px rgba(0,0,0,0.25)',
+        },
+      },
+      points: {
+        borderColor: colors.greenAccent[800],
+      },
+    },
     spacing: (factor) => `${0.25 * factor}rem`,
     shape: {
       borderRadius: 4,

src/components/buttons/actionButtons/CardActionButtons.jsx

@@ -17,6 +17,10 @@ import { useDeckStore } from '../../../context/DeckContext/DeckContext';
 import { useCartStore } from '../../../context/CartContext/CartContext';
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import DeleteIcon from '@material-ui/icons/Delete';
+import {
+  AddCircleOutlineOutlined,
+  RemoveCircleOutlineOutlined,
+} from '@mui/icons-material';
 const cardOtherLogger = new Logger([
   'Action',
   'Card Name',
@@ -35,9 +39,30 @@ const CardActionButtons = ({
   // const { contextProps, isContextAvailable } = useAppContext(context);
   const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
 
-  const { addOneToCollection, removeOneFromCollection } = useCollectionStore();
-  const { addOneToDeck, removeOneFromDeck } = useDeckStore();
-  const { addOneToCart, removeOneFromCart } = useCartStore();
+  const { addOneToCollection, removeOneFromCollection, selectedCollection } =
+    useCollectionStore();
+  const { addOneToDeck, removeOneFromDeck, selectedDeck } = useDeckStore();
+  const { addOneToCart, removeOneFromCart, cartData } = useCartStore();
+
+  // modified to work with any context
+  // Function to check if a card is in a specific context
+  const isCardInContext = useCallback(() => {
+    switch (context) {
+      case 'Collection':
+        return !!selectedCollection?.cards?.find(
+          (c) => c?.card?.id === card?.id
+        );
+      case 'Deck':
+        return !!selectedDeck?.cards?.find((c) => c?.card?.id === card?.id);
+      case 'Cart':
+        return !!cartData?.cart?.find((c) => c?.card?.id === card?.id);
+      default:
+        return false;
+    }
+  }, [card.id, context, selectedCollection, selectedDeck, cartData]);
+
+  const isInContext = isCardInContext();
+
   const styles = {
     box: {
       display: 'flex',
@@ -147,75 +172,43 @@ const CardActionButtons = ({
     performAction(REMOVE_ALL, card);
     closeModal?.();
   };
-
   return (
-    <Box sx={styles.box} onClick={closeModal}>
-      {!isLargeScreen && (
-        <>
-          <Grid container spacing={2} sx={styles.grid}>
-            <Grid
-              item
-              xs={6}
-              sx={{ textAlign: 'center', justifyContent: 'center' }}
+    <Box
+      sx={{ display: 'flex', flexDirection: 'column', gap: theme.spacing(2) }}
+    >
+      {isInContext ? (
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <IconButton
+              aria-label="increase"
+              size="medium"
+              sx={styles.addButton}
+              onClick={() => handleAddClick()}
             >
-              <Typography variant="h8" component="span">
-                {`In ${context}: `}
-              </Typography>
-              <Typography variant="h6" component="span">
-                {card.quantity}
-              </Typography>
-            </Grid>
-
-            <Grid item xs={6} sx={styles.gridItem}>
-              <Button sx={styles.addButton} onClick={handleAddClick}>
-                +
-              </Button>
-              <Button sx={styles.removeButton} onClick={handleRemoveOne}>
-                -
-              </Button>
-            </Grid>
+              <AddCircleOutlineIcon />
+            </IconButton>
           </Grid>
-          <Divider />
-          <Grid container spacing={2} sx={styles.grid2}>
-            <Grid item xs={6} sx={styles.gridItem}>
-              <IconButton
-                aria-label="delete"
-                size="medium"
-                sx={styles.addButton}
-                onClick={handleAddClick}
-              >
-                <AddCircleOutlineIcon fontSize="inherit" />
-              </IconButton>
-            </Grid>
-            <Grid item xs={6} sx={styles.gridItem}>
-              <IconButton
-                aria-label="delete"
-                size="medium"
-                sx={styles.removeButton}
-                onClick={handleRemoveOne}
-              >
-                <DeleteIcon fontSize="inherit" />
-              </IconButton>
-            </Grid>
+          <Grid item xs={6}>
+            <IconButton
+              aria-label="decrease"
+              size="medium"
+              sx={styles.removeButton}
+              onClick={() => handleRemoveOne()}
+            >
+              <RemoveCircleOutlineOutlined />
+            </IconButton>
           </Grid>
-        </>
+        </Grid>
+      ) : (
+        <Button
+          variant="contained"
+          color="secondary"
+          sx={{ ...styles.addButton, width: '100%' }}
+          onClick={() => handleAddClick()}
+        >
+          Add to {context}
+        </Button>
       )}
-      <Button
-        variant="contained"
-        color="secondary"
-        sx={{ ...styles.addButton, width: '100%' }}
-        onClick={handleAddClick}
-      >
-        {`Add to ${context}`}
-      </Button>
-      <Button
-        variant="contained"
-        color="secondary"
-        sx={{ ...styles.removeButton, width: '100%' }}
-        onClick={handleRemoveOne}
-      >
-        {`Remove from ${context}`}
-      </Button>
     </Box>
   );
 };