From 6f1fe5f52e72834be1c27e77dd94a6295c67d1e4 Mon Sep 17 00:00:00 2001 From: Reed Vogt Date: Sat, 4 May 2024 01:15:21 -0700 Subject: [PATCH 1/2] 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 && ( <> - )} - + ); }; From 2ad104fb1c75237d68e39660eb3c79f4b7c36076 Mon Sep 17 00:00:00 2001 From: Reed Vogt Date: Sat, 4 May 2024 08:44:48 -0700 Subject: [PATCH 2/2] cleaned up some code and simplified theme --- .gitignore | 1 + .hintrc | 8 +- jsconfig.json | 2 +- src/App.js | 2 +- src/assets/css/index.css | 13 +- src/assets/css/page.css | 2 +- src/assets/themes/base/colors.jsx | 25 +- .../themes/base/customColorPalettes.jsx | 293 +++------------ src/assets/themes/base/typography.jsx | 336 +++++++----------- src/assets/themes/components/buttons/holo.jsx | 2 +- .../themes/components/buttons/outlined.jsx | 6 +- src/assets/themes/components/card/index.jsx | 4 +- .../themes/components/forms/switchButton.jsx | 7 +- src/assets/themes/components/index.jsx | 1 - src/assets/themes/components/tabs/index.jsx | 49 ++- src/assets/themes/components/tabs/tab.jsx | 41 ++- src/assets/themes/functions/hexToRgba.jsx | 7 + src/assets/themes/themeSettings.jsx | 22 +- src/components/cards/CardDetailsContainer.jsx | 2 +- src/components/cards/CardMediaSection.js | 25 +- src/components/cards/CardToolTip.jsx | 7 +- src/components/cards/GenericCard.jsx | 17 - src/components/dialogs/CollectionDialog.jsx | 10 +- src/components/dialogs/DeckDialog.jsx | 4 +- src/components/dialogs/StripeCheckoutModal.js | 67 ---- .../forms/Factory/RCDynamicForm.jsx | 22 +- src/components/forms/Factory/RCInput.jsx | 8 +- .../customerCheckoutForm/CustomerForm.js | 95 ----- .../CustomerInfoFields.jsx | 20 -- .../customerCheckoutForm/FormTextField.js | 29 -- .../forms/customerCheckoutForm/StripeForm.js | 78 ---- .../forms/search/PaginationComponent.jsx | 114 ------ .../forms/search/SearchComponent.jsx | 7 +- src/components/forms/search/SearchResults.jsx | 4 +- .../forms/search/SearchSettings.jsx | 67 ---- src/context/formHooks/useFormSubmission.jsx | 5 +- src/context/formHooks/useRCFormHook.jsx | 2 +- src/context/useManager.jsx | 4 +- src/data/HelmetMetaData.jsx | 39 ++ src/data/baseMenuItems.jsx | 4 +- src/data/collectionPortfolioHeaderItems.jsx | 6 +- .../forms => data}/formsConfig.jsx | 0 src/data/index.jsx | 27 ++ src/data/prepareTableData.jsx | 4 +- src/data/route-config.jsx | 4 +- src/index.js | 24 +- .../Configurator/index.jsx | 2 +- .../GenericActionButtons.jsx | 2 +- .../REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx | 10 +- .../REUSABLE_COMPONENTS/MDBOX/index.jsx | 6 +- .../RCBUTTON/RCButtonRoot.jsx | 23 +- .../REUSABLE_COMPONENTS/RCCARD/index.jsx | 2 +- .../RCLOADINGBUTTON/RCLoadingButtonRoot.jsx | 2 +- .../RCWRAPPEDICON/RCWrappedIconRoot.jsx | 4 +- .../REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx | 6 +- .../REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx | 6 +- .../RC_OTHER/RCInfoItem.jsx | 4 +- .../RC_OTHER/RCLogoSection.jsx | 2 +- .../ReusableLoadingButton.jsx | 65 ---- .../layout-utils/BoxHeader.jsx | 11 +- .../layout-utils/IconStatWrapper.jsx | 16 +- .../layout-utils/PageLayout.jsx | 5 - .../layout-utils/StatBox.jsx | 8 +- .../system-utils/LoadingOverlay.jsx | 1 - .../unique/uniqueTheme.jsx | 73 ---- .../ReusableStyledComponents.jsx | 45 ++- .../SpecificStyledComponents.jsx | 18 +- .../CollectionsViewLayout/index.jsx | 2 +- .../CollectionsViewLayout/stats/PriceList.jsx | 6 +- .../stats/ValueCircle.jsx | 11 +- .../CollectionPortfolioHeader.jsx | 10 +- .../MyPortfolioLineChart.jsx | 6 +- .../PortfolioViewLayout/TopCardsSwiper.jsx | 24 +- .../collection/PortfolioViewLayout/index.jsx | 40 +-- src/layout/collection/index.jsx | 2 +- src/layout/deck/DeckListItem.jsx | 14 +- src/layout/deck/deckData.jsx | 28 -- src/layout/deck/index.jsx | 67 ++-- src/layout/home/FeatureCardsSection.jsx | 2 +- src/layout/home/HeroChartSection.jsx | 11 +- src/layout/navigation/index.jsx | 19 +- .../NotificationList.jsx | 2 +- src/pages/CartPage.js | 8 +- src/pages/CollectionPage.js | 8 +- src/pages/DeckBuilderPage.js | 6 +- src/pages/HomePage.js | 5 +- src/pages/LoginDialog.jsx | 5 +- src/pages/LoginPage.jsx | 42 +-- src/pages/ProfilePage.js | 4 +- src/pages/StorePage.js | 145 ++++---- 90 files changed, 698 insertions(+), 1596 deletions(-) delete mode 100644 src/components/dialogs/StripeCheckoutModal.js delete mode 100644 src/components/forms/customerCheckoutForm/CustomerForm.js delete mode 100644 src/components/forms/customerCheckoutForm/CustomerInfoFields.jsx delete mode 100644 src/components/forms/customerCheckoutForm/FormTextField.js delete mode 100644 src/components/forms/customerCheckoutForm/StripeForm.js delete mode 100644 src/components/forms/search/SearchSettings.jsx create mode 100644 src/data/HelmetMetaData.jsx rename src/{components/forms => data}/formsConfig.jsx (100%) create mode 100644 src/data/index.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx delete mode 100644 src/layout/REUSABLE_COMPONENTS/unique/uniqueTheme.jsx delete mode 100644 src/layout/deck/deckData.jsx diff --git a/.gitignore b/.gitignore index a1441a3..4fa3ceb 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ package-lock.json /src/assets/cards # production /build +/future-additions # misc .DS_Store diff --git a/.hintrc b/.hintrc index 6746605..036a646 100644 --- a/.hintrc +++ b/.hintrc @@ -11,5 +11,11 @@ ] } ] - } + }, + "browserslist": [ + "defaults", + "not ie 11", + "not ios_saf <= 14.8", + "not safari <= 14.1" + ] } \ No newline at end of file diff --git a/jsconfig.json b/jsconfig.json index cd3bb1d..f7e97f8 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "baseUrl": "src" }, - "include": ["src"], + "include": ["src", "future-additions/SearchSettings.jsx"], "exclude": ["node_modules, build"], "paths": { "/*": ["src/*"] diff --git a/src/App.js b/src/App.js index 67610e7..fa49743 100644 --- a/src/App.js +++ b/src/App.js @@ -12,8 +12,8 @@ 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'; +import { ROUTE_CONFIG } from 'data'; // ==============================|| APP ||============================== // const LazyRoute = ({ componentName, ...rest }) => { diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 9cc181a..d41a560 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -11,7 +11,7 @@ --primary: #6a59ff; --white: #ffffff; --bg: #f5f5f5; - --button-bg-color: #1976d2; /* Original color, but let's introduce a blue scheme */ + /* --button-bg-color: #1976d2; Original color, but let's introduce a blue scheme */ --button-hover-bg-color: #4a6da7; /* Subtle blue for hover state */ --button-hover-border-color: #34597f; /* A darker blue for border on hover */ --button-border-color: #6a59ff; /* Initial border color */ @@ -101,8 +101,8 @@ body { form { border-radius: 15px; - backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.13); justify-content: center; align-items: center; @@ -163,8 +163,8 @@ button { .dialog-login { border-radius: 15px; - backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.13); justify-content: center; align-items: center; @@ -196,8 +196,9 @@ button { .hero-section-container { background: rgba(189, 181, 181, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(5px); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 25px; /* padding: 30px 0px; */ @@ -306,9 +307,9 @@ button { /* } */ @media (max-width: 500px) { - .swiper_container { + /* .swiper_container { /* height: 47rem; */ - } + /* } */ */ .swiper-slide { width: 28rem !important; /* height: 36rem !important; */ diff --git a/src/assets/css/page.css b/src/assets/css/page.css index 237ec2e..f8f6dc1 100644 --- a/src/assets/css/page.css +++ b/src/assets/css/page.css @@ -1,5 +1,5 @@ .gradient-background { - background: linear-gradient(180deg, #0172af, #74febd); + /* background: linear-gradient(180deg, #0172af, #74febd); */ background-size: 120% 120%; animation: gradient-animation 8s ease infinite; } diff --git a/src/assets/themes/base/colors.jsx b/src/assets/themes/base/colors.jsx index 25428a1..7463ebd 100644 --- a/src/assets/themes/base/colors.jsx +++ b/src/assets/themes/base/colors.jsx @@ -13,10 +13,8 @@ import { primary, secondary, grey, - greenAccent, redAccent, blueAccent, - customDarkTheme, white, black, myGradients, @@ -27,10 +25,8 @@ const colors = { default: '#f0f2f5', paper: '#fff', }, - greenAccent: greenAccent, redAccent: redAccent, blueAccent: blueAccent, - customDarkTheme: customDarkTheme, // COLORS FOR CARD RARITY OVERLAY rarity, // CARD RARITY OVERLAYS @@ -61,11 +57,11 @@ const colors = { main: '#f0f2f5', focus: '#f0f2f5', }, - dark: { - main: '#344767', - focus: '#2c3c58', - state: '#191919', - }, + // dark: { + // main: '#344767', + // focus: '#2c3c58', + // state: '#191919', + // }, gradients: { primary: { main: '#EC407A', @@ -229,6 +225,17 @@ const colors = { tabs: { indicator: { boxShadow: '#ddd' }, }, + inputColors: { + borderColor: { main: '#d2d6da', focus: '#35d1f5' }, + boxShadow: '#81e3f9', + error: '#fd5c70', + success: '#66d432', + }, + dark: { + main: '#344767', + focus: '#344767', + state: '#191919', + }, // inputBorderColor: { // main: '#d2d6da', // hover: '#b3b9c2', diff --git a/src/assets/themes/base/customColorPalettes.jsx b/src/assets/themes/base/customColorPalettes.jsx index 77f4a68..01a8838 100644 --- a/src/assets/themes/base/customColorPalettes.jsx +++ b/src/assets/themes/base/customColorPalettes.jsx @@ -22,7 +22,10 @@ const warning = { secondary: '#ff5722', }; const success = { - light: '#70d8bd', // '#4cceac', + light: '#70d8bd', + main_light: '#4cceac', + main_lighter: '#b7ebde', + main_emerald: '#06d6a0ff', main: '#18b984', secondary: '#5CDB95', tertiary: '#5fe7bb', @@ -47,7 +50,6 @@ const grey = { simpleGrey: '#333', clearGrey: hexToRgba('#444', 0.6), black: '#040509', - white: '#f2f0f0', blueGrey: '#141b2d', lightBlueGrey: '#1F2A40', darkest: '#141414', @@ -56,7 +58,6 @@ const grey = { default: '#525252', light: '#666666', lighter: '#858585', - lighter2: '#8c8c8c', lightest: '#a3a3a3', evenLighter: '#c2c2c2', contrastText: '#e0e0e0', @@ -67,45 +68,60 @@ const white = { focus: '#E8E8E8', }; const black = { - light: '#212121', + darker: '#040509', + dark: '#0B0C0E', + darkest: '#141414', main: '#1C1C1C', + light: '#212121', focus: '#26242C', - dark: '#0B0C0E', }; -const greenAccent = { - crystalGreen: hexToRgba('#4cceac', 0.6), - darkCerulean: hexToRgba('#0d5d96', 0.9), - greyGreen: '#A5C8D2', - greenBlue: hexToRgba('#4e93a6', 0.8), - pureGreenBlue: '#4e93a6', - emerald: '#06d6a0ff', - lighterSeaGreen: '#8ec7b6', - lightSeaGreen: '#0cb0a9ff', - darkest: '#0f2922', // Assuming this is the darkest - darker: '#1e5245', // Next darker shade - dark: '#2e7c67', // Next dark shade - default: '#3da58a', // Default considered here as the mid-point - main: '#18b984', - focus: rgba('#18b984' || 'white', 0.15), - light: '#4cceac', // Light shade - lighter: '#70d8bd', // Lighter shade - lightest: '#94e2cd', // Lightest shade - evenLighter: '#b7ebde', // Even lighter than the lightest - contrastText: '#dbf5ee', // Most contrasting or lightest, could be adjusted - secondary: '#5CDB95', +const greenPalette = { + 50: '#b7ebde', // Even lighter than the lightest + 100: '#94e2cd', // Lightest shade + 200: '#70d8bd', // Lighter shade + 300: '#4cceac', // Light shade, also 'crystalGreen' with opacity adjusted for full hex + 400: '#3da58a', // Default, mid-light + 500: '#18b984', // Main green used in the primary color + 600: '#159b76', // Slightly darker and less saturated than 500 + 700: '#12875f', // Darker and more muted green + 800: '#0f7348', // Dark, rich green + 900: '#2e7c67', // Darkest shade, used for the deepest contrast + contrastText: '#dbf5ee', // Lightest contrast text + main: '#18b984', // Primary main color + focus: 'rgba(24, 185, 132, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states +}; +const redPalette = { + 50: '#f8dcdb', // Even lighter than the lightest + 100: '#f1b9b7', // Lightest + 200: '#e99592', // Lighter + 300: '#e2726e', // Light shade + 400: '#db4f4a', // Default, main used color + 500: '#af3f3b', // Mid-dark, more saturation + 600: '#832f2c', // Darker and more intense + 700: '#58201e', // Even darker, rich depth + 800: '#2c100f', // Darkest shade, for deep contrast + contrastText: '#f8dcdb', // Lightest contrast text + main: '#db4f4a', // Primary main color + focus: 'rgba(219, 79, 74, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states +}; +const bluePalette = { + 50: '#e1e2fe', // Even lighter than the lightest + 100: '#c3c6fd', // Lightest + 200: '#a4a9fc', // Lighter + 300: '#868dfb', // Light shade + 400: '#6870fa', // Default, main used color + 500: '#535ac8', // Mid-dark, more saturation + 600: '#3e4396', // Darker and more intense + 700: '#2a2d64', // Even darker, rich depth + 800: '#151632', // Darkest shade, for deep contrast + contrastText: '#e1e2fe', // Lightest contrast text + main: '#6870fa', // Primary main color + focus: 'rgba(104, 112, 250, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states }; -// const greenPalette = { -// 50: '#b7ebde', // Even lighter than the lightest -// 100: '#94e2cd', // Lightest shade -// 200: '#70d8bd', // Lighter shade -// 300: '#4cceac', // Light shade, also 'crystalGreen' with opacity adjusted for full hex -// 400: '#3da58a', // Default, mid-light -// 500: '#18b984', // Main green used in the primary color -// 600: '#159b76', // Slightly darker and less saturated than 500 -// 700: '#12875f', // Darker and more muted green -// 800: '#0f7348', // Dark, rich green -// 900: '#2e7c67' // Darkest shade, used for the deepest contrast -// }; + const redAccent = { darkest: '#2c100f', darker: '#58201e', @@ -176,77 +192,9 @@ const secondary = { const chartTheme = { primary, grey, - greenAccent, redAccent, blueAccent, }; -const customDarkTheme = { - text: { - light: '#e0e0e0', - dark: '#141414', - default: '#3d3d3d', - contrastText: '#fff', - color: '#70d8bd', - }, - background: { - grey: { - darkest: '#141414', - darker: '#292929', - dark: '#3d3d3d', - default: '#525252', - light: '#666666', - lighter: '#858585', - lightest: '#a3a3a3', - evenLighter: '#c2c2c2', - contrastText: '#e0e0e0', - }, - primary: { - darkest: '#040509', - darker: '#040509', - dark: '#040509', - default: '#f2f0f0', - light: '#141b2d', - lighter: '#1F2A40', - lightest: '#727681', - evenLighter: '#8c8c8c', - contrastText: '#e0e0e0', - }, - secondary: {}, - greenAccent: { - darkest: '#0f2922', // Assuming this is the darkest - darker: '#1e5245', // Next darker shade - dark: '#2e7c67', // Next dark shade - default: '#3da58a', // Default considered here as the mid-point - light: '#4cceac', // Light shade - lighter: '#70d8bd', // Lighter shade - lightest: '#94e2cd', // Lightest shade - evenLighter: '#b7ebde', // Even lighter than the lightest - contrastText: '#dbf5ee', // Most contrasting or lightest, could be adjusted - }, - redAccent: { - darkest: '#2c100f', - darker: '#58201e', - dark: '#832f2c', - default: '#af3f3b', - light: '#db4f4a', - lighter: '#e2726e', - lightest: '#e99592', - evenLighter: '#f1b9b7', - contrastText: '#f8dcdb', - }, - blueAccent: { - darkest: '#151632', - darker: '#2a2d64', - dark: '#3e4396', - default: '#535ac8', - light: '#6870fa', - lighter: '#868dfb', - lightest: '#a4a9fc', - evenLighter: '#c3c6fd', - contrastText: '#e1e2fe', - }, - }, -}; const rarity = { common: '#C0C0C0', // Silver uncommon: '#B8860B', // DarkGoldenRod @@ -308,143 +256,10 @@ export { action, primary, secondary, - customDarkTheme, grey, - greenAccent, redAccent, blueAccent, myGradients, white, black, }; -// const backgroundA = { -// darkest: '#2e7c67', // '#70d8bd', -// darker: '#3da58a', -// dark: '#4cceac', -// default: '#70d8bd', // '#4cceac', -// light: '#94e2cd', -// lighter: '#b7ebde', -// lightest: '#dbf5ee', -// contrastTextA: '#FBFAF2', -// contrastTextB: '#333', -// contrastTextC: '#555', -// contrastTextD: '#000', -// hover: '#4cceac', -// }; -// main: '#4caf50', -// dark: '#388e3c', -// main: '#4cceac', -// focus: '#4cceac', -// contrastText: colorTextForDark, -// hoverContrastText: '#111', -// error: { -// main: colorsA.redAccent[500], -// dark: colorsA.redAccent[700], -// contrastText: '#fff', -// }, -// warning: { -// main: colorsA.redAccent[500], -// dark: colorsA.redAccent[700], -// light: colorsA.redAccent[200], -// }, -// success: { -// light: colorsA.greenAccent[100], -// lighter: colorsA.greenAccent[200], -// evenLighter: colorsA.greenAccent[300], -// lightish: colorsA.greenAccent[400], -// main: colorsA.greenAccent[500], -// dark: colorsA.greenAccent[200], -// darker: colorsA.greenAccent[600], -// contrastText: '#fff', -// hoverContrastText: '#111', -// }, -// info: { -// main: colorsA.blueAccent[500], -// dark: colorsA.blueAccent[700], -// light: colorsA.blueAccent[200], -// contrastText: '#fff', -// }, -// text: { -// primary: colorsA.grey[900], -// secondary: colorsA.grey[300], -// tertiary: colorsA.grey[100], -// }, -// divider: 'white', -// action: { -// hover: colorsA.grey[800], -// disabled: colorsA.grey[200], -// }, -// const backgroundB = { -// darkest: '#111', -// darker: '#222', -// dark: '#333', -// default: '#444', -// light: '#555', -// lighter: '#666', -// lightest: '#777', -// contrastText: '#FBFAF2', -// }; -// const backgroundG = { -// darkest: '#073b4cff', // --midnight-green-- -// darker: '#0c637fff', // --cerulean-- -// dark: '#118ab2ff', // --blue-ncs-- -// default: '#0cb0a9ff', // --light-sea-green-- -// light: '#06d6a0ff', // --emerald-- -// lighter: '#91dacbff', // --tiffany-blue-- -// lightest: '#c8ede5ff', // --mint-green-- -// contrastText: '#fff', -// }; -// const backgroundGSecondary = { -// darkest: '#7f2e2eff', // --persian-plum-- -// darker: '#a63c3cff', // --pomegranate-- -// dark: '#cc4a4aff', // --flamingo-- -// default: '#e55e5eff', // --sunset-orange-- -// light: '#f4755fff', // --bittersweet-- -// lighter: '#f89a7dff', // --rajah-- -// lightest: '#facbb0ff', // --navajo-white-- -// contrastText: '#fff', -// }; -// const backgroundC = { -// darkest: hexToRgba(backgroundB.darkest, 0.9), -// darker: hexToRgba(backgroundB.darker, 0.8), -// dark: hexToRgba(backgroundB.dark, 0.7), -// default: hexToRgba(backgroundB.default, 0.6), -// light: hexToRgba(backgroundB.light, 0.5), -// lighter: hexToRgba(backgroundB.lighter, 0.4), -// lightest: hexToRgba(backgroundB.lightest, 0.3), -// }; -// const backgroundD = { -// darkest: hexToRgba(greenAccent.dark, 0.9), -// darker: hexToRgba(greenAccent.default, 0.7), -// dark: hexToRgba('#4cceac', 0.6), -// default: hexToRgba(greenAccent.lighter, 0.5), -// light: hexToRgba(greenAccent.lightest, 0.4), -// lighter: hexToRgba(backgroundA.lighter, 0.3), -// lightest: hexToRgba(greenAccent.contrastText, 0.2), -// }; -// const backgroundF = { -// darkest: hexToRgba(backgroundE.darkest, 0.9), -// darker: hexToRgba(backgroundE.darker, 0.8), -// dark: hexToRgba(backgroundE.dark, 0.7), -// default: hexToRgba(backgroundE.default, 0.6), -// main: hexToRgba(backgroundE.main, 0.5), -// focus: hexToRgba(backgroundE.focus, 0.4), -// light: hexToRgba(backgroundE.light, 0.5), -// lighter: hexToRgba(backgroundE.lighter, 0.4), -// lightest: hexToRgba(backgroundE.lightest, 0.3), -// }; -// const backgroundE = { -// darkest: '#0d5d96', // - colorname: 'dark-cerulean' - hex: '#0d5d96' - rgb: 'rgb(13, 93, 150)' - hsl: 'hsl(209, 84%, 32%)' -// darker: '#206d9b', // - colorname: 'dark-blue' - hex: '#206d9b -// dark: '#4e93a6', // - colorname: 'blue' - hex: '#4e93a6' - rgb: 'rgb(78, 147, 166)' - hsl: 'hsl(194, 35%, 47%)' -// default: '#7cb8b1', -// main: '#7cb8b1', -// focus: '#7cb8b1', -// light: '#8ec7b6', -// lightBlue: '#57909F', -// lighter: '#b7ebde', -// lighterBlue: '#7EACB9', -// lightest: '#dbf5ee', -// lightestBlue: '#A5C8D2', -// contrastText: '#FBFAF2', -// }; diff --git a/src/assets/themes/base/typography.jsx b/src/assets/themes/base/typography.jsx index bf7b38a..69b2253 100644 --- a/src/assets/themes/base/typography.jsx +++ b/src/assets/themes/base/typography.jsx @@ -1,39 +1,54 @@ import pxToRem from '../functions/pxToRem'; import colors from './colors'; -// Material Dashboard 2 React Helper Functions - const { dark } = colors; +// const baseProperties = { +// fontFamily: 'Poppins, sans-serif', +// fontWeightLighter: 100, +// fontWeightLight: 300, +// fontWeightRegular: 400, +// fontWeightMedium: 600, +// fontWeightBold: 700, + +// fontSize3XS: () => `clamp(${pxToRem(6)}, 1vw, ${pxToRem(8)})`, +// fontSize2XS: () => `clamp(${pxToRem(8)}, 1vw, ${pxToRem(10)})`, +// fontSizeXS: () => `clamp(${pxToRem(10)}, 1.25vw, ${pxToRem(12)})`, +// fontSizeSM: () => `clamp(${pxToRem(12)}, 1.5vw, ${pxToRem(14)})`, +// fontSizeMD: () => `clamp(${pxToRem(14)}, 1.75vw, ${pxToRem(16)})`, +// fontSizeLG: () => `clamp(${pxToRem(16)}, 2vw, ${pxToRem(18)})`, +// fontSizeXL: () => `clamp(${pxToRem(18)}, 2.25vw, ${pxToRem(20)})`, +// fontSize2XL: () => `clamp(${pxToRem(20)}, 2.5vw, ${pxToRem(24)})`, +// fontSize3XL: () => `clamp(${pxToRem(24)}, 2.75vw, ${pxToRem(30)})`, +// fontSize4XL: () => `clamp(${pxToRem(30)}, 3vw, ${pxToRem(36)})`, +// fontSize5XL: () => `clamp(${pxToRem(36)}, 3.25vw, ${pxToRem(42)})`, +// fontSize6XL: () => `clamp(${pxToRem(42)}, 3.5vw, ${pxToRem(48)})`, +// }; const baseProperties = { fontFamily: 'Poppins, sans-serif', - fontWeightLighter: 100, fontWeightLight: 300, fontWeightRegular: 400, - fontWeightMedium: 600, + fontWeightMedium: 500, fontWeightBold: 700, - - fontSize3XS: () => `clamp(${pxToRem(6)}, 1vw, ${pxToRem(8)})`, - fontSize2XS: () => `clamp(${pxToRem(8)}, 1vw, ${pxToRem(10)})`, - fontSizeXS: () => `clamp(${pxToRem(10)}, 1.25vw, ${pxToRem(12)})`, - fontSizeSM: () => `clamp(${pxToRem(12)}, 1.5vw, ${pxToRem(14)})`, - fontSizeMD: () => `clamp(${pxToRem(14)}, 1.75vw, ${pxToRem(16)})`, - fontSizeLG: () => `clamp(${pxToRem(16)}, 2vw, ${pxToRem(18)})`, - fontSizeXL: () => `clamp(${pxToRem(18)}, 2.25vw, ${pxToRem(20)})`, - fontSize2XL: () => `clamp(${pxToRem(20)}, 2.5vw, ${pxToRem(24)})`, - fontSize3XL: () => `clamp(${pxToRem(24)}, 2.75vw, ${pxToRem(30)})`, - fontSize4XL: () => `clamp(${pxToRem(30)}, 3vw, ${pxToRem(36)})`, - fontSize5XL: () => `clamp(${pxToRem(36)}, 3.25vw, ${pxToRem(42)})`, - fontSize6XL: () => `clamp(${pxToRem(42)}, 3.5vw, ${pxToRem(48)})`, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), + fontSize4XL: pxToRem(36), + fontSize5XL: pxToRem(42), + fontSize6XL: pxToRem(48), }; - const baseHeadingProperties = { fontFamily: baseProperties.fontFamily, color: dark.main, fontWeight: baseProperties.fontWeightBold, - fontSize: baseProperties.fontSizeXL(), // Call the function for default size + fontSize: baseProperties.fontSizeXL, '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeMD(), // Adjust size for smaller screens + fontSize: baseProperties.fontSizeMD, // Adjust size for smaller screens }, }; @@ -71,78 +86,108 @@ const typography = { fontSize: '1.5rem', }, h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, ...baseHeadingProperties, - fontSize: baseProperties.fontSize6XL(), - '@media (max-width:900px)': { - fontSize: baseProperties.fontSize5XL(), - }, }, h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, ...baseHeadingProperties, - fontSize: baseProperties.fontSize5XL(), - '@media (max-width:900px)': { - fontSize: baseProperties.fontSize4XL(), - }, }, h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, ...baseHeadingProperties, - fontSize: baseProperties.fontSize4XL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSize3XL(), - }, }, h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, ...baseHeadingProperties, - fontSize: baseProperties.fontSize3XL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSize2XL(), - }, }, h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, ...baseHeadingProperties, - fontSize: baseProperties.fontSize2XL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeXL(), - }, }, h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, ...baseHeadingProperties, - fontSize: baseProperties.fontSizeXL(), - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeLG(), - }, - }, - - p1: { - fontFamily: baseProperties.fontFamily, - fontWeight: baseProperties.fontWeightLight, - fontSize: baseProperties.fontSizeSM(), - lineHeight: 1.5, - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeXS(), - }, - '@media (max-width:900px)': { - fontSize: baseProperties.fontSizeSM(), - }, - }, - - p2: { - fontFamily: baseProperties.fontFamily, - fontWeight: baseProperties.fontWeightLight, - fontSize: baseProperties.fontSizeSM(), - lineHeight: 1.5, - '@media (max-width:600px)': { - fontSize: baseProperties.fontSizeXS(), - }, - '@media (max-width:900px)': { - fontSize: baseProperties.fontSizeSM(), - }, }, + // h1: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize6XL, + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSize5XL, + // }, + // }, + // h2: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize5XL(), + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSize4XL(), + // }, + // }, + // h3: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize4XL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSize3XL(), + // }, + // }, + // h4: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize3XL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSize2XL(), + // }, + // }, + // h5: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSize2XL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeXL(), + // }, + // }, + // h6: { + // ...baseHeadingProperties, + // fontSize: baseProperties.fontSizeXL(), + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeLG(), + // }, + // }, + + // p1: { + // fontFamily: baseProperties.fontFamily, + // fontWeight: baseProperties.fontWeightLight, + // fontSize: baseProperties.fontSizeSM(), + // lineHeight: 1.5, + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeXS(), + // }, + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSizeSM(), + // }, + // }, + + // p2: { + // fontFamily: baseProperties.fontFamily, + // fontWeight: baseProperties.fontWeightLight, + // fontSize: baseProperties.fontSizeSM(), + // lineHeight: 1.5, + // '@media (max-width:600px)': { + // fontSize: baseProperties.fontSizeXS(), + // }, + // '@media (max-width:900px)': { + // fontSize: baseProperties.fontSizeSM(), + // }, + // }, subtitle1: { fontFamily: baseProperties.fontFamily, @@ -221,17 +266,26 @@ const typography = { ...baseDisplayProperties, }, + // size: { + // // xxs: baseProperties.fontSizeXXS, + // xs: baseProperties.fontSizeXS, + // sm: baseProperties.fontSizeSM, + // md: baseProperties.fontSizeMD, + // lg: baseProperties.fontSizeLG, + // xl: baseProperties.fontSizeXL, + // '2xl': baseProperties.fontSize2XL, + // '3xl': baseProperties.fontSize3XL, + // }, size: { - // xxs: baseProperties.fontSizeXXS, + xxs: baseProperties.fontSizeXXS, xs: baseProperties.fontSizeXS, sm: baseProperties.fontSizeSM, md: baseProperties.fontSizeMD, lg: baseProperties.fontSizeLG, xl: baseProperties.fontSizeXL, - '2xl': baseProperties.fontSize2XL, - '3xl': baseProperties.fontSize3XL, + xxl: baseProperties.fontSize2XL, + xxxl: baseProperties.fontSize3XL, }, - lineHeight: { xs: 1.25, sm: 1.5, @@ -242,137 +296,3 @@ const typography = { }; export default typography; - -// /** -// * Typography used in theme -// * @param {JsonObject} theme theme customization object -// */ - -// export default function themeTypography(theme) { -// return { -// fontFamily: theme?.customization?.fontFamily, -// h6: { -// fontWeight: 500, -// color: theme.heading, -// fontSize: '0.75rem', -// }, -// h5: { -// fontSize: '0.875rem', -// color: theme.heading, -// fontWeight: 500, -// }, -// h4: { -// fontSize: '1rem', -// color: theme.heading, -// fontWeight: 600, -// }, -// h3: { -// fontSize: '1.25rem', -// color: theme.heading, -// fontWeight: 600, -// }, -// h2: { -// fontSize: '1.5rem', -// color: theme.heading, -// fontWeight: 700, -// }, -// h1: { -// fontSize: '2.125rem', -// color: theme.heading, -// fontWeight: 700, -// }, -// subtitle1: { -// fontSize: '0.875rem', -// fontWeight: 500, -// color: theme.textDark, -// }, -// subtitle2: { -// fontSize: '0.75rem', -// fontWeight: 400, -// color: theme.darkTextSecondary, -// }, -// caption: { -// fontSize: '0.75rem', -// color: theme.darkTextSecondary, -// fontWeight: 400, -// }, -// body1: { -// fontSize: '0.875rem', -// fontWeight: 400, -// lineHeight: '1.334em', -// }, -// body2: { -// letterSpacing: '0em', -// fontWeight: 400, -// lineHeight: '1.5em', -// color: theme.darkTextPrimary, -// }, -// button: { -// textTransform: 'capitalize', -// }, -// customInput: { -// marginTop: 1, -// marginBottom: 1, -// '& > label': { -// top: 23, -// left: 0, -// color: theme.grey500, -// '&[data-shrink="false"]': { -// top: 5, -// }, -// }, -// '& > div > input': { -// padding: '30.5px 14px 11.5px !important', -// }, -// '& legend': { -// display: 'none', -// }, -// '& fieldset': { -// top: 0, -// }, -// }, -// mainContent: { -// backgroundColor: theme.background, -// width: '100%', -// minHeight: 'calc(100vh - 88px)', -// flexGrow: 1, -// padding: '20px', -// marginTop: '88px', -// marginRight: '20px', -// borderRadius: `${theme?.customization?.borderRadius}px`, -// }, -// menuCaption: { -// fontSize: '0.875rem', -// fontWeight: 500, -// color: theme.heading, -// padding: '6px', -// textTransform: 'capitalize', -// marginTop: '10px', -// }, -// subMenuCaption: { -// fontSize: '0.6875rem', -// fontWeight: 500, -// color: theme.darkTextSecondary, -// textTransform: 'capitalize', -// }, -// commonAvatar: { -// cursor: 'pointer', -// borderRadius: '8px', -// }, -// smallAvatar: { -// width: '22px', -// height: '22px', -// fontSize: '1rem', -// }, -// mediumAvatar: { -// width: '34px', -// height: '34px', -// fontSize: '1.2rem', -// }, -// largeAvatar: { -// width: '44px', -// height: '44px', -// fontSize: '1.5rem', -// }, -// }; -// } diff --git a/src/assets/themes/components/buttons/holo.jsx b/src/assets/themes/components/buttons/holo.jsx index 9d0c6ab..3d724aa 100644 --- a/src/assets/themes/components/buttons/holo.jsx +++ b/src/assets/themes/components/buttons/holo.jsx @@ -2,7 +2,7 @@ import colors from '../../base/colors'; import typography from '../../base/typography'; import pxToRem from '../../functions/pxToRem'; -const { white, text, info, secondary, success, grey } = colors; +const { text, success, grey } = colors; const { size } = typography; export default { diff --git a/src/assets/themes/components/buttons/outlined.jsx b/src/assets/themes/components/buttons/outlined.jsx index 955498e..2d63248 100644 --- a/src/assets/themes/components/buttons/outlined.jsx +++ b/src/assets/themes/components/buttons/outlined.jsx @@ -2,7 +2,7 @@ import colors from '../../base/colors'; import typography from '../../base/typography'; import pxToRem from '../../functions/pxToRem'; -const { transparent, light, info, secondary, greenAccent } = colors; +const { transparent, light, info, secondary, success } = colors; const { size } = typography; export default { @@ -52,11 +52,11 @@ export default { }, secondary: { - backgroundColor: greenAccent.lighterSeaGreen, + backgroundColor: success.main_lighterSeaGreen, borderColor: secondary.main, '&:hover': { - backgroundColor: greenAccent.lighterSeaGreen, + backgroundColor: success.main_lighterSeaGreen, }, }, }; diff --git a/src/assets/themes/components/card/index.jsx b/src/assets/themes/components/card/index.jsx index 5354e20..72e749c 100644 --- a/src/assets/themes/components/card/index.jsx +++ b/src/assets/themes/components/card/index.jsx @@ -3,7 +3,7 @@ import boxShadows from '../../base/boxShadows'; import colors from '../../base/colors'; import rgba from '../../functions/rgba'; -const { black, greenAccent } = colors; +const { black, success } = colors; const { borderWidth, borderRadius } = borders; const { md } = boxShadows; @@ -16,7 +16,7 @@ export default { minWidth: 0, wordWrap: 'break-word', backgroundImage: 'none', - backgroundColor: greenAccent.lighter, + backgroundColor: success.main_lighter, backgroundClip: 'border-box', border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, borderRadius: borderRadius.xl, diff --git a/src/assets/themes/components/forms/switchButton.jsx b/src/assets/themes/components/forms/switchButton.jsx index 2c4266a..46347cc 100644 --- a/src/assets/themes/components/forms/switchButton.jsx +++ b/src/assets/themes/components/forms/switchButton.jsx @@ -1,7 +1,6 @@ import borders from '../../base/borders'; import boxShadows from '../../base/boxShadows'; import colors from '../../base/colors'; -import typography from '../../base/typography'; import linearGradient from '../../functions/linearGradient'; import pxToRem from '../../functions/pxToRem'; @@ -27,7 +26,7 @@ export default { }, styleOverrides: { switchBase: { - color: chartTheme.greenAccent.default, + color: success.dark, '&:hover': { backgroundColor: transparent.main, @@ -42,7 +41,7 @@ export default { '& .MuiSwitch-thumb': { borderColor: `${gradients.success.state} !important`, - backgroundColor: `${chartTheme.greenAccent.light} !important`, + backgroundColor: `${success.main_light} !important`, }, '& + .MuiSwitch-track': { @@ -64,7 +63,7 @@ export default { }, }, thumb: { - backgroundColor: chartTheme.greenAccent.dark, + backgroundColor: success.darkest, boxShadow: md, border: `${borderWidth[1]} solid ${grey.light}`, }, diff --git a/src/assets/themes/components/index.jsx b/src/assets/themes/components/index.jsx index 4c0a0f6..4daf503 100644 --- a/src/assets/themes/components/index.jsx +++ b/src/assets/themes/components/index.jsx @@ -46,7 +46,6 @@ export const components = { MuiCardContent: { ...cardContent }, MuiTabs: { ...tabs }, MuiTab: { ...tab }, - // MuiContainer: container, }; export default components; diff --git a/src/assets/themes/components/tabs/index.jsx b/src/assets/themes/components/tabs/index.jsx index ced4b02..a348c88 100644 --- a/src/assets/themes/components/tabs/index.jsx +++ b/src/assets/themes/components/tabs/index.jsx @@ -3,7 +3,7 @@ import borders from 'assets/themes/base/borders'; import boxShadows from 'assets/themes/base/boxShadows'; import pxToRem from 'assets/themes/functions/pxToRem'; -const { grey, white, success } = colors; +const { grey, white, success, text } = colors; const { borderRadius } = borders; const { tabsBoxShadow } = boxShadows; @@ -11,10 +11,35 @@ export default { styleOverrides: { root: { position: 'relative', - // backgroundColor: grey.default, - borderRadius: borderRadius.xl, + backgroundColor: '#f8f9fa', + borderRadius: borderRadius.lg, minHeight: 'unset', - padding: pxToRem(4), + padding: pxToRem(12), + + '&.MuiTabs-indicator': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + boxShadow: tabsBoxShadow.indicator, + transition: 'all 500ms ease', + }, + 'span.MuiTabs-indicator': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + boxShadow: tabsBoxShadow.indicator, + transition: 'all 500ms ease', + }, + 'span.label.MuiTabs-selected': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + boxShadow: tabsBoxShadow.indicator, + transition: 'all 500ms ease', + }, + // '&.MuiTabs-selected': { + // color: `${text.main} !important`, + // backgroundColor: `${success.main} !important`, + // boxShadow: tabsBoxShadow.indicator, + // transition: 'all 500ms ease', + // }, }, flexContainer: { @@ -31,26 +56,16 @@ export default { vertical: { '& .MuiTabs-indicator': { width: '100%', - // color: `${success.main} !important`, }, }, indicator: { height: '100%', - borderRadius: borderRadius.lg, - // backgroundColor: success.dark, - backgroundColor: success.main, // Ensure this is not commented out + borderRadius: borderRadius.md, + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, boxShadow: tabsBoxShadow.indicator, transition: 'all 500ms ease', - 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 1b07b9f..8dd4705 100644 --- a/src/assets/themes/components/tabs/tab.jsx +++ b/src/assets/themes/components/tabs/tab.jsx @@ -3,9 +3,9 @@ import borders from 'assets/themes/base/borders'; import colors from 'assets/themes/base/colors'; import pxToRem from 'assets/themes/functions/pxToRem'; -const { size, fontWeightRegular } = typography; +const { size, fontWeightMedium } = typography; const { borderRadius } = borders; -const { dark, grey, success } = colors; +const { dark, grey, success, text } = colors; export default { styleOverrides: { @@ -18,33 +18,40 @@ export default { maxWidth: 'unset !important', minWidth: 'unset !important', minHeight: 'unset !important', - fontSize: size.md, - fontWeight: fontWeightRegular, + height: 'auto', + fontSize: size.lg, + fontWeight: fontWeightMedium, textTransform: 'none', lineHeight: 'inherit', padding: pxToRem(4), - borderRadius: borderRadius.lg, - color: success.main, - // color: `${grey.darkest} !important`, - opacity: '1 !important', + borderRadius: borderRadius.md, + color: `${text.primary} !important`, - // 'Mui-selected': { - // color: `${grey.darkest} !important`, - // opacity: '1 !important', - // }, + // color: `${dark.main} !important`, + opacity: '1 !important', '& .material-icons, .material-icons-round': { marginBottom: '0 !important', - marginRight: pxToRem(6), + marginRight: pxToRem(4), }, - '& svg': { marginBottom: '0 !important', marginRight: pxToRem(6), }, - }, + '&:selected': { + color: `${success.main} !important`, + }, + 'span.MuiTab-wrapper': { + color: `${success.main} !important`, + }, + 'span.label.MuiTab-notSelected': { + color: `${text.main} !important`, + backgroundColor: `${success.main} !important`, + transition: 'all 500ms ease', + }, - labelIcon: { - paddingTop: pxToRem(4), + labelIcon: { + paddingTop: pxToRem(4), + }, }, }, }; diff --git a/src/assets/themes/functions/hexToRgba.jsx b/src/assets/themes/functions/hexToRgba.jsx index 2ac3828..1d4f35e 100644 --- a/src/assets/themes/functions/hexToRgba.jsx +++ b/src/assets/themes/functions/hexToRgba.jsx @@ -1,3 +1,10 @@ +/** + * Converts a hexadecimal color code to RGBA format (takes a solid hex color code and returns transparent version). + * + * @param {string} hex - The hexadecimal color code to convert. + * @param {number} [alpha=1] - The alpha value (opacity) of the RGBA color. Defaults to 1. + * @returns {string|null} The RGBA color code, or null if the input is invalid. + */ const hexToRgba = (hex, alpha = 1) => { let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); diff --git a/src/assets/themes/themeSettings.jsx b/src/assets/themes/themeSettings.jsx index 6cfdb3a..e931933 100644 --- a/src/assets/themes/themeSettings.jsx +++ b/src/assets/themes/themeSettings.jsx @@ -35,23 +35,11 @@ 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, - borderRadiusExtraLarge: 16, - }, + // shape: { + // borderRadius: 4, + // borderRadiusLarge: 8, + // borderRadiusExtraLarge: 16, + // }, zIndex: { appBar: 1200, drawer: 1100, diff --git a/src/components/cards/CardDetailsContainer.jsx b/src/components/cards/CardDetailsContainer.jsx index ee3c5c0..61d1f66 100644 --- a/src/components/cards/CardDetailsContainer.jsx +++ b/src/components/cards/CardDetailsContainer.jsx @@ -249,7 +249,7 @@ const CardDetailsContainer = ({ card, className }) => { container // spacing={2} sx={{ - // background: theme.palette.chartTheme.greenAccent.light, + // background: theme.palette.success.main_light, justifyContent: 'center', borderRadius: theme.borders.borderRadius.md, maxWidth: '100%', diff --git a/src/components/cards/CardMediaSection.js b/src/components/cards/CardMediaSection.js index 0bfc7ed..63536c9 100644 --- a/src/components/cards/CardMediaSection.js +++ b/src/components/cards/CardMediaSection.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ import React, { useEffect, forwardRef, useState } from 'react'; import CardToolTip from './CardToolTip'; import PropTypes from 'prop-types'; @@ -16,14 +17,13 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; const CardMediaSection = React.forwardRef( ( { - imgUrl, - card, - isHovered, - handleInteraction, - isRequired, - isModalOpen, - context, - isLast, + imgUrl = '', + card = {}, + isHovered = false, + handleInteraction = () => {}, + isRequired = false, + isModalOpen = false, + context = '', }, ref ) => { @@ -76,7 +76,7 @@ const CardMediaSection = React.forwardRef( image={imgUrl} loading="lazy" /> - {isLast && ( + {/* {isLast && ( - )} + )} */} {anchorEl && isHovered && ( key.replace(/_/g, ' ').replace(/^\w/, (c) => c.toUpperCase()); const StyledAttributeSpan = ({ theme, children }) => ( @@ -55,10 +55,7 @@ const createTooltipContent = (card) => { justifyContent: 'center', padding: theme.spacing(2), h: '100%', - background: rgba( - theme.palette.chartTheme.grey.lightest || 'white', - 0.85 - ), + background: rgba(theme.palette.grey.lightest || 'white', 0.85), color: theme.palette.text.primary, alignContent: 'flex-start', '&::before': { diff --git a/src/components/cards/GenericCard.jsx b/src/components/cards/GenericCard.jsx index 832e0d8..6861029 100644 --- a/src/components/cards/GenericCard.jsx +++ b/src/components/cards/GenericCard.jsx @@ -151,8 +151,6 @@ const GenericCard = React.forwardRef((props, ref) => { imgUrl={imgUrl} card={card} context={effectiveContext} - page={page} - quantity={card?.quantity} isHovered={hoveredCard === card} handleInteraction={handleInteraction} isModalOpen={dialogState.isCardDialogOpen} @@ -179,18 +177,3 @@ const GenericCard = React.forwardRef((props, ref) => { GenericCard.displayName = 'GenericCard'; export default GenericCard; -{ - /* diff --git a/src/components/dialogs/CollectionDialog.jsx b/src/components/dialogs/CollectionDialog.jsx index e21bc26..3adc555 100644 --- a/src/components/dialogs/CollectionDialog.jsx +++ b/src/components/dialogs/CollectionDialog.jsx @@ -1,7 +1,6 @@ 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 LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; @@ -10,9 +9,10 @@ import { StyledDialog, StyledDialogContent, } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { formFields } from '../forms/formsConfig'; -import RCDynamicForm from '../forms/Factory/RCDynamicForm'; -import useInitialFormData from '../../context/formHooks/useInitialFormData'; +import useInitialFormData from 'context/formHooks/useInitialFormData'; +import { useMode } from 'context'; +import { formFields } from 'data/formsConfig'; +import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; const CollectionDialog = ({ open, onClose, isNew, collectionData }) => { const { theme } = useMode(); @@ -57,7 +57,7 @@ const CollectionDialog = ({ open, onClose, isNew, collectionData }) => { border: 'none', }} > - + diff --git a/src/components/dialogs/DeckDialog.jsx b/src/components/dialogs/DeckDialog.jsx index 166f036..c5091e5 100644 --- a/src/components/dialogs/DeckDialog.jsx +++ b/src/components/dialogs/DeckDialog.jsx @@ -6,7 +6,7 @@ import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; -import { formFields } from 'components/forms/formsConfig'; +import { formFields } from 'data/formsConfig'; import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import { DialogPaper, @@ -57,7 +57,7 @@ const DeckDialog = ({ open, onClose, isNew, deckData }) => { border: 'none', }} > - + diff --git a/src/components/dialogs/StripeCheckoutModal.js b/src/components/dialogs/StripeCheckoutModal.js deleted file mode 100644 index a6722ad..0000000 --- a/src/components/dialogs/StripeCheckoutModal.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { Modal, Fade, Box, Typography, Backdrop } from '@mui/material'; -import { Elements } from '@stripe/react-stripe-js'; -import StripeForm from '../forms/customerCheckoutForm/StripeForm'; -import { loadStripe } from '@stripe/stripe-js'; - -const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY); - -const StripeCheckoutModal = ({ open, onClose, onToken, purchases, total }) => { - // console.log('STRIPE CHECKOUT MODAL PURCHASES:', purchases); - // console.log('STRIPE CHECKOUT MODAL TOTAL:', total); - return ( - - - - - Your Purchases - - {purchases.map((purchase, index) => ( - - {purchase.name} - - ${purchase.card_prices[0].tcgplayer_price} - - - ))} - - Total: - ${total} - - - - - - - - ); -}; - -export default StripeCheckoutModal; diff --git a/src/components/forms/Factory/RCDynamicForm.jsx b/src/components/forms/Factory/RCDynamicForm.jsx index a96b2da..5af2ed7 100644 --- a/src/components/forms/Factory/RCDynamicForm.jsx +++ b/src/components/forms/Factory/RCDynamicForm.jsx @@ -2,18 +2,18 @@ import { Box, InputAdornment, Tooltip } from '@mui/material'; import RCInput from './RCInput'; import { Controller } from 'react-hook-form'; -import useRCFormHook from '../../../context/formHooks/useRCFormHook'; -import { - FormBox, - FormFieldBox, -} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import useRCFormHook from 'context/formHooks/useRCFormHook'; import { useMode } from 'context'; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; -import { getFormFieldHandlers } from '../formsConfig'; -import { useFormSubmission } from '../../../context/formHooks/useFormSubmission'; +import { getFormFieldHandlers } from '../../../data/formsConfig'; +import { useFormSubmission } from 'context/formHooks/useFormSubmission'; import React, { useEffect, useState } from 'react'; import useBreakpoint from 'context/hooks/useBreakPoint'; import RCLoadingButton from 'layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON'; +import { + FormBox, + FormFieldBox, +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; const RCDynamicForm = ({ formKey, @@ -78,12 +78,11 @@ const RCDynamicForm = ({ type={fieldConfig.type} label={fieldConfig.label} placeholder={fieldConfig.placeholder} - error={!!error} name={fieldConfig.name} context={fieldConfig.context} - errorMessage={error?.message} + error={!!error} helperText={error?.message} - initialValue={fieldConfig.initialValue} + initialValue={formData || fieldConfig.initialValue} InputProps={ (fieldConfig.icon ? { @@ -106,6 +105,7 @@ const RCDynamicForm = ({ @@ -181,7 +178,10 @@ const RCInput = React.forwardRef( fullWidth rows={rest?.rows || 4} placeholder={rest?.placeholder} - value={value} + value={value || ''} + InputLabelProps={{ + shrink: !initialValue ? undefined : true, + }} onChange={(e) => onChange(e.target.value)} {...rest} /> diff --git a/src/components/forms/customerCheckoutForm/CustomerForm.js b/src/components/forms/customerCheckoutForm/CustomerForm.js deleted file mode 100644 index 27b5c78..0000000 --- a/src/components/forms/customerCheckoutForm/CustomerForm.js +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useCallback, useContext, useMemo } from 'react'; -import { Box, Container, Typography, Grid, Button } from '@mui/material'; -import CustomerInfoFields from './CustomerInfoFields'; -import StripeCheckoutModal from 'dialogs/stripeModal/StripeCheckoutModal'; -import { ModalContext } from 'context/ModalContext/ModalContext'; -import CartSummary from 'other/dataDisplay/CartSummary'; -import { useMode } from 'context'; -import useManager from 'context/useManager'; - -const CustomerForm = () => { - const { isModalOpen, setModalOpen } = useContext(ModalContext); - const { cart } = useManager(); - const { theme } = useMode(); - const totalCost = useMemo( - () => - cart?.items?.reduce((acc, item) => acc + item.price * item.quantity, 0), - [cart?.items] - ); - const handleModalToggle = useCallback( - () => setModalOpen((prev) => !prev), - [setModalOpen] - ); - - return ( - - - - Customer Info - -
- - - - - - - - {' '} - - - -
- - - - ); -}; - -export default CustomerForm; diff --git a/src/components/forms/customerCheckoutForm/CustomerInfoFields.jsx b/src/components/forms/customerCheckoutForm/CustomerInfoFields.jsx deleted file mode 100644 index 7121ff3..0000000 --- a/src/components/forms/customerCheckoutForm/CustomerInfoFields.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Box, Grid } from '@mui/material'; -import FormTextField from './FormTextField'; - -const CustomerInfoFields = () => { - return ( - - - - - - - - - - - ); -}; - -export default CustomerInfoFields; diff --git a/src/components/forms/customerCheckoutForm/FormTextField.js b/src/components/forms/customerCheckoutForm/FormTextField.js deleted file mode 100644 index fddc1cb..0000000 --- a/src/components/forms/customerCheckoutForm/FormTextField.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { TextField } from '@mui/material'; - -function FormTextField({ id = 'outlined', label, type }) { - return ( - - ); -} - -export default FormTextField; diff --git a/src/components/forms/customerCheckoutForm/StripeForm.js b/src/components/forms/customerCheckoutForm/StripeForm.js deleted file mode 100644 index bb46547..0000000 --- a/src/components/forms/customerCheckoutForm/StripeForm.js +++ /dev/null @@ -1,78 +0,0 @@ -import React, { useState } from 'react'; -import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js'; -import axios from 'axios'; -import './StripeForm.css'; - -const StripeForm = ({ total, onToken }) => { - const stripe = useStripe(); - const elements = useElements(); - - const [paymentError, setPaymentError] = useState(null); - const [paymentSuccess, setPaymentSuccess] = useState(null); - const [loading, setLoading] = useState(false); - - const handleSubmit = async (event) => { - event.preventDefault(); - setLoading(true); - - if (!stripe || !elements) { - setLoading(false); - return; - } - - const cardElement = elements.getElement(CardElement); - - const { error, paymentMethod } = await stripe.createPaymentMethod({ - type: 'card', - card: cardElement, - }); - - if (error) { - setPaymentError(error.message); - setPaymentSuccess(null); - setLoading(false); - } else { - const { id } = paymentMethod; - onToken(id); - const amountInCents = Math.round(total * 100); - - try { - const response = await axios.post( - `${process.env.REACT_APP_SERVER}/api/stripe/checkout`, - { id, amount: amountInCents } - ); - - setLoading(false); - - if (response.data.success) { - setPaymentSuccess('Payment Successful!'); - setPaymentError(null); - } else { - setPaymentError('Payment failed: ' + response.data.message); - setPaymentSuccess(null); - } - } catch (err) { - setLoading(false); - setPaymentError('Error processing payment: ' + err.message); - setPaymentSuccess(null); - } - } - }; - - return ( -
- - - {paymentError &&

{paymentError}

} - {paymentSuccess &&

{paymentSuccess}

} - - ); -}; - -export default StripeForm; diff --git a/src/components/forms/search/PaginationComponent.jsx b/src/components/forms/search/PaginationComponent.jsx index d789cf1..9e6475e 100644 --- a/src/components/forms/search/PaginationComponent.jsx +++ b/src/components/forms/search/PaginationComponent.jsx @@ -3,25 +3,16 @@ import { Box, Typography, IconButton, TextField } from '@mui/material'; import { ChevronLeft, ChevronRight } from '@mui/icons-material'; const PaginationComponent = ({ pageOptions }) => { - // Initialize the pageIndex state to 0 (first page) const [pageIndex, setPageIndex] = useState(0); - - // Check if there's a previous or next page available const canPreviousPage = pageIndex > 0; const canNextPage = pageIndex < pageOptions?.length - 1; - - // Define the function to navigate to a specific page const gotoPage = (page) => { const pageNumber = Math.max(0, Math.min(page, pageOptions.length - 1)); setPageIndex(pageNumber); }; - - // Define the function for going to the next page const nextPage = () => { if (canNextPage) setPageIndex((currentPageIndex) => currentPageIndex + 1); }; - - // Define the function for going to the previous page const previousPage = () => { if (canPreviousPage) setPageIndex((currentPageIndex) => currentPageIndex - 1); @@ -61,108 +52,3 @@ const PaginationComponent = ({ pageOptions }) => { }; export default PaginationComponent; - -// // PaginationComponent.jsx -// import React from 'react'; -// import MDPagination from 'layout/REUSABLE_COMPONENTS/MDPAGINATION'; -// import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -// import MDInput from 'layout/REUSABLE_COMPONENTS/MDINPUT'; -// import Icon from '@mui/material/Icon'; -// import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY/RCTypography'; - -// const PaginationComponent = ({ -// pageOptions, -// pageIndex, -// gotoPage, -// canPreviousPage, -// canNextPage, -// nextPage, -// previousPage, -// }) => ( -// -// {canPreviousPage && ( -// previousPage()}> -// chevron_left -// -// )} -// {/* Render page numbers */} -// {pageOptions?.length > 1 ? ( -// -// gotoPage(Number(e.target.value) - 1)} -// /> -// -// ) : ( -// -// Page {pageIndex + 1} of {pageOptions?.length} -// -// )} -// {canNextPage && ( -// nextPage()}> -// chevron_right -// -// )} -// -// ); - -// export default PaginationComponent; - -{ - /* -{showTotalEntries && ( - - - Showing {entriesStart} to {entriesEnd} of {data?.length} entries - - -)} -{pageOptions?.length > 1 && ( - - {canPreviousPage && ( - previousPage()}> - chevron_left - - )} - {pageOptions?.length > 1 ? ( - - - - ) : ( - - - {customizedPageOptions[pageIndex]} - - - )} - {canNextPage && ( - nextPage()}> - chevron_right - - )} - - {renderPagination} - -)} - */ -} diff --git a/src/components/forms/search/SearchComponent.jsx b/src/components/forms/search/SearchComponent.jsx index 022ed19..6b22174 100644 --- a/src/components/forms/search/SearchComponent.jsx +++ b/src/components/forms/search/SearchComponent.jsx @@ -1,5 +1,5 @@ // DeckSearch.js -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { Card, Container, Grid, IconButton } from '@mui/material'; import SearchResults from './SearchResults'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; @@ -11,15 +11,16 @@ 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 { formFields } from '../../../data/formsConfig'; import useBreakpoint from 'context/hooks/useBreakPoint'; import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; + const SearchComponent = (pageContext) => { const { theme } = useMode(); const { isMobile } = useBreakpoint(); - const itemsPerPage = 12; const { loadingSearchResults } = useCardStoreHook(); const { toggleConfigurator } = useConfigurator(); + const itemsPerPage = 12; const [searchData, setSearchData] = useLocalStorage('searchData', []); useEffect(() => { const handleStorageChange = () => { diff --git a/src/components/forms/search/SearchResults.jsx b/src/components/forms/search/SearchResults.jsx index 6497e39..42557b0 100644 --- a/src/components/forms/search/SearchResults.jsx +++ b/src/components/forms/search/SearchResults.jsx @@ -1,5 +1,5 @@ -import React, { useMemo } from 'react'; -import { Box, Grid } from '@mui/material'; +import React from 'react'; +import { Grid } from '@mui/material'; import useGridItems from 'context/hooks/useGridItems'; import usePagination from 'context/hooks/usePagination'; import LoadingIndicator from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingIndicator'; diff --git a/src/components/forms/search/SearchSettings.jsx b/src/components/forms/search/SearchSettings.jsx deleted file mode 100644 index 2f9156c..0000000 --- a/src/components/forms/search/SearchSettings.jsx +++ /dev/null @@ -1,67 +0,0 @@ -// SearchSettings.jsx -import React, { useState } from 'react'; -import { Paper, Box, Container, Typography } from '@mui/material'; -import SearchFormB from './SearchFormB'; // Ensure path is correct -import { useMode } from 'context'; -import { SearchSettingsBox } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; - -export const commonPaperStyles = (theme) => ({ - padding: theme.spacing(3), - borderRadius: theme.borders.borderRadius.md, - background: theme.palette.greenAccent.light, - boxShadow: theme.shadows[3], - margin: 'auto', - width: '100%', - maxWidth: 'md', - '&:hover': { - boxShadow: theme.shadows[6], - }, -}); - -const SearchSettings = () => { - const [searchSettings, setSearchSettings] = useState({ - search: '', - searchBy: 'title', - sortBy: 'release_date', - }); - - const { theme } = useMode(); - - const handleSearch = (e) => { - setSearchSettings({ - ...searchSettings, - search: e.target.value, - }); - }; - - const handleSearchBy = (e) => { - setSearchSettings({ - ...searchSettings, - searchBy: e.target.value, - }); - }; - - const handleSortBy = (e) => { - setSearchSettings({ - ...searchSettings, - sortBy: e.target.value, - }); - }; - - return ( - - - - - - - - ); -}; - -export default SearchSettings; diff --git a/src/context/formHooks/useFormSubmission.jsx b/src/context/formHooks/useFormSubmission.jsx index 992cd7d..a387db6 100644 --- a/src/context/formHooks/useFormSubmission.jsx +++ b/src/context/formHooks/useFormSubmission.jsx @@ -1,8 +1,5 @@ import { useCallback, useState } from 'react'; -import { - handleValidation, - zodSchemas, -} from '../../components/forms/formsConfig'; +import { handleValidation, zodSchemas } from '../../data/formsConfig'; export const useFormSubmission = (formHandlers, formKey) => { const [isSubmitting, setIsSubmitting] = useState(false); diff --git a/src/context/formHooks/useRCFormHook.jsx b/src/context/formHooks/useRCFormHook.jsx index ee0a60e..1f664b0 100644 --- a/src/context/formHooks/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 '../../components/forms/formsConfig'; +import { formFields, zodSchemas } from '../../data/formsConfig'; const useRCFormHook = (schemaKey, initialData) => { // console.log('SCHEMA KEY', schemaKey); diff --git a/src/context/useManager.jsx b/src/context/useManager.jsx index 7fa7fdc..04556c2 100644 --- a/src/context/useManager.jsx +++ b/src/context/useManager.jsx @@ -403,7 +403,7 @@ const useManager = () => { const localEntity = entity === 'decks' ? 'Deck' : 'Collection'; const id = localStorage.getItem('selected' + localEntity + 'Id'); const cleanedId = encodeURIComponent(id.replace(/"/g, '')); - + console.log('UPDAtING', entity, data); handleEntityOperation(entity, `update/${cleanedId}`, 'update', data); }, [handleEntityOperation] @@ -536,7 +536,7 @@ const useManager = () => { removeCardFromEntity('collections', item), addDeck: (data) => addEntity('decks', data), - updateDeck: (id, data) => updateEntity('decks', id, data), + updateDeck: (data) => updateEntity('decks', data), deleteDeck: (id) => deleteEntity('decks', id), addItemToDeck: (item) => addCardToEntity('decks', item), removeItemFromDeck: (item) => removeCardFromEntity('decks', item), diff --git a/src/data/HelmetMetaData.jsx b/src/data/HelmetMetaData.jsx new file mode 100644 index 0000000..04e38e4 --- /dev/null +++ b/src/data/HelmetMetaData.jsx @@ -0,0 +1,39 @@ +/* eslint-disable max-len */ +import { Helmet } from 'react-helmet'; + +const HelmetMetaData = () => ( + +); + +export default HelmetMetaData; diff --git a/src/data/baseMenuItems.jsx b/src/data/baseMenuItems.jsx index 3f5b63c..3c87f78 100644 --- a/src/data/baseMenuItems.jsx +++ b/src/data/baseMenuItems.jsx @@ -7,7 +7,7 @@ import { import DeckBuilderIcon from './DeckBuilderIcon'; import { Badge } from '@mui/material'; -export const baseMenuItems = ({ cartCardQuantity }) => [ +const baseMenuItems = ({ cartCardQuantity }) => [ { name: 'Deck', icon: , @@ -51,3 +51,5 @@ export const baseMenuItems = ({ cartCardQuantity }) => [ requiresLogin: true, }, ]; + +export default baseMenuItems; diff --git a/src/data/collectionPortfolioHeaderItems.jsx b/src/data/collectionPortfolioHeaderItems.jsx index aa24c66..bab8e8c 100644 --- a/src/data/collectionPortfolioHeaderItems.jsx +++ b/src/data/collectionPortfolioHeaderItems.jsx @@ -1,6 +1,6 @@ -import { roundToNearestTenth } from '../context/Helpers'; +import { roundToNearestTenth } from 'context/Helpers'; -export const collectionPortfolioHeaderItems = (collection) => [ +const collectionPortfolioHeaderItems = (collection) => [ { icon: 'collections', label: 'Portfolio Selected', @@ -29,3 +29,5 @@ export const collectionPortfolioHeaderItems = (collection) => [ delay: 600, }, ]; + +export default collectionPortfolioHeaderItems; diff --git a/src/components/forms/formsConfig.jsx b/src/data/formsConfig.jsx similarity index 100% rename from src/components/forms/formsConfig.jsx rename to src/data/formsConfig.jsx diff --git a/src/data/index.jsx b/src/data/index.jsx new file mode 100644 index 0000000..5bb11d8 --- /dev/null +++ b/src/data/index.jsx @@ -0,0 +1,27 @@ +import heroData from './heroData'; +import ROUTE_CONFIG from './route-config'; +import collectionPortfolioHeaderItems from './collectionPortfolioHeaderItems'; +import baseMenuItems from './baseMenuItems'; +import prepareTableData from './prepareTableData'; +import HelmetMetaData from './HelmetMetaData'; +import { + formFields, + zodSchemas, + configOptions, + handleValidation, + getFormFieldHandlers, +} from './formsConfig'; +export { + heroData, + ROUTE_CONFIG, + HelmetMetaData, + collectionPortfolioHeaderItems, + baseMenuItems, + prepareTableData, + // FORMS + formFields, + zodSchemas, + configOptions, + handleValidation, + getFormFieldHandlers, +}; diff --git a/src/data/prepareTableData.jsx b/src/data/prepareTableData.jsx index 6c42262..850a896 100644 --- a/src/data/prepareTableData.jsx +++ b/src/data/prepareTableData.jsx @@ -51,7 +51,7 @@ const Quantity = ({ quantity, color }) => (
); -export default function prepareTableData(selectedCards, type) { +function prepareTableData(selectedCards, type) { const columnsA = [ { field: 'name', @@ -142,3 +142,5 @@ export default function prepareTableData(selectedCards, type) { return { columns, data }; } + +export default prepareTableData; diff --git a/src/data/route-config.jsx b/src/data/route-config.jsx index fc93f36..d6658d3 100644 --- a/src/data/route-config.jsx +++ b/src/data/route-config.jsx @@ -17,7 +17,7 @@ export const ROUTES = [ { path: '*', componentName: 'NotFoundPage', isPrivate: false }, ]; -export const ROUTE_CONFIG = { +const ROUTE_CONFIG = { defaultPath: '/', routes: ROUTES.map(({ path, componentName, isPrivate }) => ({ path, @@ -25,3 +25,5 @@ export const ROUTE_CONFIG = { isPrivate, })), }; + +export default ROUTE_CONFIG; diff --git a/src/index.js b/src/index.js index 5e25a93..7ec52bb 100644 --- a/src/index.js +++ b/src/index.js @@ -6,31 +6,16 @@ import { register, unregister } from './serviceWorker'; // ==============================|| REACT DOM RENDER ||============================== // import { ColorModeProvider, useMode } from './context'; -import { Helmet } from 'react-helmet'; import { SnackbarProvider, enqueueSnackbar } from 'notistack'; import { ErrorBoundary } from 'react-error-boundary'; import ErrorFallback from 'layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback'; import { ThemeProvider } from 'styled-components'; import { CssBaseline, GlobalStyles } from '@mui/material'; import { ParallaxProvider } from 'react-scroll-parallax'; +import { HelmetMetaData } from 'data'; const domNode = document.getElementById('root'); -const HelmetMetadata = () => ( - - {/* Basic */} - Enhanced Cardstore - - - {/* Social Media */} - - - - - - -); - const AppWrapper = () => { const { theme } = useMode(); const errorHandler = (error, errorInfo) => { @@ -43,16 +28,11 @@ const AppWrapper = () => { 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/index.jsx b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx index 3821535..1c27122 100644 --- a/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx @@ -11,7 +11,7 @@ import { } from '@mui/material'; import ConfiguratorRoot from './ConfiguratorRoot'; import searchData from 'data/json-data/search.json'; -import { formFields } from 'components/forms/formsConfig'; +import { formFields } from 'data/formsConfig'; import { TextField, InputLabel } from '@mui/material'; import { StyledFormControl } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; diff --git a/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx b/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx index 67f3f78..79353e3 100644 --- a/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx +++ b/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx @@ -47,7 +47,7 @@ const ActionButton = ({ height: isDataTable ? 30 : 'auto', // Ensure consistent height for datatable variant minWidth: isDataTable ? 20 : 'auto', // Ensure a minimal width when icon only flexGrow: 1, - borderRadius: theme.borders.borderRadius.md, + borderRadius: theme.borders.borderRadius.xxl, maxWidth: '100%', justifyContent: 'center', alignItems: 'center', diff --git a/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx b/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx index 760df90..78b12ff 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx @@ -8,11 +8,11 @@ export default styled(Box)(({ ownerstate }) => { theme; const { variant, - bgColor = 'default', // default value - color = 'text', // default value - opacity = 1, // default value - borderRadius = 'sm', // default value - shadow = 'none', // default value + bgColor, + color, + opacity, + borderRadius, + shadow, coloredShadow, } = ownerstate; const { gradients, grey, white } = palette; diff --git a/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx b/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx index 27fefd6..edbbb6a 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDBOX/index.jsx @@ -6,10 +6,10 @@ const MDBox = React.forwardRef( ( { variant = 'contained', - bgColor = 'transparent', - color = 'dark', + bgColor = 'default', + color = 'text', opacity = 1, - borderRadius = 'none', + borderRadius = 'md', shadow = 'none', coloredShadow = 'none', ...rest diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx index f8f17a3..9dcc4db 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx @@ -205,7 +205,7 @@ export default styled(Button)(({ ownerState }) => { }; }; const circularStyles = () => ({ - borderRadius: borderRadius.section, + borderRadius: borderRadius.xl, }); const iconOnlyStyles = () => { let sizeValue = pxToRem(38); @@ -241,7 +241,7 @@ export default styled(Button)(({ ownerState }) => { const holoStyles = () => { const backgroundValue = palette[color] ? palette[color].main - : greenAccent.light; + : success.main_light; const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; @@ -250,22 +250,7 @@ export default styled(Button)(({ ownerState }) => { : 'rgba(0, 0, 0, 0.075)'; const boxShadowValue = `0 0 0 4px ${rgba(palette[color].secondary || 'white', 0.4)}`; const hoveredBoxShadowValue = `0 0 0 4px ${rgba(palette[color].secondary || 'white', 0.15)}`; - // const boxShadowValue = colored[color] - // ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( - // [0, 3], - // [1, -2], - // palette[color].main, - // 0.2 - // )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` - // : 'none'; - // const hoveredBoxShadowValue = colored[color] - // ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( - // [0, 4], - // [23, 0], - // palette[color].main, - // 0.15 - // )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` - // : 'none'; + let colorValue = white.main; if (color === 'default' || !palette[color]) { colorValue = text.main; @@ -304,7 +289,7 @@ export default styled(Button)(({ ownerState }) => { alignItems: 'center', justifyContent: 'center', width: '100%', - borderRadius: theme.borderRadius, + borderRadius: borderRadius.md, transitionProperty: 'color, background, box-shadow', transitionDuration: '0.35s', // fontSize: pxToRem(14), diff --git a/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx index 905a219..3299f6b 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx @@ -109,7 +109,7 @@ RCCard.displayName = 'RCCard'; RCCard.propTypes = { // CONTENT title: PropTypes.string, - content: PropTypes.string, + content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), icon: PropTypes.oneOfType([ PropTypes.string, PropTypes.object, diff --git a/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx index 0c19bc2..e76d6cf 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON/RCLoadingButtonRoot.jsx @@ -148,7 +148,7 @@ export default styled(Button)(({ ownerState }) => { const holoStyles = () => { const backgroundValue = palette[color] ? palette[color].main - : greenAccent.light; + : success.main_light; const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; diff --git a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx index 9b46684..50dade0 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx @@ -16,9 +16,7 @@ export default styled(Box)(({ color }) => { justifyContent: 'center', color: color, background: - color === 'success' - ? theme.palette.chartTheme.greenAccent.light - : 'black', + color === 'success' ? theme.palette.success.main_light : 'black', // [theme.breakpoints.down('md')]: { // width: 30, // height: 30, diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx index 69a1e5f..a2018a2 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange.jsx @@ -12,7 +12,7 @@ const useStyles = (theme) => ({ width: '25%%', p: '20px', // my: '20px', - // background: theme.palette.chartTheme.grey.dark, + // background: theme.palette.grey.dark, borderRadius: theme.spacing(4), }, flexBox: { @@ -23,11 +23,11 @@ const useStyles = (theme) => ({ variant: 'h4', fontWeight: 'bold', // fontFamily: 'Poppins', - color: theme.palette.chartTheme.grey.default, + color: theme.palette.grey.default, }, rangeText: { variant: 'h3', - color: theme.palette.chartTheme.greenAccent.default, + color: theme.palette.success.dark, mt: '2px', fontWeight: 'bold', }, diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx index a53d77f..7ab4531 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCHeader.jsx @@ -1,10 +1,10 @@ import { Typography, Box } from '@mui/material'; -import { useMode } from '../context'; +import { useMode } from 'context'; const RCHeader = ({ title, subtitle }) => { const { theme } = useMode(); - const grey = theme.palette.chartTheme.grey.default; - const greenAccent = theme.palette.chartTheme.greenAccent.default; + const grey = theme.palette.grey.default; + const greenAccent = theme.palette.success.dark; return ( {`${label}:`} {value} diff --git a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx index f381eb4..3462de8 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { ButtonBase, Typography, Avatar } from '@mui/material'; import { Link, useNavigate } from 'react-router-dom'; import DeckBuilderIcon from '../../../data/DeckBuilderIcon'; // Import DeckBuilderIcon -import { ROUTE_CONFIG } from 'data/route-config'; +import { ROUTE_CONFIG } from 'data'; // ==============================|| MAIN LOGO ||============================== // diff --git a/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx b/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx deleted file mode 100644 index 1c9a4d9..0000000 --- a/src/layout/REUSABLE_COMPONENTS/ReusableLoadingButton.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { LoadingButton } from '@mui/lab'; -import AdjustSharpIcon from '@mui/icons-material/AdjustSharp'; -import { useMode } from 'context'; - -const ReusableLoadingButton = ({ - loading, - label, - icon, - onClick, - style, - fullWidth, - sx, - variant, -}) => { - const { theme } = useMode(); - - const getButtonStyles = (variant) => { - if (variant === 'warning') { - return { - background: theme.palette.error.main, - borderColor: theme.palette.error.darkest, - borderWidth: 5, - - '&:hover': { - fontWeight: 'bold', - background: theme.palette.error.light, - borderColor: theme.palette.error.dark, - }, - '&:focus': { - outline: `2px solid ${theme.palette.error.dark}`, - outlineOffset: 2, - }, - }; - } - return { - background: theme.palette.greenAccent.emerald, - borderColor: theme.palette.greenAccent.emerald, - borderWidth: 2, - '&:hover': { background: theme.palette.greenAccent.lightSeaGreen }, - '&:focus': { background: theme.palette.greenAccent.lightSeaGreen }, - }; - }; - - return ( - } - fullWidth={fullWidth} - onClick={onClick} - sx={{ - ...sx, - ...getButtonStyles(variant), - }} - > - {label} - - ); -}; - -export default ReusableLoadingButton; diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx index 97d5efe..23b03ea 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx @@ -12,6 +12,7 @@ const BoxHeader = ({ sx, useSX, titleVariant, + subtitleVariant, colorVariant, paddingVariant, }) => { @@ -37,17 +38,15 @@ const BoxHeader = ({ mb="-0.1rem" ml="0.5rem" p="0.5rem" - color={ - useSX ? colorVariant : theme.palette.greenAccent.pureGreenBlue - } + color={useSX ? colorVariant : theme.palette.text.main} > {title} {subtitle !== 'none' && ( {subtitle} @@ -59,7 +58,7 @@ const BoxHeader = ({ theme={theme} variant="h5" fontWeight="700" - color={theme.palette.greenAccent.pureGreenBlue} + color={theme.palette.success.secondary} sx={useSX ? sx : {}} > {sideText} diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx index dc4513b..cade3cd 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx @@ -23,19 +23,19 @@ const TextContainer = styled(Box)` // Pre-calculated colors passed as props const StyledLabel = styled(Typography)` font-size: ${({ theme }) => theme.spacing(6)}; - color: ${({ textColor }) => textColor}; + color: ${({ color }) => color}; word-wrap: break-word; `; const StyledValue = styled(Typography)` - font-size: ${({ theme }) => theme.spacing(8)}; - color: ${({ textColor }) => textColor}; + font-size: ${({ theme }) => theme.spacing(16)}; + color: ${({ color }) => color}; word-wrap: break-word; `; const StyledIcon = styled(Icon)` font-size: 3rem; - color: ${({ iconColor }) => iconColor}; + color: ${({ color }) => color}; `; const IconContainer = styled(Box)` @@ -46,7 +46,7 @@ const IconContainer = styled(Box)` height: 4rem; border-radius: 50%; background-color: ${({ backgroundColor }) => backgroundColor}; - color: ${({ theme }) => theme.colorPrimaryText}; + color: ${({ theme }) => theme.palette.text.colorPrimaryText}; `; const IconStatWrapper = ({ @@ -74,15 +74,15 @@ const IconStatWrapper = ({ - + {icon} - + {label} - + {value} diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx index 583c7ec..f6e1497 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx @@ -14,11 +14,6 @@ function PageLayout({ background, backCol, children }) { height="100%" minHeight="100vh" maxWidth="100%" - // bgColor={ - // backCol - // ? 'linear-gradient(90deg, rgba(13, 93, 150, 0.3) 0%, rgba(160, 214, 186, 0.3) 100%)' - // : 'transparent' - // } sx={{ overflowX: 'hidden', m: 0, p: 0 }} // Ensure no margins or paddings > { const { theme } = useMode(); - const colors = theme.palette.chartTheme; - const primary = colors.primary.default; - const blue = colors.blueAccent.default; - const green = colors.greenAccent.default; - const greenliht = colors.greenAccent.light; + const colors = theme.palette; + const green = colors.success.dark; + const greenliht = colors.success.main_light; const grey = colors.grey.default; return ( { - const { theme } = useMode(); const { isMobile } = useBreakpoint(); const [isVisible, setIsVisible] = useState(true); diff --git a/src/layout/REUSABLE_COMPONENTS/unique/uniqueTheme.jsx b/src/layout/REUSABLE_COMPONENTS/unique/uniqueTheme.jsx deleted file mode 100644 index ff101bc..0000000 --- a/src/layout/REUSABLE_COMPONENTS/unique/uniqueTheme.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import { rgba } from 'polished'; - -const colorTextForDark = rgba('white', 0.96); -const colorLabel = '#A4A3A6'; -const colorText = '#343239'; -const defaultColorTheme = { - id: 'whiteGreen', - borderRadius: '0.75rem', - colorBackground: '#f0f0f9', - colorNavbar: '#fff', - colorNavbarLabel: colorLabel, - colorNavbarLink: colorText, - colorText: colorText, - colorLabel: colorLabel, - colorBorder: '#f0f0f9', - colorPrimary: '#18b984', - - // colorPrimary: '#06D6A0', - colorPrimaryText: colorTextForDark, - colorAccent: '#5fe7bb', - colorAccentText: colorTextForDark, - colorCardBackground: '#ffffff', - colorDefaultBackground: '#e3e3e8', - colorDefaultText: '#73707C', - colorDisabledBackground: '#d5d5e3', - colorDisabledText: '#bebed0', - colorCode: '#100f10', - colorChartShading: '#696969', - boxShadowLogo: 'none', -}; -const uniqueTheme = { - ...defaultColorTheme, - // screenWidthXs: '480px', - // screenWidthSm: '576px', - // screenWidthMd: '768px', - // screenWidthLg: '992px', - gutterWidth: '0.5rem', - containerMaxWidthXs: '100%', - containerMaxWidthSm: '100%', - containerMaxWidthMd: '100%', - containerMaxWidthLg: '1080px', - containerMaxWidthXl: '1200px', - screenWidthXs: '576px', - screenWidthSm: '768px', - screenWidthMd: '992px', - screenWidthLg: '1200px', - screenWidthXl: '1920px', - sidebarWidth: '56px', - sidebarWidthMd: '220px', - colorForDark1: rgba('white', 0.96), - colorForDark2: rgba('white', 0.65), - colorForDark3: rgba('white', 0.45), - fontFamily: 'Poppins', - fontWeightBold: 600, - fontWeightSemibold: 500, - fontWeightRegular: 400, - heightCardMd: '360px', - heightChartMd: '150px', - lenSm1: '0.25rem', - lenSm2: '0.5rem', - lenSm3: '0.75rem', - lenMd1: '1rem', - lenMd2: '1.25rem', - lenMd3: '1.5rem', - lenLg1: '2rem', - lenLg2: '3rem', - lenLg3: '4rem', - lenXl1: '5rem', - lenXl2: '6rem', - lenXl3: '7rem', -}; - -export default uniqueTheme; diff --git a/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx b/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx index 1dec5c0..03b1f18 100644 --- a/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx +++ b/src/layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents.jsx @@ -40,7 +40,7 @@ export const StyledContainerBoxSecondary = styled(Box)(({ theme }) => ({ marginTop: theme.spacing(2), padding: theme.spacing(3), borderRadius: theme.borders.borderRadius.md, - background: theme.palette.greenAccent.lighterSeaGreen, + background: theme.palette.success.main_lighterSeaGreen, boxShadow: theme.shadows[10], marginBottom: theme.spacing(4), transition: 'all 0.3s ease-in-out', // smooth all transitions @@ -54,7 +54,6 @@ export const StyledContainerBox = styled(Box)(({ theme }) => ({ borderRadius: theme.borders.borderRadius.md, background: 'linear-gradient(90deg, rgba(13, 93, 150, 0.3) 0%, rgba(160, 214, 186, 0.3) 100%)', - // background: theme.palette.greenAccent.crystalGreen, boxShadow: theme.shadows[10], marginBottom: theme.spacing(4), transition: 'all 0.3s ease-in-out', // smooth all transitions @@ -64,7 +63,7 @@ export const StyledPaperPrimary = styled(Paper)(({ theme }) => ({ padding: theme.spacing(2), borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[4], - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, color: theme.palette.text.primary, display: 'flex', flexDirection: 'column', @@ -157,7 +156,7 @@ export const DialogContentsBox = styled(Box)(({ theme }) => ({ width: '100%', // minWidth: '500px', // borderRadius: theme.borders.borderRadius.md, - background: theme.palette.greenAccent.evenLighter, + background: theme.palette.success.main_lighter, boxShadow: theme.shadows[10], transition: 'all 0.3s ease-in-out', // smooth all transitions '@media (max-width:600px)': { @@ -171,7 +170,7 @@ export const StyledDialogContent = styled(DialogContent)(({ theme }) => ({ width: '100%', gap: theme.spacing(2), padding: theme.spacing(3), - // backgroundColor: theme.palette.greenAccent.contrastText, + // backgroundColor: theme.palette.success.contrastText, })); export const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ display: 'flex', @@ -180,7 +179,7 @@ export const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ width: '100%', gap: theme.spacing(2), padding: theme.spacing(3), - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, })); export const FormBox = styled(Box)(({ theme }) => ({ display: 'flex', @@ -207,7 +206,7 @@ export const FormPaper = styled(Paper)(({ theme }) => ({ flexGrow: 1, width: '100%', height: '100%', - background: theme.palette.greenAccent.evenLighter, + background: theme.palette.success.main_lighter, borderRadius: '16px', })); export const FormFieldBox = styled(Box)(({ theme }) => ({ @@ -228,18 +227,18 @@ export const StyledTextField = styled(TextField)(({ theme }) => ({ borderColor: theme.palette.transparent.main, }, '&:hover .MuiOutlinedInput-notchedOutline': { - color: theme.palette.greenAccent.default, - borderColor: theme.palette.greenAccent.default, + color: theme.palette.success.dark, + borderColor: theme.palette.success.dark, }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: theme.palette.greenAccent.default, + borderColor: theme.palette.success.dark, borderWidth: '2px', // or other width as you like }, }, borderRadius: theme.borders.borderRadius.md, - color: theme.palette.greenAccent.dark, + color: theme.palette.success.darkest, width: '100%', - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, boxShadow: `0px 2px 4px -1px ${theme.palette.grey[400]}`, marginBottom: theme.spacing(2), })); @@ -268,8 +267,8 @@ export const CardIconWrapper = styled('div')(({ theme }) => ({ height: theme.spacing(4), width: theme.spacing(4), borderRadius: '50%', - backgroundColor: theme.palette.greenAccent.evenLighter, - color: theme.palette.grey.black, + backgroundColor: theme.palette.success.main_lighter, + color: theme.palette.black.darker, '& svg': { fontSize: theme.typography.pxToRem(20), }, @@ -278,7 +277,7 @@ export const CardDetailContainer = styled(Box)(({ theme }) => ({ padding: theme.spacing(2), borderRadius: theme.borders.borderRadius.md, boxShadow: `0 4px 8px 0 ${theme.palette.shadow}`, - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, display: 'flex', flexDirection: 'column', gap: theme.spacing(1), @@ -324,7 +323,7 @@ export const StyledCard = styled(Card)(({ theme }) => ({ maxWidth: '100%', maxHeight: '100%', // Adjusted for better height management flexGrow: 1, - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, borderRadius: theme.borders.borderRadius.md, justifyContent: 'center', transition: 'transform 0.3s ease-in-out', @@ -369,7 +368,7 @@ export const SquareChartContainer = styled(Box)(({ theme }) => ({ export const ChartPaper = styled(Paper)(({ theme }) => ({ borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, color: theme.palette.text.secondary, padding: theme.spacing(2), display: 'flex', @@ -385,7 +384,7 @@ export const ChartPaper = styled(Paper)(({ theme }) => ({ export const ResponsiveSquare = styled(Box)(({ theme }) => ({ width: '100%', paddingTop: '100%', - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], display: 'flex', @@ -396,7 +395,7 @@ export const ResponsiveSquare = styled(Box)(({ theme }) => ({ // ! FORMS / INPUTS export const StyledFormControl = styled(FormControl)(({ theme }) => ({ margin: theme.spacing(1, 0), - backgroundColor: theme.palette.greenAccent.contrastText, // Adjusted for a slight contrast + backgroundColor: theme.palette.success.contrastText, // Adjusted for a slight contrast borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[1], // Subtle shadow for depth @@ -406,8 +405,8 @@ export const StyledFormControl = styled(FormControl)(({ theme }) => ({ backgroundColor: theme.palette.action.hover, }, '&.Mui-focused': { - backgroundColor: theme.palette.greenAccent.contrastText, - borderColor: theme.palette.greenAccent.light, + backgroundColor: theme.palette.success.contrastText, + borderColor: theme.palette.success.main_light, }, }, })); @@ -431,7 +430,7 @@ export const StyledSkeletonCard = styled(Card)(({ theme }) => ({ flexGrow: 1, // width: 'auto', maxHeight: '14vh', - backgroundColor: theme.palette.greenAccent.contrastText, + backgroundColor: theme.palette.success.contrastText, borderRadius: theme.borders.borderRadius.md, boxShadow: theme.shadows[5], transition: 'transform 0.3s ease-in-out', @@ -477,7 +476,7 @@ export const CardListItem = styled(ListItem)(({ theme }) => ({ fontSize: '1rem', // Adjust font size as needed })); export const FeatureCard = styled(Card)(({ theme }) => ({ - background: theme.palette.greenAccent.lightest, + background: theme.palette.success.main_lightest, boxShadow: theme.shadows[5], transition: 'box-shadow 0.3s ease-in-out', // smooth transition for shadow '&:hover': { diff --git a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx index 75c45bc..4116e56 100644 --- a/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx +++ b/src/layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents.jsx @@ -1,4 +1,4 @@ -import { Box, Switch } from '@mui/material'; +import { Box, Paper, Switch } from '@mui/material'; import styled from 'styled-components'; import LoginIcon from '@mui/icons-material/Login'; import PersonAddIcon from '@mui/icons-material/PersonAdd'; @@ -14,7 +14,7 @@ export const HeroBox = styled(Box)(({ theme }) => ({ })); export const CardWrapper = styled(RCMainCard)(({ theme }) => ({ - backgroundColor: theme.palette.greenAccent.dark, + backgroundColor: theme.palette.success.darkest, color: theme.palette.primary.light, overflow: 'hidden', position: 'relative', @@ -23,7 +23,7 @@ export const CardWrapper = styled(RCMainCard)(({ theme }) => ({ position: 'absolute', width: 210, height: 210, - background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, + // background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, borderRadius: '50%', top: -30, right: -180, @@ -39,3 +39,15 @@ export const CardWrapper = styled(RCMainCard)(({ theme }) => ({ right: -130, }, })); +export const SettingsPaper = styled(Paper)(({ theme }) => ({ + padding: theme.spacing(3), + borderRadius: theme.borders.borderRadius.md, + background: theme.palette.success.main_light, + boxShadow: theme.shadows[3], + margin: 'auto', + width: '100%', + maxWidth: 'md', + '&:hover': { + boxShadow: theme.shadows[6], + }, +})); diff --git a/src/layout/collection/CollectionsViewLayout/index.jsx b/src/layout/collection/CollectionsViewLayout/index.jsx index 938841d..f42a1ad 100644 --- a/src/layout/collection/CollectionsViewLayout/index.jsx +++ b/src/layout/collection/CollectionsViewLayout/index.jsx @@ -86,7 +86,7 @@ const CollectionsViewLayout = ({ handleSelectAndShowCollection }) => { alignItems: 'center', mx: 'auto', px: '1rem', - backgroundColor: theme.palette.grey.black, + backgroundColor: theme.palette.black.darker, }} > diff --git a/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx index 5439fd9..7ca95cb 100644 --- a/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx @@ -10,11 +10,11 @@ import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; const PricedCardList = () => { const { theme } = useMode(); - const colors = theme.palette.chartTheme; + const colors = theme.palette; const grey = colors.grey.darkest; const lightGrey = colors.grey.lightest; const primary = colors.primary.dark; - const greenAccent = colors.greenAccent.light; + const greenAccent = colors.success.main_light; const { collectionMetaData } = useManager(); const { data, columns } = useMemo( () => prepareTableData(collectionMetaData?.topFiveCards, 'topCards'), @@ -46,7 +46,7 @@ const PricedCardList = () => { justifyContent: 'center', p: theme.spacing(2), background: grey, - border: theme.palette.chartTheme.greenAccent.dark, + border: theme.palette.success.darkest, borderRadius: theme.borders.borderRadius.md, }} > diff --git a/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx b/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx index 4e451a5..1e670d9 100644 --- a/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx @@ -18,13 +18,13 @@ import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; const ValuDistributionCircle = () => { const { theme } = useMode(); const { collectionMetaData } = useManager(); - const colors = theme.palette.chartTheme; - const { lightest, darkest, light, dark } = colors.greenAccent; + const colors = theme.palette; + const { main_lighter, darkest, light, dark } = colors.success; const greyDark = colors.grey.dark; const greyDarkest = colors.grey.darkest; const contrastText = colors.grey.contrastText; const primaryDark = colors.primary.dark; - const COLORS = [colors.greenAccent.default, lightest, light, dark, darkest]; + const COLORS = [colors.success.dark, main_lighter, light, dark, darkest]; const renderCustomLabel = ({ cx, cy, @@ -96,7 +96,6 @@ const ValuDistributionCircle = () => { title="Collection Value Distribution" icon={ { titleVariant="h5" paddingVariant={theme.spacing(2)} sx={{ - color: colors.greenAccent.light, - borderRadius: theme.borders.borderRadius.mdLarge, + color: colors.success.main_light, + borderRadius: theme.borders.borderRadius.lg, }} /> diff --git a/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx b/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx index cbfe3f4..bfb4123 100644 --- a/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx +++ b/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx @@ -1,12 +1,11 @@ -import React, { useEffect } from 'react'; -import { IconButton, Box, Grid, Grow, Card } from '@mui/material'; +import React from 'react'; +import { IconButton, Grid, Grow } from '@mui/material'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import MDBox from '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'; +import { collectionPortfolioHeaderItems } from 'data'; const HeaderItem = ({ icon, label, value, delay }) => { return ( @@ -22,7 +21,6 @@ const HeaderItem = ({ icon, label, value, delay }) => { isPrimary={true} value={value} icon={icon} - theme={uniqueTheme} /> @@ -54,7 +52,7 @@ const CollectionPortfolioHeader = ({ onBack }) => { background: 'white', }} > - + {items?.map((item, index) => ( diff --git a/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx b/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx index aa4cc03..e6d101e 100644 --- a/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx +++ b/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx @@ -24,7 +24,7 @@ const MyPortfolioLineChart = ({ data, // tickValues, validMarkers, - greenAccent, + success, redAccent, grey, text, @@ -116,7 +116,7 @@ const MyPortfolioLineChart = ({ }, legend: { text: { - fill: greenAccent.darkest, + fill: success.darkestest, fontSize: 12, outlineWidth: 0.1, outlineColor: grey.darkest, @@ -161,7 +161,7 @@ MyPortfolioLineChart.propTypes = { ).isRequired, }) ).isRequired, - greenAccent: PropTypes.object.isRequired, + success: PropTypes.object.isRequired, redAccent: PropTypes.object.isRequired, grey: PropTypes.object.isRequired, text: PropTypes.string.isRequired, diff --git a/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx b/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx index 8933659..9faa9c4 100644 --- a/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx +++ b/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx @@ -1,5 +1,5 @@ -import React, { useState, useMemo } from 'react'; -import { CardMedia, CardContent, useMediaQuery, Icon } from '@mui/material'; +import React, { useState, useRef, useEffect } from 'react'; +import { CardMedia, CardContent, Icon } from '@mui/material'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/effect-coverflow'; @@ -20,10 +20,26 @@ import useBreakpoint from 'context/hooks/useBreakPoint'; const TopCardsSwiper = () => { const { theme } = useMode(); const { isMobile } = useBreakpoint(); + const swiperRef = useRef(null); + const [activeCardIndex, setActiveCardIndex] = useState(0); const { collectionMetaData } = useManager(); const handleSlideChange = (swiper) => setActiveCardIndex(swiper.realIndex); - + useEffect(() => { + const swiperInstance = swiperRef.current?.swiper; + if (swiperInstance) { + swiperInstance.on('slideChange', () => { + const { activeIndex } = swiperInstance; + handleSlideChange(activeIndex); + if ((activeIndex + 1) % 4 === 0) { + swiperInstance.autoplay.stop(); + setTimeout(() => { + swiperInstance?.autoplay?.start(); + }, 10000); + } + }); + } + }, []); return ( { check_circle diff --git a/src/layout/collection/PortfolioViewLayout/index.jsx b/src/layout/collection/PortfolioViewLayout/index.jsx index ce2c979..365f7e3 100644 --- a/src/layout/collection/PortfolioViewLayout/index.jsx +++ b/src/layout/collection/PortfolioViewLayout/index.jsx @@ -8,7 +8,7 @@ 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 { formFields } from 'components/forms/formsConfig'; +import { formFields } from 'data/formsConfig'; import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import { DataGrid, GridToolbar } from '@mui/x-data-grid'; import NivoContainer from 'layout/REUSABLE_COMPONENTS/layout-utils/NivoContainer'; @@ -21,6 +21,7 @@ import { styled } from 'styled-components'; import TopCardsSwiper from './TopCardsSwiper'; import MyPortfolioLineChart from './MyPortfolioLineChart'; import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; +import useBreakpoint from 'context/hooks/useBreakPoint'; const renderCardContainer = (content, isChart, isForm) => { return ( { > ({ const PortfolioViewLayout = () => { const { theme } = useMode(); - const isXs = useMediaQuery(theme.breakpoints.down('sm')); + const { isMobile } = useBreakpoint(); const { fetchCollections, - collections, hasFetchedCollections, selectedCollectionId, selectedCollection, @@ -141,7 +141,7 @@ const PortfolioViewLayout = () => { No worries, the chart requires that users add a minimum of 5 @@ -154,25 +154,10 @@ const PortfolioViewLayout = () => { ) : ( )} - {/* {selectedCollection?.cards?.length < 5 ? ( - - - - - ) : ( - - )} */} {/* FORM SELECTOR ROW SECTION */} - + {/* TOP CARDS ROW SECTION */} - + {/* CARD LIST SECTION */} { const { theme } = useMode(); - const { greenAccent, redAccent, grey } = theme.palette.chartTheme; + const { success, redAccent, grey } = theme.palette; const { selectedTimeRange, selectedStat } = useSelectorActions(); const { selectedCollection, handleSelectCollection } = useManager(); const [collection, setCollection] = useState(selectedCollection); @@ -315,7 +300,7 @@ const ChartAreaComponent = React.memo(() => { validMarkers={[memoMarker]} xFormat={memoChartData.id === '24hr' ? '%H:%M' : '%b %d'} redAccent={redAccent} - greenAccent={greenAccent} + success={success} grey={grey} text={theme.palette.text.primary} /> @@ -389,6 +374,7 @@ const CollectionCardList = React.memo(({ data, columns, theme }) => { { checkboxSelection sx={{ '& .MuiDataGrid-root': { - color: theme.palette.chartTheme.grey.dark, + color: theme.palette.grey.dark, border: 'none', }, '& .MuiDataGrid-cell': { - borderBottom: `1px solid ${theme.palette.chartTheme.grey.lightest} !important`, + borderBottom: `1px solid ${theme.palette.grey.lightest} !important`, }, '& .MuiDataGrid-columnHeaders': { - borderBottom: `1px solid ${theme.palette.chartTheme.grey.lightest} !important`, + borderBottom: `1px solid ${theme.palette.grey.lightest} !important`, }, '& .MuiDataGrid-columnSeparator': { visibility: 'hidden', diff --git a/src/layout/collection/index.jsx b/src/layout/collection/index.jsx index dd11e35..de3ad6a 100644 --- a/src/layout/collection/index.jsx +++ b/src/layout/collection/index.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useMode } from 'context'; import DashboardLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; diff --git a/src/layout/deck/DeckListItem.jsx b/src/layout/deck/DeckListItem.jsx index 58ad844..428ba85 100644 --- a/src/layout/deck/DeckListItem.jsx +++ b/src/layout/deck/DeckListItem.jsx @@ -1,5 +1,5 @@ /* eslint-disable max-len */ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Card, @@ -14,11 +14,10 @@ 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 { formFields } from 'data/formsConfig'; import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import useBreakpoint from 'context/hooks/useBreakPoint'; import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants'; -import useManager from 'context/useManager'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; import { roundToNearestTenth } from 'context/Helpers'; const AnimatedInfoItem = ({ label, value, theme, delay }) => { @@ -56,12 +55,10 @@ function prepareDeckData(deck, cards) { value: `$${roundToNearestTenth(deck?.totalPrice)}`, }, { label: 'Cards', value: `${deck?.totalQuantity}` }, - // { label: 'Unique Cards', value: `${cards?.length}` }, { label: 'Tags', value: tags.join(', '), }, - // { label: 'Color', value: deck?.color }, ]; return { infoItems, @@ -176,9 +173,14 @@ const DeckListItem = ({ userInterfaceOptions={{ submitButton: true, submitButtonLabel: 'Update Deck', + // updateActions: { + // handleUpdate: () => handleSelectAndShowDeck(deck), + // }, deleteButton: true, deleteButtonLabel: 'Delete Deck', - deleteActions: handleDelete, + deleteActions: { + handleDelete: () => handleDelete(deck), + }, }} initialData={{ name: deck?.name || '', diff --git a/src/layout/deck/deckData.jsx b/src/layout/deck/deckData.jsx deleted file mode 100644 index 0a1f892..0000000 --- a/src/layout/deck/deckData.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import { roundToNearestTenth } from 'context/Helpers'; -function prepareDeckData(deck, cards) { - const genData = { - name: deck?.name, - description: deck?.description, - tags: deck?.tags, - color: deck?.color, - }; - // const cards = deck?.cards?.map((card) => ({ - // ...card, - // quantity: roundToNearestTenth(card?.quantity), - // })); - const infoItems = [ - { label: 'Name', value: deck?.name }, - { - label: 'Value', - value: `$${roundToNearestTenth(deck?.totalPrice)}`, - }, - { label: 'Cards', value: `${deck?.totalQuantity}` }, - { label: 'Unique Cards', value: `${cards?.length}` }, - { label: 'Tags', value: deck?.tags?.join(', ') }, - { label: 'Color', value: deck?.color }, - ]; - return { - genData, - infoItems, - }; -} diff --git a/src/layout/deck/index.jsx b/src/layout/deck/index.jsx index 8b5310d..ce5ceb3 100644 --- a/src/layout/deck/index.jsx +++ b/src/layout/deck/index.jsx @@ -1,10 +1,4 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Card, Collapse, @@ -40,6 +34,7 @@ const DeckBuilder = () => { const { setActiveFormSchema } = useFormManagement(); const { dialogState, openDialog, closeDialog } = useDialogState(); const [activeTab, setActiveTab] = useState(0); + const [tabsOrientation, setTabsOrientation] = useState('horizontal'); const [loadingState, setLoadingState] = useState({}); const [decks, setDecks] = useState([]); useEffect(() => { @@ -73,18 +68,13 @@ const DeckBuilder = () => { setLoadingState((prev) => ({ ...prev, [deckId]: false, - })); // Set loading state to false when deck is fully loaded + })); }, []); - const handleOpenAddDialog = useCallback(() => { - setActiveFormSchema('addDeckForm'); - openDialog('isAddDeckDialogOpen'); - }, [openDialog, setActiveFormSchema]); useEffect(() => { const handleStorageChange = (event) => { if (event.key === 'selectedDeckId' || event.key === 'selectedDeck') { const updatedDeckId = event.newValue; - // const updatedDeckId = localStorage.getItem('selectedDeckId'); const updatedDeck = decks?.find((deck) => deck._id === updatedDeckId); if (updatedDeck) { setActiveTab(decks?.indexOf(updatedDeck)); @@ -103,6 +93,25 @@ const DeckBuilder = () => { window.removeEventListener('storage', handleStorageChange); }; }, [decks, handleSelectDeck]); + // useEffect(() => { + // // A function that sets the orientation state of the tabs. + // function handleTabsOrientation() { + // return window.innerWidth < theme.breakpoints.values.sm + // ? setTabsOrientation('vertical') + // : setTabsOrientation('horizontal'); + // } + + // /** + // The event listener that's calling the handleTabsOrientation function when resizing the window. + // */ + // window.addEventListener('resize', handleTabsOrientation); + + // // Call the handleTabsOrientation function to set the state with the initial value. + // handleTabsOrientation(); + + // // Remove event listener on cleanup + // return () => window.removeEventListener('resize', handleTabsOrientation); + // }, [tabsOrientation]); const handleChangeTab = useCallback( async (event, newValue) => { setActiveTab(newValue); @@ -122,21 +131,11 @@ const DeckBuilder = () => { }, [decks, handleSelectDeck, fetchDeckById, handleDeckLoaded] ); - const deckTabs = decks?.map((deck, index) => ( - : deck.name - } - value={index} - key={`deck-tab-${deck?._id}-${index}`} - /> - )); const deckListItems = useMemo( () => decks?.map((deck, index) => ( handleDelete(deck)} @@ -182,7 +181,10 @@ const DeckBuilder = () => { type={'Deck Collection'} action={{ route: '', tooltip: 'Add Deck' }} username={user.username} - handleOpenDialog={handleOpenAddDialog} + handleOpenDialog={() => { + setActiveFormSchema('addDeckForm'); + openDialog('isAddDeckDialogOpen'); + }} /> @@ -201,8 +203,23 @@ const DeckBuilder = () => { variant="scrollable" scrollButtons="auto" theme={theme} + textColor="primary" > - {deckTabs} + {decks?.map((deck, index) => ( + + ) : ( + {deck?.name} + ) + } + value={index} + key={`deck-tab-${deck?._id}-${index}`} + theme={theme} + textColor="primary" + /> + ))} diff --git a/src/layout/home/FeatureCardsSection.jsx b/src/layout/home/FeatureCardsSection.jsx index 62d6362..e122eea 100644 --- a/src/layout/home/FeatureCardsSection.jsx +++ b/src/layout/home/FeatureCardsSection.jsx @@ -73,7 +73,7 @@ export const AnimatedFeatureCard = ({ cardData }) => { titleTypographyProps={{ align: 'center' }} subheaderTypographyProps={{ align: 'center' }} sx={{ - backgroundColor: theme.palette.greenAccent.light, + backgroundColor: theme.palette.success.main_light, height: '20%', }} /> diff --git a/src/layout/home/HeroChartSection.jsx b/src/layout/home/HeroChartSection.jsx index c696c4f..f183bb2 100644 --- a/src/layout/home/HeroChartSection.jsx +++ b/src/layout/home/HeroChartSection.jsx @@ -123,7 +123,7 @@ const HeroChartSection = ({ @@ -131,7 +131,7 @@ const HeroChartSection = ({ gridArea="b" sx={{ flexGrow: 1, - border: theme.palette.chartTheme.greenAccent.default, + border: theme.palette.success.dark, borderWidth: 5, width: '100%', height: '100%', @@ -143,7 +143,7 @@ const HeroChartSection = ({ justifyContent: 'center', p: theme.spacing(2), background: theme.palette.transparent.main, - border: theme.palette.chartTheme.greenAccent.dark, + border: theme.palette.success.darkest, borderWidth: 5, borderRadius: 'inherit', }} @@ -162,8 +162,7 @@ const HeroChartSection = ({ { const { theme } = useMode(); const navigate = useNavigate(); @@ -60,7 +59,7 @@ const Navigation = () => { await logout(); navigate('/login'); setLogoutClicked(false); - }, [logout, navigate]); + }, [navigate]); const ContentContainer = ({ type, content, clickAction, itemIndex }) => { const handleClick = () => { if (clickAction === 'navigate' && itemIndex !== undefined) { @@ -81,7 +80,7 @@ const Navigation = () => { maxWidth: clickAction === 'navigate' ? '100%' : '5rem', boxShadow: 'none', border: '3px solid', - borderColor: theme.palette.chartTheme.greenAccent.light, + borderColor: theme.palette.success.main_light, '&:hover': { bgcolor: 'background.level1' }, }} onClick={handleClick} @@ -109,7 +108,7 @@ const Navigation = () => { maxHeight: 64, maxWidth: '100%', '&:hover': { - backgroundColor: rgba(theme.palette.greenAccent.lighterSeaGreen), + backgroundColor: rgba(theme.palette.success.main_lighter), }, }} > @@ -185,7 +184,7 @@ const Navigation = () => { variant="soft" sx={{ mr: 1, - background: theme.palette.chartTheme.greenAccent.light, + background: theme.palette.success.main_light, color: 'white', }} /> @@ -260,7 +259,7 @@ const Navigation = () => { variant="soft" sx={{ mr: 1, - background: theme.palette.chartTheme.greenAccent.light, + background: theme.palette.success.main_light, color: 'white', // cursor: 'pointer', }} diff --git a/src/layout/profile/NotificationSection.js/NotificationList.jsx b/src/layout/profile/NotificationSection.js/NotificationList.jsx index a920f4b..d6b725c 100644 --- a/src/layout/profile/NotificationSection.js/NotificationList.jsx +++ b/src/layout/profile/NotificationSection.js/NotificationList.jsx @@ -164,7 +164,7 @@ const NotificationList = () => { { const { fetchCollections, hasFetchedCollections } = useManager(); diff --git a/src/pages/DeckBuilderPage.js b/src/pages/DeckBuilderPage.js index 5e7cc52..53b0e2c 100644 --- a/src/pages/DeckBuilderPage.js +++ b/src/pages/DeckBuilderPage.js @@ -1,6 +1,6 @@ -import React, { useEffect } from 'react'; -import DeckBuilder from '../layout/deck'; -import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +import React from 'react'; +import DeckBuilder from 'layout/deck'; +import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; // ==============================|| DECK BUILDER PAGE ||============================== // diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 18d51c4..16c0f78 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,9 +1,8 @@ import React from 'react'; import { Grid } from '@mui/material'; import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; -// import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; -import HeroSection from '../layout/home'; -import FeatureCardsSection from '../layout/home/FeatureCardsSection'; +import HeroSection from 'layout/home'; +import FeatureCardsSection from 'layout/home/FeatureCardsSection'; // ==============================|| HOME PAGE ||============================== // diff --git a/src/pages/LoginDialog.jsx b/src/pages/LoginDialog.jsx index 1b810c4..0347d31 100644 --- a/src/pages/LoginDialog.jsx +++ b/src/pages/LoginDialog.jsx @@ -24,7 +24,7 @@ import PersonAddIcon from '@mui/icons-material/PersonAdd'; import useDialogState from 'context/hooks/useDialogState'; import useManageCookies from 'context/hooks/useManageCookies'; import { useFormManagement } from 'context/formHooks/useFormManagement'; -import { formFields } from 'components/forms/formsConfig'; +import { formFields } from 'data/formsConfig'; import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import styled from 'styled-components'; const StyledInfoPanel = styled(Box)(({ theme }) => ({ @@ -35,7 +35,6 @@ const StyledInfoPanel = styled(Box)(({ theme }) => ({ position: 'absolute', right: 15, // Align to the right edge of the parent dialog top: 15, // Align to the top of the dialog - // transform: 'translate(15%, 0%)', // Adjust so it slightly overlaps width: 280, zIndex: 1500, // Ensure it is above the dialog })); @@ -133,7 +132,7 @@ function LoginDialog() { diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx index b4287c4..aafdccc 100644 --- a/src/pages/LoginPage.jsx +++ b/src/pages/LoginPage.jsx @@ -3,43 +3,7 @@ import { CssBaseline, Box, Typography, Card } from '@mui/material'; import SplashPage2 from 'layout/REUSABLE_COMPONENTS/system-utils/SplashPage2'; import LoginDialog from './LoginDialog'; // Import the LoginDialog component import useManageCookies from 'context/hooks/useManageCookies'; -import { ThemeProvider } from '@mui/material/styles'; import { useMode } from 'context'; -import styled from 'styled-components'; - -const StyledInfoPanel = styled(Box)(({ theme }) => ({ - padding: theme.spacing(2), - backgroundColor: theme.palette.background.paper, - borderRadius: theme.borders.borderRadius.md, - boxShadow: theme.shadows[4], - marginLeft: theme.spacing(2), - width: 300, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', -})); - -const GuestInfoPanel = () => { - const { theme } = useMode(); - - return ( - - - First Time Here? - - - Use the guest account to explore: - - - Username: guest - - - Password: password123 - - - ); -}; const LoginPage = () => { const { theme } = useMode(); // Using the theme from MUI's theme provider @@ -69,11 +33,7 @@ const LoginPage = () => { height: '100vh', }} > - {!isLoggedIn && ( - <> - - - )} + {!isLoggedIn && } ); diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index e54c591..4621b00 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -1,8 +1,10 @@ import React, { useState } from 'react'; -import Overview from '../layout/profile/index'; +import Overview from 'layout/profile/index'; import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; import { Grid } from '@mui/material'; +// ==============================|| PROFILE PAGE ||============================== // + const ProfilePage = () => { return ( diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js index 63280aa..13254ec 100644 --- a/src/pages/StorePage.js +++ b/src/pages/StorePage.js @@ -1,83 +1,13 @@ -import React, { useEffect, useRef, useState } from 'react'; -import MDBox from '../layout/REUSABLE_COMPONENTS/MDBOX'; -import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; -import StoreSearch from '../layout/store'; +import React from 'react'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +import StoreSearch from 'layout/store'; import { Grid, Typography, Box } from '@mui/material'; -import { useMode } from '../context'; +import { useMode } from 'context'; -const heroBannerHeight = { - xs: '7vh', - sm: '10vh', - md: '15vh', - lg: '20vh', -}; -const HeroBanner = ({ title, subtitle }) => { +const StorePage = () => { const { theme } = useMode(); - return ( - - - - - {title} - - - {subtitle} - - - - - ); -}; -const StorePage = () => { return ( { minHeight: '100vh', }} > - + + + + + {'Welcome to Store'} + + + {'Search for cards and add them to your cart.'} + + + +