cleaning up styled and custom components

.gitignore

@@ -16,6 +16,7 @@ package-lock.json
 /src/assets/cards
 # production
 /build
+/future-additions
 
 # misc
 .DS_Store

.hintrc

@@ -11,5 +11,11 @@
         ]
       }
     ]
-  }
+  },
+  "browserslist": [
+    "defaults",
+    "not ie 11",
+    "not ios_saf <= 14.8",
+    "not safari <= 14.1"
+  ]
 }

README.md

@@ -6,7 +6,6 @@
 
 TCG Enhanced Cardstore is a full-stack web application designed for trading card game enthusiasts. It offers an all-encompassing platform to effortlessly manage card collections, construct decks, and transact securely. Designed with responsiveness and security at its core, this platform caters to the needs of both occasional collectors and professional traders.
 
-
 ### Key Features
 
 - **Card Search & Management**: Robust search capabilities and collection management tools.
@@ -15,6 +14,36 @@ TCG Enhanced Cardstore is a full-stack web application designed for trading card
 - **Responsive Design**: Mobile-friendly layout for on-the-go access.
 - **Real-Time Updates**: Backend cron jobs ensure the latest card data.
 
+## Gallery
+
+Here's a glimpse of what TCG Enhanced Cardstore offers:
+
+### Home Page
+
+![Home Page](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/homepage.png)
+
+### Deck Builder
+
+![Deck Builder](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/deck-home.png)
+
+### Portfolio
+
+![Portfolio Home](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/collection-home.png)
+
+### Cart
+
+![Cart](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/cart-checkout.png)
+
+### Profile
+
+![Profile](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/profile-home.png)
+
+### Store Search
+
+![Store Search](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/store-home.png)
+
+_For an interactive experience, visit the [Live Demo](https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/)._
+
 ## Technologies
 
 ### Frontend
@@ -101,36 +130,6 @@ The backend for the Enhanced Card Store is built using a diverse set of technolo
 - **cookie-parser & cors**: Handles cookie parsing and enables CORS to manage security and access controls.
 - **crypto-js**: Provides cryptographic functionality including encryption and secure encoding.
 
-## Gallery
-
-Here's a glimpse of what TCG Enhanced Cardstore offers:
-
-### Home Page
-
-![Home Page](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/homepage.png)
-
-### Deck Builder
-
-![Deck Builder](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/deck-home.png)
-
-### Portfolio
-
-![Portfolio Home](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/collection-home.png)
-
-### Cart
-
-![Cart](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/cart-checkout.png)
-
-### Profile
-
-![Profile](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/profile-home.png)
-
-### Store Search
-
-![Store Search](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/store-home.png)
-
-_For an interactive experience, visit the [Live Demo](https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/)._
-
 ## Installation
 
 Get started with these simple steps:

jsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "src"
   },
-  "include": ["src"],
+  "include": ["src", "future-additions/SearchSettings.jsx"],
   "exclude": ["node_modules, build"],
   "paths": {
     "/*": ["src/*"]

src/App.js

@@ -1,13 +1,65 @@
 // App.js
-import React, { useEffect } from 'react';
+import React, { Suspense, lazy } from 'react';
 import './assets/css/index.css';
 import './assets/css/card.css';
 import './assets/css/page.css';
-import Main from './Main';
-// ==============================|| APP ||============================== //
+import useManageCookies from 'context/hooks/useManageCookies';
+import useConfigurator from 'context/hooks/useConfigurator';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import Navigation from 'layout/navigation';
+import Configurator from 'layout/REUSABLE_COMPONENTS/Configurator';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
+import { Route, Routes } from 'react-router-dom';
+import PrivateRoute from 'layout/navigation/PrivateRoute';
+import LoginDialog from 'pages/LoginDialog';
+import { ROUTE_CONFIG } from 'data';
 
+// ==============================|| APP ||============================== //
+const LazyRoute = ({ componentName, ...rest }) => {
+  const Component = lazy(() => import(`./pages/${componentName}`));
+  return <Component {...rest} />;
+};
 const App = () => {
-  return <Main />;
+  const { getCookie } = useManageCookies();
+  const { isLoggedIn } = getCookie(['isLoggedIn']);
+  const { isConfiguratorOpen } = useConfigurator();
+  return (
+    <PageLayout
+      sx={{
+        backgroundColor: '#3D3D3D',
+      }}
+    >
+      <Navigation isLoggedIn={isLoggedIn} />
+      {isConfiguratorOpen && <Configurator />}
+      <TransitionGroup component={null} exit={false}>
+        <CSSTransition key={location.key} classNames="fade" timeout={300}>
+          <Suspense fallback={<LoadingOverlay />}>
+            <Routes>
+              {ROUTE_CONFIG.routes.map(
+                ({ path, componentName, isPrivate }, index) => (
+                  <Route
+                    key={index}
+                    path={path}
+                    element={
+                      isPrivate ? (
+                        <PrivateRoute>
+                          <LazyRoute componentName={componentName} />
+                        </PrivateRoute>
+                      ) : (
+                        <LazyRoute componentName={componentName} />
+                      )
+                    }
+                  />
+                )
+              )}
+            </Routes>
+          </Suspense>
+        </CSSTransition>
+      </TransitionGroup>
+      <LoginDialog />
+    </PageLayout>
+  );
 };
 
 export default App;

src/assets/animations/LoadingCardAnimation.jsx

@@ -11,7 +11,7 @@ const sizes = {
 
 function LoadingCardAnimation({ selected, size = 'medium' }) {
   const mount = useRef(null);
-  const placeholderImage = '../../assets/images/placeholder.png'; // Replace with your placeholder image path
+  const placeholderImage = 'assets/images/placeholder.png'; // Replace with your placeholder image path
   const placeholderTexture = new THREE.TextureLoader().load(placeholderImage);
 
   useEffect(() => {

src/assets/animations/SingleCardAnimation.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { useSpring, animated } from 'react-spring';
-import placeholder from '../../assets/images/placeholder.jpeg';
+import placeholder from 'assets/images/placeholder.jpeg';
 
 const SingleCardAnimation = ({ cardImage }) => {
   const containerRef = useRef(null);
@@ -54,7 +54,7 @@ export default SingleCardAnimation;
 
 // import React, { useRef } from 'react';
 // import { useSpring, animated } from 'react-spring';
-// import placeholder from '../../assets/images/placeholder.jpeg';
+// import placeholder from 'assets/images/placeholder.jpeg';
 
 // const SingleCardAnimation = ({ cardImage }) => {
 //   const containerRef = useRef(null);

src/assets/css/index.css

@@ -11,7 +11,7 @@
   --primary: #6a59ff;
   --white: #ffffff;
   --bg: #f5f5f5;
-  --button-bg-color: #1976d2; /* Original color, but let's introduce a blue scheme */
+  /* --button-bg-color: #1976d2; Original color, but let's introduce a blue scheme */
   --button-hover-bg-color: #4a6da7; /* Subtle blue for hover state */
   --button-hover-border-color: #34597f; /* A darker blue for border on hover */
   --button-border-color: #6a59ff; /* Initial border color */
@@ -101,8 +101,8 @@ body {
 
 form {
   border-radius: 15px;
-  backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
   background-color: rgba(255, 255, 255, 0.13);
   justify-content: center;
   align-items: center;
@@ -163,8 +163,8 @@ button {
 
 .dialog-login {
   border-radius: 15px;
-  backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
   background-color: rgba(255, 255, 255, 0.13);
   justify-content: center;
   align-items: center;
@@ -196,8 +196,9 @@ button {
 .hero-section-container {
   background: rgba(189, 181, 181, 0.1);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(5px);
+
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 25px;
   /* padding: 30px 0px; */
@@ -306,9 +307,9 @@ button {
 /* }  */
 
 @media (max-width: 500px) {
-  .swiper_container {
+  /* .swiper_container {
     /* height: 47rem; */
-  }
+  /* } */ */
   .swiper-slide {
     width: 28rem !important;
     /* height: 36rem !important; */

src/assets/css/page.css

@@ -1,5 +1,5 @@
 .gradient-background {
-  background: linear-gradient(180deg, #0172af, #74febd);
+  /* background: linear-gradient(180deg, #0172af, #74febd); */
   background-size: 120% 120%;
   animation: gradient-animation 8s ease infinite;
 }

src/assets/themes/Transitions.jsx

@@ -1,14 +1,10 @@
-import { forwardRef } from 'react';
-
-// types
 import PropTypes from 'prop-types';
-
-// material-ui
 import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material';
+import React from 'react';
 
 // ==============================|| TRANSITIONS ||============================== //
 
-const Transitions = forwardRef(
+const Transitions = React.forwardRef(
   ({ children, position, type, direction, ...others }, ref) => {
     let positionSX = {
       transformOrigin: '0 0 0',

src/assets/themes/base/borders.jsx

@@ -1,5 +1,6 @@
-import colors from './colors';
-import pxToRem from '../functions/pxToRem';
+import colors from 'assets/themes/base/colors';
+import pxToRem from 'assets/themes/functions/pxToRem';
+
 const { grey } = colors;
 
 const borders = {
@@ -16,13 +17,12 @@ const borders = {
     4: pxToRem(4),
     5: pxToRem(5),
   },
-
   borderRadius: {
     xs: pxToRem(1.6),
     sm: pxToRem(2),
-    md: pxToRem(6),
-    lg: pxToRem(8),
-    xl: pxToRem(12),
+    md: pxToRem(6), // px equivalent 6/16 = 0.375rem or
+    lg: pxToRem(8), // px equivalent 8/16 = 0.5rem or 50% of 1rem which is 16px
+    xl: pxToRem(12), // px equivalent 12/16 = 0.75rem or 75% of 1rem which is 16px
     xxl: pxToRem(16),
     section: pxToRem(160),
   },

src/assets/themes/base/cleanup/theme.jsx

@@ -1,7 +1,7 @@
 import { createTheme } from '@mui/material/styles';
 
 // assets
-import colors from '../../scss/_themes-vars.module.scss';
+import colors from 'scss/_themes-vars.module.scss';
 
 // project imports
 // import componentStyleOverrides from './compStyleOverride';