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.'} + + + +