diff --git a/.gitignore b/.gitignore index a1441a3..4fa3ceb 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ package-lock.json /src/assets/cards # production /build +/future-additions # misc .DS_Store diff --git a/.hintrc b/.hintrc index 6746605..036a646 100644 --- a/.hintrc +++ b/.hintrc @@ -11,5 +11,11 @@ ] } ] - } + }, + "browserslist": [ + "defaults", + "not ie 11", + "not ios_saf <= 14.8", + "not safari <= 14.1" + ] } \ No newline at end of file diff --git a/README.md b/README.md index 44ffe50..c9bd6d6 100644 --- a/README.md +++ b/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: diff --git a/jsconfig.json b/jsconfig.json index cd3bb1d..f7e97f8 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "baseUrl": "src" }, - "include": ["src"], + "include": ["src", "future-additions/SearchSettings.jsx"], "exclude": ["node_modules, build"], "paths": { "/*": ["src/*"] diff --git a/src/App.js b/src/App.js index a552507..fa49743 100644 --- a/src/App.js +++ b/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 ; +}; const App = () => { - return
; + const { getCookie } = useManageCookies(); + const { isLoggedIn } = getCookie(['isLoggedIn']); + const { isConfiguratorOpen } = useConfigurator(); + return ( + + + {isConfiguratorOpen && } + + + }> + + {ROUTE_CONFIG.routes.map( + ({ path, componentName, isPrivate }, index) => ( + + + + ) : ( + + ) + } + /> + ) + )} + + + + + + + ); }; export default App; diff --git a/src/Main.jsx b/src/Main.jsx deleted file mode 100644 index 38c80e5..0000000 --- a/src/Main.jsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { Suspense, lazy, useEffect } from 'react'; -import { Route, Routes } from 'react-router-dom'; -import PrivateRoute from './layout/navigation/PrivateRoute.jsx'; -import LoginDialog from './pages/LoginDialog.jsx'; -import PageLayout from './layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx'; -import Navigation from './layout/navigation/Navigation.jsx'; -import Configurator from './layout/REUSABLE_COMPONENTS/Configurator/index.jsx'; -import { CSSTransition, TransitionGroup } from 'react-transition-group'; -import LoadingOverlay from './layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx'; -import useManageCookies from './context/hooks/useManageCookies.jsx'; -import { ROUTE_CONFIG } from './data/route-config.jsx'; -import { useConfigurator } from 'context/hooks/useConfigurator.jsx'; - -// ==============================|| MAIN ROUTING ||============================== // - -const LazyRoute = ({ componentName, ...rest }) => { - const Component = lazy(() => import(`./pages/${componentName}`)); - return ; -}; -const Main = () => { - const { getCookie } = useManageCookies(); - const { isLoggedIn } = getCookie(['isLoggedIn']); - const { isConfiguratorOpen } = useConfigurator(); - return ( - - - {isConfiguratorOpen && } - - - }> - - {ROUTE_CONFIG.routes.map( - ({ path, componentName, isPrivate }, index) => ( - - - - ) : ( - - ) - } - /> - ) - )} - - - - - - - ); -}; - -export default Main; diff --git a/src/assets/animations/LoadingCardAnimation.jsx b/src/assets/animations/LoadingCardAnimation.jsx index 3fd0647..d930f04 100644 --- a/src/assets/animations/LoadingCardAnimation.jsx +++ b/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(() => { diff --git a/src/assets/animations/SingleCardAnimation.jsx b/src/assets/animations/SingleCardAnimation.jsx index 7bc8923..ccc3469 100644 --- a/src/assets/animations/SingleCardAnimation.jsx +++ b/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); diff --git a/src/components/forms/customerCheckoutForm/StripeForm.css b/src/assets/css/StripeForm.css similarity index 100% rename from src/components/forms/customerCheckoutForm/StripeForm.css rename to src/assets/css/StripeForm.css diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 9cc181a..d41a560 100644 --- a/src/assets/css/index.css +++ b/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; */ diff --git a/src/assets/css/page.css b/src/assets/css/page.css index 237ec2e..f8f6dc1 100644 --- a/src/assets/css/page.css +++ b/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; } diff --git a/src/assets/themes/Transitions.jsx b/src/assets/themes/Transitions.jsx index 5fac044..ce08fb5 100644 --- a/src/assets/themes/Transitions.jsx +++ b/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', diff --git a/src/assets/themes/base/borders.jsx b/src/assets/themes/base/borders.jsx index 8ce8245..5a4f290 100644 --- a/src/assets/themes/base/borders.jsx +++ b/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), }, diff --git a/src/assets/themes/base/cleanup/theme.jsx b/src/assets/themes/base/cleanup/theme.jsx index e93b8f6..6b6dc13 100644 --- a/src/assets/themes/base/cleanup/theme.jsx +++ b/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'; diff --git a/src/assets/themes/base/colors.jsx b/src/assets/themes/base/colors.jsx index 8af902b..7463ebd 100644 --- a/src/assets/themes/base/colors.jsx +++ b/src/assets/themes/base/colors.jsx @@ -13,10 +13,8 @@ import { primary, secondary, grey, - greenAccent, redAccent, blueAccent, - customDarkTheme, white, black, myGradients, @@ -27,10 +25,8 @@ const colors = { default: '#f0f2f5', paper: '#fff', }, - greenAccent: greenAccent, redAccent: redAccent, blueAccent: blueAccent, - customDarkTheme: customDarkTheme, // COLORS FOR CARD RARITY OVERLAY rarity, // CARD RARITY OVERLAYS @@ -61,10 +57,11 @@ const colors = { main: '#f0f2f5', focus: '#f0f2f5', }, - dark: { - main: '#344767', - focus: '#2c3c58', - }, + // dark: { + // main: '#344767', + // focus: '#2c3c58', + // state: '#191919', + // }, gradients: { primary: { main: '#EC407A', @@ -228,6 +225,29 @@ const colors = { tabs: { indicator: { boxShadow: '#ddd' }, }, + inputColors: { + borderColor: { main: '#d2d6da', focus: '#35d1f5' }, + boxShadow: '#81e3f9', + error: '#fd5c70', + success: '#66d432', + }, + dark: { + main: '#344767', + focus: '#344767', + state: '#191919', + }, + // inputBorderColor: { + // main: '#d2d6da', + // hover: '#b3b9c2', + // active: '#9499a2', + // disabled: '#d2d6da', + // error: '#f44336', + // success: '#4caf4f', + // warning: '#ff9900', + // info: '#00bbd4', + // light: '#adb5bd', + // dark: '#404040', + // }, }; export default colors; diff --git a/src/assets/themes/base/customColorPalettes.jsx b/src/assets/themes/base/customColorPalettes.jsx index 81d9975..01a8838 100644 --- a/src/assets/themes/base/customColorPalettes.jsx +++ b/src/assets/themes/base/customColorPalettes.jsx @@ -22,14 +22,18 @@ const warning = { secondary: '#ff5722', }; const success = { - light: '#70d8bd', // '#4cceac', + light: '#70d8bd', + main_light: '#4cceac', + main_lighter: '#b7ebde', + main_emerald: '#06d6a0ff', main: '#18b984', secondary: '#5CDB95', + tertiary: '#5fe7bb', focus: rgba('#18b984' || 'white', 0.15), secondaryFocus: rgba('#5CDB95' || 'white', 0.15), dark: '#3da58a', darkest: '#2e7c67', // '#70d8bd', - contrastText: '#fff', + contrastText: '#dbf5ee', hoverContrastText: colorTextForDark, }; const info = { @@ -46,7 +50,6 @@ const grey = { simpleGrey: '#333', clearGrey: hexToRgba('#444', 0.6), black: '#040509', - white: '#f2f0f0', blueGrey: '#141b2d', lightBlueGrey: '#1F2A40', darkest: '#141414', @@ -55,7 +58,6 @@ const grey = { default: '#525252', light: '#666666', lighter: '#858585', - lighter2: '#8c8c8c', lightest: '#a3a3a3', evenLighter: '#c2c2c2', contrastText: '#e0e0e0', @@ -66,45 +68,60 @@ const white = { focus: '#E8E8E8', }; const black = { - light: '#212121', + darker: '#040509', + dark: '#0B0C0E', + darkest: '#141414', main: '#1C1C1C', + light: '#212121', focus: '#26242C', - dark: '#0B0C0E', }; -const greenAccent = { - crystalGreen: hexToRgba('#4cceac', 0.6), - darkCerulean: hexToRgba('#0d5d96', 0.9), - greyGreen: '#A5C8D2', - greenBlue: hexToRgba('#4e93a6', 0.8), - pureGreenBlue: '#4e93a6', - emerald: '#06d6a0ff', - lighterSeaGreen: '#8ec7b6', - lightSeaGreen: '#0cb0a9ff', - darkest: '#0f2922', // Assuming this is the darkest - darker: '#1e5245', // Next darker shade - dark: '#2e7c67', // Next dark shade - default: '#3da58a', // Default considered here as the mid-point - main: '#18b984', - focus: rgba('#18b984' || 'white', 0.15), - light: '#4cceac', // Light shade - lighter: '#70d8bd', // Lighter shade - lightest: '#94e2cd', // Lightest shade - evenLighter: '#b7ebde', // Even lighter than the lightest - contrastText: '#dbf5ee', // Most contrasting or lightest, could be adjusted - secondary: '#5CDB95', +const greenPalette = { + 50: '#b7ebde', // Even lighter than the lightest + 100: '#94e2cd', // Lightest shade + 200: '#70d8bd', // Lighter shade + 300: '#4cceac', // Light shade, also 'crystalGreen' with opacity adjusted for full hex + 400: '#3da58a', // Default, mid-light + 500: '#18b984', // Main green used in the primary color + 600: '#159b76', // Slightly darker and less saturated than 500 + 700: '#12875f', // Darker and more muted green + 800: '#0f7348', // Dark, rich green + 900: '#2e7c67', // Darkest shade, used for the deepest contrast + contrastText: '#dbf5ee', // Lightest contrast text + main: '#18b984', // Primary main color + focus: 'rgba(24, 185, 132, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states +}; +const redPalette = { + 50: '#f8dcdb', // Even lighter than the lightest + 100: '#f1b9b7', // Lightest + 200: '#e99592', // Lighter + 300: '#e2726e', // Light shade + 400: '#db4f4a', // Default, main used color + 500: '#af3f3b', // Mid-dark, more saturation + 600: '#832f2c', // Darker and more intense + 700: '#58201e', // Even darker, rich depth + 800: '#2c100f', // Darkest shade, for deep contrast + contrastText: '#f8dcdb', // Lightest contrast text + main: '#db4f4a', // Primary main color + focus: 'rgba(219, 79, 74, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states }; -// const greenPalette = { -// 50: '#b7ebde', // Even lighter than the lightest -// 100: '#94e2cd', // Lightest shade -// 200: '#70d8bd', // Lighter shade -// 300: '#4cceac', // Light shade, also 'crystalGreen' with opacity adjusted for full hex -// 400: '#3da58a', // Default, mid-light -// 500: '#18b984', // Main green used in the primary color -// 600: '#159b76', // Slightly darker and less saturated than 500 -// 700: '#12875f', // Darker and more muted green -// 800: '#0f7348', // Dark, rich green -// 900: '#2e7c67' // Darkest shade, used for the deepest contrast -// }; +const bluePalette = { + 50: '#e1e2fe', // Even lighter than the lightest + 100: '#c3c6fd', // Lightest + 200: '#a4a9fc', // Lighter + 300: '#868dfb', // Light shade + 400: '#6870fa', // Default, main used color + 500: '#535ac8', // Mid-dark, more saturation + 600: '#3e4396', // Darker and more intense + 700: '#2a2d64', // Even darker, rich depth + 800: '#151632', // Darkest shade, for deep contrast + contrastText: '#e1e2fe', // Lightest contrast text + main: '#6870fa', // Primary main color + focus: 'rgba(104, 112, 250, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states +}; + const redAccent = { darkest: '#2c100f', darker: '#58201e', @@ -175,77 +192,9 @@ const secondary = { const chartTheme = { primary, grey, - greenAccent, redAccent, blueAccent, }; -const customDarkTheme = { - text: { - light: '#e0e0e0', - dark: '#141414', - default: '#3d3d3d', - contrastText: '#fff', - color: '#70d8bd', - }, - background: { - grey: { - darkest: '#141414', - darker: '#292929', - dark: '#3d3d3d', - default: '#525252', - light: '#666666', - lighter: '#858585', - lightest: '#a3a3a3', - evenLighter: '#c2c2c2', - contrastText: '#e0e0e0', - }, - primary: { - darkest: '#040509', - darker: '#040509', - dark: '#040509', - default: '#f2f0f0', - light: '#141b2d', - lighter: '#1F2A40', - lightest: '#727681', - evenLighter: '#8c8c8c', - contrastText: '#e0e0e0', - }, - secondary: {}, - greenAccent: { - darkest: '#0f2922', // Assuming this is the darkest - darker: '#1e5245', // Next darker shade - dark: '#2e7c67', // Next dark shade - default: '#3da58a', // Default considered here as the mid-point - light: '#4cceac', // Light shade - lighter: '#70d8bd', // Lighter shade - lightest: '#94e2cd', // Lightest shade - evenLighter: '#b7ebde', // Even lighter than the lightest - contrastText: '#dbf5ee', // Most contrasting or lightest, could be adjusted - }, - redAccent: { - darkest: '#2c100f', - darker: '#58201e', - dark: '#832f2c', - default: '#af3f3b', - light: '#db4f4a', - lighter: '#e2726e', - lightest: '#e99592', - evenLighter: '#f1b9b7', - contrastText: '#f8dcdb', - }, - blueAccent: { - darkest: '#151632', - darker: '#2a2d64', - dark: '#3e4396', - default: '#535ac8', - light: '#6870fa', - lighter: '#868dfb', - lightest: '#a4a9fc', - evenLighter: '#c3c6fd', - contrastText: '#e1e2fe', - }, - }, -}; const rarity = { common: '#C0C0C0', // Silver uncommon: '#B8860B', // DarkGoldenRod @@ -279,13 +228,15 @@ const rarityOverlay = { // Add more rarities as needed }; const text = { - // main: '#212121', + primary: '#212121', + secondary: '#3d3d3d', main: '#3d3d3d', // '#424242', focus: '#212121', dark: '#424242', - primary: '#212121', - secondary: '#f5f5f5', - tertiary: '#ffffff', + colorText: '#343239', + colorPrimaryText: rgba('white', 0.96), + colorLabel: '#A4A3A6', + contrastText: '#ffffff', }; const divider = 'white'; const action = { @@ -305,143 +256,10 @@ export { action, primary, secondary, - customDarkTheme, grey, - greenAccent, redAccent, blueAccent, myGradients, white, black, }; -// const backgroundA = { -// darkest: '#2e7c67', // '#70d8bd', -// darker: '#3da58a', -// dark: '#4cceac', -// default: '#70d8bd', // '#4cceac', -// light: '#94e2cd', -// lighter: '#b7ebde', -// lightest: '#dbf5ee', -// contrastTextA: '#FBFAF2', -// contrastTextB: '#333', -// contrastTextC: '#555', -// contrastTextD: '#000', -// hover: '#4cceac', -// }; -// main: '#4caf50', -// dark: '#388e3c', -// main: '#4cceac', -// focus: '#4cceac', -// contrastText: colorTextForDark, -// hoverContrastText: '#111', -// error: { -// main: colorsA.redAccent[500], -// dark: colorsA.redAccent[700], -// contrastText: '#fff', -// }, -// warning: { -// main: colorsA.redAccent[500], -// dark: colorsA.redAccent[700], -// light: colorsA.redAccent[200], -// }, -// success: { -// light: colorsA.greenAccent[100], -// lighter: colorsA.greenAccent[200], -// evenLighter: colorsA.greenAccent[300], -// lightish: colorsA.greenAccent[400], -// main: colorsA.greenAccent[500], -// dark: colorsA.greenAccent[200], -// darker: colorsA.greenAccent[600], -// contrastText: '#fff', -// hoverContrastText: '#111', -// }, -// info: { -// main: colorsA.blueAccent[500], -// dark: colorsA.blueAccent[700], -// light: colorsA.blueAccent[200], -// contrastText: '#fff', -// }, -// text: { -// primary: colorsA.grey[900], -// secondary: colorsA.grey[300], -// tertiary: colorsA.grey[100], -// }, -// divider: 'white', -// action: { -// hover: colorsA.grey[800], -// disabled: colorsA.grey[200], -// }, -// const backgroundB = { -// darkest: '#111', -// darker: '#222', -// dark: '#333', -// default: '#444', -// light: '#555', -// lighter: '#666', -// lightest: '#777', -// contrastText: '#FBFAF2', -// }; -// const backgroundG = { -// darkest: '#073b4cff', // --midnight-green-- -// darker: '#0c637fff', // --cerulean-- -// dark: '#118ab2ff', // --blue-ncs-- -// default: '#0cb0a9ff', // --light-sea-green-- -// light: '#06d6a0ff', // --emerald-- -// lighter: '#91dacbff', // --tiffany-blue-- -// lightest: '#c8ede5ff', // --mint-green-- -// contrastText: '#fff', -// }; -// const backgroundGSecondary = { -// darkest: '#7f2e2eff', // --persian-plum-- -// darker: '#a63c3cff', // --pomegranate-- -// dark: '#cc4a4aff', // --flamingo-- -// default: '#e55e5eff', // --sunset-orange-- -// light: '#f4755fff', // --bittersweet-- -// lighter: '#f89a7dff', // --rajah-- -// lightest: '#facbb0ff', // --navajo-white-- -// contrastText: '#fff', -// }; -// const backgroundC = { -// darkest: hexToRgba(backgroundB.darkest, 0.9), -// darker: hexToRgba(backgroundB.darker, 0.8), -// dark: hexToRgba(backgroundB.dark, 0.7), -// default: hexToRgba(backgroundB.default, 0.6), -// light: hexToRgba(backgroundB.light, 0.5), -// lighter: hexToRgba(backgroundB.lighter, 0.4), -// lightest: hexToRgba(backgroundB.lightest, 0.3), -// }; -// const backgroundD = { -// darkest: hexToRgba(greenAccent.dark, 0.9), -// darker: hexToRgba(greenAccent.default, 0.7), -// dark: hexToRgba('#4cceac', 0.6), -// default: hexToRgba(greenAccent.lighter, 0.5), -// light: hexToRgba(greenAccent.lightest, 0.4), -// lighter: hexToRgba(backgroundA.lighter, 0.3), -// lightest: hexToRgba(greenAccent.contrastText, 0.2), -// }; -// const backgroundF = { -// darkest: hexToRgba(backgroundE.darkest, 0.9), -// darker: hexToRgba(backgroundE.darker, 0.8), -// dark: hexToRgba(backgroundE.dark, 0.7), -// default: hexToRgba(backgroundE.default, 0.6), -// main: hexToRgba(backgroundE.main, 0.5), -// focus: hexToRgba(backgroundE.focus, 0.4), -// light: hexToRgba(backgroundE.light, 0.5), -// lighter: hexToRgba(backgroundE.lighter, 0.4), -// lightest: hexToRgba(backgroundE.lightest, 0.3), -// }; -// const backgroundE = { -// darkest: '#0d5d96', // - colorname: 'dark-cerulean' - hex: '#0d5d96' - rgb: 'rgb(13, 93, 150)' - hsl: 'hsl(209, 84%, 32%)' -// darker: '#206d9b', // - colorname: 'dark-blue' - hex: '#206d9b -// dark: '#4e93a6', // - colorname: 'blue' - hex: '#4e93a6' - rgb: 'rgb(78, 147, 166)' - hsl: 'hsl(194, 35%, 47%)' -// default: '#7cb8b1', -// main: '#7cb8b1', -// focus: '#7cb8b1', -// light: '#8ec7b6', -// lightBlue: '#57909F', -// lighter: '#b7ebde', -// lighterBlue: '#7EACB9', -// lightest: '#dbf5ee', -// lightestBlue: '#A5C8D2', -// contrastText: '#FBFAF2', -// }; diff --git a/src/assets/themes/base/palette.jsx b/src/assets/themes/base/palette.jsx index 223f6a4..6fa70ef 100644 --- a/src/assets/themes/base/palette.jsx +++ b/src/assets/themes/base/palette.jsx @@ -4,6 +4,8 @@ const palette = { lighter: '#94e2cd', light: '#4cceac', main: '#18b984', + secondary: '#5CDB95', + tertiary: '#5fe7bb', dark: '#2e7c67', focus: rgba('#18b984' || 'white', 0.15), contrastText: '#dbf5ee', diff --git a/src/assets/themes/base/typography.jsx b/src/assets/themes/base/typography.jsx index bf7b38a..69b2253 100644 --- a/src/assets/themes/base/typography.jsx +++ b/src/assets/themes/base/typography.jsx @@ -1,39 +1,54 @@ import pxToRem from '../functions/pxToRem'; import colors from './colors'; -// Material Dashboard 2 React Helper Functions - const { dark } = colors; +// const baseProperties = { +// fontFamily: 'Poppins, sans-serif', +// fontWeightLighter: 100, +// fontWeightLight: 300, +// fontWeightRegular: 400, +// fontWeightMedium: 600, +// fontWeightBold: 700, + +// fontSize3XS: () => `clamp(${pxToRem(6)}, 1vw, ${pxToRem(8)})`, +// fontSize2XS: () => `clamp(${pxToRem(8)}, 1vw, ${pxToRem(10)})`, +// fontSizeXS: () => `clamp(${pxToRem(10)}, 1.25vw, ${pxToRem(12)})`, +// fontSizeSM: () => `clamp(${pxToRem(12)}, 1.5vw, ${pxToRem(14)})`, +// fontSizeMD: () => `clamp(${pxToRem(14)}, 1.75vw, ${pxToRem(16)})`, +// fontSizeLG: () => `clamp(${pxToRem(16)}, 2vw, ${pxToRem(18)})`, +// fontSizeXL: () => `clamp(${pxToRem(18)}, 2.25vw, ${pxToRem(20)})`, +// fontSize2XL: () => `clamp(${pxToRem(20)}, 2.5vw, ${pxToRem(24)})`, +// fontSize3XL: () => `clamp(${pxToRem(24)}, 2.75vw, ${pxToRem(30)})`, +// fontSize4XL: () => `clamp(${pxToRem(30)}, 3vw, ${pxToRem(36)})`, +// fontSize5XL: () => `clamp(${pxToRem(36)}, 3.25vw, ${pxToRem(42)})`, +// fontSize6XL: () => `clamp(${pxToRem(42)}, 3.5vw, ${pxToRem(48)})`, +// }; const baseProperties = { fontFamily: 'Poppins, sans-serif', - fontWeightLighter: 100, fontWeightLight: 300, fontWeightRegular: 400, - fontWeightMedium: 600, + fontWeightMedium: 500, fontWeightBold: 700, - - fontSize3XS: () => `clamp(${pxToRem(6)}, 1vw, ${pxToRem(8)})`, - fontSize2XS: () => `clamp(${pxToRem(8)}, 1vw, ${pxToRem(10)})`, - fontSizeXS: () => `clamp(${pxToRem(10)}, 1.25vw, ${pxToRem(12)})`, - fontSizeSM: () => `clamp(${pxToRem(12)}, 1.5vw, ${pxToRem(14)})`, - fontSizeMD: () => `clamp(${pxToRem(14)}, 1.75vw, ${pxToRem(16)})`, - fontSizeLG: () => `clamp(${pxToRem(16)}, 2vw, ${pxToRem(18)})`, - fontSizeXL: () => `clamp(${pxToRem(18)}, 2.25vw, ${pxToRem(20)})`, - fontSize2XL: () => `clamp(${pxToRem(20)}, 2.5vw, ${pxToRem(24)})`, - fontSize3XL: () => `clamp(${pxToRem(24)}, 2.75vw, ${pxToRem(30)})`, - fontSize4XL: () => `clamp(${pxToRem(30)}, 3vw, ${pxToRem(36)})`, - fontSize5XL: () => `clamp(${pxToRem(36)}, 3.25vw, ${pxToRem(42)})`, - fontSize6XL: () => `clamp(${pxToRem(42)}, 3.5vw, ${pxToRem(48)})`, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), + fontSize4XL: pxToRem(36), + fontSize5XL: pxToRem(42), + fontSize6XL: pxToRem(48), }; - const baseHeadingProperties = { fontFamily: baseProperties.fontFamily, color: dark.main, fontWeight: baseProperties.fontWeightBold, - fontSize: baseProperties.fontSizeXL(), // Call the function for default size + fontSize: baseProperties.fontSizeXL, '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeMD(), // Adjust size for smaller screens + fontSize: baseProperties.fontSizeMD, // Adjust size for smaller screens }, }; @@ -71,78 +86,108 @@ const typography = { fontSize: '1.5rem', }, h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, ...baseHeadingProperties, - fontSize: baseProperties.fontSize6XL(), - '@media (max-width:900px)': { - fontSize: baseProperties.fontSize5XL(), - }, }, h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, ...baseHeadingProperties, - fontSize: baseProperties.fontSize5XL(), - '@media (max-width:900px)': { - fontSize: baseProperties.fontSize4XL(), - }, }, h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, ...baseHeadingProperties, - fontSize: baseProperties.fontSize4XL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSize3XL(), - }, }, h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, ...baseHeadingProperties, - fontSize: baseProperties.fontSize3XL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSize2XL(), - }, }, h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, ...baseHeadingProperties, - fontSize: baseProperties.fontSize2XL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeXL(), - }, }, h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, ...baseHeadingProperties, - fontSize: baseProperties.fontSizeXL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeLG(), - }, - }, - - p1: { - fontFamily: baseProperties.fontFamily, - fontWeight: baseProperties.fontWeightLight, - fontSize: baseProperties.fontSizeSM(), - lineHeight: 1.5, - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeXS(), - }, - '@media (max-width:900px)': { - fontSize: baseProperties.fontSizeSM(), - }, - }, - - p2: { - fontFamily: baseProperties.fontFamily, - fontWeight: baseProperties.fontWeightLight, - fontSize: baseProperties.fontSizeSM(), - lineHeight: 1.5, - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeXS(), - }, - '@media (max-width:900px)': { - fontSize: baseProperties.fontSizeSM(), - }, }, + // h1: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize6XL, + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSize5XL, + // }, + // }, + // h2: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize5XL(), + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSize4XL(), + // }, + // }, + // h3: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize4XL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSize3XL(), + // }, + // }, + // h4: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize3XL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSize2XL(), + // }, + // }, + // h5: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize2XL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeXL(), + // }, + // }, + // h6: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSizeXL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeLG(), + // }, + // }, + + // p1: { + // fontFamily: baseProperties.fontFamily, + // fontWeight: baseProperties.fontWeightLight, + // fontSize: baseProperties.fontSizeSM(), + // lineHeight: 1.5, + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeXS(), + // }, + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSizeSM(), + // }, + // }, + + // p2: { + // fontFamily: baseProperties.fontFamily, + // fontWeight: baseProperties.fontWeightLight, + // fontSize: baseProperties.fontSizeSM(), + // lineHeight: 1.5, + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeXS(), + // }, + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSizeSM(), + // }, + // }, subtitle1: { fontFamily: baseProperties.fontFamily, @@ -221,17 +266,26 @@ const typography = { ...baseDisplayProperties, }, + // size: { + // // xxs: baseProperties.fontSizeXXS, + // xs: baseProperties.fontSizeXS, + // sm: baseProperties.fontSizeSM, + // md: baseProperties.fontSizeMD, + // lg: baseProperties.fontSizeLG, + // xl: baseProperties.fontSizeXL, + // '2xl': baseProperties.fontSize2XL, + // '3xl': baseProperties.fontSize3XL, + // }, size: { - // xxs: baseProperties.fontSizeXXS, + xxs: baseProperties.fontSizeXXS, xs: baseProperties.fontSizeXS, sm: baseProperties.fontSizeSM, md: baseProperties.fontSizeMD, lg: baseProperties.fontSizeLG, xl: baseProperties.fontSizeXL, - '2xl': baseProperties.fontSize2XL, - '3xl': baseProperties.fontSize3XL, + xxl: baseProperties.fontSize2XL, + xxxl: baseProperties.fontSize3XL, }, - lineHeight: { xs: 1.25, sm: 1.5, @@ -242,137 +296,3 @@ const typography = { }; export default typography; - -// /** -// * Typography used in theme -// * @param {JsonObject} theme theme customization object -// */ - -// export default function themeTypography(theme) { -// return { -// fontFamily: theme?.customization?.fontFamily, -// h6: { -// fontWeight: 500, -// color: theme.heading, -// fontSize: '0.75rem', -// }, -// h5: { -// fontSize: '0.875rem', -// color: theme.heading, -// fontWeight: 500, -// }, -// h4: { -// fontSize: '1rem', -// color: theme.heading, -// fontWeight: 600, -// }, -// h3: { -// fontSize: '1.25rem', -// color: theme.heading, -// fontWeight: 600, -// }, -// h2: { -// fontSize: '1.5rem', -// color: theme.heading, -// fontWeight: 700, -// }, -// h1: { -// fontSize: '2.125rem', -// color: theme.heading, -// fontWeight: 700, -// }, -// subtitle1: { -// fontSize: '0.875rem', -// fontWeight: 500, -// color: theme.textDark, -// }, -// subtitle2: { -// fontSize: '0.75rem', -// fontWeight: 400, -// color: theme.darkTextSecondary, -// }, -// caption: { -// fontSize: '0.75rem', -// color: theme.darkTextSecondary, -// fontWeight: 400, -// }, -// body1: { -// fontSize: '0.875rem', -// fontWeight: 400, -// lineHeight: '1.334em', -// }, -// body2: { -// letterSpacing: '0em', -// fontWeight: 400, -// lineHeight: '1.5em', -// color: theme.darkTextPrimary, -// }, -// button: { -// textTransform: 'capitalize', -// }, -// customInput: { -// marginTop: 1, -// marginBottom: 1, -// '& > label': { -// top: 23, -// left: 0, -// color: theme.grey500, -// '&[data-shrink="false"]': { -// top: 5, -// }, -// }, -// '& > div > input': { -// padding: '30.5px 14px 11.5px !important', -// }, -// '& legend': { -// display: 'none', -// }, -// '& fieldset': { -// top: 0, -// }, -// }, -// mainContent: { -// backgroundColor: theme.background, -// width: '100%', -// minHeight: 'calc(100vh - 88px)', -// flexGrow: 1, -// padding: '20px', -// marginTop: '88px', -// marginRight: '20px', -// borderRadius: `${theme?.customization?.borderRadius}px`, -// }, -// menuCaption: { -// fontSize: '0.875rem', -// fontWeight: 500, -// color: theme.heading, -// padding: '6px', -// textTransform: 'capitalize', -// marginTop: '10px', -// }, -// subMenuCaption: { -// fontSize: '0.6875rem', -// fontWeight: 500, -// color: theme.darkTextSecondary, -// textTransform: 'capitalize', -// }, -// commonAvatar: { -// cursor: 'pointer', -// borderRadius: '8px', -// }, -// smallAvatar: { -// width: '22px', -// height: '22px', -// fontSize: '1rem', -// }, -// mediumAvatar: { -// width: '34px', -// height: '34px', -// fontSize: '1.2rem', -// }, -// largeAvatar: { -// width: '44px', -// height: '44px', -// fontSize: '1.5rem', -// }, -// }; -// } diff --git a/src/assets/themes/components/buttons/holo.jsx b/src/assets/themes/components/buttons/holo.jsx index 9d0c6ab..3d724aa 100644 --- a/src/assets/themes/components/buttons/holo.jsx +++ b/src/assets/themes/components/buttons/holo.jsx @@ -2,7 +2,7 @@ import colors from '../../base/colors'; import typography from '../../base/typography'; import pxToRem from '../../functions/pxToRem'; -const { white, text, info, secondary, success, grey } = colors; +const { text, success, grey } = colors; const { size } = typography; export default { diff --git a/src/assets/themes/components/buttons/outlined.jsx b/src/assets/themes/components/buttons/outlined.jsx index 955498e..2d63248 100644 --- a/src/assets/themes/components/buttons/outlined.jsx +++ b/src/assets/themes/components/buttons/outlined.jsx @@ -2,7 +2,7 @@ import colors from '../../base/colors'; import typography from '../../base/typography'; import pxToRem from '../../functions/pxToRem'; -const { transparent, light, info, secondary, greenAccent } = colors; +const { transparent, light, info, secondary, success } = colors; const { size } = typography; export default { @@ -52,11 +52,11 @@ export default { }, secondary: { - backgroundColor: greenAccent.lighterSeaGreen, + backgroundColor: success.main_lighterSeaGreen, borderColor: secondary.main, '&:hover': { - backgroundColor: greenAccent.lighterSeaGreen, + backgroundColor: success.main_lighterSeaGreen, }, }, }; diff --git a/src/assets/themes/components/card/index.jsx b/src/assets/themes/components/card/index.jsx index 5354e20..72e749c 100644 --- a/src/assets/themes/components/card/index.jsx +++ b/src/assets/themes/components/card/index.jsx @@ -3,7 +3,7 @@ import boxShadows from '../../base/boxShadows'; import colors from '../../base/colors'; import rgba from '../../functions/rgba'; -const { black, greenAccent } = colors; +const { black, success } = colors; const { borderWidth, borderRadius } = borders; const { md } = boxShadows; @@ -16,7 +16,7 @@ export default { minWidth: 0, wordWrap: 'break-word', backgroundImage: 'none', - backgroundColor: greenAccent.lighter, + backgroundColor: success.main_lighter, backgroundClip: 'border-box', border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, borderRadius: borderRadius.xl, diff --git a/src/assets/themes/components/forms/switchButton.jsx b/src/assets/themes/components/forms/switchButton.jsx index 2c4266a..46347cc 100644 --- a/src/assets/themes/components/forms/switchButton.jsx +++ b/src/assets/themes/components/forms/switchButton.jsx @@ -1,7 +1,6 @@ import borders from '../../base/borders'; import boxShadows from '../../base/boxShadows'; import colors from '../../base/colors'; -import typography from '../../base/typography'; import linearGradient from '../../functions/linearGradient'; import pxToRem from '../../functions/pxToRem'; @@ -27,7 +26,7 @@ export default { }, styleOverrides: { switchBase: { - color: chartTheme.greenAccent.default, + color: success.dark, '&:hover': { backgroundColor: transparent.main, @@ -42,7 +41,7 @@ export default { '& .MuiSwitch-thumb': { borderColor: `${gradients.success.state} !important`, - backgroundColor: `${chartTheme.greenAccent.light} !important`, + backgroundColor: `${success.main_light} !important`, }, '& + .MuiSwitch-track': { @@ -64,7 +63,7 @@ export default { }, }, thumb: { - backgroundColor: chartTheme.greenAccent.dark, + backgroundColor: success.darkest, boxShadow: md, border: `${borderWidth[1]} solid ${grey.light}`, }, diff --git a/src/assets/themes/components/index.jsx b/src/assets/themes/components/index.jsx index 4c0a0f6..4daf503 100644 --- a/src/assets/themes/components/index.jsx +++ b/src/assets/themes/components/index.jsx @@ -46,7 +46,6 @@ export const components = { MuiCardContent: { ...cardContent }, MuiTabs: { ...tabs }, MuiTab: { ...tab }, - // MuiContainer: container, }; export default components; diff --git a/src/assets/themes/components/tabs/index.jsx b/src/assets/themes/components/tabs/index.jsx index e430bcb..a348c88 100644 --- a/src/assets/themes/components/tabs/index.jsx +++ b/src/assets/themes/components/tabs/index.jsx @@ -3,7 +3,7 @@ import borders from 'assets/themes/base/borders'; import boxShadows from 'assets/themes/base/boxShadows'; import pxToRem from 'assets/themes/functions/pxToRem'; -const { grey, white, success } = colors; +const { grey, white, success, text } = colors; const { borderRadius } = borders; const { tabsBoxShadow } = boxShadows; @@ -11,10 +11,35 @@ export default { styleOverrides: { root: { position: 'relative', - backgroundColor: grey.default, - borderRadius: borderRadius.xl, + backgroundColor: '#f8f9fa', + borderRadius: borderRadius.lg, minHeight: 'unset', - padding: pxToRem(4), + padding: pxToRem(12), + + '&.MuiTabs-indicator': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + boxShadow: tabsBoxShadow.indicator, + transition: 'all 500ms ease', + }, + 'span.MuiTabs-indicator': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + boxShadow: tabsBoxShadow.indicator, + transition: 'all 500ms ease', + }, + 'span.label.MuiTabs-selected': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + boxShadow: tabsBoxShadow.indicator, + transition: 'all 500ms ease', + }, + // '&.MuiTabs-selected': { + // color: `${text.main} !important`, + // backgroundColor: `${success.main} !important`, + // boxShadow: tabsBoxShadow.indicator, + // transition: 'all 500ms ease', + // }, }, flexContainer: { @@ -31,17 +56,16 @@ export default { vertical: { '& .MuiTabs-indicator': { width: '100%', - // color: `${success.main} !important`, }, }, indicator: { height: '100%', - borderRadius: borderRadius.lg, - backgroundColor: success.dark, + borderRadius: borderRadius.md, + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, boxShadow: tabsBoxShadow.indicator, transition: 'all 500ms ease', - color: `${success.dark} !important`, }, }, }; diff --git a/src/assets/themes/components/tabs/tab.jsx b/src/assets/themes/components/tabs/tab.jsx index c0bad5a..8dd4705 100644 --- a/src/assets/themes/components/tabs/tab.jsx +++ b/src/assets/themes/components/tabs/tab.jsx @@ -3,9 +3,9 @@ import borders from 'assets/themes/base/borders'; import colors from 'assets/themes/base/colors'; import pxToRem from 'assets/themes/functions/pxToRem'; -const { size, fontWeightRegular } = typography; +const { size, fontWeightMedium } = typography; const { borderRadius } = borders; -const { dark, grey } = colors; +const { dark, grey, success, text } = colors; export default { styleOverrides: { @@ -18,32 +18,40 @@ export default { maxWidth: 'unset !important', minWidth: 'unset !important', minHeight: 'unset !important', - fontSize: size.md, - fontWeight: fontWeightRegular, + height: 'auto', + fontSize: size.lg, + fontWeight: fontWeightMedium, textTransform: 'none', lineHeight: 'inherit', padding: pxToRem(4), - borderRadius: borderRadius.lg, - color: `${grey.darkest} !important`, - opacity: '1 !important', + borderRadius: borderRadius.md, + color: `${text.primary} !important`, - 'Mui-selected': { - color: `${grey.darkest} !important`, - opacity: '1 !important', - }, + // color: `${dark.main} !important`, + opacity: '1 !important', '& .material-icons, .material-icons-round': { marginBottom: '0 !important', - marginRight: pxToRem(6), + marginRight: pxToRem(4), }, - '& svg': { marginBottom: '0 !important', marginRight: pxToRem(6), }, - }, + '&:selected': { + color: `${success.main} !important`, + }, + 'span.MuiTab-wrapper': { + color: `${success.main} !important`, + }, + 'span.label.MuiTab-notSelected': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + transition: 'all 500ms ease', + }, - labelIcon: { - paddingTop: pxToRem(4), + labelIcon: { + paddingTop: pxToRem(4), + }, }, }, }; diff --git a/src/assets/themes/functions/baseStyleFunctions.jsx b/src/assets/themes/functions/baseStyleFunctions.jsx deleted file mode 100644 index 69e397d..0000000 --- a/src/assets/themes/functions/baseStyleFunctions.jsx +++ /dev/null @@ -1,29 +0,0 @@ -// const pxToRem = (number, baseNumber = 16) => { -// return `${number / baseNumber}rem`; -// }; - -// const hexToRgba = (hex, alpha = 1) => { -// let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; -// hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); -// let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); -// return result -// ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})` -// : null; -// }; - -// const rgba = (color, opacity) => { -// return hexToRgba(color, opacity); -// }; - -// const linearGradient = (color, colorState, angle = 195) => { -// return `linear-gradient(${angle}deg, ${color}, ${colorState})`; -// }; - -// export { pxToRem, hexToRgba, rgba, linearGradient }; - -// // export default { -// // pxToRem, -// // hexToRgba, -// // rgba, -// // linearGradient, -// // }; diff --git a/src/assets/themes/functions/hexToRgba.jsx b/src/assets/themes/functions/hexToRgba.jsx index 2ac3828..1d4f35e 100644 --- a/src/assets/themes/functions/hexToRgba.jsx +++ b/src/assets/themes/functions/hexToRgba.jsx @@ -1,3 +1,10 @@ +/** + * Converts a hexadecimal color code to RGBA format (takes a solid hex color code and returns transparent version). + * + * @param {string} hex - The hexadecimal color code to convert. + * @param {number} [alpha=1] - The alpha value (opacity) of the RGBA color. Defaults to 1. + * @returns {string|null} The RGBA color code, or null if the input is invalid. + */ const hexToRgba = (hex, alpha = 1) => { let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); diff --git a/src/assets/themes/functions/index.jsx b/src/assets/themes/functions/index.jsx new file mode 100644 index 0000000..f532d25 --- /dev/null +++ b/src/assets/themes/functions/index.jsx @@ -0,0 +1,13 @@ +import hexToRgba from './hexToRgba'; +import boxShadow from './boxShadow'; +import linearGradient from './linearGradient'; +import pxToRem from './pxToRem'; +import rgba from './rgba'; + +export default { + boxShadow, + hexToRgba, + linearGradient, + pxToRem, + rgba, +}; diff --git a/src/assets/themes/themeSettings.jsx b/src/assets/themes/themeSettings.jsx index 55d6520..e931933 100644 --- a/src/assets/themes/themeSettings.jsx +++ b/src/assets/themes/themeSettings.jsx @@ -35,11 +35,11 @@ export const themeSettings = (mode) => { boxShadows: boxShadows, typography: typography, spacing: (factor) => `${0.25 * factor}rem`, - shape: { - borderRadius: 4, - borderRadiusLarge: 8, - borderRadiusExtraLarge: 16, - }, + // shape: { + // borderRadius: 4, + // borderRadiusLarge: 8, + // borderRadiusExtraLarge: 16, + // }, zIndex: { appBar: 1200, drawer: 1100, @@ -58,39 +58,8 @@ export const themeSettings = (mode) => { MuiCard: components.MuiCard, MuiCardMedia: components.MuiCardMedia, MuiCardContent: components.MuiCardContent, - }, - skeletonLayouts: { - tertiaryContent: { - xs: 12, - sm: 12, - md: 12, - gap: 3, - baseSkeletons: [ - { variant: 'rectangular', height: 60 }, - { variant: 'text', width: '80%' }, - { variant: 'text', width: '70%' }, - { variant: 'text', width: '60%' }, - ], - }, - secondaryContent: { - xs: 12, - sm: 6, - md: 6, - gap: 2, - baseSkeleton: { variant: 'rectangular', height: 200 }, - }, - mainContentFeatureCard: { - xs: 12, - sm: 12, - md: 4, - gap: 2, - baseSkeletons: [ - { variant: 'rectangular', height: 180 }, - { variant: 'text' }, - { variant: 'text' }, - { variant: 'text' }, - ], - }, + MuiTabs: components.MuiTabs, + MuiTab: components.MuiTab, }, }; }; diff --git a/src/components/cards/CardDetailsContainer.jsx b/src/components/cards/CardDetailsContainer.jsx index a087d18..61d1f66 100644 --- a/src/components/cards/CardDetailsContainer.jsx +++ b/src/components/cards/CardDetailsContainer.jsx @@ -1,17 +1,13 @@ import React, { useState } from 'react'; import { Box, - Card, CardContent, CardHeader, Chip, Divider, Grid, - List, - ListItem, Stack, Typography, - Container, Collapse, } from '@mui/material'; import { @@ -22,11 +18,10 @@ import { FaVenusMars, } from 'react-icons/fa'; import { GiAxeSword } from 'react-icons/gi'; -import { useMode } from '../../context'; +import { useMode } from 'context'; import styled from 'styled-components'; -import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from '../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; -import { CardWrapper } from '../../layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents'; +import { CardWrapper } from 'layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; const IconWrapper = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -104,14 +99,14 @@ const CardDetailChip = styled(Chip)(({ theme }) => ({ }, })); const CardDetailDescription = ({ value }) => ( - + {value} - + ); const CardDetailPrice = ({ value }) => ( - + {value} - + ); const CardDetailRarity = ({ values, onRarityClick }) => { const { theme } = useMode(); @@ -246,13 +241,7 @@ const RenderDetailsSection = ({ details, card, className, handleAction }) => { ); }; -const CardDetailsContainer = ({ - card, - className, - isTextSection, - isInventorySection, - titles, -}) => { +const CardDetailsContainer = ({ card, className }) => { const { theme } = useMode(); const handleAction = () => console.log('Action clicked'); return ( @@ -260,9 +249,9 @@ const CardDetailsContainer = ({ container // spacing={2} sx={{ - // background: theme.palette.chartTheme.greenAccent.light, + // background: theme.palette.success.main_light, justifyContent: 'center', - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, maxWidth: '100%', }} > diff --git a/src/components/cards/CardMediaSection.js b/src/components/cards/CardMediaSection.js index c3fdbd3..63536c9 100644 --- a/src/components/cards/CardMediaSection.js +++ b/src/components/cards/CardMediaSection.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ import React, { useEffect, forwardRef, useState } from 'react'; import CardToolTip from './CardToolTip'; import PropTypes from 'prop-types'; @@ -5,32 +6,29 @@ import { Media, MediaContainer, MediaPopover, -} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import useDialogState from '../../context/hooks/useDialogState'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import useDialogState from 'context/hooks/useDialogState'; import GenericCardDialog from '../dialogs/GenericCardDialog'; -import { usePopover } from '../../context/hooks/usePopover'; +import usePopover from 'context/hooks/usePopover'; import { Avatar } from '@mui/material'; -import { useMode } from '../../context'; +import { useMode } from 'context'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; -const CardMediaSection = forwardRef( +const CardMediaSection = React.forwardRef( ( { - imgUrl, - card, - isHovered, - handleInteraction, - isRequired, - isModalOpen, - context, - isLast, + imgUrl = '', + card = {}, + isHovered = false, + handleInteraction = () => {}, + isRequired = false, + isModalOpen = false, + context = '', }, ref ) => { const { theme } = useMode(); const [anchorEl, setAnchorEl] = useState(null); - const cardId = card?.id; - const [cardWithSameIdCount, setCardWithSameIdCount] = useState(0); useEffect(() => { if (isHovered && ref?.current) { @@ -78,7 +76,7 @@ const CardMediaSection = forwardRef( image={imgUrl} loading="lazy" /> - {isLast && ( + {/* {isLast && ( - )} + )} */} {anchorEl && isHovered && ( key.replace(/_/g, ' ').replace(/^\w/, (c) => c.toUpperCase()); const StyledAttributeSpan = ({ theme, children }) => ( @@ -48,17 +48,14 @@ const createTooltipContent = (card) => { theme={theme} sx={{ boxShadow: theme.shadows[3], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.newPalette.white.main}`, + borderRadius: theme.borders.borderRadius.md, + border: `1px solid ${theme.palette.white.main}`, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: theme.spacing(2), h: '100%', - background: rgba( - theme.palette.chartTheme.grey.lightest || 'white', - 0.85 - ), + background: rgba(theme.palette.grey.lightest || 'white', 0.85), color: theme.palette.text.primary, alignContent: 'flex-start', '&::before': { @@ -89,6 +86,9 @@ const CardToolTip = ({ card }) => { arrow title="Card" placement="right-end" + theme={theme} + variant="solid" + color="primary" > {createTooltipContent(card)} diff --git a/src/components/cards/GenericCard.jsx b/src/components/cards/GenericCard.jsx index 7343705..6861029 100644 --- a/src/components/cards/GenericCard.jsx +++ b/src/components/cards/GenericCard.jsx @@ -1,24 +1,18 @@ -import React, { - useCallback, - useContext, - useEffect, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { Card, CardActions, Typography } from '@mui/material'; import CardMediaSection from './CardMediaSection'; -import placeholder from '../../assets/images/placeholder.jpeg'; -import { useMode } from '../../context'; -import MDTypography from '../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; -import useSelectedContext from '../../context/hooks/useSelectedContext'; +import placeholder from 'assets/images/placeholder.jpeg'; +import { useMode } from 'context'; +import useSelectedContext from 'context/hooks/useSelectedContext'; import { AspectRatioBox, StyledCardContent, -} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { usePopover } from '../../context/hooks/usePopover'; -import GenericActionButtons from '../../layout/REUSABLE_COMPONENTS/GenericActionButtons'; -import useDialogState from '../../context/hooks/useDialogState'; -import useManager from '../../context/useManager'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import usePopover from 'context/hooks/usePopover'; +import GenericActionButtons from 'layout/REUSABLE_COMPONENTS/GenericActionButtons'; +import useDialogState from 'context/hooks/useDialogState'; +import useManager from 'context/useManager'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; const getQuantity = ({ card, cart, @@ -123,26 +117,26 @@ const GenericCard = React.forwardRef((props, ref) => { if (cardSize !== 'xs' && !isDeckCard) { cardContent = ( - + {name} - - + + {price} - + {cardSize !== 'sm' && ( <> - {`Cart: ${isInContext ? cartQuantity : 'N/A'}`} - {`Cart: ${isInContext ? cartQuantity : 'N/A'}`} + {`Collection: ${isInContext ? collectionQuantity : 'N/A'}`} - {`Collection: ${isInContext ? collectionQuantity : 'N/A'}`} + {`Deck: ${isInContext ? deckQuantity : 'N/A'}`} + >{`Deck: ${isInContext ? deckQuantity : 'N/A'}`} )} @@ -157,8 +151,6 @@ const GenericCard = React.forwardRef((props, ref) => { imgUrl={imgUrl} card={card} context={effectiveContext} - page={page} - quantity={card?.quantity} isHovered={hoveredCard === card} handleInteraction={handleInteraction} isModalOpen={dialogState.isCardDialogOpen} @@ -185,18 +177,3 @@ const GenericCard = React.forwardRef((props, ref) => { GenericCard.displayName = 'GenericCard'; export default GenericCard; -{ - /* diff --git a/src/components/dialogs/CollectionDialog.jsx b/src/components/dialogs/CollectionDialog.jsx index 456b994..3adc555 100644 --- a/src/components/dialogs/CollectionDialog.jsx +++ b/src/components/dialogs/CollectionDialog.jsx @@ -1,18 +1,18 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { Avatar, CssBaseline, DialogTitle, Divider } from '@mui/material'; -import { useMode } from '../../context'; -import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import MDTypography from '../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import { DialogPaper, StyledDialog, StyledDialogContent, -} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { formFields } from '../forms/formsConfig'; -import RCDynamicForm from '../forms/Factory/RCDynamicForm'; -import useInitialFormData from '../forms/hooks/useInitialFormData'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import useInitialFormData from 'context/formHooks/useInitialFormData'; +import { useMode } from 'context'; +import { formFields } from 'data/formsConfig'; +import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; const CollectionDialog = ({ open, onClose, isNew, collectionData }) => { const { theme } = useMode(); @@ -57,12 +57,12 @@ const CollectionDialog = ({ open, onClose, isNew, collectionData }) => { border: 'none', }} > - + - + {isNew ? 'Add a Collection' : 'Update a Collection'} - + diff --git a/src/components/dialogs/DeckDialog.jsx b/src/components/dialogs/DeckDialog.jsx index fb0dd01..c5091e5 100644 --- a/src/components/dialogs/DeckDialog.jsx +++ b/src/components/dialogs/DeckDialog.jsx @@ -1,18 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Avatar, CssBaseline, DialogTitle, Divider } from '@mui/material'; -import { useMode } from '../../context'; -import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX'; +import { useMode } from 'context'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import MDTypography from '../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; + +import { formFields } from 'data/formsConfig'; +import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import { DialogPaper, StyledDialog, StyledDialogContent, -} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { formFields } from '../forms/formsConfig'; -import RCDynamicForm from '../forms/Factory/RCDynamicForm'; -import useInitialFormData from '../forms/hooks/useInitialFormData'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import useInitialFormData from 'context/formHooks/useInitialFormData'; const DeckDialog = ({ open, onClose, isNew, deckData }) => { const { theme } = useMode(); @@ -56,12 +57,12 @@ const DeckDialog = ({ open, onClose, isNew, deckData }) => { border: 'none', }} > - + - + {isNew ? 'Add a Deck' : 'Update a Deck'} - + @@ -78,12 +79,7 @@ const DeckDialog = ({ open, onClose, isNew, deckData }) => { deleteButton: false, startIcon: , }} - // Conditionally pass initial data if it's an update operation /> - {/* */} ); diff --git a/src/components/dialogs/DetailsModal.jsx b/src/components/dialogs/DetailsModal.jsx index 8695d3c..89a16b3 100644 --- a/src/components/dialogs/DetailsModal.jsx +++ b/src/components/dialogs/DetailsModal.jsx @@ -13,7 +13,7 @@ import { } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa'; -import featureCardData from '../../data/json-data/featureCardData.json'; // Path to your JSON file +import featureCardData from 'data/json-data/featureCardData.json'; // Path to your JSON file const DetailsModal = ({ open, onClose }) => { const handleClose = () => { diff --git a/src/components/dialogs/GenericCardDialog.jsx b/src/components/dialogs/GenericCardDialog.jsx index e288095..f2be85c 100644 --- a/src/components/dialogs/GenericCardDialog.jsx +++ b/src/components/dialogs/GenericCardDialog.jsx @@ -17,12 +17,12 @@ import { import CloseIcon from '@mui/icons-material/Close'; import CardMediaSection from '../cards/CardMediaSection'; import CardDetailsContainer from '../cards/CardDetailsContainer'; -import { useMode } from '../../context'; +import { useMode } from 'context'; import { useSnackbar } from 'notistack'; -import FlexBetween from '../../layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween'; -import useBreakpoint from '../../context/hooks/useBreakPoint'; -import GenericActionButtons from '../../layout/REUSABLE_COMPONENTS/GenericActionButtons'; -import useDialogState from '../../context/hooks/useDialogState'; +import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import GenericActionButtons from 'layout/REUSABLE_COMPONENTS/GenericActionButtons'; +import useDialogState from 'context/hooks/useDialogState'; const GenericCardDialog = ({ open = false, diff --git a/src/components/dialogs/StripeCheckoutModal.js b/src/components/dialogs/StripeCheckoutModal.js deleted file mode 100644 index a6722ad..0000000 --- a/src/components/dialogs/StripeCheckoutModal.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { Modal, Fade, Box, Typography, Backdrop } from '@mui/material'; -import { Elements } from '@stripe/react-stripe-js'; -import StripeForm from '../forms/customerCheckoutForm/StripeForm'; -import { loadStripe } from '@stripe/stripe-js'; - -const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY); - -const StripeCheckoutModal = ({ open, onClose, onToken, purchases, total }) => { - // console.log('STRIPE CHECKOUT MODAL PURCHASES:', purchases); - // console.log('STRIPE CHECKOUT MODAL TOTAL:', total); - return ( - - - - - Your Purchases - - {purchases.map((purchase, index) => ( - - {purchase.name} - - ${purchase.card_prices[0].tcgplayer_price} - - - ))} - - Total: - ${total} - - - - - - - - ); -}; - -export default StripeCheckoutModal; diff --git a/src/components/forms/Factory/RCDynamicForm.jsx b/src/components/forms/Factory/RCDynamicForm.jsx index 32fb06a..5af2ed7 100644 --- a/src/components/forms/Factory/RCDynamicForm.jsx +++ b/src/components/forms/Factory/RCDynamicForm.jsx @@ -1,22 +1,19 @@ /* eslint-disable @typescript-eslint/no-empty-function */ -import { Box, InputAdornment } from '@mui/material'; -import { useMediaQuery } from '@mui/material'; -// import { RCFieldError } from './RCFieldError'; +import { Box, InputAdornment, Tooltip } from '@mui/material'; import RCInput from './RCInput'; import { Controller } from 'react-hook-form'; -import useRCFormHook from '../hooks/useRCFormHook'; +import useRCFormHook from 'context/formHooks/useRCFormHook'; +import { useMode } from 'context'; +import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; +import { getFormFieldHandlers } from '../../../data/formsConfig'; +import { useFormSubmission } from 'context/formHooks/useFormSubmission'; +import React, { useEffect, useState } from 'react'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import RCLoadingButton from 'layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON'; import { FormBox, FormFieldBox, } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { useMode } from 'context'; -import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; -import { getFormFieldHandlers } from '../formsConfig'; -import { useFormSubmission } from '../hooks/useFormSubmission'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import useBreakpoint from 'context/hooks/useBreakPoint'; -import ReusableLoadingButton from 'layout/REUSABLE_COMPONENTS/ReusableLoadingButton'; -import { Tooltip } from '@mui/joy'; const RCDynamicForm = ({ formKey, @@ -36,7 +33,7 @@ const RCDynamicForm = ({ const { control, handleSubmit, - formState: { errors, isSubmitting, dirtyFields, isDirty, isValid }, + formState: { isSubmitting }, reset, } = methods; const [isMounted, setIsMounted] = useState(false); @@ -81,12 +78,11 @@ const RCDynamicForm = ({ type={fieldConfig.type} label={fieldConfig.label} placeholder={fieldConfig.placeholder} - error={!!error} name={fieldConfig.name} context={fieldConfig.context} - errorMessage={error?.message} + error={!!error} helperText={error?.message} - initialValue={fieldConfig.initialValue} + initialValue={formData || fieldConfig.initialValue} InputProps={ (fieldConfig.icon ? { @@ -106,11 +102,15 @@ const RCDynamicForm = ({ {optionsForUi && optionsForUi.submitButton && ( - {optionsForUi.startIcon} @@ -121,23 +121,24 @@ const RCDynamicForm = ({ ) } - fullWidth - sx={{ - ...(isMobile && { - fontSize: '0.75rem', // Adjust button font size for mobile - }), - }} + variant="holo" + color="info" + label={optionsForUi.submitButtonLabel} + size="large" /> )} {optionsForUi && optionsForUi.deleteButton && ( - {optionsForUi.startIcon} @@ -148,9 +149,10 @@ const RCDynamicForm = ({ ) } - variant="warning" - fullWidth - sx={{ mt: 2.2, background: theme.palette.error.main }} + variant="holo" + color="error" + label={optionsForUi.deleteButtonLabel} + size="large" /> )} diff --git a/src/components/forms/Factory/RCInput.jsx b/src/components/forms/Factory/RCInput.jsx index 219b51f..ba6020c 100644 --- a/src/components/forms/Factory/RCInput.jsx +++ b/src/components/forms/Factory/RCInput.jsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useCallback, useState } from 'react'; +import React, { useState } from 'react'; import { TextField, Radio, @@ -22,17 +22,14 @@ import { StyledTextField } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyle import { useMode } from 'context'; import RCSwitch from './RCSwitch'; import useBreakpoint from 'context/hooks/useBreakPoint'; -import { nanoid } from 'nanoid'; import useSelectorActions from 'context/hooks/useSelectorActions'; import useManager from 'context/useManager'; -const RCInput = forwardRef( +const RCInput = React.forwardRef( ( { type, options, onChange, - onBlur, - onFocus, initialValue, value, placeholder, @@ -65,7 +62,6 @@ const RCInput = forwardRef( updateEntityField('decks', 'deckId', 'tags', updatedTags); // Persist tags update }; const { newPalette, functions } = theme; - const { grey, transparent, @@ -73,7 +69,6 @@ const RCInput = forwardRef( success: colorSuccess, } = newPalette; const { pxToRem } = functions; - // styles for the input with error={true} const errorStyles = () => ({ backgroundImage: // eslint-disable-next-line max-len @@ -92,8 +87,6 @@ const RCInput = forwardRef( color: colorError.main, }, }); - - // styles for the input with success={true} const successStyles = () => ({ backgroundImage: // eslint-disable-next-line max-len @@ -136,7 +129,6 @@ const RCInput = forwardRef( }} fontSize={isMobile ? '1rem' : '1.25rem'} error={!!error} - // errorMessage={error?.message} helperText={helperText} {...rest} /> @@ -186,7 +178,10 @@ const RCInput = forwardRef( fullWidth rows={rest?.rows || 4} placeholder={rest?.placeholder} - value={value} + value={value || ''} + InputLabelProps={{ + shrink: !initialValue ? undefined : true, + }} onChange={(e) => onChange(e.target.value)} {...rest} /> diff --git a/src/components/forms/customerCheckoutForm/CustomerForm.js b/src/components/forms/customerCheckoutForm/CustomerForm.js deleted file mode 100644 index 90eb4da..0000000 --- a/src/components/forms/customerCheckoutForm/CustomerForm.js +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useCallback, useContext, useMemo } from 'react'; -import { Box, Container, Typography, Grid, Button } from '@mui/material'; -import CustomerInfoFields from './CustomerInfoFields'; -import StripeCheckoutModal from '../../dialogs/stripeModal/StripeCheckoutModal'; -import { ModalContext } from 'context/ModalContext/ModalContext'; -import CartSummary from '../../other/dataDisplay/CartSummary'; -import { useMode } from 'context'; -import useManager from 'context/useManager'; - -const CustomerForm = () => { - const { isModalOpen, setModalOpen } = useContext(ModalContext); - const { cart } = useManager(); - const { theme } = useMode(); - const totalCost = useMemo( - () => - cart?.items?.reduce((acc, item) => acc + item.price * item.quantity, 0), - [cart?.items] - ); - const handleModalToggle = useCallback( - () => setModalOpen((prev) => !prev), - [setModalOpen] - ); - - return ( - - - - Customer Info - -
- - - - - - - - {' '} - - - -
- - - - ); -}; - -export default CustomerForm; diff --git a/src/components/forms/customerCheckoutForm/CustomerInfoFields.jsx b/src/components/forms/customerCheckoutForm/CustomerInfoFields.jsx deleted file mode 100644 index 7121ff3..0000000 --- a/src/components/forms/customerCheckoutForm/CustomerInfoFields.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Box, Grid } from '@mui/material'; -import FormTextField from './FormTextField'; - -const CustomerInfoFields = () => { - return ( - - - - - - - - - - - ); -}; - -export default CustomerInfoFields; diff --git a/src/components/forms/customerCheckoutForm/FormTextField.js b/src/components/forms/customerCheckoutForm/FormTextField.js deleted file mode 100644 index fddc1cb..0000000 --- a/src/components/forms/customerCheckoutForm/FormTextField.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { TextField } from '@mui/material'; - -function FormTextField({ id = 'outlined', label, type }) { - return ( - - ); -} - -export default FormTextField; diff --git a/src/components/forms/customerCheckoutForm/StripeForm.js b/src/components/forms/customerCheckoutForm/StripeForm.js deleted file mode 100644 index bb46547..0000000 --- a/src/components/forms/customerCheckoutForm/StripeForm.js +++ /dev/null @@ -1,78 +0,0 @@ -import React, { useState } from 'react'; -import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js'; -import axios from 'axios'; -import './StripeForm.css'; - -const StripeForm = ({ total, onToken }) => { - const stripe = useStripe(); - const elements = useElements(); - - const [paymentError, setPaymentError] = useState(null); - const [paymentSuccess, setPaymentSuccess] = useState(null); - const [loading, setLoading] = useState(false); - - const handleSubmit = async (event) => { - event.preventDefault(); - setLoading(true); - - if (!stripe || !elements) { - setLoading(false); - return; - } - - const cardElement = elements.getElement(CardElement); - - const { error, paymentMethod } = await stripe.createPaymentMethod({ - type: 'card', - card: cardElement, - }); - - if (error) { - setPaymentError(error.message); - setPaymentSuccess(null); - setLoading(false); - } else { - const { id } = paymentMethod; - onToken(id); - const amountInCents = Math.round(total * 100); - - try { - const response = await axios.post( - `${process.env.REACT_APP_SERVER}/api/stripe/checkout`, - { id, amount: amountInCents } - ); - - setLoading(false); - - if (response.data.success) { - setPaymentSuccess('Payment Successful!'); - setPaymentError(null); - } else { - setPaymentError('Payment failed: ' + response.data.message); - setPaymentSuccess(null); - } - } catch (err) { - setLoading(false); - setPaymentError('Error processing payment: ' + err.message); - setPaymentSuccess(null); - } - } - }; - - return ( -
- - - {paymentError &&

{paymentError}

} - {paymentSuccess &&

{paymentSuccess}

} - - ); -}; - -export default StripeForm; diff --git a/src/components/forms/search/PaginationComponent.jsx b/src/components/forms/search/PaginationComponent.jsx index 9dda522..9e6475e 100644 --- a/src/components/forms/search/PaginationComponent.jsx +++ b/src/components/forms/search/PaginationComponent.jsx @@ -3,25 +3,16 @@ import { Box, Typography, IconButton, TextField } from '@mui/material'; import { ChevronLeft, ChevronRight } from '@mui/icons-material'; const PaginationComponent = ({ pageOptions }) => { - // Initialize the pageIndex state to 0 (first page) const [pageIndex, setPageIndex] = useState(0); - - // Check if there's a previous or next page available const canPreviousPage = pageIndex > 0; const canNextPage = pageIndex < pageOptions?.length - 1; - - // Define the function to navigate to a specific page const gotoPage = (page) => { const pageNumber = Math.max(0, Math.min(page, pageOptions.length - 1)); setPageIndex(pageNumber); }; - - // Define the function for going to the next page const nextPage = () => { if (canNextPage) setPageIndex((currentPageIndex) => currentPageIndex + 1); }; - - // Define the function for going to the previous page const previousPage = () => { if (canPreviousPage) setPageIndex((currentPageIndex) => currentPageIndex - 1); @@ -61,108 +52,3 @@ const PaginationComponent = ({ pageOptions }) => { }; export default PaginationComponent; - -// // PaginationComponent.jsx -// import React from 'react'; -// import MDPagination from 'layout/REUSABLE_COMPONENTS/MDPAGINATION'; -// import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -// import MDInput from 'layout/REUSABLE_COMPONENTS/MDINPUT'; -// import Icon from '@mui/material/Icon'; -// import MDTypography from 'layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; - -// const PaginationComponent = ({ -// pageOptions, -// pageIndex, -// gotoPage, -// canPreviousPage, -// canNextPage, -// nextPage, -// previousPage, -// }) => ( -// -// {canPreviousPage && ( -// previousPage()}> -// chevron_left -// -// )} -// {/* Render page numbers */} -// {pageOptions?.length > 1 ? ( -// -// gotoPage(Number(e.target.value) - 1)} -// /> -// -// ) : ( -// -// Page {pageIndex + 1} of {pageOptions?.length} -// -// )} -// {canNextPage && ( -// nextPage()}> -// chevron_right -// -// )} -// -// ); - -// export default PaginationComponent; - -{ - /* -{showTotalEntries && ( - - - Showing {entriesStart} to {entriesEnd} of {data?.length} entries - - -)} -{pageOptions?.length > 1 && ( - - {canPreviousPage && ( - previousPage()}> - chevron_left - - )} - {pageOptions?.length > 1 ? ( - - - - ) : ( - - - {customizedPageOptions[pageIndex]} - - - )} - {canNextPage && ( - nextPage()}> - chevron_right - - )} - - {renderPagination} - -)} - */ -} diff --git a/src/components/forms/search/SearchComponent.jsx b/src/components/forms/search/SearchComponent.jsx index b6124a5..6b22174 100644 --- a/src/components/forms/search/SearchComponent.jsx +++ b/src/components/forms/search/SearchComponent.jsx @@ -1,26 +1,26 @@ // DeckSearch.js -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { Card, Container, Grid, IconButton } from '@mui/material'; import SearchResults from './SearchResults'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from 'layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import SettingsIcon from '@mui/icons-material/Settings'; import { useMode } from 'context'; import useLocalStorage from 'context/hooks/useLocalStorage'; -import SimpleCard from 'layout/REUSABLE_COMPONENTS/unique/SimpleCard'; -import uniqueTheme from 'layout/REUSABLE_COMPONENTS/unique/uniqueTheme'; -import { useCardStoreHook } from 'context/useCardStore'; -import RCDynamicForm from '../Factory/RCDynamicForm'; -import { formFields } from '../formsConfig'; import SearchIcon from '@mui/icons-material/Search'; +import { useCardStoreHook } from 'context/state/useCardStore'; +import useConfigurator from 'context/hooks/useConfigurator'; +import RCDynamicForm from '../Factory/RCDynamicForm'; +import { formFields } from '../../../data/formsConfig'; import useBreakpoint from 'context/hooks/useBreakPoint'; -import { useConfigurator } from 'context/hooks/useConfigurator'; +import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; + const SearchComponent = (pageContext) => { const { theme } = useMode(); const { isMobile } = useBreakpoint(); - const itemsPerPage = 12; const { loadingSearchResults } = useCardStoreHook(); const { toggleConfigurator } = useConfigurator(); + const itemsPerPage = 12; const [searchData, setSearchData] = useLocalStorage('searchData', []); useEffect(() => { const handleStorageChange = () => { @@ -38,10 +38,9 @@ const SearchComponent = (pageContext) => { return ( - { }), }} > - { }} > Search Cards - + { }} /> - + ({ - padding: theme.spacing(3), - borderRadius: theme.shape.borderRadius, - background: theme.palette.greenAccent.light, - boxShadow: theme.shadows[3], - margin: 'auto', - width: '100%', - maxWidth: 'md', - '&:hover': { - boxShadow: theme.shadows[6], - }, -}); - -const SearchSettings = () => { - const [searchSettings, setSearchSettings] = useState({ - search: '', - searchBy: 'title', - sortBy: 'release_date', - }); - - const { theme } = useMode(); - - const handleSearch = (e) => { - setSearchSettings({ - ...searchSettings, - search: e.target.value, - }); - }; - - const handleSearchBy = (e) => { - setSearchSettings({ - ...searchSettings, - searchBy: e.target.value, - }); - }; - - const handleSortBy = (e) => { - setSearchSettings({ - ...searchSettings, - sortBy: e.target.value, - }); - }; - - return ( - - - - - - - - ); -}; - -export default SearchSettings; diff --git a/src/context/ConfiguratorContext.jsx b/src/context/ConfiguratorContext.jsx deleted file mode 100644 index 87e5efd..0000000 --- a/src/context/ConfiguratorContext.jsx +++ /dev/null @@ -1,24 +0,0 @@ -// // ConfiguratorContext.js -// import React, { createContext, useContext, useState } from 'react'; -// const defaultConfiguratorState = { -// isConfiguratorOpen: false, -// // eslint-disable-next-line @typescript-eslint/no-empty-function -// toggleConfigurator: () => {}, -// }; -// const ConfiguratorContext = createContext(defaultConfiguratorState); - -// export const ConfiguratorProvider = ({ children }) => { -// const [isConfiguratorOpen, setIsConfiguratorOpen] = useState(false); - -// const toggleConfigurator = () => setIsConfiguratorOpen((prev) => !prev); - -// return ( -// -// {children} -// -// ); -// }; - -// export const useConfiguratorContext = () => useContext(ConfiguratorContext); diff --git a/src/components/forms/hooks/useFormManagement.jsx b/src/context/formHooks/useFormManagement.jsx similarity index 100% rename from src/components/forms/hooks/useFormManagement.jsx rename to src/context/formHooks/useFormManagement.jsx diff --git a/src/components/forms/hooks/useFormSubmission.jsx b/src/context/formHooks/useFormSubmission.jsx similarity index 94% rename from src/components/forms/hooks/useFormSubmission.jsx rename to src/context/formHooks/useFormSubmission.jsx index 3521ef8..a387db6 100644 --- a/src/components/forms/hooks/useFormSubmission.jsx +++ b/src/context/formHooks/useFormSubmission.jsx @@ -1,5 +1,5 @@ import { useCallback, useState } from 'react'; -import { handleValidation, zodSchemas } from '../formsConfig'; +import { handleValidation, zodSchemas } from '../../data/formsConfig'; export const useFormSubmission = (formHandlers, formKey) => { const [isSubmitting, setIsSubmitting] = useState(false); diff --git a/src/components/forms/hooks/useInitialFormData.jsx b/src/context/formHooks/useInitialFormData.jsx similarity index 100% rename from src/components/forms/hooks/useInitialFormData.jsx rename to src/context/formHooks/useInitialFormData.jsx diff --git a/src/components/forms/hooks/useRCFormHook.jsx b/src/context/formHooks/useRCFormHook.jsx similarity index 94% rename from src/components/forms/hooks/useRCFormHook.jsx rename to src/context/formHooks/useRCFormHook.jsx index baa958a..1f664b0 100644 --- a/src/components/forms/hooks/useRCFormHook.jsx +++ b/src/context/formHooks/useRCFormHook.jsx @@ -1,7 +1,7 @@ import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { useEffect } from 'react'; -import { formFields, zodSchemas } from '../formsConfig'; +import { formFields, zodSchemas } from '../../data/formsConfig'; const useRCFormHook = (schemaKey, initialData) => { // console.log('SCHEMA KEY', schemaKey); diff --git a/src/context/hooks/index.jsx b/src/context/hooks/index.jsx new file mode 100644 index 0000000..88b0eab --- /dev/null +++ b/src/context/hooks/index.jsx @@ -0,0 +1,31 @@ +import useBreakpoint from './useBreakPoint'; +import useLocalStorage from './useLocalStorage'; +import useConfigurator from './useConfigurator'; +import useDialogState from './useDialogState'; +import useEventHandlers from './useEventHandlers'; +import useFetchWrapper from './useFetchWrapper'; +import useGridItems from './useGridItems'; +import useLoading from './useLoading'; +import useLogger from './useLogger'; +import useManageCookies from './useManageCookies'; +import usePagination from './usePagination'; +import useSelectedContext from './useSelectedContext'; +import usePopover from './usePopover'; +import useSelectorActions from './useSelectorActions'; + +export default { + useBreakpoint, + useLocalStorage, + useConfigurator, + useDialogState, + useEventHandlers, + useFetchWrapper, + useGridItems, + useLoading, + useLogger, + useManageCookies, + usePagination, + useSelectedContext, + usePopover, + useSelectorActions, +}; diff --git a/src/context/hooks/useBreakPoint.jsx b/src/context/hooks/useBreakPoint.jsx index a2c4457..5ab6142 100644 --- a/src/context/hooks/useBreakPoint.jsx +++ b/src/context/hooks/useBreakPoint.jsx @@ -1,8 +1,9 @@ import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; +import { useMode } from 'context'; const useBreakpoint = () => { - const theme = useTheme(); + const { theme } = useMode(); const isIpod = useMediaQuery(theme.breakpoints.down('xs')); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const isTablet = useMediaQuery(theme.breakpoints.down('md')); @@ -29,11 +30,18 @@ const useBreakpoint = () => { ); return { + // Checks for specific breakpoints isXs: isIpod, isMobile: isMobile, isMd: isTablet, isLg: isLaptop, isXl: isDesktop, + + // Checks for ranges + isBetweenXsAndSm: matchesXSBetweenSM, + isBetweenSmAndMd: matchesSMBetweenMD, + isBetweenMdAndLg: matchesMDBetweenLG, + isBetweenLgAndXl: matchesLGBetweenXL, }; }; diff --git a/src/context/hooks/useConfigurator.jsx b/src/context/hooks/useConfigurator.jsx index 8b8e7cb..12491ee 100644 --- a/src/context/hooks/useConfigurator.jsx +++ b/src/context/hooks/useConfigurator.jsx @@ -1,7 +1,7 @@ import { useState } from 'react'; // Custom hook to manage configurator state -export const useConfigurator = () => { +const useConfigurator = () => { const [isConfiguratorOpen, setIsConfiguratorOpen] = useState(false); const toggleConfigurator = () => { @@ -10,3 +10,5 @@ export const useConfigurator = () => { return { isConfiguratorOpen, toggleConfigurator }; }; + +export default useConfigurator; diff --git a/src/context/hooks/useEventHandlers.jsx b/src/context/hooks/useEventHandlers.jsx index 25f8ddd..4a4981e 100644 --- a/src/context/hooks/useEventHandlers.jsx +++ b/src/context/hooks/useEventHandlers.jsx @@ -1,7 +1,7 @@ import { debounce } from 'lodash'; import { useCallback, useState } from 'react'; -export const useEventHandlers = () => { +const useEventHandlers = () => { const [hoveredData, setHoveredData] = useState(null); const debouncedSetHoveredData = useCallback( debounce(setHoveredData, 100), @@ -21,3 +21,5 @@ export const useEventHandlers = () => { ); return { hoveredData, handleMouseMove, handleMouseLeave }; }; + +export default useEventHandlers; diff --git a/src/context/hooks/useFetchWrapper.jsx b/src/context/hooks/useFetchWrapper.jsx index d6d621c..ba26e2d 100644 --- a/src/context/hooks/useFetchWrapper.jsx +++ b/src/context/hooks/useFetchWrapper.jsx @@ -1,7 +1,7 @@ import { useState, useCallback, useEffect } from 'react'; import useLogger from './useLogger'; import useLocalStorage from './useLocalStorage'; -import { useLoading } from './useLoading'; +import useLoading from './useLoading'; import { useSnackbar } from 'notistack'; // Utility function to serialize errors function serializeError(error) { diff --git a/src/context/hooks/useGridItems.jsx b/src/context/hooks/useGridItems.jsx index f743f3d..cc2705e 100644 --- a/src/context/hooks/useGridItems.jsx +++ b/src/context/hooks/useGridItems.jsx @@ -1,11 +1,11 @@ import React, { useMemo } from 'react'; import { Grid, Grow, IconButton, Tooltip } from '@mui/material'; -import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX'; -import GenericCard from '../../components/cards/GenericCard'; -import { SkeletonCard } from '../../layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; -import useMode from '../useMode'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import GenericCard from 'components/cards/GenericCard'; +import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; +import useMode from '../state/useMode'; import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded'; -import { useCardStoreHook } from '../useCardStore'; +import { useCardStoreHook } from '../state/useCardStore'; import useManager from '../useManager'; const useGridItems = ({ itemsPerPage, @@ -63,7 +63,7 @@ const useGridItems = ({ cardClasses="base-card-no-quantity" /> {type === 'deck' && ( - + ({ ...acc, ...category }), {} ); - -const LOADING_IDS_KEYS = Object.keys(LOADING_IDS); -const LOADING_STATES_VALUES = { - general: { - [LOADING_IDS.general.isLoading]: true, - [LOADING_IDS.general.isDataLoading]: true, - [LOADING_IDS.general.isFormDataLoading]: true, - [LOADING_IDS.general.isPageLoading]: true, - [LOADING_IDS.general.ifIsSearchLoading]: true, - }, - pages: { - [LOADING_IDS.pages.CartPage]: true, - [LOADING_IDS.pages.CollectionPage]: true, - [LOADING_IDS.pages.DeckBuilderPage]: true, - [LOADING_IDS.pages.HomePage]: true, - [LOADING_IDS.pages.ProfilerPage]: true, - [LOADING_IDS.pages.StorePage]: true, - }, - forms: { - [LOADING_IDS.forms.loginForm]: true, - [LOADING_IDS.forms.signupForm]: true, - [LOADING_IDS.forms.addDeckForm]: true, - [LOADING_IDS.forms.updateDeckForm]: true, - [LOADING_IDS.forms.addCollectionForm]: true, - [LOADING_IDS.forms.updateCollectionForm]: true, - [LOADING_IDS.forms.updateUserDataForm]: true, - [LOADING_IDS.forms.searchForm]: true, - [LOADING_IDS.forms.collectionSearchForm]: true, - [LOADING_IDS.forms.timeRangeForm]: true, - [LOADING_IDS.forms.themRangeForm]: true, - [LOADING_IDS.forms.statRangeForm]: true, - [LOADING_IDS.forms.searchSettingsForm]: true, - [LOADING_IDS.forms.rememberMeForm]: true, - [LOADING_IDS.forms.authSwitchForm]: true, - }, - auth: { - [LOADING_IDS.auth.login]: true, - [LOADING_IDS.auth.signup]: true, - [LOADING_IDS.auth.logout]: true, - }, - decks: { - [LOADING_IDS.decks.fetchingDecks]: true, - [LOADING_IDS.decks.addingDeck]: true, - [LOADING_IDS.decks.updatingDeck]: true, - [LOADING_IDS.decks.deletingDeck]: true, - [LOADING_IDS.decks.addingCardsToDeck]: true, - [LOADING_IDS.decks.removingCardsFromDeck]: true, - }, - collections: { - [LOADING_IDS.collections.fetchingCollections]: true, - [LOADING_IDS.collections.addingCollection]: true, - [LOADING_IDS.collections.updatingCollection]: true, - [LOADING_IDS.collections.deletingCollection]: true, - [LOADING_IDS.collections.addingCardsToCollection]: true, - [LOADING_IDS.collections.removingCardsFromCollection]: true, - }, - cart: { - [LOADING_IDS.cart.fetchingCart]: true, - [LOADING_IDS.cart.addingCart]: true, - [LOADING_IDS.cart.addingCardsToCart]: true, - [LOADING_IDS.cart.removingCardsFromCart]: true, - }, -}; -export const useLoading = () => { +const useLoading = () => { const [loadingStates, setLoadingStates] = useState({}); const [loadingQueue, setLoadingQueue] = useState([]); const [apiLoadingStates, setApiLoadingStates] = useState({ @@ -239,3 +117,5 @@ export const useLoading = () => { startLoading, }; }; + +export default useLoading; diff --git a/src/context/hooks/usePopover.jsx b/src/context/hooks/usePopover.jsx index dbea817..c9358ae 100644 --- a/src/context/hooks/usePopover.jsx +++ b/src/context/hooks/usePopover.jsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import placeholder from '../../assets/images/placeholder.jpeg'; -export const usePopover = () => { +import placeholder from 'assets/images/placeholder.jpeg'; +const usePopover = () => { const [hoveredCard, setHoveredCard] = useState(null); const [isPopoverOpen, setIsPopoverOpen] = useState(false); const hoveredValues = { @@ -21,3 +21,5 @@ export const usePopover = () => { setIsPopoverOpen, }; }; + +export default usePopover; diff --git a/src/context/index.js b/src/context/index.js index 36bf602..b16a968 100644 --- a/src/context/index.js +++ b/src/context/index.js @@ -1,7 +1,5 @@ -// context/index.js -export { useMode } from './useMode'; -// export { useConfiguratorContext } from './ConfiguratorContext'; +import useMode from './state/useMode'; -export { default as ErrorBoundary } from '../layout/REUSABLE_COMPONENTS/system-utils/ErrorBoundary'; +// context/index.js +export { useMode }; export { ColorModeProvider } from './ColorModeProvider'; -// export { ConfiguratorProvider } from './ConfiguratorContext'; diff --git a/src/context/useAuthManager.jsx b/src/context/state/useAuthManager.jsx similarity index 97% rename from src/context/useAuthManager.jsx rename to src/context/state/useAuthManager.jsx index b3ee109..f4f9a70 100644 --- a/src/context/useAuthManager.jsx +++ b/src/context/state/useAuthManager.jsx @@ -1,8 +1,8 @@ import { useCallback, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import jwtDecode from 'jwt-decode'; -import useFetchWrapper from './hooks/useFetchWrapper'; -import useManageCookies from './hooks/useManageCookies'; +import useFetchWrapper from '../hooks/useFetchWrapper'; +import useManageCookies from '../hooks/useManageCookies'; import useUserData from './useUserData'; import jwt_decode from 'jwt-decode'; diff --git a/src/context/useCardStore.jsx b/src/context/state/useCardStore.jsx similarity index 91% rename from src/context/useCardStore.jsx rename to src/context/state/useCardStore.jsx index a8a7f23..71f94fc 100644 --- a/src/context/useCardStore.jsx +++ b/src/context/state/useCardStore.jsx @@ -1,11 +1,9 @@ import { useState, useEffect, useCallback } from 'react'; import axios from 'axios'; -import { useFormContext } from '.'; -import useLogger from './hooks/useLogger'; -import useLocalStorage from './hooks/useLocalStorage'; // Ensure this is the correct path to your hook -import { useLoading } from './hooks/useLoading'; -import useManageCookies from './hooks/useManageCookies'; -import { formFields } from 'components/forms/formsConfig'; +import useLogger from '../hooks/useLogger'; +import useLocalStorage from '../hooks/useLocalStorage'; // Ensure this is the correct path to your hook +import useLoading from '../hooks/useLoading'; +import useManageCookies from '../hooks/useManageCookies'; function debounce(func, wait) { let timeout; diff --git a/src/context/useMode.jsx b/src/context/state/useMode.jsx similarity index 76% rename from src/context/useMode.jsx rename to src/context/state/useMode.jsx index 293d2e3..cdf27b5 100644 --- a/src/context/useMode.jsx +++ b/src/context/state/useMode.jsx @@ -1,9 +1,9 @@ // useMode is a custom hook that returns the current mode and theme. import { useContext } from 'react'; -import { ColorModeContext } from './ColorModeProvider'; +import { ColorModeContext } from '../ColorModeProvider'; -export const useMode = () => { +const useMode = () => { const { mode, colorMode, theme, toggleColorMode } = useContext(ColorModeContext); diff --git a/src/context/useUserData.jsx b/src/context/state/useUserData.jsx similarity index 93% rename from src/context/useUserData.jsx rename to src/context/state/useUserData.jsx index f823158..71d808e 100644 --- a/src/context/useUserData.jsx +++ b/src/context/state/useUserData.jsx @@ -1,10 +1,10 @@ // hooks/useUserData.js import { useCallback, useState, useEffect } from 'react'; -import useLocalStorage from './hooks/useLocalStorage'; -import useFetchWrapper from './hooks/useFetchWrapper'; -import useLogger from './hooks/useLogger'; +import useLocalStorage from '../hooks/useLocalStorage'; +import useFetchWrapper from '../hooks/useFetchWrapper'; +import useLogger from '../hooks/useLogger'; import { useCookies } from 'react-cookie'; -import useManageCookies from './hooks/useManageCookies'; +import useManageCookies from '../hooks/useManageCookies'; function useUserData() { const { getCookie } = useManageCookies(); diff --git a/src/context/useManager.jsx b/src/context/useManager.jsx index 7fa7fdc..04556c2 100644 --- a/src/context/useManager.jsx +++ b/src/context/useManager.jsx @@ -403,7 +403,7 @@ const useManager = () => { const localEntity = entity === 'decks' ? 'Deck' : 'Collection'; const id = localStorage.getItem('selected' + localEntity + 'Id'); const cleanedId = encodeURIComponent(id.replace(/"/g, '')); - + console.log('UPDAtING', entity, data); handleEntityOperation(entity, `update/${cleanedId}`, 'update', data); }, [handleEntityOperation] @@ -536,7 +536,7 @@ const useManager = () => { removeCardFromEntity('collections', item), addDeck: (data) => addEntity('decks', data), - updateDeck: (id, data) => updateEntity('decks', id, data), + updateDeck: (data) => updateEntity('decks', data), deleteDeck: (id) => deleteEntity('decks', id), addItemToDeck: (item) => addCardToEntity('decks', item), removeItemFromDeck: (item) => removeCardFromEntity('decks', item), diff --git a/src/layout/REUSABLE_COMPONENTS/icons/DeckBuilderIcon.jsx b/src/data/DeckBuilderIcon.jsx similarity index 100% rename from src/layout/REUSABLE_COMPONENTS/icons/DeckBuilderIcon.jsx rename to src/data/DeckBuilderIcon.jsx diff --git a/src/data/HelmetMetaData.jsx b/src/data/HelmetMetaData.jsx new file mode 100644 index 0000000..04e38e4 --- /dev/null +++ b/src/data/HelmetMetaData.jsx @@ -0,0 +1,39 @@ +/* eslint-disable max-len */ +import { Helmet } from 'react-helmet'; + +const HelmetMetaData = () => ( + +); + +export default HelmetMetaData; diff --git a/src/data/baseMenuItems.jsx b/src/data/baseMenuItems.jsx index 9c2a860..3c87f78 100644 --- a/src/data/baseMenuItems.jsx +++ b/src/data/baseMenuItems.jsx @@ -4,10 +4,10 @@ import { ShoppingCart as CartIcon, Assessment as CollectionIcon, } from '@mui/icons-material'; -import DeckBuilderIcon from '../layout/REUSABLE_COMPONENTS/icons/DeckBuilderIcon'; +import DeckBuilderIcon from './DeckBuilderIcon'; import { Badge } from '@mui/material'; -export const baseMenuItems = ({ cartCardQuantity }) => [ +const baseMenuItems = ({ cartCardQuantity }) => [ { name: 'Deck', icon: , @@ -51,3 +51,5 @@ export const baseMenuItems = ({ cartCardQuantity }) => [ requiresLogin: true, }, ]; + +export default baseMenuItems; diff --git a/src/data/collectionPortfolioHeaderItems.jsx b/src/data/collectionPortfolioHeaderItems.jsx index aa24c66..bab8e8c 100644 --- a/src/data/collectionPortfolioHeaderItems.jsx +++ b/src/data/collectionPortfolioHeaderItems.jsx @@ -1,6 +1,6 @@ -import { roundToNearestTenth } from '../context/Helpers'; +import { roundToNearestTenth } from 'context/Helpers'; -export const collectionPortfolioHeaderItems = (collection) => [ +const collectionPortfolioHeaderItems = (collection) => [ { icon: 'collections', label: 'Portfolio Selected', @@ -29,3 +29,5 @@ export const collectionPortfolioHeaderItems = (collection) => [ delay: 600, }, ]; + +export default collectionPortfolioHeaderItems; diff --git a/src/components/forms/formsConfig.jsx b/src/data/formsConfig.jsx similarity index 99% rename from src/components/forms/formsConfig.jsx rename to src/data/formsConfig.jsx index 2aef381..80eba99 100644 --- a/src/components/forms/formsConfig.jsx +++ b/src/data/formsConfig.jsx @@ -20,9 +20,9 @@ import EditIcon from '@mui/icons-material/Edit'; import AddIcon from '@mui/icons-material/Add'; import { z } from 'zod'; -import useAuthManager from '../../context/useAuthManager'; -import { useCardStoreHook } from '../../context/useCardStore'; -import useManager from '../../context/useManager'; +import useAuthManager from 'context/state/useAuthManager'; +import { useCardStoreHook } from 'context/state/useCardStore'; +import useManager from 'context/useManager'; // ----------------------------------------------------------------------------- // ----------------------------------------------------------------------------- // ---------------------------- FORM FIELD HANDLERS ---------------------------- diff --git a/src/data/iconData.jsx b/src/data/iconData.jsx index 431baa6..78e28f8 100644 --- a/src/data/iconData.jsx +++ b/src/data/iconData.jsx @@ -33,10 +33,6 @@ import ListItemIcon from '@mui/material/ListItemIcon'; import EditIcon from '@mui/icons-material/Edit'; import VisibilityIcon from '@mui/icons-material/Visibility'; import BarChartIcon from '@mui/icons-material/BarChart'; -import SelectAllIcon from '@mui/icons-material/SelectAll'; -import MenuIcon from '@mui/icons-material/Menu'; -import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; const iconData = [ { diff --git a/src/data/index.jsx b/src/data/index.jsx new file mode 100644 index 0000000..5bb11d8 --- /dev/null +++ b/src/data/index.jsx @@ -0,0 +1,27 @@ +import heroData from './heroData'; +import ROUTE_CONFIG from './route-config'; +import collectionPortfolioHeaderItems from './collectionPortfolioHeaderItems'; +import baseMenuItems from './baseMenuItems'; +import prepareTableData from './prepareTableData'; +import HelmetMetaData from './HelmetMetaData'; +import { + formFields, + zodSchemas, + configOptions, + handleValidation, + getFormFieldHandlers, +} from './formsConfig'; +export { + heroData, + ROUTE_CONFIG, + HelmetMetaData, + collectionPortfolioHeaderItems, + baseMenuItems, + prepareTableData, + // FORMS + formFields, + zodSchemas, + configOptions, + handleValidation, + getFormFieldHandlers, +}; diff --git a/src/data/prepareTableData.jsx b/src/data/prepareTableData.jsx index 984f295..850a896 100644 --- a/src/data/prepareTableData.jsx +++ b/src/data/prepareTableData.jsx @@ -1,11 +1,10 @@ import React from 'react'; -import MDTypography from '../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; -import { useSnackbar } from 'notistack'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import { roundToNearestTenth } from 'context/Helpers'; -import GenericActionButtons from '../layout/REUSABLE_COMPONENTS/GenericActionButtons'; +import GenericActionButtons from 'layout/REUSABLE_COMPONENTS/GenericActionButtons'; // Note: No changes needed for these components const Name = ({ name, color }) => ( - ( fontWeight="medium" > {name} - + ); const Price = ({ price, color }) => ( - ( fontWeight="medium" > {price} - + ); const TPrice = ({ tPrice, color }) => ( - ( fontWeight="medium" > {tPrice} - + ); const Quantity = ({ quantity, color }) => ( - ( fontWeight="medium" > {quantity} - + ); -export default function prepareTableData(selectedCards, type) { +function prepareTableData(selectedCards, type) { const columnsA = [ { field: 'name', @@ -143,3 +142,5 @@ export default function prepareTableData(selectedCards, type) { return { columns, data }; } + +export default prepareTableData; diff --git a/src/data/route-config.jsx b/src/data/route-config.jsx index 0797beb..d6658d3 100644 --- a/src/data/route-config.jsx +++ b/src/data/route-config.jsx @@ -6,7 +6,8 @@ export const ROUTES = [ { path: '/cart', componentName: 'CartPage', isPrivate: true }, { path: '/collection', componentName: 'CollectionPage', isPrivate: true }, { path: '/profile', componentName: 'ProfilePage', isPrivate: true }, - { path: '/login', componentName: 'LoginDialog', isPrivate: false }, + // { path: '/login', componentName: 'LoginDialog', isPrivate: false }, + { path: '/login', componentName: 'LoginPage', isPrivate: false }, { path: '/loginPage', componentName: 'LoginPage', isPrivate: false }, { path: '/signup', componentName: 'SignupPage', isPrivate: false }, { path: '/about', componentName: 'AboutPage', isPrivate: false }, @@ -16,7 +17,7 @@ export const ROUTES = [ { path: '*', componentName: 'NotFoundPage', isPrivate: false }, ]; -export const ROUTE_CONFIG = { +const ROUTE_CONFIG = { defaultPath: '/', routes: ROUTES.map(({ path, componentName, isPrivate }) => ({ path, @@ -24,3 +25,5 @@ export const ROUTE_CONFIG = { isPrivate, })), }; + +export default ROUTE_CONFIG; diff --git a/src/index.js b/src/index.js index 160bca1..7ec52bb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,3 @@ -import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; @@ -7,46 +6,33 @@ import { register, unregister } from './serviceWorker'; // ==============================|| REACT DOM RENDER ||============================== // import { ColorModeProvider, useMode } from './context'; -import { Helmet } from 'react-helmet'; -import { SnackbarProvider } from 'notistack'; +import { SnackbarProvider, enqueueSnackbar } from 'notistack'; import { ErrorBoundary } from 'react-error-boundary'; import ErrorFallback from 'layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback'; import { ThemeProvider } from 'styled-components'; import { CssBaseline, GlobalStyles } from '@mui/material'; import { ParallaxProvider } from 'react-scroll-parallax'; +import { HelmetMetaData } from 'data'; const domNode = document.getElementById('root'); -const HelmetMetadata = () => ( - - {/* Basic */} - Enhanced Cardstore - - - {/* Social Media */} - - - - - - -); - const AppWrapper = () => { const { theme } = useMode(); - + const errorHandler = (error, errorInfo) => { + console.error('Error:', error, 'Info:', errorInfo); + enqueueSnackbar('An unexpected error occurred, please try again later.', { + variant: 'error', + }); + }; return ( { - console.log(details); - }} - onError={(error) => { - console.error(error); - }} + onReset={() => window.location.reload()} + onError={errorHandler} + theme={theme} > - + diff --git a/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx b/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx index e1dac1d..0e1d801 100644 --- a/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx @@ -1,7 +1,7 @@ import Drawer from '@mui/material/Drawer'; import { styled } from '@mui/material/styles'; import { useMode } from 'context'; -import { useConfigurator } from 'context/hooks/useConfigurator'; +import useConfigurator from 'context/hooks/useConfigurator'; export default styled(Drawer)(({ ownerState }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx index b48bf54..1c27122 100644 --- a/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx @@ -11,16 +11,16 @@ import { } from '@mui/material'; import ConfiguratorRoot from './ConfiguratorRoot'; import searchData from 'data/json-data/search.json'; -import { useMode } from 'context'; -import { zodResolver } from '@hookform/resolvers/zod'; -import { useForm, Controller } from 'react-hook-form'; -import MDTypography from '../MDTYPOGRAPHY/MDTypography'; -import MDBox from '../MDBOX'; -import { formFields } from 'components/forms/formsConfig'; +import { formFields } from 'data/formsConfig'; import { TextField, InputLabel } from '@mui/material'; -import { StyledFormControl } from '../../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import RCButton from '../RCBUTTON'; -import { useConfigurator } from 'context/hooks/useConfigurator'; +import { StyledFormControl } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; +import useConfigurator from 'context/hooks/useConfigurator'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; +import { Controller, useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { useMode } from 'context'; const SearchSettingsForm = ({ searchSettings, @@ -101,7 +101,6 @@ const Configurator = () => { const onSubmitForm = (data) => { console.log(data); - // Assuming onSubmit updates some context or state }; const renderSwitchSection = (title) => ( @@ -111,7 +110,7 @@ const Configurator = () => { alignItems="center" mt={3} > - {title} + {title} ); @@ -128,9 +127,8 @@ const Configurator = () => { alignItems="baseline" pt={4} pb={0.5} - // px={3} > - Search Settings + Search Settings { theme; const { variant, - bgColor = 'default', // default value - color = 'text', // default value - opacity = 1, // default value - borderRadius = 'sm', // default value - shadow = 'none', // default value + bgColor, + color, + opacity, + borderRadius, + shadow, coloredShadow, } = ownerstate; const { gradients, grey, white } = palette; diff --git a/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx b/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx index 6cdfd6c..edbbb6a 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx @@ -1,21 +1,17 @@ -import { forwardRef } from 'react'; - -// prop-types is a library for typechecking of props import PropTypes from 'prop-types'; +import MDBoxRoot from './MDBoxRoot'; +import React from 'react'; -// Custom styles for MDBox -import MDBoxRoot from './MdBoxRoot'; - -const MDBox = forwardRef( +const MDBox = React.forwardRef( ( { - variant, - bgColor, - color, - opacity, - borderRadius, - shadow, - coloredShadow, + variant = 'contained', + bgColor = 'default', + color = 'text', + opacity = 1, + borderRadius = 'md', + shadow = 'none', + coloredShadow = 'none', ...rest }, ref @@ -38,17 +34,6 @@ const MDBox = forwardRef( MDBox.displayName = 'MDBox'; -// Setting default values for the props of MDBox -MDBox.defaultProps = { - variant: 'contained', - bgColor: 'transparent', - color: 'dark', - opacity: 1, - borderRadius: 'none', - shadow: 'none', - coloredShadow: 'none', -}; - // Typechecking props for the MDBox MDBox.propTypes = { variant: PropTypes.oneOf(['contained', 'gradient']), diff --git a/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx index f988006..ed8314f 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx @@ -1,6 +1,6 @@ import { Badge } from '@mui/material'; import styled from 'styled-components'; -import { useMode } from 'context/useMode'; +import { useMode } from 'context/state/useMode'; export default styled(Badge)(({ ownerState }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesGradient.jsx b/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesGradient.jsx index dd210cb..4d8599d 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesGradient.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesGradient.jsx @@ -2,7 +2,7 @@ import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import RCBadge from '..'; -import { MDBox } from '../../MDBOX/index'; +import { MDBox } from 'MDBOX/index'; function BadgesGradient() { return ( diff --git a/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimple.jsx b/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimple.jsx index bdb078c..45c855d 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimple.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimple.jsx @@ -2,7 +2,7 @@ import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import RCBadge from '..'; -import { MDBox } from '../../MDBOX/index'; +import { MDBox } from 'MDBOX/index'; function BadgesSimple() { return ( diff --git a/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimpleRounded.jsx b/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimpleRounded.jsx index 637c38d..0553ffe 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimpleRounded.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBADGE/examples/BadgesSimpleRounded.jsx @@ -2,7 +2,7 @@ import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import RCBadge from '..'; -import { MDBox } from '../../MDBOX/index'; +import { MDBox } from 'MDBOX/index'; function BadgesSimpleRounded() { return ( diff --git a/src/layout/REUSABLE_COMPONENTS/RCBADGE/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCBADGE/index.jsx index 1b19ee5..80894bd 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBADGE/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBADGE/index.jsx @@ -1,18 +1,19 @@ -import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import RCBadgeRoot from './RCBadgeRoot'; +import React from 'react'; -const RCBadge = forwardRef( +const RCBadge = React.forwardRef( ( { - color, - variant, - size, - circular, - indicator, - border, - container, - children, + color = 'info', + variant = 'gradient', + size = 'sm', + circular = false, + indicator = false, + border = false, + container = false, + children = false, + ...rest }, ref @@ -38,16 +39,7 @@ const RCBadge = forwardRef( ); RCBadge.displayName = 'RCBadge'; -RCBadge.defaultProps = { - color: 'info', - variant: 'gradient', - size: 'sm', - circular: false, - indicator: false, - border: false, - children: false, - container: false, -}; + RCBadge.propTypes = { color: PropTypes.oneOf([ 'white', diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx index 7218c88..9dcc4db 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx @@ -205,7 +205,7 @@ export default styled(Button)(({ ownerState }) => { }; }; const circularStyles = () => ({ - borderRadius: borderRadius.section, + borderRadius: borderRadius.xl, }); const iconOnlyStyles = () => { let sizeValue = pxToRem(38); @@ -214,8 +214,6 @@ export default styled(Button)(({ ownerState }) => { } else if (size === 'large') { sizeValue = pxToRem(52); } - - // padding value let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; if (size === 'small') { @@ -243,7 +241,7 @@ export default styled(Button)(({ ownerState }) => { const holoStyles = () => { const backgroundValue = palette[color] ? palette[color].main - : greenAccent.light; + : success.main_light; const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; @@ -252,22 +250,7 @@ export default styled(Button)(({ ownerState }) => { : 'rgba(0, 0, 0, 0.075)'; const boxShadowValue = `0 0 0 4px ${rgba(palette[color].secondary || 'white', 0.4)}`; const hoveredBoxShadowValue = `0 0 0 4px ${rgba(palette[color].secondary || 'white', 0.15)}`; - // const boxShadowValue = colored[color] - // ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( - // [0, 3], - // [1, -2], - // palette[color].main, - // 0.2 - // )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` - // : 'none'; - // const hoveredBoxShadowValue = colored[color] - // ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( - // [0, 4], - // [23, 0], - // palette[color].main, - // 0.15 - // )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` - // : 'none'; + let colorValue = white.main; if (color === 'default' || !palette[color]) { colorValue = text.main; @@ -306,7 +289,7 @@ export default styled(Button)(({ ownerState }) => { alignItems: 'center', justifyContent: 'center', width: '100%', - borderRadius: theme.borderRadius, + borderRadius: borderRadius.md, transitionProperty: 'color, background, box-shadow', transitionDuration: '0.35s', // fontSize: pxToRem(14), @@ -335,83 +318,6 @@ export default styled(Button)(({ ownerState }) => { }; }; - // const baseStyle = { - // // position: 'relative', - // // display: 'flex', - // // alignItems: 'center', - // // justifyContent: 'center', - // // width: '100%', - // // minWidth: calculateStyles(size).width, - // // padding: calculateStyles(size).padding, - // // minWidth: customSize === 'md' ? 100 : customSize === 'sm' ? 75 : 140, - // // padding: `1.035rem ${theme.lenMd1}`, - // // borderRadius: theme.borderRadius, - // // fontSize: calculateStyles(size).fontSize, - // // transitionProperty: 'color, background, box-shadow', - // // transitionDuration: '0.35s', - // // background: !color ? greenAccent.light : palette[color].main, - // // color: !customTextColor ? grey.blueGrey : 'white', - // // boxShadow: isDefault - // // ? `0 0 0 4px ${rgba(theme.colorDefaultBackground || 'white', 0.74)}` - // // : 'none', - // // ...(isPrimary && { - // // background: theme.colorPrimary, - // // color: theme.colorPrimaryText, - // // boxShadow: `0 0 0 4px ${rgba(theme.colorPrimary || 'white', 0.4)}`, - // // }), - // // ...(isError && { - // // background: themeSettings.palette.error.main, - // // color: theme.colorPrimaryText, - // // boxShadow: `0 0 0 4px ${rgba(themeSettings.palette.error.main || 'white', 0.4)}`, - // // }), - // // ...(isAccent && { - // // background: theme.colorAccent, - // // color: theme.colorAccentText, - // // boxShadow: `0 0 0 4px ${rgba(theme.colorAccent || 'white', 0.4)}`, - // // }), - // // ...(isDisabled && { - // // background: theme.colorDisabledBackground, - // // color: theme.colorDisabledText, - // // cursor: 'not-allowed', - // // }), - // }; - // // const buttonHoverStyle = { - // // position: 'absolute', - // // zIndex: 1, - // // top: 0, - // // left: 0, - // // width: '100%', - // // height: '100%', - // // borderRadius: theme.borderRadius, - // // opacity: 0, - // // pointerEvents: 'none', - // // transition: 'opacity 0.35s', - // // background: customColor - // // ? rgba(customColor, 0.15) // Lighter shade of customColor if provided - // // : 'rgba(0, 0, 0, 0.075)', - - // // ...(isPrimary && { - // // background: rgba(theme.colorPrimary || 'white', 0.15), - // // }), - // // ...(isError && { - // // background: rgba(themeSettings.palette.error.main || 'white', 0.15), - // // }), - // // ...(isAccent && { - // // background: rgba(theme.colorAccent || 'white', 0.15), - // // }), - // // ...(isDisabled && { - // // background: rgba(theme.colorDisabledBackground || 'white', 0.15), - // // }), - // // }; - // // const buttonTextStyle = { - // // position: 'relative', - // // zIndex: 2, - // // }; - // // const getPrimaryStyle = (theme, isPrimary) => ({ - // // background: isPrimary ? theme.colorPrimary : undefined, - // // color: isPrimary ? theme.colorPrimaryText : undefined, - // // }); - return { ...(variant === 'contained' && containedStyles()), ...(variant === 'outlined' && outlinedStyles()), @@ -420,10 +326,5 @@ export default styled(Button)(({ ownerState }) => { ...(circular && circularStyles()), ...(iconOnly && iconOnlyStyles()), ...(variant === 'holo' && holoStyles()), - // ...(variant === 'accent' && accentStyles(theme, true)), - // ...(variant === 'default' && defaultStyles(theme, true)), - // ...(variant === 'disabled' && disabledStyles(theme, true)), - // ...(variant === 'error' && errorStyles(theme, true)), - // ...(variant === 'success' && successStyles(theme, true)), }; }); diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonGradient.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonGradient.jsx index 54d0aae..ced5682 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonGradient.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonGradient.jsx @@ -1,7 +1,7 @@ import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; -import { MDBox } from '../../MDBOX/index'; +import { MDBox } from 'MDBOX/index'; import RCButton from '..'; function ButtonsGradient() { diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconLeft.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconLeft.jsx index ef244c5..1818cb8 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconLeft.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconLeft.jsx @@ -2,7 +2,7 @@ import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Icon from '@mui/material/Icon'; -import { MDBox } from '../../MDBOX/index'; +import { MDBox } from 'MDBOX/index'; import RCButton from '..'; function ButtonsIconLeft() { diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconRight.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconRight.jsx index 249eb51..d6b34af 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconRight.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/examples/ButtonIconRight.jsx @@ -2,7 +2,7 @@ import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Icon from '@mui/material/Icon'; -import { MDBox } from '../../MDBOX/index'; +import { MDBox } from 'MDBOX/index'; import RCButton from '..'; function ButtonsIconRight() { return ( diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx index 2a6543f..7a940c4 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx @@ -1,7 +1,7 @@ -import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import RCButtonRoot from './RCButtonRoot'; import { Box } from '@mui/material'; +import React from 'react'; // Wrapper component for when you need a container around the button const ButtonContainer = ({ children, withContainer }) => ( ( {children} ); -const RCButton = forwardRef( +const RCButton = React.forwardRef( ( { color = 'white', @@ -25,14 +25,6 @@ const RCButton = forwardRef( iconOnly = false, children, withContainer = false, // Default value for withContainer prop - // isPrimary, - // isAccent, - // isDefault, - // isDisabled, - // isError, - // customColor, - // customTextColor, - // customSize, ...rest }, ref diff --git a/src/layout/REUSABLE_COMPONENTS/RCCARD/RCCardRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCCARD/RCCardRoot.jsx new file mode 100644 index 0000000..b4973e7 --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/RCCARD/RCCardRoot.jsx @@ -0,0 +1,104 @@ +import { Badge, Card } from '@mui/material'; +import { useMode } from 'context'; +import styled from 'styled-components'; + +export default styled(Card)(({ ownerState }) => { + const { theme } = useMode(); + const { palette, typography, borders, functions } = theme; + const { + title, + hasTitle, + content, + icon, + value, + size, + bgColor, + color, + variant, + shadow, + border, + noBottomMargin, + sx, + children, + } = ownerState; + + const { white, dark, success, primary, secondary, error, text } = palette; + const { size: fontSize, fontWeightBold } = typography; + const { borderRadius, borderWidth } = borders; + const { pxToRem, linearGradient } = functions; + + const getPrimaryStyle = () => ({ + background: success.main, + color: success.hoverContrastText, + }); + + const getAccentStyle = () => ({ + background: success.tertiary, + color: success.hoverContrastText, + }); + + const getTableOrChartStyle = () => ({ + background: white.main, + color: success.main, + }); + + const getChartStyle = () => ({ + background: '#e0e0e0', + }); + + const getFormHeaderStyle = () => ({ + background: white.main, + color: success.main, + maxWidth: 'md', + padding: theme.spacing(6), // Updated to use theme's spacing method if available + borderRadius: '24px', + boxShadow: '0px 3px 10px 0px rgba(0, 0, 0, 0.2)', // Custom shadow with blur + margin: 'auto', + width: '80%', + }); + + const getSelectorStyles = () => ({ + background: dark.state, + padding: theme.spacing(3), // Updated to use theme's spacing method if available + borderRadius: '24px', + boxShadow: '0px 3px 10px 0px rgba(0, 0, 0, 0.2)', // Custom shadow with blur + mb: theme.spacing(3), + mt: theme.spacing(5), + pt: theme.spacing(5), + mx: 'auto', + px: 'auto', + justifyContent: 'center', + }); + + const getSearchFormHeaderStyle = () => ({ + background: white.main, + color: success.main, + maxWidth: 'lg', + borderRadius: '24px', + boxShadow: '0px 3px 10px 0px rgba(0, 0, 0, 0.2)', // Custom shadow with blur + margin: 'auto', + marginTop: '1rem', + width: '98%', + }); + + const styles = { + ...sx, + width: '100%', + padding: hasTitle ? 0 : theme.spacing(4), + marginBottom: noBottomMargin ? 0 : theme.spacing(4), + borderRadius: theme.spacing(3), + background: white.main, + color: text.colorText, + }; + + return { + ...styles, + ...(variant === 'chart' && getChartStyle()), + ...(variant === 'selector' && getSelectorStyles()), + ...(variant === 'search' && getSearchFormHeaderStyle()), + ...(variant === 'form' && getFormHeaderStyle()), + ...(variant === 'table' && getTableOrChartStyle()), + ...(variant === 'primary' && getPrimaryStyle()), + ...(variant === 'accent' && getAccentStyle()), + }; +}); diff --git a/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx new file mode 100644 index 0000000..3299f6b --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx @@ -0,0 +1,165 @@ +import PropTypes from 'prop-types'; +import { + Card, + CardContent, + CardHeader, + Divider, + Typography, +} from '@mui/material'; +import { useMode } from 'context'; +import React from 'react'; +import RCCardRoot from './RCCardRoot'; +import RCTypography from '../RCTYPOGRAPHY'; +const headerSX = { + '& .MuiCardHeader-action': { mr: 0 }, +}; + +// ==============================|| CUSTOM CARD ||============================== // +const CardTitle = ({ theme, children, variant }) => ( +
+ + {children} + +
+); +const RCCard = React.forwardRef( + ( + { + title = '', + content = '', + icon = '', + value = '', + + size = 'md', + bgColor = '', + color = '', + + variant = 'default', + shadow = true, + border = true, + noBottomMargin = true, + hasTitle = false, + + heroText = '', + heroIcon = '', + + sx = {}, + children, + ...rest + }, + ref + ) => { + const { theme } = useMode(); + + return ( + + {hasTitle && ( + <> + + {title} + +
+ {children} +
+ + )} + {!hasTitle && children} + {/* {!content && children} */} + + ); + } +); +RCCard.displayName = 'RCCard'; + +RCCard.propTypes = { + // CONTENT + title: PropTypes.string, + content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + icon: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.object, + PropTypes.node, + ]), + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + + // STYLE PROPERTIES + size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), + bgColor: PropTypes.oneOf([ + 'primary', + 'secondary', + 'success', + 'error', + 'white', + 'dark', + ]), + color: PropTypes.oneOf([ + 'primary', + 'secondary', + 'success', + 'error', + 'white', + 'dark', + ]), + shadow: PropTypes.bool, + border: PropTypes.bool, + hasTitle: PropTypes.bool, + noBottomMargin: PropTypes.bool, + + variant: PropTypes.oneOf([ + 'chart', + 'form', + 'search', + 'table', + 'selector', + 'default', + 'primary', + 'accent', + ]), + sx: PropTypes.object, + + // secondary: PropTypes.oneOfType([ + // PropTypes.node, + // PropTypes.string, + // PropTypes.object, + // ]), + + // HERO PROPERTIES + children: PropTypes.node, +}; + +export default RCCard; diff --git a/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx new file mode 100644 index 0000000..e76d6cf --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx @@ -0,0 +1,230 @@ +import { Button } from '@mui/material'; +import styled from 'styled-components'; +import { useMode } from 'context'; + +export default styled(Button)(({ ownerState }) => { + const { theme } = useMode(); + const { palette, functions, borders, boxShadows } = theme; + const { color, variant, size, circular } = ownerState; + const { white, text, transparent, dark, greenAccent, grey, success, error } = + palette; + const { boxShadow, linearGradient, pxToRem, rgba } = functions; + const { borderRadius } = borders; + const { colored } = boxShadows; + const containedStyles = () => { + const backgroundValue = palette[color] ? palette[color].main : white.main; + const focusedBackgroundValue = palette[color] + ? palette[color].focus + : white.focus; + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : 'none'; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : 'none'; + + // color value + let colorValue = white.main; + + if (color === 'default' || !palette[color]) { + colorValue = text.main; + } else if (color === 'white' || color === 'light') { + colorValue = dark.main; + } + + // color value when button is focused + let focusedColorValue = white.main; + + if (color === 'default') { + focusedColorValue = text.main; + } else if (color === 'white') { + focusedColorValue = dark.main; + } else if (color === 'primary' || color === 'error' || color === 'dark') { + focusedColorValue = white.main; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + '&:hover': { + backgroundColor: backgroundValue, + boxShadow: hoveredBoxShadowValue, + }, + + '&:focus:not(:hover)': { + backgroundColor: focusedBackgroundValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + + '&:disabled': { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + const outlinedStyles = () => { + const backgroundValue = + color === 'white' ? rgba(white.main, 0.1) : transparent.main; + const colorValue = palette[color] ? palette[color].main : white.main; + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + + // border color value + let borderColorValue = palette[color] + ? palette[color].main + : rgba(white.main, 0.75); + + if (color === 'white') { + borderColorValue = rgba(white.main, 0.75); + } + + return { + background: backgroundValue, + color: colorValue, + borderColor: borderColorValue, + + '&:hover': { + background: transparent.main, + borderColor: colorValue, + }, + + '&:focus:not(:hover)': { + background: transparent.main, + boxShadow: boxShadowValue, + }, + + '&:active:not(:hover)': { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85, + }, + + '&:disabled': { + color: colorValue, + borderColor: colorValue, + }, + }; + }; + const textStyles = () => { + const colorValue = palette[color] ? palette[color].main : white.main; + const focusedColorValue = palette[color] + ? palette[color].focus + : white.focus; + + return { + color: colorValue, + + '&:hover': { + color: focusedColorValue, + }, + + '&:focus:not(:hover)': { + color: focusedColorValue, + }, + }; + }; + const circularStyles = () => ({ + borderRadius: borderRadius.section, + }); + const holoStyles = () => { + const backgroundValue = palette[color] + ? palette[color].main + : success.main_light; + const focusedBackgroundValue = palette[color] + ? palette[color].focus + : white.focus; + const hoveredBackgroundValue = palette[color] + ? rgba(palette[color].main, 0.15) + : 'rgba(0, 0, 0, 0.075)'; + const boxShadowValue = `0 0 0 4px ${rgba(palette[color].secondary || 'white', 0.4)}`; + const hoveredBoxShadowValue = `0 0 0 4px ${rgba(palette[color].secondary || 'white', 0.15)}`; + let colorValue = white.main; + if (color === 'default' || !palette[color]) { + colorValue = text.main; + } else if (color === 'white' || color === 'light') { + colorValue = dark.main; + } else if ( + color === 'primary' || + color === 'error' || + color === 'dark' || + color === 'success' + ) { + colorValue = white.main; + } + let focusedColorValue = white.main; + + if (color === 'default') { + focusedColorValue = text.main; + } else if (color === 'white') { + focusedColorValue = dark.main; + } else if ( + color === 'primary' || + color === 'error' || + color === 'dark' || + color === 'secondary' || + color === 'success' || + color === 'info' || + color === 'warning' || + color === 'greenAccent' + ) { + focusedColorValue = white.main; + } + + return { + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: theme.borderRadius, + transitionProperty: 'color, background, box-shadow', + transitionDuration: '0.35s', + background: `${backgroundValue} !important`, // Use !important to override any later conflicting styles + color: `${colorValue} !important`, // Use !important to override any later conflicting styles + boxShadow: boxShadowValue, + '&:hover': { + backgroundColor: backgroundValue, + boxShadow: hoveredBoxShadowValue, + }, + + '&:focus:not(:hover)': { + backgroundColor: focusedBackgroundValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + + '&:disabled': { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + + return { + ...(variant === 'contained' && containedStyles()), + ...(variant === 'outlined' && outlinedStyles()), + ...(variant === 'text' && textStyles()), + ...(circular && circularStyles()), + ...(variant === 'holo' && holoStyles()), + }; +}); diff --git a/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/index.jsx new file mode 100644 index 0000000..bd7dfab --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/index.jsx @@ -0,0 +1,112 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ +import PropTypes from 'prop-types'; +import { Box, CircularProgress } from '@mui/material'; +import React from 'react'; +import RCLoadingButtonRoot from './RCLoadingButtonRoot'; +// Wrapper component for when you need a container around the button +const ButtonContainer = ({ children, withContainer }) => ( + + {children} + +); + +const labelContent = (loading, icon, label) => + loading ? ( + + + {label} + + ) : ( + + {icon} + {label} + + ); + +const RCLoadingButton = React.forwardRef( + ( + { + loading = false, + fullWidth = false, + withContainer = false, // Default value for withContainer prop + circular = false, // Default value for circular prop + label = 'Loading', + icon = null, + onClick = () => {}, + style = {}, + sx = {}, + variant = 'contained', // Default value for variant prop + color = 'success', // Default value for color prop + children = null, // Default value for children prop + size = 'large', // Default value for size prop + ...rest + }, + ref + ) => { + const ButtonContent = ( + + // + // {label} + // + // ) : ( + // + // {icon} + // {label} + // + // ) + // } + > + {!children && labelContent(loading, icon, label)} + + ); + + if (withContainer) { + return ( + + {ButtonContent} + + ); + } + return ButtonContent; + } +); + +RCLoadingButton.displayName = 'RCButton'; +RCLoadingButton.propTypes = { + size: PropTypes.oneOf(['small', 'medium', 'large']), + variant: PropTypes.oneOf(['contained', 'holo', 'outline']), + color: PropTypes.oneOf([ + 'default', + 'white', + 'greenAccent', + 'secondary', + 'info', + 'success', + 'warning', + 'error', + 'light', + 'dark', + ]), + circular: PropTypes.bool, + iconOnly: PropTypes.bool, + withContainer: PropTypes.bool, // Add withContainer to the prop types + children: PropTypes.node, +}; + +export default RCLoadingButton; diff --git a/src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypographyRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY/RCTypographyRoot.jsx similarity index 100% rename from src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypographyRoot.jsx rename to src/layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY/RCTypographyRoot.jsx diff --git a/src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography.jsx b/src/layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY/index.jsx similarity index 59% rename from src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography.jsx rename to src/layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY/index.jsx index a34c529..a8e590d 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY/index.jsx @@ -1,23 +1,23 @@ -import { forwardRef } from 'react'; import PropTypes from 'prop-types'; -import MDTypographyRoot from './MDTypographyRoot'; +import RCTypographyRoot from './RCTypographyRoot'; +import React from 'react'; -const MDTypography = forwardRef( +const RCTypography = React.forwardRef( ( { - color, - fontWeight, - textTransform, - verticalAlign, - textGradient, - opacity, + color = 'primary', + fontWeight = false, + textTransform = 'none', + verticalAlign = 'unset', + textGradient = false, + opacity = 1, children, ...rest }, ref ) => { return ( - {children} - + ); } ); -MDTypography.displayName = 'MDTypography'; +RCTypography.displayName = 'RCTypography'; -// Setting default values for the props of MDTypography -MDTypography.defaultProps = { - // color: 'dark', - // color: 'white', - color: 'primary', - fontWeight: false, - textTransform: 'none', - verticalAlign: 'unset', - textGradient: false, - opacity: 1, -}; - -// Typechecking props for the MDTypography -MDTypography.propTypes = { +// Typechecking props for the RCTypography +RCTypography.propTypes = { color: PropTypes.oneOf([ 'inherit', 'primary', @@ -87,4 +75,4 @@ MDTypography.propTypes = { opacity: PropTypes.number, }; -export default MDTypography; +export default RCTypography; diff --git a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx index 9b46684..50dade0 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx @@ -16,9 +16,7 @@ export default styled(Box)(({ color }) => { justifyContent: 'center', color: color, background: - color === 'success' - ? theme.palette.chartTheme.greenAccent.light - : 'black', + color === 'success' ? theme.palette.success.main_light : 'black', // [theme.breakpoints.down('md')]: { // width: 30, // height: 30, diff --git a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/index.jsx index 8f7fde5..efdfab3 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/index.jsx @@ -1,4 +1,4 @@ -import { forwardRef } from 'react'; +import React from 'react'; import RCWrappedIconRoot from './RCWrappedIconRoot'; import { useMode } from 'context'; import MDBox from '../MDBOX'; @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; // ==============================|| WRAPPED ICON ||============================== // -const RCWrappedIcon = forwardRef( +const RCWrappedIcon = React.forwardRef( ( { color = 'black', size = '3rem', children, background = 'white', ...rest }, ref diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx index 3e696d9..a2018a2 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx @@ -1,10 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Box, Typography } from '@mui/material'; -import ProgressCircle from '../system-utils/ProgressCircle'; import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'; import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import MDTypography from '../MDTYPOGRAPHY/MDTypography'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import MDBox from '../MDBOX'; import { useMode } from 'context'; @@ -13,7 +12,7 @@ const useStyles = (theme) => ({ width: '25%%', p: '20px', // my: '20px', - // background: theme.palette.chartTheme.grey.dark, + // background: theme.palette.grey.dark, borderRadius: theme.spacing(4), }, flexBox: { @@ -24,11 +23,11 @@ const useStyles = (theme) => ({ variant: 'h4', fontWeight: 'bold', // fontFamily: 'Poppins', - color: theme.palette.chartTheme.grey.default, + color: theme.palette.grey.default, }, rangeText: { variant: 'h3', - color: theme.palette.chartTheme.greenAccent.default, + color: theme.palette.success.dark, mt: '2px', fontWeight: 'bold', }, @@ -43,7 +42,7 @@ const RCChange = ({ progress, increase, change, rangeLevel }) => { Change - { > {increase ? : } {`${change}%`} - + - {/* - - */} {`In ${rangeLevel}`} diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx index 03844d7..7ab4531 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx @@ -1,10 +1,10 @@ import { Typography, Box } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; const RCHeader = ({ title, subtitle }) => { const { theme } = useMode(); - const grey = theme.palette.chartTheme.grey.default; - const greenAccent = theme.palette.chartTheme.greenAccent.default; + const grey = theme.palette.grey.default; + const greenAccent = theme.palette.success.dark; return ( { const { theme } = useMode(); const { isMobile } = useBreakpoint(); - // const isMobileView = useMediaQuery(theme.breakpoints.down('sm')); return ( @@ -31,19 +30,19 @@ const RCInfoItem = ({ > {label !== undefined && value !== undefined ? ( <> - {`${label}:`} - - + {value} - + ) : ( <> diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx index 707bab3..3462de8 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { ButtonBase, Typography, Avatar } from '@mui/material'; import { Link, useNavigate } from 'react-router-dom'; -import DeckBuilderIcon from '../icons/DeckBuilderIcon'; // Import DeckBuilderIcon -import { ROUTE_CONFIG } from 'data/route-config'; +import DeckBuilderIcon from '../../../data/DeckBuilderIcon'; // Import DeckBuilderIcon +import { ROUTE_CONFIG } from 'data'; // ==============================|| MAIN LOGO ||============================== // diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCMainCard.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCMainCard.jsx index 07e7101..7e457bd 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCMainCard.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCMainCard.jsx @@ -1,4 +1,3 @@ -import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { Card, @@ -7,14 +6,15 @@ import { Divider, Typography, } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; +import React from 'react'; const headerSX = { '& .MuiCardHeader-action': { mr: 0 }, }; // ==============================|| CUSTOM MAIN CARD ||============================== // -const RCMainCard = forwardRef( +const RCMainCard = React.forwardRef( ( { border = true, diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCToolTip.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCToolTip.jsx index bd326df..345655a 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCToolTip.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCToolTip.jsx @@ -1,4 +1,3 @@ -import React, { useState, forwardRef } from 'react'; import Popper from '@mui/material/Popper'; import { useFloating, @@ -7,63 +6,58 @@ import { shift, autoUpdate, } from '@floating-ui/react'; +import React, { useState } from 'react'; -// Correctly apply forwardRef. It now accepts props and ref as arguments. -const RCToolTip = forwardRef(({ tooltipContent, children, ...props }, ref) => { - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); - const id = open ? 'simple-popper' : undefined; +const RCToolTip = React.forwardRef( + ({ tooltipContent, children, ...props }, ref) => { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const id = open ? 'simple-popper' : undefined; + const { x, y, strategy, refs, update } = useFloating({ + open, + onOpenChange: (isOpen) => setAnchorEl(isOpen ? anchorEl : null), + placement: 'top', + middleware: [offset(10), flip(), shift({ padding: 8 })], + whileElementsMounted: autoUpdate, + }); + const handleMouseEnter = (event) => { + setAnchorEl(event.currentTarget); + update(); + }; + const handleMouseLeave = () => { + setAnchorEl(null); + }; + const childWithHandlers = React.cloneElement(children, { + 'aria-describedby': id, + onMouseEnter: handleMouseEnter, + onMouseLeave: handleMouseLeave, + ref: refs.setReference, + ...props, // Spread additional props to the cloned child + }); - // Configure Floating UI - const { x, y, strategy, refs, update } = useFloating({ - open, - onOpenChange: (isOpen) => setAnchorEl(isOpen ? anchorEl : null), - placement: 'top', - middleware: [offset(10), flip(), shift({ padding: 8 })], - whileElementsMounted: autoUpdate, - }); - - // Handle mouse enter and leave events to control the tooltip visibility - const handleMouseEnter = (event) => { - setAnchorEl(event.currentTarget); - update(); - }; - - const handleMouseLeave = () => { - setAnchorEl(null); - }; - - // Clone the child element to attach event handlers for controlling tooltip visibility - const childWithHandlers = React.cloneElement(children, { - 'aria-describedby': id, - onMouseEnter: handleMouseEnter, - onMouseLeave: handleMouseLeave, - ref: refs.setReference, - ...props, // Spread additional props to the cloned child - }); - - return ( - <> - {childWithHandlers} - -
{tooltipContent}
- - - ); -}); + return ( + <> + {childWithHandlers} + +
{tooltipContent}
+ + + ); + } +); RCToolTip.displayName = 'RCToolTip'; diff --git a/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx b/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx deleted file mode 100644 index d4dcecd..0000000 --- a/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { LoadingButton } from '@mui/lab'; -import AdjustSharpIcon from '@mui/icons-material/AdjustSharp'; -import { useMode } from '../../context'; - -const ReusableLoadingButton = ({ - loading, - label, - icon, - onClick, - style, - fullWidth, - sx, - variant, -}) => { - const { theme } = useMode(); - - const getButtonStyles = (variant) => { - if (variant === 'warning') { - return { - background: theme.palette.error.main, - borderColor: theme.palette.error.darkest, - borderWidth: 5, - - '&:hover': { - fontWeight: 'bold', - background: theme.palette.error.light, - borderColor: theme.palette.error.dark, - }, - '&:focus': { - outline: `2px solid ${theme.palette.error.dark}`, - outlineOffset: 2, - }, - }; - } - return { - background: theme.palette.greenAccent.emerald, - borderColor: theme.palette.greenAccent.emerald, - borderWidth: 2, - '&:hover': { background: theme.palette.greenAccent.lightSeaGreen }, - '&:focus': { background: theme.palette.greenAccent.lightSeaGreen }, - }; - }; - - return ( - } - fullWidth={fullWidth} - onClick={onClick} - sx={{ - ...sx, - ...getButtonStyles(variant), - }} - > - {label} - - ); -}; - -export default ReusableLoadingButton; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/CartIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/CartIcon.jsx deleted file mode 100644 index 3e38da2..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/CartIcon.jsx +++ /dev/null @@ -1,30 +0,0 @@ -//! src/components/CartIcon.js -import React from 'react'; -import styled from 'styled-components'; - -const IconWrapper = styled.div` - position: fixed; - bottom: 2rem; - right: 2rem; - background-color: #333; - color: #fff; - width: 40px; - height: 40px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -`; - -const CartIcon = () => { - return ( - - - 🛒 - - - ); -}; - -export default CartIcon; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/ChartsIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/ChartsIcon.jsx deleted file mode 100644 index eb3ff70..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/ChartsIcon.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import StackedLineChartIcon from '@mui/icons-material/StackedLineChart'; -import { IconButton } from '@mui/material'; - -const ChartsIcon = () => { - return ( - - - - ); -}; - -export default ChartsIcon; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/CollectionIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/CollectionIcon.jsx deleted file mode 100644 index 8418401..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/CollectionIcon.jsx +++ /dev/null @@ -1,30 +0,0 @@ -// src/components/CollectionIcon.js -import React from 'react'; -import styled from 'styled-components'; - -const IconWrapper = styled.div` - position: fixed; - bottom: 2rem; - right: 2rem; - background-color: #333; - color: #fff; - width: 40px; - height: 40px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -`; - -const CollectionIcon = () => { - return ( - - - 🗃️ - - - ); -}; - -export default CollectionIcon; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx deleted file mode 100644 index 52285d1..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import ReusableIconButton from './ReusableIconButton'; -import deckIcon from 'assets/icons/deckIcon2.png'; - -const DeckOfCardsIcon = (color) => { - return ( - console.log('Deck icon clicked')} - color={color || 'rgba(0, 0, 0, 0.54)'} - backgroundColor={color || 'rgba(0, 0, 0, 0.54)'} - // color={'rgba(0, 0, 0, 0.54)'} - // size={48} - // width={40} - // height={40} - // hoverColor="rgba(0, 0, 0, 0.1)" - // background-color={'#333'} - /> - ); -}; - -export default DeckOfCardsIcon; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/GlassyIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/GlassyIcon.jsx deleted file mode 100644 index dd1dbcd..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/GlassyIcon.jsx +++ /dev/null @@ -1,92 +0,0 @@ -// import React from 'react'; -// import { Box, Icon } from '@mui/material'; -// import StarIcon from '@mui/icons-material/Star'; // You can choose any icon -// const GlassyIcon = ({ -// icon: StarIcon, -// iconColor = '#FFFFFF', -// gradientStartColor, -// gradientEndColor, -// size = 100, -// blurAmount = 75, -// }) => { -// return ( -// -// -// -// -// -// -// -// -// -// -// -// -// ); -// }; - -// export default GlassyIcon; -import React from 'react'; -import { Box } from '@mui/material'; - -const GlassyIcon = ({ Icon, iconColor = '#FFFFFF', size = 40 }) => { - return ( - - {Icon && Icon} - {/* Render the Icon */} - - ); -}; - -export default GlassyIcon; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/MoneyIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/MoneyIcon.jsx deleted file mode 100644 index b8b6db2..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/MoneyIcon.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import AttachMoneyIcon from '@mui/icons-material/AttachMoney'; -import { IconButton } from '@mui/material'; - -const MoneyIcon = () => { - return ( - - - - ); -}; - -export default MoneyIcon; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/ReusableIconButton.jsx b/src/layout/REUSABLE_COMPONENTS/icons/ReusableIconButton.jsx deleted file mode 100644 index 26fb162..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/ReusableIconButton.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { IconButton } from '@mui/material'; - -const ReusableIconButton = ({ icon, altText, onClick, size, hoverColor }) => { - const defaultSize = size || 48; // Default size if not provided - const defaultHoverColor = hoverColor || 'rgba(0, 0, 0, 0.04)'; // Default hover color - - return ( - - {altText} - - ); -}; - -export default ReusableIconButton; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/TestingIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/TestingIcon.jsx deleted file mode 100644 index fd4b89c..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/TestingIcon.jsx +++ /dev/null @@ -1,30 +0,0 @@ -//! src/components/TestingIcon.js -import React from 'react'; -import styled from 'styled-components'; - -const IconWrapper = styled.div` - position: fixed; - bottom: 2rem; - right: 2rem; - background-color: #333; - color: #fff; - width: 40px; - height: 40px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -`; - -const TestingIcon = () => { - return ( - - - 🧪 - - - ); -}; - -export default TestingIcon; diff --git a/src/layout/REUSABLE_COMPONENTS/icons/index.jsx b/src/layout/REUSABLE_COMPONENTS/icons/index.jsx deleted file mode 100644 index 00c366a..0000000 --- a/src/layout/REUSABLE_COMPONENTS/icons/index.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import IconButton from '@mui/material/IconButton'; // Import IconButton from Material-UI -import HomeIcon from '@mui/icons-material/Home'; -import CollectionsIcon from '@mui/icons-material/Collections'; -import StoreIcon from '@mui/icons-material/Store'; -import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket'; -import PersonIcon from '@mui/icons-material/Person'; -import DeckBuilderIcon from './DeckBuilderIcon'; // Ensure this is correctly imported - -export const rawIcons = { - Home: , - DeckBuilder: , - CollectionPortfolio: , - Store: , - Cart: , - Profile: , -}; - -const iconsWithButton = (iconName) => { - // Ensure that iconName exists in rawIcons to avoid undefined errors - const IconComponent = rawIcons[iconName]; - if (!IconComponent) { - console.error(`Icon ${iconName} not found.`); - return null; - } - - // Return the IconButton with the IconComponent - return ( - - {IconComponent} - - ); -}; - -export const getContextIcon = (labelValue) => { - switch (labelValue) { - case 'Deck': - return iconsWithButton('DeckBuilder'); - case 'Collection': - return iconsWithButton('CollectionPortfolio'); - case 'Store': - return iconsWithButton('Store'); - case 'Cart': - return iconsWithButton('Cart'); - case 'Profile': - return iconsWithButton('Profile'); - - // Add more cases as needed for different contexts - default: - return null; // Or a default icon - } -}; - -export default iconsWithButton; diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx index 97d5efe..23b03ea 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx @@ -12,6 +12,7 @@ const BoxHeader = ({ sx, useSX, titleVariant, + subtitleVariant, colorVariant, paddingVariant, }) => { @@ -37,17 +38,15 @@ const BoxHeader = ({ mb="-0.1rem" ml="0.5rem" p="0.5rem" - color={ - useSX ? colorVariant : theme.palette.greenAccent.pureGreenBlue - } + color={useSX ? colorVariant : theme.palette.text.main} > {title} {subtitle !== 'none' && ( {subtitle} @@ -59,7 +58,7 @@ const BoxHeader = ({ theme={theme} variant="h5" fontWeight="700" - color={theme.palette.greenAccent.pureGreenBlue} + color={theme.palette.success.secondary} sx={useSX ? sx : {}} > {sideText} diff --git a/src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx similarity index 64% rename from src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx rename to src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx index 61e20ca..cade3cd 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx @@ -8,34 +8,34 @@ const StyledCard = styled(Card)` display: flex; align-items: center; justify-content: space-between; - padding: ${({ theme }) => `${theme.lenMd1} ${theme.lenMd3}`}; + padding: ${({ theme }) => `${theme.spacing(4)} ${theme.spacing(6)}`}; `; const TextContainer = styled(Box)` display: flex; flex-direction: column; justify-content: center; - margin-left: ${({ theme }) => theme.lenMd1}; + margin-left: ${({ theme }) => theme.spacing(4)}; text-align: left; flex: 1; `; // Pre-calculated colors passed as props const StyledLabel = styled(Typography)` - font-size: ${({ theme }) => theme.lenMd3}; - color: ${({ textColor }) => textColor}; + font-size: ${({ theme }) => theme.spacing(6)}; + color: ${({ color }) => color}; word-wrap: break-word; `; const StyledValue = styled(Typography)` - font-size: ${({ theme }) => theme.lenLg2}; - color: ${({ textColor }) => textColor}; + font-size: ${({ theme }) => theme.spacing(16)}; + color: ${({ color }) => color}; word-wrap: break-word; `; const StyledIcon = styled(Icon)` font-size: 3rem; - color: ${({ iconColor }) => iconColor}; + color: ${({ color }) => color}; `; const IconContainer = styled(Box)` @@ -46,7 +46,7 @@ const IconContainer = styled(Box)` height: 4rem; border-radius: 50%; background-color: ${({ backgroundColor }) => backgroundColor}; - color: ${({ theme }) => theme.colorPrimaryText}; + color: ${({ theme }) => theme.palette.text.colorPrimaryText}; `; const IconStatWrapper = ({ @@ -55,27 +55,34 @@ const IconStatWrapper = ({ icon = 'bars', isPrimary = false, }) => { - const { theme } = useMode(); - // Pre-calculate colors based on isPrimary - const labelColor = isPrimary ? theme.colorForDark2 : theme.colorLabel; - const valueColor = isPrimary ? theme.colorForDark1 : theme.colorText; - const iconColor = isPrimary ? theme.colorPrimary : theme.colorPrimaryText; - const backgroundColor = isPrimary ? theme.colorPrimary : 'transparent'; + const { theme } = useMode(); + const labelColor = isPrimary + ? theme.palette.text.colorText + : theme.palette.text.colorLabel; + const valueColor = isPrimary + ? theme.palette.text.colorText + : theme.palette.text.colorText; + const iconColor = isPrimary + ? theme.palette.text.colorText + : theme.palette.text.colorPrimaryText; + const backgroundColor = isPrimary + ? theme.palette.success.main + : 'transparent'; return ( - + {icon} - + {label} - + {value} diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx index 8c74e68..7ad6d4b 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx @@ -1,15 +1,13 @@ import React from 'react'; import styled from 'styled-components'; import { Box } from '@mui/material'; -import { useMode } from 'context'; -import SimpleCard from '../unique/SimpleCard'; -import SimpleSectionHeader from '../unique/SimpleSectionHeader'; -import uniqueTheme from '../unique/uniqueTheme'; +import SimpleSectionHeader from './SimpleSectionHeader'; import { PageHeaderSkeleton } from '../system-utils/SkeletonVariants'; import RCButton from '../RCBUTTON'; -import useUserData from 'context/useUserData'; -import { useFormManagement } from 'components/forms/hooks/useFormManagement'; +import useUserData from 'context/state/useUserData'; +import { useFormManagement } from 'context/formHooks/useFormManagement'; import { Tooltip } from '@mui/joy'; +import RCCard from '../RCCARD'; const FlexContainer = styled(Box)(({ theme }) => ({ display: 'flex', @@ -42,11 +40,9 @@ const PageHeader = ({ } return ( - - + ); }; diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx index 583c7ec..f6e1497 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx @@ -14,11 +14,6 @@ function PageLayout({ background, backCol, children }) { height="100%" minHeight="100vh" maxWidth="100%" - // bgColor={ - // backCol - // ? 'linear-gradient(90deg, rgba(13, 93, 150, 0.3) 0%, rgba(160, 214, 186, 0.3) 100%)' - // : 'transparent' - // } sx={{ overflowX: 'hidden', m: 0, p: 0 }} // Ensure no margins or paddings > theme.spacing(1, 2)}; -`; +import useBreakpoint from 'context/hooks/useBreakPoint'; + const HeaderContainer = styled(Box)` flex: 1; max-width: 50%; @@ -25,63 +19,56 @@ const SimpleSectionHeader = ({ type, }) => { const { theme } = useMode(); - const lgDown = useMediaQuery(theme.breakpoints.down('lg')); - const isMobileView = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile, isLg } = useBreakpoint(); return ( - + {sectionName} - - + {`${userName}'s ` + `${type}`} - + {/* Section Description */} diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx index b87956a..ad219c8 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx @@ -1,15 +1,12 @@ import { Box, Card, CardContent, Typography, useTheme } from '@mui/material'; -import ProgressCircle from '../system-utils/ProgressCircle'; import { useMode } from 'context'; import MDBox from '../MDBOX'; const StatBox = ({ title, subtitle, icon, progress, increase, wrapIcon }) => { const { theme } = useMode(); - const colors = theme.palette.chartTheme; - const primary = colors.primary.default; - const blue = colors.blueAccent.default; - const green = colors.greenAccent.default; - const greenliht = colors.greenAccent.light; + const colors = theme.palette; + const green = colors.success.dark; + const greenliht = colors.success.main_light; const grey = colors.grey.default; return ( { sx={{ width: '100%', p: '20px', - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, border: 'none', maxHeight: '135px', }} @@ -62,13 +59,7 @@ const StatBox = ({ title, subtitle, icon, progress, increase, wrapIcon }) => { > {title} - {/* */} - {/* */} - {/* */} - {/* - - */} { - window.location.reload(); - }; - - render() { - if (this.state.hasError) { - // Custom error page - return ( -
-

Oops! Something went wrong.

-

Were sorry for the inconvenience. Here are a few options:

-
- - -
- {/* Additional navigation options can be added here */} -
- Details - {this.state.error && this.state.error?.toString()} -
- {this.state.errorInfo?.componentStack} -
-
- ); - } - - return this.props.children; - } -} - -export default ErrorBoundary; diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx index 36387aa..c6a6941 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx @@ -2,6 +2,8 @@ import React from 'react'; import { Typography, Button, Paper, Container, Box } from '@mui/material'; import RefreshIcon from '@mui/icons-material/Refresh'; import FileCopyIcon from '@mui/icons-material/FileCopy'; +import RCButton from '../RCBUTTON'; +import { useMode } from 'context'; class ErrorFallback extends React.Component { constructor(props) { @@ -9,16 +11,19 @@ class ErrorFallback extends React.Component { this.state = { hasCopied: false }; } - handleCopyErrorDetails = () => { - navigator.clipboard.writeText(this.props.error.stack).then( - () => this.setState({ hasCopied: true }), - () => this.setState({ hasCopied: false }) - ); + handleCopyErrorDetails = async () => { + try { + await navigator.clipboard.writeText(this.props.error.stack); + this.setState({ hasCopied: true }); + setTimeout(() => this.setState({ hasCopied: false }), 2000); // Reset copy status after 2 seconds + } catch (error) { + console.error('Failed to copy error details:', error); + } }; - render() { const { error, resetErrorBoundary } = this.props; const { hasCopied } = this.state; + const { theme } = this.props; return ( @@ -29,29 +34,58 @@ class ErrorFallback extends React.Component { An unexpected error has occurred. Our team has been notified. - - - {error.toString()} + + + Error: {error.name} + + + {error.message} + + + + + {error.stack} - - - + diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/FallbackContainer.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/FallbackContainer.jsx deleted file mode 100644 index 5bded9e..0000000 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/FallbackContainer.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { styled } from '@mui/system'; - -// Create a styled section for the fallback -const StyledFallback = styled('section')(({ theme }) => ({ - display: 'block', - border: '1px solid red', - padding: '1rem', - color: 'red', - borderRadius: '5px', - backgroundColor: 'white', -})); - -// Create a styled header within the fallback -const FallbackHeader = styled('header')({ - padding: '0', - margin: '0 0 1rem 0', // Added bottom margin for spacing -}); - -// Create a styled title within the fallback header -const FallbackTitle = styled('h3')({ - fontSize: '1.25rem', // Specify a font size for the title -}); - -// Create a styled div for the body of the fallback -const FallbackBody = styled('div')({ - fontSize: '1rem', // Adjust the font size for the body content -}); - -const FallbackContainer = ({ componentStack, error }) => ( - - - Oops! An error occured! - - -

- Error: {error.toString()} -

-

- Stacktrace: {componentStack} -

- - -); - -export default FallbackContainer; diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx index ac92c9a..68c0c0e 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx @@ -4,7 +4,6 @@ import useBreakpoint from 'context/hooks/useBreakPoint'; import { Box, CircularProgress } from '@mui/material'; const LoadingOverlay = () => { - const { theme } = useMode(); const { isMobile } = useBreakpoint(); const [isVisible, setIsVisible] = useState(true); diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx deleted file mode 100644 index 5b6f267..0000000 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx +++ /dev/null @@ -1,96 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; -import { Box, useTheme } from '@mui/material'; -import PropTypes from 'prop-types'; -import RCToolTip from '../RC_OTHER/RCToolTip'; -import { useMode } from 'context'; -import useSkeletonLoader from './useSkeletonLoader'; - -const ProgressCircleSkeleton = ({ size = 120 }) => { - const theme = useTheme(); - const { theme: modeTheme } = useMode(); - const { SkeletonLoader } = useSkeletonLoader(); - - return ( - - - - ); -}; - -// ProgressCircle now expects an array of collections instead of a single progress value. -const ProgressCircle = ({ collections, size = 120 }) => { - const { theme } = useMode(); - - if (!collections || collections.length === 1) { - return ; - } - - // Calculate the total value of all collections. - const totalValue = collections?.reduce( - (sum, { totalPrice }) => sum + totalPrice, - 0 - ); - - // Generate a conic-gradient background based on the collections' value distribution. - let cumulativePercentage = 0; - const background = collections - ?.reduce((gradient, collection) => { - const collectionPercentage = (collection?.totalPrice / totalValue) * 100; - const nextCumulativePercentage = - cumulativePercentage + collectionPercentage; - const color = theme.palette.chartTheme.blueAccent.default; // Color for each segment - gradient += `${color} ${cumulativePercentage}% ${nextCumulativePercentage}%,`; - cumulativePercentage = nextCumulativePercentage; - return gradient; - }, '') - .slice(0, -1); // Remove the trailing comma - - // Prepare tooltip content displaying the name and value of each collection. - const tooltipContent = collections - ?.map( - (collection) => - `${collection.name}: $${collection.totalPrice?.toFixed(2)} (${((collection.totalPrice / totalValue) * 100)?.toFixed(2)}%)` - ) - .join('\n'); - - return ( - - - - ); -}; - -ProgressCircle.propTypes = { - collections: PropTypes.arrayOf( - PropTypes.shape({ - name: PropTypes.string.isRequired, - totalPrice: PropTypes.number.isRequired, - }) - ).isRequired, - size: PropTypes.number, -}; - -export default ProgressCircle; diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx index d00d162..eb3d5e8 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx @@ -12,12 +12,12 @@ import { Typography, } from '@mui/material'; import useSkeletonLoader from './useSkeletonLoader'; -import MDBox from '../MDBOX'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import { useMode } from 'context'; import { AspectRatioBoxSkeleton, StyledSkeletonCard, -} from '../../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; const LoadingCardSkeleton = () => { return ( @@ -211,7 +211,7 @@ const SkeletonPieChart = ({ theme }) => ( width: '100%', minHeight: '270px', bgcolor: theme.palette.background.default, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, }} > diff --git a/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx b/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx deleted file mode 100644 index 49c7d79..0000000 --- a/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx +++ /dev/null @@ -1,289 +0,0 @@ -import React from 'react'; -import MDTypography from '../MDTYPOGRAPHY/MDTypography'; -import styled from 'styled-components'; -import { AspectRatio, CardContent, IconButton, Typography } from '@mui/joy'; -import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'; -import { useMode } from 'context'; -import { Icon, useMediaQuery } from '@mui/material'; -import MDBox from '../MDBOX'; -import SaveIcon from '@mui/icons-material/Save'; -import AddIcon from '@mui/icons-material/Add'; -import CollectionsIcon from '@mui/icons-material/Collections'; -import FlexBetween from '../layout-utils/FlexBetween'; - -const getPrimaryStyle = (theme, isPrimary) => ({ - background: isPrimary ? theme.colorPrimary : undefined, - color: isPrimary ? theme.colorPrimaryText : undefined, -}); - -const getAccentStyle = (theme, isAccent) => ({ - background: isAccent ? theme.colorAccent : undefined, - color: isAccent ? theme.colorAccentText : undefined, -}); - -const getTableOrChartStyle = (theme, isTableOrChart) => ({ - background: isTableOrChart ? theme.colorCardBackground : undefined, - color: isTableOrChart ? theme.colorPrimary : undefined, -}); - -const getFormHeaderStyle = (theme, isFormHeader) => ({ - background: isFormHeader ? theme.colorCardBackground : undefined, - color: isFormHeader ? theme.colorPrimary : undefined, - maxWidth: 'md', - padding: theme.lenMd3, // Updated to use theme's spacing method if available - borderRadius: '24px', - boxShadow: '0px 3px 10px 0px rgba(0, 0, 0, 0.2)', // Custom shadow with blur - margin: 'auto', - width: '80%', -}); - -const getSelectorStyles = (themeSettings, isSelectorRow) => ({ - background: isSelectorRow ? themeSettings.palette.dark.state : undefined, - // color: isSelectorRow ? themeSettings.colorPrimary : undefined, - // maxWidth: 'lg', - padding: themeSettings.spacing(3), // Updated to use theme's spacing method if available - borderRadius: '24px', - boxShadow: '0px 3px 10px 0px rgba(0, 0, 0, 0.2)', // Custom shadow with blur - mb: themeSettings.spacing(3), - mt: themeSettings.spacing(5), - pt: themeSettings.spacing(5), - mx: 'auto', - px: 'auto', - justifyContent: 'center', - // width: '80%', -}); - -const getSearchFormHeaderStyle = (theme, isSearchFormHeader) => ({ - background: isSearchFormHeader ? theme.colorCardBackground : undefined, - color: isSearchFormHeader ? theme.colorPrimary : undefined, - maxWidth: 'lg', - // padding: theme.lenMd3, // Updated to use theme's spacing method if available - borderRadius: '24px', - boxShadow: '0px 3px 10px 0px rgba(0, 0, 0, 0.2)', // Custom shadow with blur - margin: 'auto', - marginTop: '1rem', - // marginLeft: '5rem', - // marginRight: '5rem', - // marginTop: 'auto', - // marginBottom: 'auto', - width: '98%', -}); - -const getHeroDisplayStyles = (theme, isHeroDisplay) => ({ - background: 'transparent', - color: isHeroDisplay ? theme.colorPrimary : undefined, - root: { - minWidth: 275, - background: 'transparent', - backgroundImage: - 'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)', - backdropFilter: 'blur(40)px', - boxShadow: '10px 10px 10px rgba(30,30,30,.1)', - borderRadius: 10, - }, -}); - -// const CardContent = ({ theme, children }) => ( -//
{children}
-// ); - -const CardTitle = ({ theme, children, isTableOrChart }) => ( -
- - {children} - -
-); -const iconStyles = { - // Adjust icon size to be larger based on the parent size - fontSize: '8rem', // Example size, adjust as needed - color: '#000000', // Example color, adjust as needed - maxWidth: '100%', - maxHeight: '100%', -}; -const String2Icon = (icon) => { - switch (icon) { - case 'AddIcon': - return ; - case 'SaveIcon': - return ; - case 'CollectionsIcon': - return ; - default: - return null; - } -}; - -const SimpleCard = ({ - theme, - hasTitle, - isPrimary, - isAccent, - isSelectorRow, - isTableOrChart, - noBottomMargin, - children, - cardTitle, - data, - isChart, - isFormHeader, - isSearchFormHeader, - isHeroDisplay, - heroText, - heroIcon, - sx, - ...rest -}) => { - const { theme: themeSettings } = useMode(); - const isMobileView = useMediaQuery(themeSettings.breakpoints.down('sm')); - const cardStyle = { - // display: 'flex', - ...sx, - width: '100%', - padding: hasTitle ? 0 : theme.lenMd1, - marginBottom: noBottomMargin ? 0 : theme.lenMd1, - borderRadius: theme.borderRadius, - background: isChart ? '#e0e0e0' : theme.colorCardBackground, - color: theme.colorText, - ...(isSelectorRow && getSelectorStyles(themeSettings, true)), - ...(isHeroDisplay && getHeroDisplayStyles(theme, true)), - ...(isSearchFormHeader && getSearchFormHeaderStyle(theme, true)), - ...(isFormHeader && getFormHeaderStyle(theme, true)), - ...(isTableOrChart && getTableOrChartStyle(theme, true)), - ...(isPrimary && getPrimaryStyle(theme, true)), - ...(isAccent && getAccentStyle(theme, true)), - }; - - return ( -
- {cardTitle && ( - <> - - {cardTitle} - -
- {children} -
- - )} - {!cardTitle && children} - {isHeroDisplay && ( - - - - - {String2Icon(heroIcon)} - - - - - - - - - - - {heroText} {/* Display heroText */} - - - - )} -
- ); -}; - -export default SimpleCard; diff --git a/src/layout/REUSABLE_COMPONENTS/unique/uniqueTheme.jsx b/src/layout/REUSABLE_COMPONENTS/unique/uniqueTheme.jsx deleted file mode 100644 index ff101bc..0000000 --- a/src/layout/REUSABLE_COMPONENTS/unique/uniqueTheme.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import { rgba } from 'polished'; - -const colorTextForDark = rgba('white', 0.96); -const colorLabel = '#A4A3A6'; -const colorText = '#343239'; -const defaultColorTheme = { - id: 'whiteGreen', - borderRadius: '0.75rem', - colorBackground: '#f0f0f9', - colorNavbar: '#fff', - colorNavbarLabel: colorLabel, - colorNavbarLink: colorText, - colorText: colorText, - colorLabel: colorLabel, - colorBorder: '#f0f0f9', - colorPrimary: '#18b984', - - // colorPrimary: '#06D6A0', - colorPrimaryText: colorTextForDark, - colorAccent: '#5fe7bb', - colorAccentText: colorTextForDark, - colorCardBackground: '#ffffff', - colorDefaultBackground: '#e3e3e8', - colorDefaultText: '#73707C', - colorDisabledBackground: '#d5d5e3', - colorDisabledText: '#bebed0', - colorCode: '#100f10', - colorChartShading: '#696969', - boxShadowLogo: 'none', -}; -const uniqueTheme = { - ...defaultColorTheme, - // screenWidthXs: '480px', - // screenWidthSm: '576px', - // screenWidthMd: '768px', - // screenWidthLg: '992px', - gutterWidth: '0.5rem', - containerMaxWidthXs: '100%', - containerMaxWidthSm: '100%', - containerMaxWidthMd: '100%', - containerMaxWidthLg: '1080px', - containerMaxWidthXl: '1200px', - screenWidthXs: '576px', - screenWidthSm: '768px', - screenWidthMd: '992px', - screenWidthLg: '1200px', - screenWidthXl: '1920px', - sidebarWidth: '56px', - sidebarWidthMd: '220px', - colorForDark1: rgba('white', 0.96), - colorForDark2: rgba('white', 0.65), - colorForDark3: rgba('white', 0.45), - fontFamily: 'Poppins', - fontWeightBold: 600, - fontWeightSemibold: 500, - fontWeightRegular: 400, - heightCardMd: '360px', - heightChartMd: '150px', - lenSm1: '0.25rem', - lenSm2: '0.5rem', - lenSm3: '0.75rem', - lenMd1: '1rem', - lenMd2: '1.25rem', - lenMd3: '1.5rem', - lenLg1: '2rem', - lenLg2: '3rem', - lenLg3: '4rem', - lenXl1: '5rem', - lenXl2: '6rem', - lenXl3: '7rem', -}; - -export default uniqueTheme; diff --git a/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx b/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx index 77f724b..03b1f18 100644 --- a/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx +++ b/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx @@ -27,7 +27,7 @@ export const StyledContainerBoxPrimary = styled(Box)(({ theme }) => ({ minWidth: '100%', marginTop: theme.spacing(2), padding: theme.spacing(3), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, background: theme.palette.grey.simpleGrey, boxShadow: theme.shadows[10], marginBottom: theme.spacing(4), @@ -39,8 +39,8 @@ export const StyledContainerBoxSecondary = styled(Box)(({ theme }) => ({ flexDirection: 'column', marginTop: theme.spacing(2), padding: theme.spacing(3), - borderRadius: theme.shape.borderRadius, - background: theme.palette.greenAccent.lighterSeaGreen, + borderRadius: theme.borders.borderRadius.md, + background: theme.palette.success.main_lighterSeaGreen, boxShadow: theme.shadows[10], marginBottom: theme.spacing(4), transition: 'all 0.3s ease-in-out', // smooth all transitions @@ -51,10 +51,9 @@ export const StyledContainerBox = styled(Box)(({ theme }) => ({ flexDirection: 'column', marginTop: theme.spacing(2), padding: theme.spacing(3), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, background: 'linear-gradient(90deg, rgba(13, 93, 150, 0.3) 0%, rgba(160, 214, 186, 0.3) 100%)', - // background: theme.palette.greenAccent.crystalGreen, boxShadow: theme.shadows[10], marginBottom: theme.spacing(4), transition: 'all 0.3s ease-in-out', // smooth all transitions @@ -62,9 +61,9 @@ export const StyledContainerBox = styled(Box)(({ theme }) => ({ // COLOR PALETTE: #4cceac - transparent export const StyledPaperPrimary = styled(Paper)(({ theme }) => ({ padding: theme.spacing(2), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[4], - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, color: theme.palette.text.primary, display: 'flex', flexDirection: 'column', @@ -104,7 +103,7 @@ export const StyledDialog = styled(Dialog)(({ theme }) => ({ // mx: 'auto', // my: 'auto', '& .MuiDialog-paper': { - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, padding: theme.spacing(8), display: 'flex', width: '100%', @@ -142,7 +141,7 @@ export const DialogPaper = styled(Paper)(({ theme }) => ({ maxWidth: '100%', maxHeight: '100%', width: '100%', - // borderRadius: theme.shape.borderRadius, + // borderRadius: theme.borders.borderRadius.md, flexGrow: 1, margin: '20px auto', overflow: 'hidden', // Hide unwanted scrollbars @@ -156,8 +155,8 @@ export const DialogContentsBox = styled(Box)(({ theme }) => ({ height: '100%', width: '100%', // minWidth: '500px', - // borderRadius: theme.shape.borderRadius, - background: theme.palette.greenAccent.evenLighter, + // borderRadius: theme.borders.borderRadius.md, + background: theme.palette.success.main_lighter, boxShadow: theme.shadows[10], transition: 'all 0.3s ease-in-out', // smooth all transitions '@media (max-width:600px)': { @@ -171,7 +170,7 @@ export const StyledDialogContent = styled(DialogContent)(({ theme }) => ({ width: '100%', gap: theme.spacing(2), padding: theme.spacing(3), - // backgroundColor: theme.palette.greenAccent.contrastText, + // backgroundColor: theme.palette.success.contrastText, })); export const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ display: 'flex', @@ -180,7 +179,7 @@ export const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ width: '100%', gap: theme.spacing(2), padding: theme.spacing(3), - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, })); export const FormBox = styled(Box)(({ theme }) => ({ display: 'flex', @@ -207,7 +206,7 @@ export const FormPaper = styled(Paper)(({ theme }) => ({ flexGrow: 1, width: '100%', height: '100%', - background: theme.palette.greenAccent.evenLighter, + background: theme.palette.success.main_lighter, borderRadius: '16px', })); export const FormFieldBox = styled(Box)(({ theme }) => ({ @@ -228,18 +227,18 @@ export const StyledTextField = styled(TextField)(({ theme }) => ({ borderColor: theme.palette.transparent.main, }, '&:hover .MuiOutlinedInput-notchedOutline': { - color: theme.palette.greenAccent.default, - borderColor: theme.palette.greenAccent.default, + color: theme.palette.success.dark, + borderColor: theme.palette.success.dark, }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: theme.palette.greenAccent.default, + borderColor: theme.palette.success.dark, borderWidth: '2px', // or other width as you like }, }, - borderRadius: theme.shape.borderRadius, - color: theme.palette.greenAccent.dark, + borderRadius: theme.borders.borderRadius.md, + color: theme.palette.success.darkest, width: '100%', - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, boxShadow: `0px 2px 4px -1px ${theme.palette.grey[400]}`, marginBottom: theme.spacing(2), })); @@ -268,17 +267,17 @@ export const CardIconWrapper = styled('div')(({ theme }) => ({ height: theme.spacing(4), width: theme.spacing(4), borderRadius: '50%', - backgroundColor: theme.palette.greenAccent.evenLighter, - color: theme.palette.grey.black, + backgroundColor: theme.palette.success.main_lighter, + color: theme.palette.black.darker, '& svg': { fontSize: theme.typography.pxToRem(20), }, })); export const CardDetailContainer = styled(Box)(({ theme }) => ({ padding: theme.spacing(2), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, boxShadow: `0 4px 8px 0 ${theme.palette.shadow}`, - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, display: 'flex', flexDirection: 'column', gap: theme.spacing(1), @@ -304,7 +303,7 @@ export const StyledCardContent = styled(CardContent)(({ theme }) => ({ textAlign: 'left', minHeight: '50px', // Adjust based on the size of the text border: `1px solid ${theme.palette.grey.lighterSimpleGrey}`, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, // Media queries for padding padding: theme.spacing(1), // default padding // [theme.breakpoints.down('xs')]: { @@ -324,8 +323,8 @@ export const StyledCard = styled(Card)(({ theme }) => ({ maxWidth: '100%', maxHeight: '100%', // Adjusted for better height management flexGrow: 1, - backgroundColor: theme.palette.greenAccent.contrastText, - borderRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.success.contrastText, + borderRadius: theme.borders.borderRadius.md, justifyContent: 'center', transition: 'transform 0.3s ease-in-out', '&:hover': { @@ -350,7 +349,7 @@ export const ChartArea = styled(Container)(({ theme }) => ({ alignItems: 'center', justifyContent: 'center', // border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, background: '#e0e0e0', })); export const SquareChartContainer = styled(Box)(({ theme }) => ({ @@ -367,9 +366,9 @@ export const SquareChartContainer = styled(Box)(({ theme }) => ({ }, })); export const ChartPaper = styled(Paper)(({ theme }) => ({ - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, color: theme.palette.text.secondary, padding: theme.spacing(2), display: 'flex', @@ -385,8 +384,8 @@ export const ChartPaper = styled(Paper)(({ theme }) => ({ export const ResponsiveSquare = styled(Box)(({ theme }) => ({ width: '100%', paddingTop: '100%', - backgroundColor: theme.palette.greenAccent.contrastText, - borderRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.success.contrastText, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], display: 'flex', flexGrow: 1, @@ -396,18 +395,18 @@ export const ResponsiveSquare = styled(Box)(({ theme }) => ({ // ! FORMS / INPUTS export const StyledFormControl = styled(FormControl)(({ theme }) => ({ margin: theme.spacing(1, 0), - backgroundColor: theme.palette.greenAccent.contrastText, // Adjusted for a slight contrast - borderRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.success.contrastText, // Adjusted for a slight contrast + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[1], // Subtle shadow for depth '& .MuiFilledInput-root': { - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, '&:hover': { backgroundColor: theme.palette.action.hover, }, '&.Mui-focused': { - backgroundColor: theme.palette.greenAccent.contrastText, - borderColor: theme.palette.greenAccent.light, + backgroundColor: theme.palette.success.contrastText, + borderColor: theme.palette.success.main_light, }, }, })); @@ -431,8 +430,8 @@ export const StyledSkeletonCard = styled(Card)(({ theme }) => ({ flexGrow: 1, // width: 'auto', maxHeight: '14vh', - backgroundColor: theme.palette.greenAccent.contrastText, - borderRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.success.contrastText, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], transition: 'transform 0.3s ease-in-out', '&:hover': { @@ -441,7 +440,7 @@ export const StyledSkeletonCard = styled(Card)(({ theme }) => ({ })); export const ListItemSkeleton = styled(ListItem)(({ theme }) => ({ // margin: theme.spacing(1, 0), - // borderRadius: theme.shape.borderRadius, + // borderRadius: theme.borders.borderRadius.md, margin: theme.spacing(1), width: '100%', minWidth: 200, @@ -477,7 +476,7 @@ export const CardListItem = styled(ListItem)(({ theme }) => ({ fontSize: '1rem', // Adjust font size as needed })); export const FeatureCard = styled(Card)(({ theme }) => ({ - background: theme.palette.greenAccent.lightest, + background: theme.palette.success.main_lightest, boxShadow: theme.shadows[5], transition: 'box-shadow 0.3s ease-in-out', // smooth transition for shadow '&:hover': { diff --git a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx index 3ce3c83..4116e56 100644 --- a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx +++ b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx @@ -1,8 +1,8 @@ -import { Box, Switch } from '@mui/material'; +import { Box, Paper, Switch } from '@mui/material'; import styled from 'styled-components'; import LoginIcon from '@mui/icons-material/Login'; import PersonAddIcon from '@mui/icons-material/PersonAdd'; -import RCMainCard from '../REUSABLE_COMPONENTS/RC_OTHER/RCMainCard'; +import RCMainCard from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCMainCard'; export const HeroBox = styled(Box)(({ theme }) => ({ width: '100%', @@ -14,7 +14,7 @@ export const HeroBox = styled(Box)(({ theme }) => ({ })); export const CardWrapper = styled(RCMainCard)(({ theme }) => ({ - backgroundColor: theme.palette.greenAccent.dark, + backgroundColor: theme.palette.success.darkest, color: theme.palette.primary.light, overflow: 'hidden', position: 'relative', @@ -23,7 +23,7 @@ export const CardWrapper = styled(RCMainCard)(({ theme }) => ({ position: 'absolute', width: 210, height: 210, - background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, + // background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, borderRadius: '50%', top: -30, right: -180, @@ -39,3 +39,15 @@ export const CardWrapper = styled(RCMainCard)(({ theme }) => ({ right: -130, }, })); +export const SettingsPaper = styled(Paper)(({ theme }) => ({ + padding: theme.spacing(3), + borderRadius: theme.borders.borderRadius.md, + background: theme.palette.success.main_light, + boxShadow: theme.shadows[3], + margin: 'auto', + width: '100%', + maxWidth: 'md', + '&:hover': { + boxShadow: theme.shadows[6], + }, +})); diff --git a/src/layout/cart/index.jsx b/src/layout/cart/index.jsx index fec1633..42b47ec 100644 --- a/src/layout/cart/index.jsx +++ b/src/layout/cart/index.jsx @@ -1,9 +1,9 @@ /* eslint-disable max-len */ import React from 'react'; import { Typography, Box, Grid, CardContent, Card, Stack } from '@mui/material'; -import { useMode } from '../../context'; -import useManager from '../../context/useManager'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; +import { useMode } from 'context'; +import useManager from 'context/useManager'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; const CartContent = () => { const { theme } = useMode(); diff --git a/src/layout/collection/CollectionListItem.jsx b/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx similarity index 86% rename from src/layout/collection/CollectionListItem.jsx rename to src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx index 3c1d6e4..192ba06 100644 --- a/src/layout/collection/CollectionListItem.jsx +++ b/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx @@ -1,23 +1,18 @@ import React, { memo, useCallback } from 'react'; -import { - Card, - CardActionArea, - CardContent, - Collapse, - Grid, -} from '@mui/material'; -import PropTypes from 'prop-types'; -import useDialogState from '../../context/hooks/useDialogState'; -import { useMode } from '../../context'; -import CollectionDialog from '../../components/dialogs/CollectionDialog'; -import RCChange from '../REUSABLE_COMPONENTS/RC_OTHER/RCChange'; -import RCInfoItem from '../REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem'; -import { roundToNearestTenth } from '../../context/Helpers'; -import LoadingOverlay from '../REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; -import RCButton from '../REUSABLE_COMPONENTS/RCBUTTON'; +import { Card, CardActionArea, CardContent, Grid } from '@mui/material'; import { Divider, Tooltip } from '@mui/joy'; -import useBreakpoint from '../../context/hooks/useBreakPoint'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; + +import PropTypes from 'prop-types'; +import useDialogState from 'context/hooks/useDialogState'; +import { useMode } from 'context'; +import CollectionDialog from 'components/dialogs/CollectionDialog'; +import RCChange from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange'; +import RCInfoItem from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem'; +import { roundToNearestTenth } from 'context/Helpers'; +import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; +import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; const CollectionListItem = memo( ({ collection, handleSelectAndShowCollection, handleDelete }) => { @@ -43,7 +38,7 @@ const CollectionListItem = memo( return ( { - return ( - <> - - - - - ); -}; -const DistCircle = () => { - return ; -}; -const PriceList = () => { - return ; -}; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import StatBoxes from './stats/StatBoxes'; +import ValueCircle from './stats/ValueCircle'; +import PriceList from './stats/PriceList'; +import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; + const StatBoard = () => { const { isMobile } = useBreakpoint(); return ( - + { }), }} > - {[, , ].map( + {[, , ].map( (component, index) => ( { ) )} - + ); }; diff --git a/src/layout/collection/SelectCollectionList.jsx b/src/layout/collection/CollectionsViewLayout/index.jsx similarity index 72% rename from src/layout/collection/SelectCollectionList.jsx rename to src/layout/collection/CollectionsViewLayout/index.jsx index 84f907b..f42a1ad 100644 --- a/src/layout/collection/SelectCollectionList.jsx +++ b/src/layout/collection/CollectionsViewLayout/index.jsx @@ -3,15 +3,14 @@ import { List, Collapse, Grid } from '@mui/material'; import PropTypes from 'prop-types'; import { TransitionGroup } from 'react-transition-group'; import CollectionListItem from './CollectionListItem'; -import SimpleCard from '../REUSABLE_COMPONENTS/unique/SimpleCard'; -import useBreakpoint from '../../context/hooks/useBreakPoint'; -import LoadingOverlay from '../REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; -import { useMode } from '../../context'; -import { CollectionListItemSkeleton } from '../REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; -import uniqueTheme from '../REUSABLE_COMPONENTS/unique/uniqueTheme'; -import useManager from '../../context/useManager'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; +import { useMode } from 'context'; +import { CollectionListItemSkeleton } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; +import useManager from 'context/useManager'; +import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; -const SelectCollectionList = ({ handleSelectAndShowCollection }) => { +const CollectionsViewLayout = ({ handleSelectAndShowCollection }) => { const { isMobile } = useBreakpoint(); const { theme } = useMode(); const { @@ -28,7 +27,6 @@ const SelectCollectionList = ({ handleSelectAndShowCollection }) => { const [collectionList, setCollectionList] = useState([]); const [showSkeletons, setShowSkeletons] = useState(true); useEffect(() => { - // Auto hide skeletons after a delay to simulate loading const timer = setTimeout(() => setShowSkeletons(false), 200); // Adjust the delay to match your fetch timing or interaction return () => clearTimeout(timer); }, []); @@ -73,14 +71,12 @@ const SelectCollectionList = ({ handleSelectAndShowCollection }) => { const skeletonCount = 5 - collectionList.length; return ( - @@ -90,7 +86,7 @@ const SelectCollectionList = ({ handleSelectAndShowCollection }) => { alignItems: 'center', mx: 'auto', px: '1rem', - backgroundColor: theme.palette.grey.black, + backgroundColor: theme.palette.black.darker, }} > @@ -107,17 +103,14 @@ const SelectCollectionList = ({ handleSelectAndShowCollection }) => { ))} - {/* {[...Array(skeletonCount).keys()].map((i) => ( - - ))} */} - + ); }; -SelectCollectionList.propTypes = { +CollectionsViewLayout.propTypes = { handleSelectAndShowCollection: PropTypes.func.isRequired, }; -export default memo(SelectCollectionList); +export default memo(CollectionsViewLayout); diff --git a/src/layout/collection/statItems/PricedCardList.jsx b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx similarity index 81% rename from src/layout/collection/statItems/PricedCardList.jsx rename to src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx index 084ddb0..7ca95cb 100644 --- a/src/layout/collection/statItems/PricedCardList.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx @@ -1,20 +1,20 @@ -import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; -import BoxHeader from '../../REUSABLE_COMPONENTS/layout-utils/BoxHeader'; +import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader'; import { Box, Card } from '@mui/material'; import { DataGrid } from '@mui/x-data-grid'; import { useMemo } from 'react'; import { Divider } from '@mui/joy'; import { useMode } from 'context'; import useManager from 'context/useManager'; -import prepareTableData from '../../../data/prepareTableData'; +import prepareTableData from 'data/prepareTableData'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; const PricedCardList = () => { const { theme } = useMode(); - const colors = theme.palette.chartTheme; + const colors = theme.palette; const grey = colors.grey.darkest; const lightGrey = colors.grey.lightest; const primary = colors.primary.dark; - const greenAccent = colors.greenAccent.light; + const greenAccent = colors.success.main_light; const { collectionMetaData } = useManager(); const { data, columns } = useMemo( () => prepareTableData(collectionMetaData?.topFiveCards, 'topCards'), @@ -35,7 +35,7 @@ const PricedCardList = () => { @@ -46,8 +46,8 @@ const PricedCardList = () => { justifyContent: 'center', p: theme.spacing(2), background: grey, - border: theme.palette.chartTheme.greenAccent.dark, - borderRadius: theme.shape.borderRadius, + border: theme.palette.success.darkest, + borderRadius: theme.borders.borderRadius.md, }} > { paddingVariant={theme.spacing(2)} sx={{ color: greenAccent, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, }} /> @@ -92,4 +92,8 @@ const PricedCardList = () => { ); }; -export default PricedCardList; +const PriceList = () => { + return ; +}; + +export default PriceList; diff --git a/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx b/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx new file mode 100644 index 0000000..afaa3d8 --- /dev/null +++ b/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx @@ -0,0 +1,84 @@ +import { Box, Divider } from '@mui/material'; +import StatBox from 'layout/REUSABLE_COMPONENTS/layout-utils/StatBox'; +import { useMode } from 'context'; +import FormatListNumberedRoundedIcon from '@mui/icons-material/FormatListNumberedRounded'; +import useManager from 'context/useManager'; +import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; +import { roundToNearestTenth } from 'context/Helpers'; + +const TotalCardsStatBox = () => { + const { theme } = useMode(); + const colors = theme.palette.chartTheme; + const primary = colors.primary.dark; + const grey = colors.grey.dark; + const { collectionMetaData } = useManager(); + return ( + + + } + /> + + ); +}; + +const TotalPriceStatBox = () => { + const { theme } = useMode(); + const colors = theme.palette.chartTheme; + const primary = colors.primary.dark; + const grey = colors.grey.dark; + const { collectionMetaData } = useManager(); + + return ( + + } + /> + + ); +}; + +const StatBoxes = () => { + return ( + <> + + + + + ); +}; + +export default StatBoxes; diff --git a/src/layout/collection/statItems/ValuDistributionCircle.jsx b/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx similarity index 81% rename from src/layout/collection/statItems/ValuDistributionCircle.jsx rename to src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx index 78a913a..1e670d9 100644 --- a/src/layout/collection/statItems/ValuDistributionCircle.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx @@ -1,6 +1,6 @@ /* eslint-disable max-len */ -import React, { useMemo } from 'react'; -import { Box, Card, Icon, Typography } from '@mui/material'; +import React from 'react'; +import { Box, Card, Icon } from '@mui/material'; import { useMode } from 'context'; import { PieChart, @@ -10,21 +10,21 @@ import { ResponsiveContainer, Legend, } from 'recharts'; -import BoxHeader from '../../REUSABLE_COMPONENTS/layout-utils/BoxHeader'; -import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; +import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import useManager from 'context/useManager'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; const ValuDistributionCircle = () => { const { theme } = useMode(); const { collectionMetaData } = useManager(); - const colors = theme.palette.chartTheme; - const { lightest, darkest, light, dark } = colors.greenAccent; + const colors = theme.palette; + const { main_lighter, darkest, light, dark } = colors.success; const greyDark = colors.grey.dark; const greyDarkest = colors.grey.darkest; const contrastText = colors.grey.contrastText; const primaryDark = colors.primary.dark; - const COLORS = [colors.greenAccent.default, lightest, light, dark, darkest]; + const COLORS = [colors.success.dark, main_lighter, light, dark, darkest]; const renderCustomLabel = ({ cx, cy, @@ -61,7 +61,7 @@ const ValuDistributionCircle = () => { // p: 2, maxHeight: 270, border: 'none', - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, }} > { justifyContent: 'center', alignItems: 'center', flexDirection: 'column', - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, width: '100%', height: '100%', minHeight: 270, @@ -96,7 +96,6 @@ const ValuDistributionCircle = () => { title="Collection Value Distribution" icon={ { titleVariant="h5" paddingVariant={theme.spacing(2)} sx={{ - color: colors.greenAccent.light, - borderRadius: theme.shape.borderRadiusLarge, + color: colors.success.main_light, + borderRadius: theme.borders.borderRadius.lg, }} /> @@ -140,7 +139,11 @@ const ValuDistributionCircle = () => { /> ))} - + { ); }; -export default ValuDistributionCircle; +const ValueCircle = () => { + return ; +}; + +export default ValueCircle; diff --git a/src/layout/collection/CollectionsViewLayout/stats/index.jsx b/src/layout/collection/CollectionsViewLayout/stats/index.jsx new file mode 100644 index 0000000..ce7e4e5 --- /dev/null +++ b/src/layout/collection/CollectionsViewLayout/stats/index.jsx @@ -0,0 +1,9 @@ +import PriceList from './PriceList'; +import StatBoxes from './StatBoxes'; +import ValueCircle from './ValueCircle'; + +export default { + PriceList, + StatBoxes, + ValueCircle, +}; diff --git a/src/layout/collection/CollectionPortfolioHeader.jsx b/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx similarity index 72% rename from src/layout/collection/CollectionPortfolioHeader.jsx rename to src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx index 75f15d7..bfb4123 100644 --- a/src/layout/collection/CollectionPortfolioHeader.jsx +++ b/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx @@ -1,12 +1,11 @@ -import React, { useEffect } from 'react'; -import { IconButton, Box, Grid, Grow, Card } from '@mui/material'; +import React from 'react'; +import { IconButton, Grid, Grow } from '@mui/material'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import { useMode } from '../../context'; -import uniqueTheme from '../REUSABLE_COMPONENTS/unique/uniqueTheme'; -import IconStatWrapper from '../REUSABLE_COMPONENTS/unique/IconStatWrapper'; -import DashboardBox from '../REUSABLE_COMPONENTS/layout-utils/DashboardBox'; -import { collectionPortfolioHeaderItems } from '../../data/collectionPortfolioHeaderItems'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import { useMode } from 'context'; +import IconStatWrapper from 'layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper'; +import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox'; +import { collectionPortfolioHeaderItems } from 'data'; const HeaderItem = ({ icon, label, value, delay }) => { return ( @@ -22,7 +21,6 @@ const HeaderItem = ({ icon, label, value, delay }) => { isPrimary={true} value={value} icon={icon} - theme={uniqueTheme} /> @@ -54,7 +52,7 @@ const CollectionPortfolioHeader = ({ onBack }) => { background: 'white', }} > - + {items?.map((item, index) => ( diff --git a/src/layout/collection/MyPortfolioLineChart.jsx b/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx similarity index 83% rename from src/layout/collection/MyPortfolioLineChart.jsx rename to src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx index 866634c..e6d101e 100644 --- a/src/layout/collection/MyPortfolioLineChart.jsx +++ b/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx @@ -1,9 +1,8 @@ import { ResponsiveLine } from '@nivo/line'; import { BasicTooltip } from '@nivo/tooltip'; import PropTypes from 'prop-types'; -import { useEventHandlers } from '../../context/hooks/useEventHandlers'; +import useEventHandlers from 'context/hooks/useEventHandlers'; const TooltipLayer = ({ points }) => { - // console.log(points); return ( <> {points?.map((point, index) => ( @@ -21,17 +20,16 @@ const TooltipLayer = ({ points }) => { ); }; -const MyResponsiveLine = ({ +const MyPortfolioLineChart = ({ data, // tickValues, validMarkers, - greenAccent, + success, redAccent, grey, text, }) => { const { handleMouseMove, handleMouseLeave } = useEventHandlers(); - // console.log(validMarkers); // console.log(tickValues); return ( { +const TopCardsSwiper = () => { const { theme } = useMode(); - const isMobileView = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile } = useBreakpoint(); + const swiperRef = useRef(null); + const [activeCardIndex, setActiveCardIndex] = useState(0); const { collectionMetaData } = useManager(); const handleSlideChange = (swiper) => setActiveCardIndex(swiper.realIndex); - + useEffect(() => { + const swiperInstance = swiperRef.current?.swiper; + if (swiperInstance) { + swiperInstance.on('slideChange', () => { + const { activeIndex } = swiperInstance; + handleSlideChange(activeIndex); + if ((activeIndex + 1) % 4 === 0) { + swiperInstance.autoplay.stop(); + setTimeout(() => { + swiperInstance?.autoplay?.start(); + }, 10000); + } + }); + } + }, []); return ( { { }} > - {/* */} { check_circle @@ -135,34 +128,6 @@ export const TopCardsDisplayRow = () => { } /> - {/* - {card.name} - */} - {/* - - check_circle - - - } - /> */} { style={{ borderRadius: 0, width: 'auto', - // height: 'auto', mx: 'auto', }} /> @@ -193,7 +157,6 @@ export const TopCardsDisplayRow = () => { /> - {/* */} @@ -201,3 +164,5 @@ export const TopCardsDisplayRow = () => { ); }; + +export default TopCardsSwiper; diff --git a/src/layout/collection/ChartGridLayout.jsx b/src/layout/collection/PortfolioViewLayout/index.jsx similarity index 71% rename from src/layout/collection/ChartGridLayout.jsx rename to src/layout/collection/PortfolioViewLayout/index.jsx index 07eb3e0..365f7e3 100644 --- a/src/layout/collection/ChartGridLayout.jsx +++ b/src/layout/collection/PortfolioViewLayout/index.jsx @@ -1,30 +1,27 @@ import React, { Suspense, useEffect, useMemo, useState } from 'react'; import { Grid, useMediaQuery, Icon, Box, Typography } from '@mui/material'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import { useMode } from '../../context'; -import DashboardBox from '../REUSABLE_COMPONENTS/layout-utils/DashboardBox'; -import BoxHeader from '../REUSABLE_COMPONENTS/layout-utils/BoxHeader'; -import SimpleCard from '../REUSABLE_COMPONENTS/unique/SimpleCard'; -import uniqueTheme from '../REUSABLE_COMPONENTS/unique/uniqueTheme'; -import LoadingOverlay from '../REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; +import { CircularProgress } from '@mui/joy'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import { useMode } from 'context'; +import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox'; +import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader'; +import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; import { ResponsiveContainer } from 'recharts'; -import { - formatDateBasedOnRange, - roundToNearestTenth, -} from '../../context/Helpers'; -import { TopCardsDisplayRow } from './TopCardsDisplayRow'; -import { formFields } from '../../components/forms/formsConfig'; -import RCDynamicForm from '../../components/forms/Factory/RCDynamicForm'; +import { formatDateBasedOnRange, roundToNearestTenth } from 'context/Helpers'; +import { formFields } from 'data/formsConfig'; +import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import { DataGrid, GridToolbar } from '@mui/x-data-grid'; -import NivoContainer from '../REUSABLE_COMPONENTS/layout-utils/NivoContainer'; -import MyResponsiveLine from './MyPortfolioLineChart'; -import { CircularProgress } from '@mui/joy'; -import { ChartArea } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import useManager from '../../context/useManager'; -import useSelectorActions from '../../context/hooks/useSelectorActions'; +import NivoContainer from 'layout/REUSABLE_COMPONENTS/layout-utils/NivoContainer'; +import { ChartArea } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import useManager from 'context/useManager'; +import useSelectorActions from 'context/hooks/useSelectorActions'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; -import prepareTableData from '../../data/prepareTableData'; +import prepareTableData from 'data/prepareTableData'; import { styled } from 'styled-components'; +import TopCardsSwiper from './TopCardsSwiper'; +import MyPortfolioLineChart from './MyPortfolioLineChart'; +import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; +import useBreakpoint from 'context/hooks/useBreakPoint'; const renderCardContainer = (content, isChart, isForm) => { return ( { my: isForm ? '1rem' : null, }} > - {content} - + ); }; const StyledInfoPanel = styled(Box)(({ theme }) => ({ padding: theme.spacing(2), backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[4], position: 'relative', - // right: 15, // Align to the right edge of the parent dialog - // top: 15, // Align to the top of the dialog - // transform: 'translate(15%, 0%)', // Adjust so it slightly overlaps width: 280, zIndex: 1500, // Ensure it is above the dialog })); -const newCollectionPanel = () => { - const { theme } = useMode(); - - return ( - - - First Time Here? - - - Use the guest account to explore: - - - Username: guest - - - Password: password123 - - - ); -}; -const ChartGridLayout = () => { +const PortfolioViewLayout = () => { const { theme } = useMode(); - const isXs = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile } = useBreakpoint(); const { fetchCollections, - collections, hasFetchedCollections, selectedCollectionId, selectedCollection, @@ -119,7 +80,6 @@ const ChartGridLayout = () => { } return prepareTableData(selectedCollection.cards, 'portfolio'); }, [selectedCollection?.cards]); - if (!selectedCollection) { return ; } @@ -133,11 +93,7 @@ const ChartGridLayout = () => { lg={7} sx={{ display: 'flex', flexDirection: 'column' }} > - + { background: theme.palette.success.main, }} > - show_chart + show_chart } sideText={`Change: ${percentageChange}%`} /> - + {/* CHART ROW SECTION */} {selectedCollection?.cards?.length < 5 ? ( { alignItems: 'center', }} > - - + + + + - - + + + + Chart stuck loading? + + + No worries, the chart requires that users add a minimum of 5 + cards before chart functionality is activated to ensure the + best possible chart. + + ) : ( )} - {/* {selectedCollection?.cards?.length < 5 ? ( - - - - - ) : ( - - )} */} {/* FORM SELECTOR ROW SECTION */} - + {/* TOP CARDS ROW SECTION */} - + {/* CARD LIST SECTION */} { ); }; -export default ChartGridLayout; +export default PortfolioViewLayout; // !--------------------- FORM SELECTOR ROW COMPONENTS --------------------- const FormSelectorRow = React.memo(({ isXs }) => { const { theme } = useMode(); const formKeys = ['statRangeForm', 'timeRangeForm', 'themeRangeForm']; return renderCardContainer( - // {formKeys?.map((formKey) => ( { formBoxStyles: { boxShadow: 'none', py: '0.5rem', - // width: '100%', }, }} /> @@ -261,14 +210,13 @@ const FormSelectorRow = React.memo(({ isXs }) => { , false, true - // ); }); FormSelectorRow.displayName = 'FormSelectorRow'; // !--------------------- CHART COMPONENT --------------------- const ChartAreaComponent = React.memo(() => { const { theme } = useMode(); - const { greenAccent, redAccent, grey } = theme.palette.chartTheme; + const { success, redAccent, grey } = theme.palette; const { selectedTimeRange, selectedStat } = useSelectorActions(); const { selectedCollection, handleSelectCollection } = useManager(); const [collection, setCollection] = useState(selectedCollection); @@ -345,14 +293,14 @@ const ChartAreaComponent = React.memo(() => { - @@ -367,13 +315,7 @@ ChartAreaComponent.displayName = 'ChartAreaComponent'; //!--------------------- CARD DISPLAY COMPONENT --------------------- const TopCardsDisplayRowComponent = React.memo(({ isXs }) => { return ( - + { justifyContent: 'center', }} > - + - + ); }); TopCardsDisplayRowComponent.displayName = 'TopCardsDisplayRowComponent'; @@ -429,11 +371,10 @@ const CollectionCardList = React.memo(({ data, columns, theme }) => { minHeight: '800px', }} > - { subtitle="List of all cards in the collection" titleVariant="body1" icon={ - + - list + list } sideText={`Last Updated: ${formattedTime}`} /> - + {renderCardContainer( { checkboxSelection sx={{ '& .MuiDataGrid-root': { - color: theme.palette.chartTheme.grey.dark, + color: theme.palette.grey.dark, border: 'none', }, '& .MuiDataGrid-cell': { - borderBottom: `1px solid ${theme.palette.chartTheme.grey.lightest} !important`, + borderBottom: `1px solid ${theme.palette.grey.lightest} !important`, }, '& .MuiDataGrid-columnHeaders': { - borderBottom: `1px solid ${theme.palette.chartTheme.grey.lightest} !important`, + borderBottom: `1px solid ${theme.palette.grey.lightest} !important`, }, '& .MuiDataGrid-columnSeparator': { visibility: 'hidden', diff --git a/src/layout/collection/index.jsx b/src/layout/collection/index.jsx index 64c72be..de3ad6a 100644 --- a/src/layout/collection/index.jsx +++ b/src/layout/collection/index.jsx @@ -1,22 +1,21 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { useMode } from '../../context'; -import DashboardLayout from '../REUSABLE_COMPONENTS/layout-utils/DashBoardLayout'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; +import React, { useCallback, useEffect, useState } from 'react'; +import { useMode } from 'context'; +import DashboardLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import { Grid } from '@mui/material'; -import CollectionDialog from '../../components/dialogs/CollectionDialog'; -import SelectCollectionList from './SelectCollectionList'; -import useDialogState from '../../context/hooks/useDialogState'; -import DashboardBox from '../REUSABLE_COMPONENTS/layout-utils/DashboardBox'; -import StatBoard from './StatBoard'; +import CollectionDialog from 'components/dialogs/CollectionDialog'; +import useDialogState from 'context/hooks/useDialogState'; +import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox'; +import StatBoard from './CollectionsViewLayout/StatBoard'; import { Tab, Tabs } from '@mui/material'; -import ChartGridLayout from './ChartGridLayout'; -import CollectionPortfolioHeader from './CollectionPortfolioHeader'; -import PageHeader from '../REUSABLE_COMPONENTS/layout-utils/PageHeader'; -import useUserData from '../../context/useUserData'; -import { useFormManagement } from '../../components/forms/hooks/useFormManagement'; -import RCButton from '../REUSABLE_COMPONENTS/RCBUTTON'; -import LoadingOverlay from '../REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; -import useManager from '../../context/useManager'; +import CollectionPortfolioHeader from './PortfolioViewLayout/CollectionPortfolioHeader'; +import PageHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/PageHeader'; +import useUserData from 'context/state/useUserData'; +import { useFormManagement } from 'context/formHooks/useFormManagement'; +import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay'; +import useManager from 'context/useManager'; +import CollectionsViewLayout from './CollectionsViewLayout'; +import PortfolioViewLayout from './PortfolioViewLayout'; const CollectionsView = ({ openDialog, handleTabAndSelect }) => { const { theme } = useMode(); @@ -52,7 +51,7 @@ const CollectionsView = ({ openDialog, handleTabAndSelect }) => { - openDialog('isEditCollectionDialogOpen')} /> @@ -68,7 +67,7 @@ const PortfolioView = ({ handleBackToCollections }) => ( - + @@ -132,15 +131,6 @@ const CollectionPortfolio = () => { handleSelectCollection(updatedCollection); } } - // if (event.key === 'selectedDeck') { - // const updatedCollection = JSON.parse(event.newValue); - // handleSelectCollection(updatedCollection); - // } - // if (event.key === 'decks') { - // const updatedDecks = JSON.parse(event.newValue); - // setDecks(updatedDecks); - // setHasUpdatedDecks(true); - // } }; window.addEventListener('storage', handleStorageChange); diff --git a/src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx b/src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx deleted file mode 100644 index 9fd3ebd..0000000 --- a/src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Box } from '@mui/material'; -import StatBox from '../../REUSABLE_COMPONENTS/layout-utils/StatBox'; -import { useMode } from 'context'; -import FormatListNumberedRoundedIcon from '@mui/icons-material/FormatListNumberedRounded'; -import useManager from 'context/useManager'; -const TotalCardsCollectedStatBox = () => { - const { theme } = useMode(); - const colors = theme.palette.chartTheme; - const primary = colors.primary.dark; - const grey = colors.grey.dark; - const { collectionMetaData } = useManager(); - return ( - - - } - /> - - ); -}; - -export default TotalCardsCollectedStatBox; diff --git a/src/layout/collection/statItems/TotalPriceStatBox.jsx b/src/layout/collection/statItems/TotalPriceStatBox.jsx deleted file mode 100644 index 7445c1a..0000000 --- a/src/layout/collection/statItems/TotalPriceStatBox.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Box } from '@mui/material'; -import StatBox from '../../REUSABLE_COMPONENTS/layout-utils/StatBox'; -import { useMode } from 'context'; -import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; -import { roundToNearestTenth } from 'context/Helpers'; -import useManager from 'context/useManager'; -const TotalPriceStatBox = () => { - const { theme } = useMode(); - const colors = theme.palette.chartTheme; - const primary = colors.primary.dark; - const grey = colors.grey.dark; - - const { collectionMetaData } = useManager(); - - return ( - - } - /> - - ); -}; - -export default TotalPriceStatBox; diff --git a/src/layout/deck/DeckListItem.jsx b/src/layout/deck/DeckListItem.jsx index 2780486..428ba85 100644 --- a/src/layout/deck/DeckListItem.jsx +++ b/src/layout/deck/DeckListItem.jsx @@ -1,5 +1,5 @@ /* eslint-disable max-len */ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Card, @@ -9,18 +9,17 @@ import { Collapse, Grow, } from '@mui/material'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import DeckBuilderIcon from '../REUSABLE_COMPONENTS/icons/DeckBuilderIcon'; -import RCInfoItem from '../REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem'; -import { useMode } from '../../context'; -import GenericCard from '../../components/cards/GenericCard'; -import { formFields } from '../../components/forms/formsConfig'; -import RCDynamicForm from '../../components/forms/Factory/RCDynamicForm'; -import useBreakpoint from '../../context/hooks/useBreakPoint'; -import { SkeletonCard } from '../REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; -import useManager from '../../context/useManager'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import DeckBuilderIcon from '../../data/DeckBuilderIcon'; +import RCInfoItem from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem'; +import { useMode } from 'context'; +import GenericCard from 'components/cards/GenericCard'; +import { formFields } from 'data/formsConfig'; +import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; -import { roundToNearestTenth } from '../../context/Helpers'; +import { roundToNearestTenth } from 'context/Helpers'; const AnimatedInfoItem = ({ label, value, theme, delay }) => { const [checked, setChecked] = useState(false); useEffect(() => { @@ -56,12 +55,10 @@ function prepareDeckData(deck, cards) { value: `$${roundToNearestTenth(deck?.totalPrice)}`, }, { label: 'Cards', value: `${deck?.totalQuantity}` }, - // { label: 'Unique Cards', value: `${cards?.length}` }, { label: 'Tags', value: tags.join(', '), }, - // { label: 'Color', value: deck?.color }, ]; return { infoItems, @@ -176,9 +173,14 @@ const DeckListItem = ({ userInterfaceOptions={{ submitButton: true, submitButtonLabel: 'Update Deck', + // updateActions: { + // handleUpdate: () => handleSelectAndShowDeck(deck), + // }, deleteButton: true, deleteButtonLabel: 'Delete Deck', - deleteActions: handleDelete, + deleteActions: { + handleDelete: () => handleDelete(deck), + }, }} initialData={{ name: deck?.name || '', diff --git a/src/layout/deck/deckData.jsx b/src/layout/deck/deckData.jsx deleted file mode 100644 index fc0532b..0000000 --- a/src/layout/deck/deckData.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import { roundToNearestTenth } from '../../context/Helpers'; -function prepareDeckData(deck, cards) { - const genData = { - name: deck?.name, - description: deck?.description, - tags: deck?.tags, - color: deck?.color, - }; - // const cards = deck?.cards?.map((card) => ({ - // ...card, - // quantity: roundToNearestTenth(card?.quantity), - // })); - const infoItems = [ - { label: 'Name', value: deck?.name }, - { - label: 'Value', - value: `$${roundToNearestTenth(deck?.totalPrice)}`, - }, - { label: 'Cards', value: `${deck?.totalQuantity}` }, - { label: 'Unique Cards', value: `${cards?.length}` }, - { label: 'Tags', value: deck?.tags?.join(', ') }, - { label: 'Color', value: deck?.color }, - ]; - return { - genData, - infoItems, - }; -} diff --git a/src/layout/deck/index.jsx b/src/layout/deck/index.jsx index ab52412..ce5ceb3 100644 --- a/src/layout/deck/index.jsx +++ b/src/layout/deck/index.jsx @@ -1,10 +1,4 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Card, Collapse, @@ -13,18 +7,18 @@ import { Tabs, CircularProgress, } from '@mui/material'; -import { useMode } from '../../context'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import DashboardLayout from '../REUSABLE_COMPONENTS/layout-utils/DashBoardLayout'; -import SearchComponent from '../../components/forms/search/SearchComponent'; -import DeckDialog from '../../components/dialogs/DeckDialog'; -import useDialogState from '../../context/hooks/useDialogState'; +import { useMode } from 'context'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import DashboardLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout'; +import SearchComponent from 'components/forms/search/SearchComponent'; +import DeckDialog from 'components/dialogs/DeckDialog'; +import useDialogState from 'context/hooks/useDialogState'; import DeckListItem from './DeckListItem'; -import DashboardBox from '../REUSABLE_COMPONENTS/layout-utils/DashboardBox'; -import PageHeader from '../REUSABLE_COMPONENTS/layout-utils/PageHeader'; -import useUserData from '../../context/useUserData'; -import { useFormManagement } from '../../components/forms/hooks/useFormManagement'; -import useManager from '../../context/useManager'; +import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox'; +import PageHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/PageHeader'; +import useUserData from 'context/state/useUserData'; +import { useFormManagement } from 'context/formHooks/useFormManagement'; +import useManager from 'context/useManager'; const DeckBuilder = () => { const { theme } = useMode(); @@ -40,6 +34,7 @@ const DeckBuilder = () => { const { setActiveFormSchema } = useFormManagement(); const { dialogState, openDialog, closeDialog } = useDialogState(); const [activeTab, setActiveTab] = useState(0); + const [tabsOrientation, setTabsOrientation] = useState('horizontal'); const [loadingState, setLoadingState] = useState({}); const [decks, setDecks] = useState([]); useEffect(() => { @@ -73,18 +68,13 @@ const DeckBuilder = () => { setLoadingState((prev) => ({ ...prev, [deckId]: false, - })); // Set loading state to false when deck is fully loaded + })); }, []); - const handleOpenAddDialog = useCallback(() => { - setActiveFormSchema('addDeckForm'); - openDialog('isAddDeckDialogOpen'); - }, [openDialog, setActiveFormSchema]); useEffect(() => { const handleStorageChange = (event) => { if (event.key === 'selectedDeckId' || event.key === 'selectedDeck') { const updatedDeckId = event.newValue; - // const updatedDeckId = localStorage.getItem('selectedDeckId'); const updatedDeck = decks?.find((deck) => deck._id === updatedDeckId); if (updatedDeck) { setActiveTab(decks?.indexOf(updatedDeck)); @@ -103,6 +93,25 @@ const DeckBuilder = () => { window.removeEventListener('storage', handleStorageChange); }; }, [decks, handleSelectDeck]); + // useEffect(() => { + // // A function that sets the orientation state of the tabs. + // function handleTabsOrientation() { + // return window.innerWidth < theme.breakpoints.values.sm + // ? setTabsOrientation('vertical') + // : setTabsOrientation('horizontal'); + // } + + // /** + // The event listener that's calling the handleTabsOrientation function when resizing the window. + // */ + // window.addEventListener('resize', handleTabsOrientation); + + // // Call the handleTabsOrientation function to set the state with the initial value. + // handleTabsOrientation(); + + // // Remove event listener on cleanup + // return () => window.removeEventListener('resize', handleTabsOrientation); + // }, [tabsOrientation]); const handleChangeTab = useCallback( async (event, newValue) => { setActiveTab(newValue); @@ -122,21 +131,11 @@ const DeckBuilder = () => { }, [decks, handleSelectDeck, fetchDeckById, handleDeckLoaded] ); - const deckTabs = decks?.map((deck, index) => ( - : deck.name - } - value={index} - key={`deck-tab-${deck?._id}-${index}`} - /> - )); const deckListItems = useMemo( () => decks?.map((deck, index) => ( handleDelete(deck)} @@ -182,7 +181,10 @@ const DeckBuilder = () => { type={'Deck Collection'} action={{ route: '', tooltip: 'Add Deck' }} username={user.username} - handleOpenDialog={handleOpenAddDialog} + handleOpenDialog={() => { + setActiveFormSchema('addDeckForm'); + openDialog('isAddDeckDialogOpen'); + }} /> @@ -200,8 +202,24 @@ const DeckBuilder = () => { aria-label="deck-tabs" variant="scrollable" scrollButtons="auto" + theme={theme} + textColor="primary" > - {deckTabs} + {decks?.map((deck, index) => ( + + ) : ( + {deck?.name} + ) + } + value={index} + key={`deck-tab-${deck?._id}-${index}`} + theme={theme} + textColor="primary" + /> + ))} diff --git a/src/layout/home/FeatureCardsSection.jsx b/src/layout/home/FeatureCardsSection.jsx index e743b8b..e122eea 100644 --- a/src/layout/home/FeatureCardsSection.jsx +++ b/src/layout/home/FeatureCardsSection.jsx @@ -1,22 +1,22 @@ import React from 'react'; import { Grid } from '@mui/material'; import { useMediaQuery } from '@mui/material'; -import { useMode } from '../../context'; +import { useMode } from 'context'; import { StyledContainerBox, StyledPaper, } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; import { Box, CardActions, CardContent, CardHeader } from '@mui/material'; import { useSpring, animated as a, animated } from 'react-spring'; -import RCButton from '../REUSABLE_COMPONENTS/RCBUTTON'; -import useDialogState from '../../context/hooks/useDialogState'; -import featureCardData from '../../data/json-data/featureCardData.json'; // Adjust the path as necessary +import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; +import useDialogState from 'context/hooks/useDialogState'; +import featureCardData from 'data/json-data/featureCardData.json'; // Adjust the path as necessary import { CardListItem, CardUnorderedList, FeatureCard, } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import DetailsModal from '../../components/dialogs/DetailsModal'; +import DetailsModal from 'components/dialogs/DetailsModal'; const AnimatedBox = animated(Box); export const AnimatedFeatureCard = ({ cardData }) => { @@ -73,7 +73,7 @@ export const AnimatedFeatureCard = ({ cardData }) => { titleTypographyProps={{ align: 'center' }} subheaderTypographyProps={{ align: 'center' }} sx={{ - backgroundColor: theme.palette.greenAccent.light, + backgroundColor: theme.palette.success.main_light, height: '20%', }} /> diff --git a/src/layout/home/HeroChartSection.jsx b/src/layout/home/HeroChartSection.jsx index 1fcd61f..f183bb2 100644 --- a/src/layout/home/HeroChartSection.jsx +++ b/src/layout/home/HeroChartSection.jsx @@ -1,7 +1,7 @@ -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import placeHolder from '../../assets/images/placeholder.jpeg'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import placeHolder from 'assets/images/placeholder.jpeg'; import { Card, CardContent, Zoom } from '@mui/material'; -import FlexBetween from '../REUSABLE_COMPONENTS/layout-utils/FlexBetween'; +import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween'; import { ResponsiveContainer, CartesianGrid, @@ -12,10 +12,10 @@ import { Line, Tooltip, } from 'recharts'; -import DashboardBox from '../REUSABLE_COMPONENTS/layout-utils/DashboardBox'; -import BoxHeader from '../REUSABLE_COMPONENTS/layout-utils/BoxHeader'; -import { useMode } from '../../context'; -import { useMemo } from 'react'; +import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox'; +import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader'; +import { useMode } from 'context'; +import { useEffect, useMemo, useRef, useState } from 'react'; import { FaShieldAlt } from 'react-icons/fa'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; const currencyFormatter = (value, separator = '.') => { @@ -36,6 +36,9 @@ const HeroChartSection = ({ shouldShow, }) => { const { theme } = useMode(); + const [isContainerReady, setIsContainerReady] = useState(false); + const chartContainerRef = useRef(null); + const chartData = useMemo(() => { return randomCards[activeCardIndex]?.averagedChartData?.['30d']?.data || []; }, [randomCards, activeCardIndex]); @@ -49,6 +52,25 @@ const HeroChartSection = ({ const cardData = useMemo(() => { return randomCards[activeCardIndex]; }, [randomCards, activeCardIndex]); + useEffect(() => { + const observer = new ResizeObserver((entries) => { + const { width, height } = entries[0].contentRect; + if (width > 0 && height > 0) { + setIsContainerReady(true); + } + }); + + if (chartContainerRef.current) { + observer.observe(chartContainerRef.current); + } + + return () => { + if (chartContainerRef.current) { + observer.unobserve(chartContainerRef.current); + } + }; + }, []); + return ( @@ -108,7 +131,7 @@ const HeroChartSection = ({ gridArea="b" sx={{ flexGrow: 1, - border: theme.palette.chartTheme.greenAccent.default, + border: theme.palette.success.dark, borderWidth: 5, width: '100%', height: '100%', @@ -118,12 +141,10 @@ const HeroChartSection = ({ sx={{ width: '100%', justifyContent: 'center', - // borderRadius: theme.spacing(4), p: theme.spacing(2), background: theme.palette.transparent.main, - border: theme.palette.chartTheme.greenAccent.dark, + border: theme.palette.success.darkest, borderWidth: 5, - borderRadius: 'inherit', }} > @@ -141,8 +162,7 @@ const HeroChartSection = ({ - - - - - currencyFormatter(item)} - /> - - - `$${value}`} - stroke={theme.palette.success.main} - /> - - + > + + + currencyFormatter(item)} + /> + + + `$${value}`} + stroke={theme.palette.success.main} + /> + + + )} diff --git a/src/layout/home/HeroIconSection.jsx b/src/layout/home/HeroIconSection.jsx index 02f577c..cef8c12 100644 --- a/src/layout/home/HeroIconSection.jsx +++ b/src/layout/home/HeroIconSection.jsx @@ -1,14 +1,35 @@ -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import { Zoom, useMediaQuery } from '@mui/material'; -import SimpleCard from '../REUSABLE_COMPONENTS/unique/SimpleCard'; -import uniqueTheme from '../REUSABLE_COMPONENTS/unique/uniqueTheme'; -import { useMode } from '../../context'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import { CardContent, Icon, IconButton, Typography, Zoom } from '@mui/material'; +import { useMode } from 'context'; import { AspectRatio } from '@mui/joy'; -import heroData from '../../data/heroData'; -import useBreakpoint from '../../context/hooks/useBreakPoint'; +import heroData from 'data/heroData'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween'; +import SaveIcon from '@mui/icons-material/Save'; +import AddIcon from '@mui/icons-material/Add'; +import CollectionsIcon from '@mui/icons-material/Collections'; +const iconStyles = { + fontSize: '8rem', // Example size, adjust as needed + color: '#000000', // Example color, adjust as needed + maxWidth: '100%', + maxHeight: '100%', +}; +const String2Icon = (icon) => { + switch (icon) { + case 'AddIcon': + return ; + case 'SaveIcon': + return ; + case 'CollectionsIcon': + return ; + default: + return null; + } +}; const HeroIconSection = ({ shouldShow }) => { - const { isMd } = useBreakpoint(); + const { isMd, isMobile } = useBreakpoint(); const { theme } = useMode(); + return ( { maxWidth: 200, // Max width for the AspectRatio container border: 'none', background: 'transparent', - borderRadius: theme.shape.borderRadiusLarge, + borderRadius: theme.borders.borderRadius.lg, m: isMd ? '0.5rem' : 'auto', }} ratio="1" // Maintain a 1:1 aspect ratio @@ -65,17 +86,71 @@ const HeroIconSection = ({ shouldShow }) => { border: 'none', background: 'transparent', borderColor: 'transparent', - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, overFlow: 'hidden', }} > - + + + + + {String2Icon(card.heroIcon)} + + + + + + {card.heroText} + + + ))} diff --git a/src/layout/home/HeroSwiper.jsx b/src/layout/home/HeroSwiper.jsx index d5c8038..fda217d 100644 --- a/src/layout/home/HeroSwiper.jsx +++ b/src/layout/home/HeroSwiper.jsx @@ -10,16 +10,14 @@ import { Navigation, Autoplay, } from 'swiper/modules'; -import MDTypography from '../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import placeHolder from '../../assets/images/placeholder.jpeg'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import placeHolder from 'assets/images/placeholder.jpeg'; +import useBreakpoint from 'context/hooks/useBreakPoint'; + +const HeroSwiper = ({ cards, handleSlideChange, activeCardIndex }) => { + const { isMd } = useBreakpoint(); -const HeroSwiper = ({ - cards, - isMobileView, - handleSlideChange, - activeCardIndex, -}) => { const swiperRef = useRef(null); const swiperConfig = { effect: 'coverflow', @@ -73,17 +71,18 @@ const HeroSwiper = ({ sx={{ width: '100%', display: 'flex', - justifyContent: isMobileView ? 'center' : 'flex-start', - alignItems: isMobileView ? 'center' : 'center', - position: isMobileView ? 'absolute' : 'relative', - height: isMobileView ? 'calc(100vh - 64px)' : null, + justifyContent: isMd ? 'center' : 'flex-start', + alignItems: isMd ? 'center' : 'center', + position: isMd ? 'absolute' : 'relative', + height: isMd ? 'calc(100vh - 64px)' : null, border: 'none', }} + ref={swiperRef} > ${cards[index].name}`, }} style={{ - minWidth: isMobileView ? '100vw' : '150vw', + minWidth: isMd ? '100vw' : '150vw', width: '100%', - alignItems: isMobileView ? 'center' : 'flex-start', - position: isMobileView ? 'absolute' : 'absolute', - height: isMobileView ? 'calc(100vh - 64px)' : null, + alignItems: isMd ? 'center' : 'flex-start', + position: isMd ? 'absolute' : 'absolute', + height: isMd ? 'calc(100vh - 64px)' : null, background: 'transparent', - ml: isMobileView ? '0' : '60vw', + ml: isMd ? '0' : '60vw', }} onSlideChange={handleSlideChange} > @@ -110,15 +109,15 @@ const HeroSwiper = ({ flexDirection: 'column', alignItems: 'center', width: '100%', - minWidth: isMobileView ? '300px' : '16vw', - height: isMobileView ? 'calc(100vh - 8%)' : '100%', + minWidth: isMd ? '300px' : '16vw', + height: isMd ? 'calc(100vh - 8%)' : '100%', transform: index === activeCardIndex ? 'scale(4.2)' : 'scale(1)', transition: 'transform 2s', border: 'none', boxShadow: 'none', }} > - {card.name} - + {`slide_${index}`} { const { theme } = useMode(); - const isMobileView = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile } = useBreakpoint(); return ( { justifyContent: 'center', flexDirection: 'row', background: 'transparent', - alignItems: isMobileView ? 'flex-start' : 'center', + alignItems: isMobile ? 'flex-start' : 'center', padding: 1, - my: isMobileView ? null : 1, - width: isMobileView ? '100%' : '100%', - position: isMobileView ? 'absolute' : 'relative', + my: isMobile ? null : 1, + width: isMobile ? '100%' : '100%', + position: isMobile ? 'absolute' : 'relative', }} > @@ -25,8 +26,8 @@ const HeroTextSection = ({ shouldShow }) => { textAlign: 'center', background: 'transparent', maxWidth: '100%', - height: isMobileView ? null : '100%', - alignItems: isMobileView ? 'center' : 'center', + height: isMobile ? null : '100%', + alignItems: isMobile ? 'center' : 'center', mx: 'auto', my: 'auto', borderColor: 'transparent', @@ -34,21 +35,21 @@ const HeroTextSection = ({ shouldShow }) => { > A New Era of Trading Card Games Discover a revolutionary way to collect, play, and compete in your diff --git a/src/layout/home/HeroSection.jsx b/src/layout/home/index.jsx similarity index 83% rename from src/layout/home/HeroSection.jsx rename to src/layout/home/index.jsx index 6dcc770..9fa5186 100644 --- a/src/layout/home/HeroSection.jsx +++ b/src/layout/home/index.jsx @@ -1,16 +1,15 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { ErrorBoundary, useMode, useStatisticsStore } from '../../context'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import placeHolder from '../../assets/images/placeholder.jpeg'; -import { HeroSectionSkeleton } from '../REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; -import { Card, useMediaQuery } from '@mui/material'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import placeHolder from 'assets/images/placeholder.jpeg'; +import { HeroSectionSkeleton } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; +import { Card } from '@mui/material'; import HeroTextSection from './HeroTextSection'; import HeroIconSection from './HeroIconSection'; import HeroSwiper from './HeroSwiper'; -import useLocalStorage from '../../context/hooks/useLocalStorage'; -import { useCardStoreHook } from '../../context/useCardStore'; +import useLocalStorage from 'context/hooks/useLocalStorage'; +import { useCardStoreHook } from 'context/state/useCardStore'; import HeroChartSection from './HeroChartSection'; -import useBreakpoint from '../../context/hooks/useBreakPoint'; +import useBreakpoint from 'context/hooks/useBreakPoint'; const HeroSection = () => { const { fetchRandomCardsAndSet } = useCardStoreHook(); @@ -29,7 +28,6 @@ const HeroSection = () => { useEffect(() => setShouldShow(true), []); useEffect(() => fetchRandomCardsAndSet(), []); const handleSlideChange = (swiper) => setActiveCardIndex(swiper.realIndex); - // if (!randomCards.length) return ; if (!cards.length) { return ; } @@ -88,7 +86,6 @@ const HeroSection = () => { {' '} diff --git a/src/layout/navigation/PrivateRoute.jsx b/src/layout/navigation/PrivateRoute.jsx index c8391cf..07428a8 100644 --- a/src/layout/navigation/PrivateRoute.jsx +++ b/src/layout/navigation/PrivateRoute.jsx @@ -1,6 +1,6 @@ -import React, { useContext, useEffect } from 'react'; -import { Navigate, useNavigate } from 'react-router-dom'; -import useUserData from '../../context/useUserData'; +import { useNavigate } from 'react-router-dom'; +import useUserData from 'context/state/useUserData'; +import { useEffect } from 'react'; const PrivateRoute = ({ children }) => { const { user } = useUserData(); diff --git a/src/layout/navigation/Navigation.jsx b/src/layout/navigation/index.jsx similarity index 83% rename from src/layout/navigation/Navigation.jsx rename to src/layout/navigation/index.jsx index ec85a0f..a57dcbc 100644 --- a/src/layout/navigation/Navigation.jsx +++ b/src/layout/navigation/index.jsx @@ -10,10 +10,10 @@ import { useMediaQuery, } from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; -import { useMode } from '../../context'; +import { useMode } from 'context'; import { useNavigate } from 'react-router-dom'; -import { useSpring, animated, useSprings } from 'react-spring'; -import RCLogoSection from '../REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection'; +import { animated, useSprings } from 'react-spring'; +import RCLogoSection from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection'; import { Avatar, Box, @@ -22,17 +22,17 @@ import { Divider, Drawer, ModalClose, - Radio, Sheet, Typography, } from '@mui/joy'; -import { baseMenuItems } from '../../data/baseMenuItems'; -import rgba from '../../assets/themes/functions/rgba'; -import useManageCookies from '../../context/hooks/useManageCookies'; -import ReusableLoadingButton from '../REUSABLE_COMPONENTS/ReusableLoadingButton'; +import useManageCookies from 'context/hooks/useManageCookies'; import { Logout } from '@mui/icons-material'; -import useAuthManager from '../../context/useAuthManager'; -import useManager from '../../context/useManager'; +import useAuthManager from 'context/state/useAuthManager'; +import useManager from 'context/useManager'; +import RCLoadingButton from 'layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON'; +import { baseMenuItems } from 'data'; +import rgba from 'assets/themes/functions/rgba'; + const Navigation = () => { const { theme } = useMode(); const navigate = useNavigate(); @@ -59,7 +59,7 @@ const Navigation = () => { await logout(); navigate('/login'); setLogoutClicked(false); - }, [logout, navigate]); + }, [navigate]); const ContentContainer = ({ type, content, clickAction, itemIndex }) => { const handleClick = () => { if (clickAction === 'navigate' && itemIndex !== undefined) { @@ -80,7 +80,7 @@ const Navigation = () => { maxWidth: clickAction === 'navigate' ? '100%' : '5rem', boxShadow: 'none', border: '3px solid', - borderColor: theme.palette.chartTheme.greenAccent.light, + borderColor: theme.palette.success.main_light, '&:hover': { bgcolor: 'background.level1' }, }} onClick={handleClick} @@ -108,7 +108,7 @@ const Navigation = () => { maxHeight: 64, maxWidth: '100%', '&:hover': { - backgroundColor: rgba(theme.palette.greenAccent.lighterSeaGreen), + backgroundColor: rgba(theme.palette.success.main_lighter), }, }} > @@ -184,7 +184,7 @@ const Navigation = () => { variant="soft" sx={{ mr: 1, - background: theme.palette.chartTheme.greenAccent.light, + background: theme.palette.success.main_light, color: 'white', }} /> @@ -259,7 +259,7 @@ const Navigation = () => { variant="soft" sx={{ mr: 1, - background: theme.palette.chartTheme.greenAccent.light, + background: theme.palette.success.main_light, color: 'white', // cursor: 'pointer', }} @@ -267,25 +267,17 @@ const Navigation = () => { /> {username} - - {} - - } - // color={button.color} - variant="warning" - fullWidth - sx={{ - // my: theme.spacing(1), - // py: theme.spacing(1), - mt: '0 !important', - background: theme.palette.error.main, - }} + withContainer={false} + fullWidth={true} + circular={true} + icon={} + variant="holo" + color="error" + label="Logout" + size="large" /> )} diff --git a/src/layout/profile/NotificationSection.js/NotificationList.jsx b/src/layout/profile/NotificationSection.js/NotificationList.jsx index dd1988f..d6b725c 100644 --- a/src/layout/profile/NotificationSection.js/NotificationList.jsx +++ b/src/layout/profile/NotificationSection.js/NotificationList.jsx @@ -17,7 +17,7 @@ import { Typography, } from '@mui/material'; import { useMode } from 'context'; -import useUserData from 'context/useUserData'; +import useUserData from 'context/state/useUserData'; const ListItemWrapper = styled('div')(({ theme }) => ({ cursor: 'pointer', padding: 16, @@ -164,7 +164,7 @@ const NotificationList = () => { - {/* */}
- + {authUser?.username} - - + + {authUser?.role_data?.name} - + diff --git a/src/layout/profile/sub-components/ProfileInfoCard.jsx b/src/layout/profile/sub-components/ProfileInfoCard.jsx index 30b5722..6038470 100644 --- a/src/layout/profile/sub-components/ProfileInfoCard.jsx +++ b/src/layout/profile/sub-components/ProfileInfoCard.jsx @@ -1,19 +1,13 @@ import { Link } from 'react-router-dom'; - -// prop-types is library for typechecking of props import PropTypes from 'prop-types'; - -// @mui material components import Card from '@mui/material/Card'; import Divider from '@mui/material/Divider'; import Tooltip from '@mui/material/Tooltip'; import Icon from '@mui/material/Icon'; - -// Material Dashboard 2 React base styles import colors from 'assets/themes/base/colors'; import typography from 'assets/themes/base/typography'; -import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from '../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; function ProfileInfoCard({ title = '', @@ -49,16 +43,16 @@ function ProfileInfoCard({ // Render the card info items const renderItems = labels.map((label, key) => ( - {label}:   - - + +  {values[key]} - + )); @@ -89,14 +83,14 @@ function ProfileInfoCard({ pt={2} px={2} > - {title} - - + edit - + - + {description} - + @@ -119,13 +113,13 @@ function ProfileInfoCard({ {renderItems} - social:   - + {renderSocial} diff --git a/src/layout/profile/sub-components/Settings.jsx b/src/layout/profile/sub-components/Settings.jsx index 4fa868a..bff2605 100644 --- a/src/layout/profile/sub-components/Settings.jsx +++ b/src/layout/profile/sub-components/Settings.jsx @@ -3,8 +3,8 @@ import { useState } from 'react'; // @mui material components import Card from '@mui/material/Card'; import Switch from '@mui/material/Switch'; -import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from '../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import { useMode } from 'context'; function PlatformSettings() { @@ -18,23 +18,23 @@ function PlatformSettings() { return ( - platform settings - + - account - + - + Email me when someone follows me - + @@ -58,9 +58,9 @@ function PlatformSettings() { /> - + Email me when someone answers on my post - + @@ -72,20 +72,20 @@ function PlatformSettings() { /> - + Email me when someone mentions me - + - application - + @@ -96,9 +96,9 @@ function PlatformSettings() { /> - + New launches and projects - + @@ -110,9 +110,9 @@ function PlatformSettings() { /> - + Monthly product updates - + @@ -124,9 +124,9 @@ function PlatformSettings() { /> - + Subscribe to newsletter - + diff --git a/src/layout/profile/sub-components/cleanup/DefaultInfoCard.jsx b/src/layout/profile/sub-components/cleanup/DefaultInfoCard.jsx deleted file mode 100644 index ffda25d..0000000 --- a/src/layout/profile/sub-components/cleanup/DefaultInfoCard.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import PropTypes from 'prop-types'; -import Card from '@mui/material/Card'; -import Divider from '@mui/material/Divider'; -import Icon from '@mui/material/Icon'; -import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from '../../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; - -function DefaultInfoCard({ color, icon, title, description, value }) { - return ( - - - - {icon} - - - - - {title} - - {description && ( - - {description} - - )} - {description && !value ? null : } - {value && ( - - {value} - - )} - - - ); -} - -// Setting default values for the props of DefaultInfoCard -DefaultInfoCard.defaultProps = { - color: 'info', - value: '', - description: '', -}; - -// Typechecking props for the DefaultInfoCard -DefaultInfoCard.propTypes = { - color: PropTypes.oneOf([ - 'primary', - 'secondary', - 'info', - 'success', - 'warning', - 'error', - 'dark', - ]), - icon: PropTypes.node.isRequired, - title: PropTypes.string.isRequired, - description: PropTypes.string, - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), -}; - -export default DefaultInfoCard; diff --git a/src/layout/profile/sub-components/cleanup/DefaultProjectCard.jsx b/src/layout/profile/sub-components/cleanup/DefaultProjectCard.jsx deleted file mode 100644 index 7d2b1ad..0000000 --- a/src/layout/profile/sub-components/cleanup/DefaultProjectCard.jsx +++ /dev/null @@ -1,166 +0,0 @@ -import { Link } from 'react-router-dom'; -import PropTypes from 'prop-types'; -import Card from '@mui/material/Card'; -import CardMedia from '@mui/material/CardMedia'; -import Tooltip from '@mui/material/Tooltip'; -import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from '../../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; -import { Avatar } from '@mui/material'; -import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; - -function DefaultProjectCard({ - image, - label, - title, - description, - action, - authors, -}) { - const renderAuthors = authors.map(({ image: media, name }) => ( - - - - )); - - return ( - - - - - - - {label} - - - {action.type === 'internal' ? ( - - {title} - - ) : ( - - {title} - - )} - - - - {description} - - - - {action.type === 'internal' ? ( - - {action.label} - - ) : ( - - {action.label} - - )} - {renderAuthors} - - - - ); -} - -// Setting default values for the props of DefaultProjectCard -DefaultProjectCard.defaultProps = { - authors: [], -}; - -// Typechecking props for the DefaultProjectCard -DefaultProjectCard.propTypes = { - image: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - action: PropTypes.shape({ - type: PropTypes.oneOf(['external', 'internal']), - route: PropTypes.string.isRequired, - color: PropTypes.oneOf([ - 'primary', - 'secondary', - 'info', - 'success', - 'warning', - 'error', - 'light', - 'dark', - 'white', - ]).isRequired, - label: PropTypes.string.isRequired, - }).isRequired, - authors: PropTypes.arrayOf(PropTypes.object), -}; - -export default DefaultProjectCard; diff --git a/src/layout/profile/sub-components/cleanup/Footer.jsx b/src/layout/profile/sub-components/cleanup/Footer.jsx deleted file mode 100644 index f98dba2..0000000 --- a/src/layout/profile/sub-components/cleanup/Footer.jsx +++ /dev/null @@ -1,106 +0,0 @@ -// import PropTypes from 'prop-types'; - -// // @mui material components -// import Link from '@mui/material/Link'; -// import Icon from '@mui/material/Icon'; - -// // Material Dashboard 2 React base styles -// import typography from 'assets/themes/base/typography'; -// import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX'; -// import MDTypography from '../../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; - -// function Footer({ company, links }) { -// const { href, name } = company; -// const { size } = typography; - -// const renderLinks = () => -// links.map((link) => ( -// -// -// -// {link.name} -// -// -// -// )); - -// return ( -// -// -// © {new Date().getFullYear()}, made with -// -// -// favorite -// -// -// by -// -// -//  {name}  -// -// -// & -// -// -//  UPDIVISION  -// -// -// for a better web. -// -// ({ -// display: 'flex', -// flexWrap: 'wrap', -// alignItems: 'center', -// justifyContent: 'center', -// listStyle: 'none', -// mt: 3, -// mb: 0, -// p: 0, - -// [breakpoints.up('lg')]: { -// mt: 0, -// }, -// })} -// > -// {renderLinks()} -// -// -// ); -// } - -// // Setting default values for the props of Footer -// Footer.defaultProps = { -// company: { href: 'https://www.creative-tim.com/', name: 'Creative Tim' }, -// links: [ -// { href: 'https://updivision.com/', name: 'UPDIVISION' }, -// { href: 'https://www.creative-tim.com/', name: 'Creative Tim' }, -// { href: 'https://www.creative-tim.com/presentation', name: 'About Us' }, -// { href: 'https://www.creative-tim.com/blog', name: 'Blog' }, -// { href: 'https://www.creative-tim.com/license', name: 'License' }, -// ], -// }; - -// // Typechecking props for the Footer -// Footer.propTypes = { -// company: PropTypes.objectOf(PropTypes.string), -// links: PropTypes.arrayOf(PropTypes.object), -// }; - -// export default Footer; diff --git a/src/layout/profile/sub-components/cleanup/ProfileSection.js b/src/layout/profile/sub-components/cleanup/ProfileSection.js deleted file mode 100644 index d30e228..0000000 --- a/src/layout/profile/sub-components/cleanup/ProfileSection.js +++ /dev/null @@ -1,364 +0,0 @@ -import { useState, useRef, useEffect } from 'react'; -import { - Avatar, - Box, - Card, - CardContent, - Chip, - ClickAwayListener, - Divider, - Grid, - InputAdornment, - List, - ListItemButton, - ListItemIcon, - ListItemText, - OutlinedInput, - Paper, - Popper, - Stack, - Switch, - Typography, -} from '@mui/material'; -import PerfectScrollbar from 'react-perfect-scrollbar'; -import { useNavigate } from 'react-router-dom'; -import { useMode } from '../../../../context'; -import Transitions from '../Transitions'; -import MainCard from '../MainCard'; -import useUserData from '../../../../context/useUserData'; - -// ==============================|| PROFILE MENU ||============================== // - -const ProfileSection = () => { - const { theme } = useMode(); - const { user } = useUserData(); - const navigate = useNavigate(); - const [sdm, setSdm] = useState(true); - const [value, setValue] = useState(''); - const [notification, setNotification] = useState(false); - const [selectedIndex, setSelectedIndex] = useState(-1); - const [open, setOpen] = useState(false); - /** - * anchorRef is used on different componets and specifying one type leads to other components throwing an error - * */ - const anchorRef = useRef(null); - const handleLogout = async () => { - console.log('Logout'); - }; - - const handleClose = (event) => { - if (anchorRef.current && anchorRef.current.contains(event.target)) { - return; - } - setOpen(false); - }; - - const handleListItemClick = (event, index, route = '') => { - setSelectedIndex(index); - handleClose(event); - - if (route && route !== '') { - navigate(route); - } - }; - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; - - const prevOpen = useRef(open); - useEffect(() => { - if (prevOpen.current === true && open === false) { - anchorRef.current.focus(); - } - - prevOpen.current = open; - }, [open]); - - return ( - <> - - } - // label={ - // - // } - variant="outlined" - ref={anchorRef} - aria-controls={open ? 'menu-list-grow' : undefined} - aria-haspopup="true" - onClick={handleToggle} - color="primary" - /> - - {({ TransitionProps }) => ( - - - - - - - - Good Morning, - - Johne Doe - - - Project Admin - - setValue(e.target.value)} - placeholder="Search profile options" - startAdornment={ - - {/* */} - - } - aria-describedby="search-helper-text" - inputProps={{ - 'aria-label': 'weight', - }} - /> - - - - - {/* */} - - - - - - - - - Start DND Mode - - - - setSdm(e.target.checked)} - name="sdm" - size="small" - /> - - - - - - - - Allow Notifications - - - - - setNotification(e.target.checked) - } - name="sdm" - size="small" - /> - - - - - - - - - - handleListItemClick(event, 0, '#') - } - > - - {/* */} - - - Account Settings - - } - /> - - - handleListItemClick(event, 1, '#') - } - > - - {/* */} - - - - - Social Profile - - - - - - - } - /> - - - - {/* */} - - Logout - } - /> - - - - - - - - - )} - - - ); -}; - -export default ProfileSection; diff --git a/src/layout/profile/sub-components/cleanup/ProfilesList.jsx b/src/layout/profile/sub-components/cleanup/ProfilesList.jsx deleted file mode 100644 index 9ee07ec..0000000 --- a/src/layout/profile/sub-components/cleanup/ProfilesList.jsx +++ /dev/null @@ -1,95 +0,0 @@ -// import { Link } from 'react-router-dom'; -// import PropTypes from 'prop-types'; -// import Card from '@mui/material/Card'; -// import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; -// import MDTypography from '../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; -// import { Avatar } from '@mui/material'; -// import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; - -// function ProfilesList({ title, profiles, shadow }) { -// const renderProfiles = profiles.map( -// ({ image, name, description, action }) => ( -// -// -// -// -// -// -// {name} -// -// -// {description} -// -// -// -// {action.type === 'internal' ? ( -// -// {action.label} -// -// ) : ( -// -// {action.label} -// -// )} -// -// -// ) -// ); - -// return ( -// -// -// -// {title} -// -// -// -// -// {renderProfiles} -// -// -// -// ); -// } - -// // Setting default props for the ProfilesList -// ProfilesList.defaultProps = { -// shadow: true, -// }; - -// // Typechecking props for the ProfilesList -// ProfilesList.propTypes = { -// title: PropTypes.string.isRequired, -// profiles: PropTypes.arrayOf(PropTypes.object).isRequired, -// shadow: PropTypes.bool, -// }; - -// export default ProfilesList; diff --git a/src/layout/profile/sub-components/cleanup/UserStats.jsx b/src/layout/profile/sub-components/cleanup/UserStats.jsx deleted file mode 100644 index 257db8f..0000000 --- a/src/layout/profile/sub-components/cleanup/UserStats.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Box, Typography } from '@mui/material'; -import useManager from '../../../../context/useManager'; - -const UserStats = () => { - const { decks, collections, cart } = useManager(); - return ( - - User Statistics - - Number of Decks: {decks.allIds?.length} - - - Number of Collections: {collections.allIds?.length} - - - Number of Cards in Cart: {cart?.items?.length} - - {/* Add other statistics as needed */} - - ); -}; - -export default UserStats; diff --git a/src/layout/profile/sub-components/cleanup/profilesListData.jsx b/src/layout/profile/sub-components/cleanup/profilesListData.jsx deleted file mode 100644 index 22657ef..0000000 --- a/src/layout/profile/sub-components/cleanup/profilesListData.jsx +++ /dev/null @@ -1,64 +0,0 @@ -// import marie from 'assets/images/bg1.jpg'; -// import ivana from 'assets/images/bg1.jpg'; -// import team3 from 'assets/images/bg1.jpg'; -// import team4 from 'assets/images/bg1.jpg'; - -// import kal from 'assets/images/bg1.jpg'; - -// export default [ -// { -// image: kal, -// name: 'Sophie B.', -// description: 'Hi! I need more information..', -// action: { -// type: 'internal', -// route: '/pages/profile/profile-overview', -// color: 'info', -// label: 'reply', -// }, -// }, -// { -// image: marie, -// name: 'Anne Marie', -// description: 'Awesome work, can you..', -// action: { -// type: 'internal', -// route: '/pages/profile/profile-overview', -// color: 'info', -// label: 'reply', -// }, -// }, -// { -// image: ivana, -// name: 'Ivanna', -// description: 'About files I can..', -// action: { -// type: 'internal', -// route: '/pages/profile/profile-overview', -// color: 'info', -// label: 'reply', -// }, -// }, -// { -// image: team4, -// name: 'Peterson', -// description: 'Have a great afternoon..', -// action: { -// type: 'internal', -// route: '/pages/profile/profile-overview', -// color: 'info', -// label: 'reply', -// }, -// }, -// { -// image: team3, -// name: 'Nick Daniel', -// description: 'Hi! I need more information..', -// action: { -// type: 'internal', -// route: '/pages/profile/profile-overview', -// color: 'info', -// label: 'reply', -// }, -// }, -// ]; diff --git a/src/layout/store/index.jsx b/src/layout/store/index.jsx index bf89341..78230ac 100644 --- a/src/layout/store/index.jsx +++ b/src/layout/store/index.jsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import { useMode } from '../../context'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -import PageLayout from '../REUSABLE_COMPONENTS/layout-utils/PageLayout'; -import SearchComponent from '../../components/forms/search/SearchComponent'; +import { useMode } from 'context'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +import SearchComponent from 'components/forms/search/SearchComponent'; import { PortfolioBoxA } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; const StoreSearch = () => { diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js index e6b9fdf..97cd324 100644 --- a/src/pages/CartPage.js +++ b/src/pages/CartPage.js @@ -19,11 +19,11 @@ import { CardContent, IconButton, } from '@mui/material'; -import { useMode } from '../context'; -import Checkout from '../layout/cart/cartPageContainers/Checkout'; -import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; -import MDBox from '../layout/REUSABLE_COMPONENTS/MDBOX'; -import useUserData from 'context/useUserData'; +import { useMode } from 'context'; +import Checkout from 'layout/cart/cartPageContainers/Checkout'; +import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import useUserData from 'context/state/useUserData'; import CartContent from 'layout/cart'; import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined'; import useManager from 'context/useManager'; @@ -57,6 +57,7 @@ const CartPage = () => { bgcolor: theme.palette.background.default, border: (t) => `1px solid ${t.palette.divider}`, }} + theme={theme} > {/* CART PAGE HEADER */} @@ -69,6 +70,7 @@ const CartPage = () => { borderBottom: (t) => `1px solid ${t.palette.divider}`, mt: theme.spacing(1), }} + theme={theme} > { const { fetchCollections, hasFetchedCollections } = useManager(); diff --git a/src/pages/DeckBuilderPage.js b/src/pages/DeckBuilderPage.js index 5e7cc52..53b0e2c 100644 --- a/src/pages/DeckBuilderPage.js +++ b/src/pages/DeckBuilderPage.js @@ -1,6 +1,6 @@ -import React, { useEffect } from 'react'; -import DeckBuilder from '../layout/deck'; -import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +import React from 'react'; +import DeckBuilder from 'layout/deck'; +import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; // ==============================|| DECK BUILDER PAGE ||============================== // diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 761c70b..16c0f78 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,9 +1,8 @@ import React from 'react'; import { Grid } from '@mui/material'; import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; -// import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; -import HeroSection from '../layout/home/HeroSection'; -import FeatureCardsSection from '../layout/home/FeatureCardsSection'; +import HeroSection from 'layout/home'; +import FeatureCardsSection from 'layout/home/FeatureCardsSection'; // ==============================|| HOME PAGE ||============================== // diff --git a/src/pages/LoginDialog.jsx b/src/pages/LoginDialog.jsx index eda4da4..0347d31 100644 --- a/src/pages/LoginDialog.jsx +++ b/src/pages/LoginDialog.jsx @@ -12,7 +12,7 @@ import { import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import { useMode } from 'context'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from 'layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import { DialogPaper, StyledDialog, @@ -23,19 +23,18 @@ import LoginIcon from '@mui/icons-material/Login'; import PersonAddIcon from '@mui/icons-material/PersonAdd'; import useDialogState from 'context/hooks/useDialogState'; import useManageCookies from 'context/hooks/useManageCookies'; -import { useFormManagement } from 'components/forms/hooks/useFormManagement'; -import { formFields } from 'components/forms/formsConfig'; +import { useFormManagement } from 'context/formHooks/useFormManagement'; +import { formFields } from 'data/formsConfig'; import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import styled from 'styled-components'; const StyledInfoPanel = styled(Box)(({ theme }) => ({ padding: theme.spacing(2), backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[4], position: 'absolute', right: 15, // Align to the right edge of the parent dialog top: 15, // Align to the top of the dialog - // transform: 'translate(15%, 0%)', // Adjust so it slightly overlaps width: 280, zIndex: 1500, // Ensure it is above the dialog })); @@ -85,7 +84,7 @@ function LoginDialog() { return ( - + {formTitle} - + toggleActiveForm('loginForm', 'signupForm')} - // onChange={handleToggle} labelLeft="Login" labelRight="Sign Up" iconLeft={} diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx index e9d6f7a..aafdccc 100644 --- a/src/pages/LoginPage.jsx +++ b/src/pages/LoginPage.jsx @@ -1,141 +1,9 @@ -// import * as React from 'react'; -// import Avatar from '@mui/material/Avatar'; -// import CssBaseline from '@mui/material/CssBaseline'; -// import Link from '@mui/material/Link'; -// import Paper from '@mui/material/Paper'; -// import Box from '@mui/material/Box'; -// import Grid from '@mui/material/Grid'; -// import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -// import Typography from '@mui/material/Typography'; -// import { createTheme, ThemeProvider } from '@mui/material/styles'; -// import { useMode } from '../context'; -// import useManageCookies from '../context/hooks/useManageCookies'; -// import SplashPage2 from '../layout/REUSABLE_COMPONENTS/system-utils/SplashPage2'; -// import Copyright from 'layout/REUSABLE_COMPONENTS/system-utils/Copyright'; - -// const defaultTheme = createTheme(); - -// export default function LoginPage() { -// const { theme } = useMode(); -// const { getCookie } = useManageCookies(); -// const { authUser, isLoggedIn } = getCookie(['authUser', 'isLoggedIn']); -// const splashRef = React.useRef(null); -// React.useEffect(() => { -// if (splashRef.current) { -// Object.assign(splashRef.current.style, { -// position: 'fixed', -// top: '0', -// left: '0', -// width: '100%', -// height: '100%', -// zIndex: '-1', -// }); -// } -// }, []); -// const renderSplashPage = () => ( -//
-// -//
-// ); -// return ( -// -// -// -// -// t.palette.mode === 'light' -// ? t.palette.grey[50] -// : t.palette.grey[900], -// backgroundSize: 'cover', -// backgroundPosition: 'center', -// }} -// /> -// -// -// -// -// -// -// Sign in -// -// -// -// -// Forgot password? -// -// -// -// -// {"Don't have an account? Sign Up"} -// -// -// -// -// -// {renderSplashPage()} -// -// -// -// ); -// } import React from 'react'; -import { CssBaseline, Box, Typography } from '@mui/material'; +import { CssBaseline, Box, Typography, Card } from '@mui/material'; import SplashPage2 from 'layout/REUSABLE_COMPONENTS/system-utils/SplashPage2'; import LoginDialog from './LoginDialog'; // Import the LoginDialog component import useManageCookies from 'context/hooks/useManageCookies'; -import { ThemeProvider } from '@mui/material/styles'; import { useMode } from 'context'; -import styled from 'styled-components'; - -const StyledInfoPanel = styled(Box)(({ theme }) => ({ - padding: theme.spacing(2), - backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shadows[4], - marginLeft: theme.spacing(2), - width: 300, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', -})); - -const GuestInfoPanel = () => { - const { theme } = useMode(); - - return ( - - - First Time Here? - - - Use the guest account to explore: - - - Username: guest - - - Password: password123 - - - ); -}; const LoginPage = () => { const { theme } = useMode(); // Using the theme from MUI's theme provider @@ -143,7 +11,7 @@ const LoginPage = () => { const { isLoggedIn } = getCookie(['isLoggedIn']); return ( - + { height: '100vh', }} > - {!isLoggedIn && ( - <> - - - - )} + {!isLoggedIn && } - + ); }; diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index e54c591..4621b00 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -1,8 +1,10 @@ import React, { useState } from 'react'; -import Overview from '../layout/profile/index'; +import Overview from 'layout/profile/index'; import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; import { Grid } from '@mui/material'; +// ==============================|| PROFILE PAGE ||============================== // + const ProfilePage = () => { return ( diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js index 63280aa..13254ec 100644 --- a/src/pages/StorePage.js +++ b/src/pages/StorePage.js @@ -1,83 +1,13 @@ -import React, { useEffect, useRef, useState } from 'react'; -import MDBox from '../layout/REUSABLE_COMPONENTS/MDBOX'; -import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; -import StoreSearch from '../layout/store'; +import React from 'react'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +import StoreSearch from 'layout/store'; import { Grid, Typography, Box } from '@mui/material'; -import { useMode } from '../context'; +import { useMode } from 'context'; -const heroBannerHeight = { - xs: '7vh', - sm: '10vh', - md: '15vh', - lg: '20vh', -}; -const HeroBanner = ({ title, subtitle }) => { +const StorePage = () => { const { theme } = useMode(); - return ( - - - - - {title} - - - {subtitle} - - - - - ); -}; -const StorePage = () => { return ( { minHeight: '100vh', }} > - + + + + + {'Welcome to Store'} + + + {'Search for cards and add them to your cart.'} + + + +