Skip to content

Commit

Permalink
cleaning up styled and custom components
Browse files Browse the repository at this point in the history
  • Loading branch information
reedoooo committed May 4, 2024
1 parent 38f94ec commit 6f1fe5f
Show file tree
Hide file tree
Showing 149 changed files with 1,839 additions and 3,406 deletions.
61 changes: 30 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

TCG Enhanced Cardstore is a full-stack web application designed for trading card game enthusiasts. It offers an all-encompassing platform to effortlessly manage card collections, construct decks, and transact securely. Designed with responsiveness and security at its core, this platform caters to the needs of both occasional collectors and professional traders.


### Key Features

- **Card Search & Management**: Robust search capabilities and collection management tools.
Expand All @@ -15,6 +14,36 @@ TCG Enhanced Cardstore is a full-stack web application designed for trading card
- **Responsive Design**: Mobile-friendly layout for on-the-go access.
- **Real-Time Updates**: Backend cron jobs ensure the latest card data.

## Gallery

Here's a glimpse of what TCG Enhanced Cardstore offers:

### Home Page

![Home Page](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/homepage.png)

### Deck Builder

![Deck Builder](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/deck-home.png)

### Portfolio

![Portfolio Home](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/collection-home.png)

### Cart

![Cart](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/cart-checkout.png)

### Profile

![Profile](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/profile-home.png)

### Store Search

![Store Search](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/store-home.png)

_For an interactive experience, visit the [Live Demo](https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/)._

## Technologies

### Frontend
Expand Down Expand Up @@ -101,36 +130,6 @@ The backend for the Enhanced Card Store is built using a diverse set of technolo
- **cookie-parser & cors**: Handles cookie parsing and enables CORS to manage security and access controls.
- **crypto-js**: Provides cryptographic functionality including encryption and secure encoding.

## Gallery

Here's a glimpse of what TCG Enhanced Cardstore offers:

### Home Page

![Home Page](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/homepage.png)

### Deck Builder

![Deck Builder](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/deck-home.png)

### Portfolio

![Portfolio Home](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/collection-home.png)

### Cart

![Cart](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/cart-checkout.png)

### Profile

![Profile](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/profile-home.png)

### Store Search

![Store Search](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/store-home.png)

_For an interactive experience, visit the [Live Demo](https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/)._

## Installation

Get started with these simple steps:
Expand Down
60 changes: 56 additions & 4 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,65 @@
// App.js
import React, { useEffect } from 'react';
import React, { Suspense, lazy } from 'react';
import './assets/css/index.css';
import './assets/css/card.css';
import './assets/css/page.css';
import Main from './Main';
// ==============================|| APP ||============================== //
import useManageCookies from 'context/hooks/useManageCookies';
import useConfigurator from 'context/hooks/useConfigurator';
import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
import Navigation from 'layout/navigation';
import Configurator from 'layout/REUSABLE_COMPONENTS/Configurator';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
import { Route, Routes } from 'react-router-dom';
import PrivateRoute from 'layout/navigation/PrivateRoute';
import { ROUTE_CONFIG } from 'data/route-config';
import LoginDialog from 'pages/LoginDialog';

// ==============================|| APP ||============================== //
const LazyRoute = ({ componentName, ...rest }) => {
const Component = lazy(() => import(`./pages/${componentName}`));
return <Component {...rest} />;
};
const App = () => {
return <Main />;
const { getCookie } = useManageCookies();
const { isLoggedIn } = getCookie(['isLoggedIn']);
const { isConfiguratorOpen } = useConfigurator();
return (
<PageLayout
sx={{
backgroundColor: '#3D3D3D',
}}
>
<Navigation isLoggedIn={isLoggedIn} />
{isConfiguratorOpen && <Configurator />}
<TransitionGroup component={null} exit={false}>
<CSSTransition key={location.key} classNames="fade" timeout={300}>
<Suspense fallback={<LoadingOverlay />}>
<Routes>
{ROUTE_CONFIG.routes.map(
({ path, componentName, isPrivate }, index) => (
<Route
key={index}
path={path}
element={
isPrivate ? (
<PrivateRoute>
<LazyRoute componentName={componentName} />
</PrivateRoute>
) : (
<LazyRoute componentName={componentName} />
)
}
/>
)
)}
</Routes>
</Suspense>
</CSSTransition>
</TransitionGroup>
<LoginDialog />
</PageLayout>
);
};

export default App;
62 changes: 0 additions & 62 deletions src/Main.jsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/assets/animations/LoadingCardAnimation.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const sizes = {

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

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions src/assets/animations/SingleCardAnimation.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useRef } from 'react';
import { useSpring, animated } from 'react-spring';
import placeholder from '../../assets/images/placeholder.jpeg';
import placeholder from 'assets/images/placeholder.jpeg';

const SingleCardAnimation = ({ cardImage }) => {
const containerRef = useRef(null);
Expand Down Expand Up @@ -54,7 +54,7 @@ export default SingleCardAnimation;

// import React, { useRef } from 'react';
// import { useSpring, animated } from 'react-spring';
// import placeholder from '../../assets/images/placeholder.jpeg';
// import placeholder from 'assets/images/placeholder.jpeg';

// const SingleCardAnimation = ({ cardImage }) => {
// const containerRef = useRef(null);
Expand Down
File renamed without changes.
8 changes: 2 additions & 6 deletions src/assets/themes/Transitions.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import { forwardRef } from 'react';

// types
import PropTypes from 'prop-types';

// material-ui
import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material';
import React from 'react';

// ==============================|| TRANSITIONS ||============================== //

const Transitions = forwardRef(
const Transitions = React.forwardRef(
({ children, position, type, direction, ...others }, ref) => {
let positionSX = {
transformOrigin: '0 0 0',
Expand Down
12 changes: 6 additions & 6 deletions src/assets/themes/base/borders.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import colors from './colors';
import pxToRem from '../functions/pxToRem';
import colors from 'assets/themes/base/colors';
import pxToRem from 'assets/themes/functions/pxToRem';

const { grey } = colors;

const borders = {
Expand All @@ -16,13 +17,12 @@ const borders = {
4: pxToRem(4),
5: pxToRem(5),
},

borderRadius: {
xs: pxToRem(1.6),
sm: pxToRem(2),
md: pxToRem(6),
lg: pxToRem(8),
xl: pxToRem(12),
md: pxToRem(6), // px equivalent 6/16 = 0.375rem or
lg: pxToRem(8), // px equivalent 8/16 = 0.5rem or 50% of 1rem which is 16px
xl: pxToRem(12), // px equivalent 12/16 = 0.75rem or 75% of 1rem which is 16px
xxl: pxToRem(16),
section: pxToRem(160),
},
Expand Down
2 changes: 1 addition & 1 deletion src/assets/themes/base/cleanup/theme.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createTheme } from '@mui/material/styles';

// assets
import colors from '../../scss/_themes-vars.module.scss';
import colors from 'scss/_themes-vars.module.scss';

// project imports
// import componentStyleOverrides from './compStyleOverride';
Expand Down
13 changes: 13 additions & 0 deletions src/assets/themes/base/colors.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const colors = {
dark: {
main: '#344767',
focus: '#2c3c58',
state: '#191919',
},
gradients: {
primary: {
Expand Down Expand Up @@ -228,6 +229,18 @@ const colors = {
tabs: {
indicator: { boxShadow: '#ddd' },
},
// inputBorderColor: {
// main: '#d2d6da',
// hover: '#b3b9c2',
// active: '#9499a2',
// disabled: '#d2d6da',
// error: '#f44336',
// success: '#4caf4f',
// warning: '#ff9900',
// info: '#00bbd4',
// light: '#adb5bd',
// dark: '#404040',
// },
};

export default colors;
13 changes: 8 additions & 5 deletions src/assets/themes/base/customColorPalettes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,12 @@ const success = {
light: '#70d8bd', // '#4cceac',
main: '#18b984',
secondary: '#5CDB95',
tertiary: '#5fe7bb',
focus: rgba('#18b984' || 'white', 0.15),
secondaryFocus: rgba('#5CDB95' || 'white', 0.15),
dark: '#3da58a',
darkest: '#2e7c67', // '#70d8bd',
contrastText: '#fff',
contrastText: '#dbf5ee',
hoverContrastText: colorTextForDark,
};
const info = {
Expand Down Expand Up @@ -279,13 +280,15 @@ const rarityOverlay = {
// Add more rarities as needed
};
const text = {
// main: '#212121',
primary: '#212121',
secondary: '#3d3d3d',
main: '#3d3d3d', // '#424242',
focus: '#212121',
dark: '#424242',
primary: '#212121',
secondary: '#f5f5f5',
tertiary: '#ffffff',
colorText: '#343239',
colorPrimaryText: rgba('white', 0.96),
colorLabel: '#A4A3A6',
contrastText: '#ffffff',
};
const divider = 'white';
const action = {
Expand Down
2 changes: 2 additions & 0 deletions src/assets/themes/base/palette.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ const palette = {
lighter: '#94e2cd',
light: '#4cceac',
main: '#18b984',
secondary: '#5CDB95',
tertiary: '#5fe7bb',
dark: '#2e7c67',
focus: rgba('#18b984' || 'white', 0.15),
contrastText: '#dbf5ee',
Expand Down
15 changes: 12 additions & 3 deletions src/assets/themes/components/tabs/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default {
styleOverrides: {
root: {
position: 'relative',
backgroundColor: grey.default,
// backgroundColor: grey.default,
borderRadius: borderRadius.xl,
minHeight: 'unset',
padding: pxToRem(4),
Expand All @@ -38,10 +38,19 @@ export default {
indicator: {
height: '100%',
borderRadius: borderRadius.lg,
backgroundColor: success.dark,
// backgroundColor: success.dark,
backgroundColor: success.main, // Ensure this is not commented out
boxShadow: tabsBoxShadow.indicator,
transition: 'all 500ms ease',
color: `${success.dark} !important`,
color: `${success.main} !important`,
},

label: {
color: `${success.main} !important`,
},

labelIcon: {
color: `${success.main} !important`,
},
},
};
Loading

0 comments on commit 6f1fe5f

Please sign in to comment.