From 6f1fe5f52e72834be1c27e77dd94a6295c67d1e4 Mon Sep 17 00:00:00 2001 From: Reed Vogt Date: Sat, 4 May 2024 01:15:21 -0700 Subject: [PATCH] cleaning up styled and custom components --- README.md | 61 ++- src/App.js | 60 ++- src/Main.jsx | 62 --- .../animations/LoadingCardAnimation.jsx | 2 +- src/assets/animations/SingleCardAnimation.jsx | 4 +- .../css}/StripeForm.css | 0 src/assets/themes/Transitions.jsx | 8 +- src/assets/themes/base/borders.jsx | 12 +- src/assets/themes/base/cleanup/theme.jsx | 2 +- src/assets/themes/base/colors.jsx | 13 + .../themes/base/customColorPalettes.jsx | 13 +- src/assets/themes/base/palette.jsx | 2 + src/assets/themes/components/tabs/index.jsx | 15 +- src/assets/themes/components/tabs/tab.jsx | 13 +- .../themes/functions/baseStyleFunctions.jsx | 29 -- src/assets/themes/functions/index.jsx | 13 + src/assets/themes/themeSettings.jsx | 47 +-- src/components/cards/CardDetailsContainer.jsx | 29 +- src/components/cards/CardMediaSection.js | 12 +- src/components/cards/CardToolTip.jsx | 11 +- src/components/cards/GenericCard.jsx | 46 +-- src/components/dialogs/CollectionDialog.jsx | 14 +- src/components/dialogs/DeckDialog.jsx | 24 +- src/components/dialogs/DetailsModal.jsx | 2 +- src/components/dialogs/GenericCardDialog.jsx | 10 +- .../forms/Factory/RCDynamicForm.jsx | 52 +-- src/components/forms/Factory/RCInput.jsx | 9 +- .../customerCheckoutForm/CustomerForm.js | 4 +- src/components/forms/formsConfig.jsx | 6 +- .../forms/search/PaginationComponent.jsx | 14 +- .../forms/search/SearchComponent.jsx | 22 +- .../forms/search/SearchSettings.jsx | 2 +- src/context/ConfiguratorContext.jsx | 24 -- .../formHooks}/useFormManagement.jsx | 0 .../formHooks}/useFormSubmission.jsx | 5 +- .../formHooks}/useInitialFormData.jsx | 0 .../formHooks}/useRCFormHook.jsx | 2 +- src/context/hooks/index.jsx | 31 ++ src/context/hooks/useBreakPoint.jsx | 10 +- src/context/hooks/useConfigurator.jsx | 4 +- src/context/hooks/useEventHandlers.jsx | 4 +- src/context/hooks/useFetchWrapper.jsx | 2 +- src/context/hooks/useGridItems.jsx | 12 +- src/context/hooks/useLoading.jsx | 126 +----- src/context/hooks/usePopover.jsx | 6 +- src/context/index.js | 8 +- src/context/{ => state}/useAuthManager.jsx | 4 +- src/context/{ => state}/useCardStore.jsx | 10 +- src/context/{ => state}/useMode.jsx | 4 +- src/context/{ => state}/useUserData.jsx | 8 +- .../icons => data}/DeckBuilderIcon.jsx | 0 src/data/baseMenuItems.jsx | 2 +- src/data/iconData.jsx | 4 - src/data/prepareTableData.jsx | 21 +- src/data/route-config.jsx | 3 +- src/index.js | 24 +- .../Configurator/ConfiguratorRoot.jsx | 2 +- .../Configurator/index.jsx | 22 +- .../GenericActionButtons.jsx | 8 +- .../REUSABLE_COMPONENTS/MDBOX/index.jsx | 35 +- .../RCBADGE/RCBadgeRoot.jsx | 2 +- .../RCBADGE/examples/BadgesGradient.jsx | 2 +- .../RCBADGE/examples/BadgesSimple.jsx | 2 +- .../RCBADGE/examples/BadgesSimpleRounded.jsx | 2 +- .../REUSABLE_COMPONENTS/RCBADGE/index.jsx | 32 +- .../RCBUTTON/RCButtonRoot.jsx | 84 ---- .../RCBUTTON/examples/ButtonGradient.jsx | 2 +- .../RCBUTTON/examples/ButtonIconLeft.jsx | 2 +- .../RCBUTTON/examples/ButtonIconRight.jsx | 2 +- .../REUSABLE_COMPONENTS/RCBUTTON/index.jsx | 12 +- .../REUSABLE_COMPONENTS/RCCARD/RCCardRoot.jsx | 104 +++++ .../REUSABLE_COMPONENTS/RCCARD/index.jsx | 165 ++++++++ .../RCLOADINGBUTTON/RCLoadingButtonRoot.jsx | 230 +++++++++++ .../RCLOADINGBUTTON/index.jsx | 112 ++++++ .../RCTypographyRoot.jsx} | 0 .../index.jsx} | 42 +- .../RCWRAPPEDICON/index.jsx | 4 +- .../REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx | 10 +- .../REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx | 2 +- .../RC_OTHER/RCInfoItem.jsx | 15 +- .../RC_OTHER/RCLogoSection.jsx | 2 +- .../RC_OTHER/RCMainCard.jsx | 6 +- .../RC_OTHER/RCToolTip.jsx | 106 +++-- .../ReusableLoadingButton.jsx | 2 +- .../REUSABLE_COMPONENTS/icons/CartIcon.jsx | 30 -- .../REUSABLE_COMPONENTS/icons/ChartsIcon.jsx | 27 -- .../icons/CollectionIcon.jsx | 30 -- .../icons/DeckOfCardsIcon.jsx | 23 -- .../REUSABLE_COMPONENTS/icons/GlassyIcon.jsx | 92 ----- .../REUSABLE_COMPONENTS/icons/MoneyIcon.jsx | 38 -- .../icons/ReusableIconButton.jsx | 40 -- .../REUSABLE_COMPONENTS/icons/TestingIcon.jsx | 30 -- .../REUSABLE_COMPONENTS/icons/index.jsx | 54 --- .../IconStatWrapper.jsx | 27 +- .../layout-utils/PageHeader.jsx | 18 +- .../SimpleSectionHeader.jsx | 53 +-- .../layout-utils/StatBox.jsx | 9 +- .../system-utils/ErrorBoundary.jsx | 75 ---- .../system-utils/ErrorFallback.jsx | 70 +++- .../system-utils/FallbackContainer.jsx | 46 --- .../system-utils/ProgressCircle.jsx | 96 ----- .../system-utils/SkeletonVariants.jsx | 6 +- .../REUSABLE_COMPONENTS/unique/SimpleCard.jsx | 289 -------------- .../ReusableStyledComponents.jsx | 36 +- .../SpecificStyledComponents.jsx | 2 +- src/layout/cart/index.jsx | 6 +- .../CollectionListItem.jsx | 33 +- .../{ => CollectionsViewLayout}/StatBoard.jsx | 45 +-- .../index.jsx} | 31 +- .../stats/PriceList.jsx} | 18 +- .../CollectionsViewLayout/stats/StatBoxes.jsx | 84 ++++ .../stats/ValueCircle.jsx} | 26 +- .../CollectionsViewLayout/stats/index.jsx | 9 + .../CollectionPortfolioHeader.jsx | 12 +- .../MyPortfolioLineChart.jsx | 24 +- .../TopCardsSwiper.jsx} | 87 +---- .../index.jsx} | 167 +++----- src/layout/collection/index.jsx | 44 +-- .../statItems/TotalCardsCollectedStatBox.jsx | 40 -- .../statItems/TotalPriceStatBox.jsx | 39 -- src/layout/deck/DeckListItem.jsx | 22 +- src/layout/deck/deckData.jsx | 2 +- src/layout/deck/index.jsx | 23 +- src/layout/home/FeatureCardsSection.jsx | 10 +- src/layout/home/HeroChartSection.jsx | 124 +++--- src/layout/home/HeroIconSection.jsx | 109 +++++- src/layout/home/HeroSwiper.jsx | 45 ++- src/layout/home/HeroTextSection.jsx | 27 +- .../home/{HeroSection.jsx => index.jsx} | 17 +- src/layout/navigation/PrivateRoute.jsx | 6 +- .../navigation/{Navigation.jsx => index.jsx} | 43 +-- .../NotificationList.jsx | 2 +- .../profile/NotificationSection.js/index.js | 2 +- src/layout/profile/index.jsx | 7 +- src/layout/profile/sub-components/Header.jsx | 14 +- .../sub-components/ProfileInfoCard.jsx | 34 +- .../profile/sub-components/Settings.jsx | 40 +- .../cleanup/DefaultInfoCard.jsx | 75 ---- .../cleanup/DefaultProjectCard.jsx | 166 -------- .../profile/sub-components/cleanup/Footer.jsx | 106 ----- .../sub-components/cleanup/ProfileSection.js | 364 ------------------ .../sub-components/cleanup/ProfilesList.jsx | 95 ----- .../sub-components/cleanup/UserStats.jsx | 24 -- .../cleanup/profilesListData.jsx | 64 --- src/layout/store/index.jsx | 8 +- src/pages/CartPage.js | 4 +- src/pages/HomePage.js | 2 +- src/pages/LoginDialog.jsx | 13 +- src/pages/LoginPage.jsx | 105 +---- 149 files changed, 1839 insertions(+), 3406 deletions(-) delete mode 100644 src/Main.jsx rename src/{components/forms/customerCheckoutForm => assets/css}/StripeForm.css (100%) delete mode 100644 src/assets/themes/functions/baseStyleFunctions.jsx create mode 100644 src/assets/themes/functions/index.jsx delete mode 100644 src/context/ConfiguratorContext.jsx rename src/{components/forms/hooks => context/formHooks}/useFormManagement.jsx (100%) rename src/{components/forms/hooks => context/formHooks}/useFormSubmission.jsx (93%) rename src/{components/forms/hooks => context/formHooks}/useInitialFormData.jsx (100%) rename src/{components/forms/hooks => context/formHooks}/useRCFormHook.jsx (93%) create mode 100644 src/context/hooks/index.jsx rename src/context/{ => state}/useAuthManager.jsx (97%) rename src/context/{ => state}/useCardStore.jsx (91%) rename src/context/{ => state}/useMode.jsx (76%) rename src/context/{ => state}/useUserData.jsx (93%) rename src/{layout/REUSABLE_COMPONENTS/icons => data}/DeckBuilderIcon.jsx (100%) create mode 100644 src/layout/REUSABLE_COMPONENTS/RCCARD/RCCardRoot.jsx create mode 100644 src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx create mode 100644 src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx create mode 100644 src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/index.jsx rename src/layout/REUSABLE_COMPONENTS/{MDTYPOGRAPHY/MDTypographyRoot.jsx => RCTYPOGRAPHY/RCTypographyRoot.jsx} (100%) rename src/layout/REUSABLE_COMPONENTS/{MDTYPOGRAPHY/MDTypography.jsx => RCTYPOGRAPHY/index.jsx} (59%) delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/CartIcon.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/ChartsIcon.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/CollectionIcon.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/GlassyIcon.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/MoneyIcon.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/ReusableIconButton.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/TestingIcon.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/icons/index.jsx rename src/layout/REUSABLE_COMPONENTS/{unique => layout-utils}/IconStatWrapper.jsx (77%) rename src/layout/REUSABLE_COMPONENTS/{unique => layout-utils}/SimpleSectionHeader.jsx (56%) delete mode 100644 src/layout/REUSABLE_COMPONENTS/system-utils/ErrorBoundary.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/system-utils/FallbackContainer.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx rename src/layout/collection/{ => CollectionsViewLayout}/CollectionListItem.jsx (86%) rename src/layout/collection/{ => CollectionsViewLayout}/StatBoard.jsx (56%) rename src/layout/collection/{SelectCollectionList.jsx => CollectionsViewLayout/index.jsx} (73%) rename src/layout/collection/{statItems/PricedCardList.jsx => CollectionsViewLayout/stats/PriceList.jsx} (85%) create mode 100644 src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx rename src/layout/collection/{statItems/ValuDistributionCircle.jsx => CollectionsViewLayout/stats/ValueCircle.jsx} (86%) create mode 100644 src/layout/collection/CollectionsViewLayout/stats/index.jsx rename src/layout/collection/{ => PortfolioViewLayout}/CollectionPortfolioHeader.jsx (80%) rename src/layout/collection/{ => PortfolioViewLayout}/MyPortfolioLineChart.jsx (85%) rename src/layout/collection/{TopCardsDisplayRow.jsx => PortfolioViewLayout/TopCardsSwiper.jsx} (59%) rename src/layout/collection/{ChartGridLayout.jsx => PortfolioViewLayout/index.jsx} (77%) delete mode 100644 src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx delete mode 100644 src/layout/collection/statItems/TotalPriceStatBox.jsx rename src/layout/home/{HeroSection.jsx => index.jsx} (83%) rename src/layout/navigation/{Navigation.jsx => index.jsx} (87%) delete mode 100644 src/layout/profile/sub-components/cleanup/DefaultInfoCard.jsx delete mode 100644 src/layout/profile/sub-components/cleanup/DefaultProjectCard.jsx delete mode 100644 src/layout/profile/sub-components/cleanup/Footer.jsx delete mode 100644 src/layout/profile/sub-components/cleanup/ProfileSection.js delete mode 100644 src/layout/profile/sub-components/cleanup/ProfilesList.jsx delete mode 100644 src/layout/profile/sub-components/cleanup/UserStats.jsx delete mode 100644 src/layout/profile/sub-components/cleanup/profilesListData.jsx 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/src/App.js b/src/App.js index a552507..67610e7 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 { ROUTE_CONFIG } from 'data/route-config'; +import LoginDialog from 'pages/LoginDialog'; +// ==============================|| 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/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..25428a1 100644 --- a/src/assets/themes/base/colors.jsx +++ b/src/assets/themes/base/colors.jsx @@ -64,6 +64,7 @@ const colors = { dark: { main: '#344767', focus: '#2c3c58', + state: '#191919', }, gradients: { primary: { @@ -228,6 +229,18 @@ const colors = { tabs: { indicator: { boxShadow: '#ddd' }, }, + // 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..77f4a68 100644 --- a/src/assets/themes/base/customColorPalettes.jsx +++ b/src/assets/themes/base/customColorPalettes.jsx @@ -25,11 +25,12 @@ const success = { light: '#70d8bd', // '#4cceac', 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 = { @@ -279,13 +280,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 = { 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/components/tabs/index.jsx b/src/assets/themes/components/tabs/index.jsx index e430bcb..ced4b02 100644 --- a/src/assets/themes/components/tabs/index.jsx +++ b/src/assets/themes/components/tabs/index.jsx @@ -11,7 +11,7 @@ export default { styleOverrides: { root: { position: 'relative', - backgroundColor: grey.default, + // backgroundColor: grey.default, borderRadius: borderRadius.xl, minHeight: 'unset', padding: pxToRem(4), @@ -38,10 +38,19 @@ export default { indicator: { height: '100%', borderRadius: borderRadius.lg, - backgroundColor: success.dark, + // backgroundColor: success.dark, + backgroundColor: success.main, // Ensure this is not commented out boxShadow: tabsBoxShadow.indicator, transition: 'all 500ms ease', - color: `${success.dark} !important`, + color: `${success.main} !important`, + }, + + label: { + color: `${success.main} !important`, + }, + + labelIcon: { + color: `${success.main} !important`, }, }, }; diff --git a/src/assets/themes/components/tabs/tab.jsx b/src/assets/themes/components/tabs/tab.jsx index c0bad5a..1b07b9f 100644 --- a/src/assets/themes/components/tabs/tab.jsx +++ b/src/assets/themes/components/tabs/tab.jsx @@ -5,7 +5,7 @@ import pxToRem from 'assets/themes/functions/pxToRem'; const { size, fontWeightRegular } = typography; const { borderRadius } = borders; -const { dark, grey } = colors; +const { dark, grey, success } = colors; export default { styleOverrides: { @@ -24,13 +24,14 @@ export default { lineHeight: 'inherit', padding: pxToRem(4), borderRadius: borderRadius.lg, - color: `${grey.darkest} !important`, + color: success.main, + // color: `${grey.darkest} !important`, opacity: '1 !important', - 'Mui-selected': { - color: `${grey.darkest} !important`, - opacity: '1 !important', - }, + // 'Mui-selected': { + // color: `${grey.darkest} !important`, + // opacity: '1 !important', + // }, '& .material-icons, .material-icons-round': { marginBottom: '0 !important', marginRight: pxToRem(6), 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/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..6cfdb3a 100644 --- a/src/assets/themes/themeSettings.jsx +++ b/src/assets/themes/themeSettings.jsx @@ -35,6 +35,18 @@ export const themeSettings = (mode) => { boxShadows: boxShadows, typography: typography, spacing: (factor) => `${0.25 * factor}rem`, + // lenSm1: '0.25rem' === spacing(1) + // lenSm2: '0.5rem' === spacing(2) + // lenSm3: '0.75rem' === spacing(3) + // lenMd1: '1rem' === spacing(4) + // lenMd2: '1.25rem' === spacing(5) + // lenMd3: '1.5rem' === spacing(6) + // lenLg1: '2rem' === spacing(7) + // lenLg2: '3rem' === spacing(8) + // lenLg3: '4rem' === spacing(9) + // lenXl1: '5rem' === spacing(10) + // lenXl2: '6rem' === spacing(11) + // lenXl3: '7rem' === spacing(12) shape: { borderRadius: 4, borderRadiusLarge: 8, @@ -58,39 +70,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..ee3c5c0 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 ( @@ -262,7 +251,7 @@ const CardDetailsContainer = ({ sx={{ // background: theme.palette.chartTheme.greenAccent.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..0bfc7ed 100644 --- a/src/components/cards/CardMediaSection.js +++ b/src/components/cards/CardMediaSection.js @@ -5,15 +5,15 @@ 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, @@ -29,8 +29,6 @@ const CardMediaSection = forwardRef( ) => { const { theme } = useMode(); const [anchorEl, setAnchorEl] = useState(null); - const cardId = card?.id; - const [cardWithSameIdCount, setCardWithSameIdCount] = useState(0); useEffect(() => { if (isHovered && ref?.current) { diff --git a/src/components/cards/CardToolTip.jsx b/src/components/cards/CardToolTip.jsx index 7b81db5..572c34a 100644 --- a/src/components/cards/CardToolTip.jsx +++ b/src/components/cards/CardToolTip.jsx @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { useMode } from '../../context'; +import { useMode } from 'context'; import { Box, Tooltip, Typography, Zoom, styled } from '@mui/material'; -import rgba from '../../assets/themes/functions/rgba'; +import rgba from 'assets/themes/functions'; const formatKey = (key) => key.replace(/_/g, ' ').replace(/^\w/, (c) => c.toUpperCase()); const StyledAttributeSpan = ({ theme, children }) => ( @@ -48,8 +48,8 @@ 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', @@ -89,6 +89,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..832e0d8 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'}`} )} diff --git a/src/components/dialogs/CollectionDialog.jsx b/src/components/dialogs/CollectionDialog.jsx index 456b994..e21bc26 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 { 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 { DialogPaper, StyledDialog, StyledDialogContent, -} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; import { formFields } from '../forms/formsConfig'; import RCDynamicForm from '../forms/Factory/RCDynamicForm'; -import useInitialFormData from '../forms/hooks/useInitialFormData'; +import useInitialFormData from '../../context/formHooks/useInitialFormData'; const CollectionDialog = ({ open, onClose, isNew, collectionData }) => { const { theme } = useMode(); @@ -60,9 +60,9 @@ const CollectionDialog = ({ open, onClose, isNew, collectionData }) => { - + {isNew ? 'Add a Collection' : 'Update a Collection'} - + diff --git a/src/components/dialogs/DeckDialog.jsx b/src/components/dialogs/DeckDialog.jsx index fb0dd01..166f036 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 'components/forms/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(); @@ -59,9 +60,9 @@ const DeckDialog = ({ open, onClose, isNew, deckData }) => { - + {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/forms/Factory/RCDynamicForm.jsx b/src/components/forms/Factory/RCDynamicForm.jsx index 32fb06a..a96b2da 100644 --- a/src/components/forms/Factory/RCDynamicForm.jsx +++ b/src/components/forms/Factory/RCDynamicForm.jsx @@ -1,10 +1,8 @@ /* 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 { FormBox, FormFieldBox, @@ -12,11 +10,10 @@ import { 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 { useFormSubmission } from '../../../context/formHooks/useFormSubmission'; +import React, { useEffect, useState } from 'react'; import useBreakpoint from 'context/hooks/useBreakPoint'; -import ReusableLoadingButton from 'layout/REUSABLE_COMPONENTS/ReusableLoadingButton'; -import { Tooltip } from '@mui/joy'; +import RCLoadingButton from 'layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON'; 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); @@ -106,11 +103,14 @@ 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..a0a9631 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,10 +22,9 @@ 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, @@ -65,7 +64,6 @@ const RCInput = forwardRef( updateEntityField('decks', 'deckId', 'tags', updatedTags); // Persist tags update }; const { newPalette, functions } = theme; - const { grey, transparent, @@ -73,7 +71,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 +89,6 @@ const RCInput = forwardRef( color: colorError.main, }, }); - - // styles for the input with success={true} const successStyles = () => ({ backgroundImage: // eslint-disable-next-line max-len diff --git a/src/components/forms/customerCheckoutForm/CustomerForm.js b/src/components/forms/customerCheckoutForm/CustomerForm.js index 90eb4da..27b5c78 100644 --- a/src/components/forms/customerCheckoutForm/CustomerForm.js +++ b/src/components/forms/customerCheckoutForm/CustomerForm.js @@ -1,9 +1,9 @@ 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 StripeCheckoutModal from 'dialogs/stripeModal/StripeCheckoutModal'; import { ModalContext } from 'context/ModalContext/ModalContext'; -import CartSummary from '../../other/dataDisplay/CartSummary'; +import CartSummary from 'other/dataDisplay/CartSummary'; import { useMode } from 'context'; import useManager from 'context/useManager'; diff --git a/src/components/forms/formsConfig.jsx b/src/components/forms/formsConfig.jsx index 2aef381..80eba99 100644 --- a/src/components/forms/formsConfig.jsx +++ b/src/components/forms/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/components/forms/search/PaginationComponent.jsx b/src/components/forms/search/PaginationComponent.jsx index 9dda522..d789cf1 100644 --- a/src/components/forms/search/PaginationComponent.jsx +++ b/src/components/forms/search/PaginationComponent.jsx @@ -68,7 +68,7 @@ export default PaginationComponent; // 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'; +// import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY/RCTypography'; // const PaginationComponent = ({ // pageOptions, @@ -97,9 +97,9 @@ export default PaginationComponent; // /> // // ) : ( -// +// // Page {pageIndex + 1} of {pageOptions?.length} -// +// // )} // {canNextPage && ( // nextPage()}> @@ -121,9 +121,9 @@ p={!showTotalEntries && data?.length === 1 ? 0 : 3} > {showTotalEntries && ( - + Showing {entriesStart} to {entriesEnd} of {data?.length} entries - + )} {pageOptions?.length > 1 && ( @@ -150,9 +150,9 @@ p={!showTotalEntries && data?.length === 1 ? 0 : 3} ) : ( - + {customizedPageOptions[pageIndex]} - + )} {canNextPage && ( diff --git a/src/components/forms/search/SearchComponent.jsx b/src/components/forms/search/SearchComponent.jsx index b6124a5..022ed19 100644 --- a/src/components/forms/search/SearchComponent.jsx +++ b/src/components/forms/search/SearchComponent.jsx @@ -3,18 +3,17 @@ import React, { useEffect, useState } 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 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 '../formsConfig'; -import SearchIcon from '@mui/icons-material/Search'; 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(); @@ -38,10 +37,9 @@ const SearchComponent = (pageContext) => { return ( - { }), }} > - { }} > Search Cards - + { }} /> - + ({ padding: theme.spacing(3), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, background: theme.palette.greenAccent.light, boxShadow: theme.shadows[3], margin: 'auto', 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 93% rename from src/components/forms/hooks/useFormSubmission.jsx rename to src/context/formHooks/useFormSubmission.jsx index 3521ef8..992cd7d 100644 --- a/src/components/forms/hooks/useFormSubmission.jsx +++ b/src/context/formHooks/useFormSubmission.jsx @@ -1,5 +1,8 @@ import { useCallback, useState } from 'react'; -import { handleValidation, zodSchemas } from '../formsConfig'; +import { + handleValidation, + zodSchemas, +} from '../../components/forms/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 93% rename from src/components/forms/hooks/useRCFormHook.jsx rename to src/context/formHooks/useRCFormHook.jsx index baa958a..ee0a60e 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 '../../components/forms/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/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/baseMenuItems.jsx b/src/data/baseMenuItems.jsx index 9c2a860..3f5b63c 100644 --- a/src/data/baseMenuItems.jsx +++ b/src/data/baseMenuItems.jsx @@ -4,7 +4,7 @@ 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 }) => [ 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/prepareTableData.jsx b/src/data/prepareTableData.jsx index 984f295..6c42262 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) { diff --git a/src/data/route-config.jsx b/src/data/route-config.jsx index 0797beb..fc93f36 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 }, diff --git a/src/index.js b/src/index.js index 160bca1..5e25a93 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'; @@ -8,7 +7,7 @@ import { register, unregister } from './serviceWorker'; 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'; @@ -34,16 +33,23 @@ const HelmetMetadata = () => ( 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={(error, info) => console.error('Error:', error, 'Info:', info)} + // 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..3821535 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 { 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 { 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..f8f17a3 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx @@ -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') { @@ -335,83 +333,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 +341,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..905a219 --- /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.string, + 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..0c19bc2 --- /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 + : greenAccent.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/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..69a1e5f 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'; @@ -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..a53d77f 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx @@ -1,5 +1,5 @@ import { Typography, Box } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from '../context'; const RCHeader = ({ title, subtitle }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem.jsx index bd45f6e..d8864d4 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Grid, CardContent, useMediaQuery, Skeleton } from '@mui/material'; -import MDTypography from '../MDTYPOGRAPHY/MDTypography'; -import { useMode } from '../../../context'; +import { Grid, CardContent, Skeleton } from '@mui/material'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import useBreakpoint from 'context/hooks/useBreakPoint'; +import { useMode } from 'context'; const RCInfoItem = ({ label, @@ -12,7 +12,6 @@ const RCInfoItem = ({ }) => { 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..f381eb4 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx @@ -1,7 +1,7 @@ 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 DeckBuilderIcon from '../../../data/DeckBuilderIcon'; // Import DeckBuilderIcon import { ROUTE_CONFIG } from 'data/route-config'; // ==============================|| 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 index d4dcecd..1c9a4d9 100644 --- a/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx +++ b/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { LoadingButton } from '@mui/lab'; import AdjustSharpIcon from '@mui/icons-material/AdjustSharp'; -import { useMode } from '../../context'; +import { useMode } from 'context'; const ReusableLoadingButton = ({ loading, 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/unique/IconStatWrapper.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx similarity index 77% rename from src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx rename to src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx index 61e20ca..dc4513b 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx @@ -8,27 +8,27 @@ 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}; + font-size: ${({ theme }) => theme.spacing(6)}; color: ${({ textColor }) => textColor}; word-wrap: break-word; `; const StyledValue = styled(Typography)` - font-size: ${({ theme }) => theme.lenLg2}; + font-size: ${({ theme }) => theme.spacing(8)}; color: ${({ textColor }) => textColor}; word-wrap: break-word; `; @@ -55,13 +55,20 @@ 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 ( 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/unique/SimpleSectionHeader.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/SimpleSectionHeader.jsx similarity index 56% rename from src/layout/REUSABLE_COMPONENTS/unique/SimpleSectionHeader.jsx rename to src/layout/REUSABLE_COMPONENTS/layout-utils/SimpleSectionHeader.jsx index 41b77cc..fbe63e9 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/SimpleSectionHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/SimpleSectionHeader.jsx @@ -2,17 +2,11 @@ import React from 'react'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import { useMode } from 'context'; -import MDTypography from '../MDTYPOGRAPHY/MDTypography'; -import { useMediaQuery, useTheme } from '@mui/material'; -import MDBox from '../MDBOX'; +import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import styled from 'styled-components'; -const FlexContainer = styled(Box)` - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: ${({ theme }) => 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..808cb5d 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx @@ -1,5 +1,4 @@ import { Box, Card, CardContent, Typography, useTheme } from '@mui/material'; -import ProgressCircle from '../system-utils/ProgressCircle'; import { useMode } from 'context'; import MDBox from '../MDBOX'; @@ -17,7 +16,7 @@ const StatBox = ({ title, subtitle, icon, progress, increase, wrapIcon }) => { sx={{ width: '100%', p: '20px', - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, border: 'none', maxHeight: '135px', }} @@ -62,13 +61,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/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_STYLED_COMPONENTS/ReusableStyledComponents.jsx b/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx index 77f724b..1dec5c0 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,7 +39,7 @@ export const StyledContainerBoxSecondary = styled(Box)(({ theme }) => ({ flexDirection: 'column', marginTop: theme.spacing(2), padding: theme.spacing(3), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, background: theme.palette.greenAccent.lighterSeaGreen, boxShadow: theme.shadows[10], marginBottom: theme.spacing(4), @@ -51,7 +51,7 @@ 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, @@ -62,7 +62,7 @@ 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, color: theme.palette.text.primary, @@ -104,7 +104,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 +142,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,7 +156,7 @@ export const DialogContentsBox = styled(Box)(({ theme }) => ({ height: '100%', width: '100%', // minWidth: '500px', - // borderRadius: theme.shape.borderRadius, + // borderRadius: theme.borders.borderRadius.md, background: theme.palette.greenAccent.evenLighter, boxShadow: theme.shadows[10], transition: 'all 0.3s ease-in-out', // smooth all transitions @@ -236,7 +236,7 @@ export const StyledTextField = styled(TextField)(({ theme }) => ({ borderWidth: '2px', // or other width as you like }, }, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, color: theme.palette.greenAccent.dark, width: '100%', backgroundColor: theme.palette.greenAccent.contrastText, @@ -276,7 +276,7 @@ export const CardIconWrapper = styled('div')(({ theme }) => ({ })); 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, display: 'flex', @@ -304,7 +304,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')]: { @@ -325,7 +325,7 @@ export const StyledCard = styled(Card)(({ theme }) => ({ maxHeight: '100%', // Adjusted for better height management flexGrow: 1, backgroundColor: theme.palette.greenAccent.contrastText, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, justifyContent: 'center', transition: 'transform 0.3s ease-in-out', '&:hover': { @@ -350,7 +350,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,7 +367,7 @@ 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, color: theme.palette.text.secondary, @@ -386,7 +386,7 @@ export const ResponsiveSquare = styled(Box)(({ theme }) => ({ width: '100%', paddingTop: '100%', backgroundColor: theme.palette.greenAccent.contrastText, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], display: 'flex', flexGrow: 1, @@ -397,11 +397,11 @@ export const ResponsiveSquare = styled(Box)(({ theme }) => ({ 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, + 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, }, @@ -432,7 +432,7 @@ export const StyledSkeletonCard = styled(Card)(({ theme }) => ({ // width: 'auto', maxHeight: '14vh', backgroundColor: theme.palette.greenAccent.contrastText, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], transition: 'transform 0.3s ease-in-out', '&:hover': { @@ -441,7 +441,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, diff --git a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx index 3ce3c83..75c45bc 100644 --- a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx +++ b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx @@ -2,7 +2,7 @@ import { Box, 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%', 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 73% rename from src/layout/collection/SelectCollectionList.jsx rename to src/layout/collection/CollectionsViewLayout/index.jsx index 84f907b..938841d 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 ( - @@ -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 85% rename from src/layout/collection/statItems/PricedCardList.jsx rename to src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx index 084ddb0..5439fd9 100644 --- a/src/layout/collection/statItems/PricedCardList.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx @@ -1,12 +1,12 @@ -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(); @@ -35,7 +35,7 @@ const PricedCardList = () => { @@ -47,7 +47,7 @@ const PricedCardList = () => { p: theme.spacing(2), background: grey, border: theme.palette.chartTheme.greenAccent.dark, - borderRadius: theme.shape.borderRadius, + 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 86% rename from src/layout/collection/statItems/ValuDistributionCircle.jsx rename to src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx index 78a913a..4e451a5 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,8 +10,8 @@ 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'; @@ -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, @@ -113,7 +113,7 @@ const ValuDistributionCircle = () => { paddingVariant={theme.spacing(2)} sx={{ color: colors.greenAccent.light, - borderRadius: theme.shape.borderRadiusLarge, + borderRadius: theme.borders.borderRadius.mdLarge, }} /> @@ -140,7 +140,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 80% rename from src/layout/collection/CollectionPortfolioHeader.jsx rename to src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx index 75f15d7..cbfe3f4 100644 --- a/src/layout/collection/CollectionPortfolioHeader.jsx +++ b/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; import { IconButton, Box, Grid, Grow, Card } 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 uniqueTheme from 'layout/REUSABLE_COMPONENTS/unique/uniqueTheme'; +import IconStatWrapper from 'layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper'; +import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox'; +import { collectionPortfolioHeaderItems } from 'data/collectionPortfolioHeaderItems'; const HeaderItem = ({ icon, label, value, delay }) => { return ( diff --git a/src/layout/collection/MyPortfolioLineChart.jsx b/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx similarity index 85% rename from src/layout/collection/MyPortfolioLineChart.jsx rename to src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx index 866634c..aa4cc03 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,7 +20,7 @@ const TooltipLayer = ({ points }) => { ); }; -const MyResponsiveLine = ({ +const MyPortfolioLineChart = ({ data, // tickValues, validMarkers, @@ -31,7 +30,6 @@ const MyResponsiveLine = ({ 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 [activeCardIndex, setActiveCardIndex] = useState(0); const { collectionMetaData } = useManager(); const handleSlideChange = (swiper) => setActiveCardIndex(swiper.realIndex); @@ -68,7 +60,7 @@ export const TopCardsDisplayRow = () => { { }} > - {/* */} { } /> - {/* - {card.name} - */} - {/* - - check_circle - - - } - /> */} { style={{ borderRadius: 0, width: 'auto', - // height: 'auto', mx: 'auto', }} /> @@ -193,7 +141,6 @@ export const TopCardsDisplayRow = () => { /> - {/* */} @@ -201,3 +148,5 @@ export const TopCardsDisplayRow = () => { ); }; + +export default TopCardsSwiper; diff --git a/src/layout/collection/ChartGridLayout.jsx b/src/layout/collection/PortfolioViewLayout/index.jsx similarity index 77% rename from src/layout/collection/ChartGridLayout.jsx rename to src/layout/collection/PortfolioViewLayout/index.jsx index 07eb3e0..ce2c979 100644 --- a/src/layout/collection/ChartGridLayout.jsx +++ b/src/layout/collection/PortfolioViewLayout/index.jsx @@ -1,30 +1,26 @@ 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 'components/forms/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'; 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 { @@ -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. + + ) : ( @@ -210,38 +186,27 @@ const ChartGridLayout = () => { ); }; -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,7 +225,6 @@ const FormSelectorRow = React.memo(({ isXs }) => { , false, true - // ); }); FormSelectorRow.displayName = 'FormSelectorRow'; @@ -345,7 +308,7 @@ const ChartAreaComponent = React.memo(() => { - { return ( - + { justifyContent: 'center', }} > - + - + ); }); TopCardsDisplayRowComponent.displayName = 'TopCardsDisplayRowComponent'; @@ -429,11 +386,9 @@ 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( { 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..58ad844 100644 --- a/src/layout/deck/DeckListItem.jsx +++ b/src/layout/deck/DeckListItem.jsx @@ -9,18 +9,18 @@ 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 'components/forms/formsConfig'; +import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; +import useManager from 'context/useManager'; 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(() => { diff --git a/src/layout/deck/deckData.jsx b/src/layout/deck/deckData.jsx index fc0532b..0a1f892 100644 --- a/src/layout/deck/deckData.jsx +++ b/src/layout/deck/deckData.jsx @@ -1,4 +1,4 @@ -import { roundToNearestTenth } from '../../context/Helpers'; +import { roundToNearestTenth } from 'context/Helpers'; function prepareDeckData(deck, cards) { const genData = { name: deck?.name, diff --git a/src/layout/deck/index.jsx b/src/layout/deck/index.jsx index ab52412..8b5310d 100644 --- a/src/layout/deck/index.jsx +++ b/src/layout/deck/index.jsx @@ -13,18 +13,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(); @@ -200,6 +200,7 @@ const DeckBuilder = () => { aria-label="deck-tabs" variant="scrollable" scrollButtons="auto" + theme={theme} > {deckTabs} diff --git a/src/layout/home/FeatureCardsSection.jsx b/src/layout/home/FeatureCardsSection.jsx index e743b8b..62d6362 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 }) => { diff --git a/src/layout/home/HeroChartSection.jsx b/src/layout/home/HeroChartSection.jsx index 1fcd61f..c696c4f 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 ( @@ -153,49 +174,52 @@ 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 87% rename from src/layout/navigation/Navigation.jsx rename to src/layout/navigation/index.jsx index ec85a0f..98cbc7a 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 RCLogoSection from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection'; import { Avatar, Box, @@ -26,13 +26,14 @@ import { 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 { baseMenuItems } from 'data/baseMenuItems'; +import rgba from 'assets/themes/functions/rgba'; +import useManageCookies from 'context/hooks/useManageCookies'; +import ReusableLoadingButton from 'layout/REUSABLE_COMPONENTS/ReusableLoadingButton'; 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'; const Navigation = () => { const { theme } = useMode(); const navigate = useNavigate(); @@ -267,25 +268,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..a920f4b 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, diff --git a/src/layout/profile/NotificationSection.js/index.js b/src/layout/profile/NotificationSection.js/index.js index 6336aba..1037f4d 100644 --- a/src/layout/profile/NotificationSection.js/index.js +++ b/src/layout/profile/NotificationSection.js/index.js @@ -30,7 +30,7 @@ import Transitions from 'ui-component/extended/Transitions'; import NotificationList from './NotificationList'; // assets -import { IconBell } from '../../node_modules/@tabler/icons-react'; +import { IconBell } from 'node_modules/@tabler/icons-react'; // notification status options const status = [ diff --git a/src/layout/profile/index.jsx b/src/layout/profile/index.jsx index 0785ae3..dbf2bf8 100644 --- a/src/layout/profile/index.jsx +++ b/src/layout/profile/index.jsx @@ -7,12 +7,12 @@ import TwitterIcon from '@mui/icons-material/Twitter'; import InstagramIcon from '@mui/icons-material/Instagram'; // Images -import DashboardLayout from '../REUSABLE_COMPONENTS/layout-utils/DashBoardLayout'; -import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; +import DashboardLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import Header from './sub-components/Header'; import PlatformSettings from './sub-components/Settings'; import ProfileInfoCard from './sub-components/ProfileInfoCard'; -import { useMode } from '../../context'; +import { useMode } from 'context'; function Overview() { const { theme } = useMode(); @@ -23,7 +23,6 @@ function Overview() { width: '100%', }} > - {/* */}
- + {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..8e45c3a 100644 --- a/src/pages/CartPage.js +++ b/src/pages/CartPage.js @@ -23,7 +23,7 @@ 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 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} > ({ 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 @@ -85,7 +85,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..b4287c4 100644 --- a/src/pages/LoginPage.jsx +++ b/src/pages/LoginPage.jsx @@ -1,101 +1,5 @@ -// 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'; @@ -106,7 +10,7 @@ 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], marginLeft: theme.spacing(2), width: 300, @@ -143,7 +47,7 @@ const LoginPage = () => { const { isLoggedIn } = getCookie(['isLoggedIn']); return ( - + { {!isLoggedIn && ( <> - )} - + ); };