Skip to content

Commit

Permalink
fixed time range chart update
Browse files Browse the repository at this point in the history
  • Loading branch information
reedoooo committed Apr 9, 2024
1 parent b310eb8 commit 88557b8
Show file tree
Hide file tree
Showing 137 changed files with 4,250 additions and 3,274 deletions.
4 changes: 3 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
{}
{
"liveServer.settings.port": 5501
}
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,12 @@
"chroma-js": "^2.4.2",
"date-fns": "^2.30.0",
"dayjs": "^1.11.9",
"downshift": "^9.0.1",
"image-downloader": "^4.3.0",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"material-ui-image": "^3.3.2",
"mathjs": "^12.4.1",
"moment": "^2.29.4",
"notistack": "^3.0.1",
"polished": "^4.3.1",
Expand Down
25 changes: 14 additions & 11 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,27 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" type="image/png" href="/favicon.png" sizes="16x16" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

<link
rel="canonical"
href="http://reedvogt.com/projects/enhanced-card-store"
/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand Down
42 changes: 22 additions & 20 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
// App.js
import React, { useEffect } from 'react';
import './assets/css/index.css';
import './assets/css/card.css';
import './assets/css/page.css';
import Main from './Main';
import {
FormProvider,
ModalProvider,
UserProvider,
useMode,
Expand All @@ -14,6 +15,7 @@ import {
SidebarProvider,
AppContextProvider,
ConfiguratorProvider,
DataProvider,
} from './context';
import { ThemeProvider } from 'styled-components';
import { CssBaseline, GlobalStyles } from '@mui/material';
Expand All @@ -25,29 +27,29 @@ const App = () => {
const { theme } = useMode();
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<CssBaseline theme={theme} />
<GlobalStyles />
<ParallaxProvider>
<ConfiguratorProvider>
<FormProvider>
<UserProvider>
<ModalProvider>
<CollectionProvider>
<CardProvider>
<DeckProvider>
<CartProvider>
<SidebarProvider>
<AppContextProvider>
<UserProvider>
<ModalProvider>
<CollectionProvider>
<CardProvider>
<DeckProvider>
<CartProvider>
<SidebarProvider>
<AppContextProvider>
<DataProvider>
<Main />
</AppContextProvider>
</SidebarProvider>
</CartProvider>
</DeckProvider>
</CardProvider>
</CollectionProvider>
</ModalProvider>
</UserProvider>
</FormProvider>
</DataProvider>
</AppContextProvider>
</SidebarProvider>
</CartProvider>
</DeckProvider>
</CardProvider>
</CollectionProvider>
</ModalProvider>
</UserProvider>
</ConfiguratorProvider>
</ParallaxProvider>
</ThemeProvider>
Expand Down
12 changes: 2 additions & 10 deletions src/Main.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import PageLayout from './layout/REUSABLE_COMPONENTS/PageLayout.jsx';
import Navigation from './layout/navigation/Navigation.jsx';
import Configurator from './layout/REUSABLE_COMPONENTS/Configurator/index.jsx';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import LoadingOverlay from './layout/REUSABLE_COMPONENTS/LoadingOverlay.jsx';
import SelectionErrorDialog from './components/dialogs/SelectionErrorDialog.jsx';
import useDialogState from './context/hooks/useDialogState.jsx';
import LoadingOverlay from './layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx';
import useManageCookies from './context/hooks/useManageCookies.jsx';
import { ROUTE_CONFIG } from './data/route-config.jsx';

Expand All @@ -18,10 +16,9 @@ const LazyRoute = ({ componentName, ...rest }) => {
return <Component {...rest} />;
};
const Main = () => {
const { addCookie, getCookie, deleteCookie } = useManageCookies();
const { getCookie } = useManageCookies();
const { isLoggedIn, userId } = getCookie(['isLoggedIn', 'userId']);
const { isConfiguratorOpen, toggleConfigurator } = useConfiguratorContext();
const { dialogState, openDialog, closeDialog } = useDialogState();
return (
<PageLayout
sx={{
Expand Down Expand Up @@ -54,11 +51,6 @@ const Main = () => {
</CSSTransition>
</TransitionGroup>
<LoginDialog />
<SelectionErrorDialog
open={dialogState.isSelectionErrorDialogOpen}
onClose={() => closeDialog('isSelectionErrorDialogOpen')}
// selectedValue={selectedCollection?.name}
/>
</PageLayout>
);
};
Expand Down
97 changes: 97 additions & 0 deletions src/assets/css/card.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
.base-card {
display: flex;
flex-direction: column;
min-width: 100px;
max-width: 100%;
max-height: 100%;
flex-grow: 1;
background-color: #fff;
border-radius: 4px; /* Replace with your theme's border radius */
justify-content: center;
transition: transform 0.3s ease-in-out;
position: relative; /* Ensure this is set to allow absolute children positioning */
}
.base-card:hover {
transform: scale(1.03);
}
/* BASE CARD QUANTITY */
.base-card-no-quantity {
position: initial;
width: 100%;
height: 100%;
max-height: 100%;
}
.card-deck {
position: relative;
width: calc(33.33% - 10px);
}
.card-deck-grid-item {
flex-basis: calc(
100% / 3 - 10px
); /* Default showing 3 items per row, adjust gap with -10px */
max-width: calc(
100% / 3 - 10px
); /* Same as flex-basis, ensures compatibility */
}
.card-group-flex-item {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}
/* ROW: 6 cards */
@media screen and (max-width: 1400px) {
/* EXPLANATION: 100% / 3 - 10px = 33.33% - 10px */
.card-deck-grid-item {
flex-basis: calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
/* ROW: 4 cards */
@media screen and (max-width: 1200px) {
/* EXPLANATION: 100% / 3 - 10px = 33.33% - 10px */
.card-deck-grid-item {
flex-basis: calc(33.33% - 12.5px);
max-width: calc(33.33% - 12.5px);
}
}
/* ROW: 4 cards */
@media screen and (max-width: 992px) {
/* EXPLANATION: 100% / 4 - 10px = 25% - 10px */
.card-deck-grid-item {
flex-basis: calc(50% - 15px);
max-width: calc(50% - 15px);
}
}
/* ROW: 3 cards */
@media screen and (max-width: 768px) {
/* EXPLANATION: 100% / 6 - 10px = 16.66% - 10px */
.card-deck-grid-item {
flex-basis: calc(50% - 25px);
max-width: calc(50% - 25px);
}
}
/* ROW: 3 cards */
@media screen and (max-width: 576px) {
/* EXPLANATION: 100% / 8 - 10px = 12.5% - 10px */
.card-deck-grid-item {
flex-basis: calc(100% - 20px);
max-width: calc(100% - 20px);
}
}
.card-group-flex-item:nth-child(1) {
z-index: 300;
}
.card-group-flex-item:nth-child(2) {
z-index: 200;
}
.card-group-flex-item:nth-child(3) {
z-index: 100;
}
.card-group-flex-item .card-deck:not(:last-child) {
margin-right: -90%; /* Overlap cards by 90% */
}
.card-group-flex-item {
min-width: 60%;
}
17 changes: 17 additions & 0 deletions src/assets/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,23 @@
--button-hover-border-color: #34597f; /* A darker blue for border on hover */
--button-border-color: #6a59ff; /* Initial border color */
--button-focus-outline-color: #62a4ff; /* Bright blue for focus outline for accessibility */
--secondary-glow: conic-gradient(
from 10deg at 50% 50%,
#eb7494 0deg,
#ae77b2 55deg,
#97b5da 120deg,
#0099ca 160deg,
transparent 360deg
);

--third-glow: conic-gradient(
from 90deg at 50% 50%,
#ff8b7e 0deg,
#e24e6b 160deg,
#7ed2da 120deg,
#8bdce0 55deg,
transparent 360deg
);
}

html {
Expand Down
17 changes: 17 additions & 0 deletions src/assets/css/page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.gradient-background {
background: linear-gradient(180deg, #0172af, #74febd);
background-size: 120% 120%;
animation: gradient-animation 8s ease infinite;
}

@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
66 changes: 66 additions & 0 deletions src/assets/currentlyUnused/AuthForm.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
// import React from 'react';
// import PersonAddIcon from '@mui/icons-material/PersonAdd';
// import PersonIcon from '@mui/icons-material/Person';
// import EmailIcon from '@mui/icons-material/Email';
// import LockIcon from '@mui/icons-material/Lock';
// import RCZodForm from './reusable/RCZodForm';
// import LoginIcon from '@mui/icons-material/Login';

// const loginFields = [
// {
// name: 'username',
// label: 'Username',
// type: 'text',
// icon: <PersonIcon />,
// field: 'username',
// },
// {
// name: 'password',
// label: 'Password',
// type: 'password',
// icon: <LockIcon />,
// field: 'password',
// },
// ];
// const signupFields = [
// {
// name: 'firstName',
// label: 'First Name',
// type: 'text',
// icon: <PersonIcon />,
// field: 'firstName',
// },
// {
// name: 'lastName',
// label: 'Last Name',
// type: 'text',
// icon: <PersonIcon />,
// field: 'lastName',
// },
// {
// name: 'email',
// label: 'Email',
// type: 'email',
// icon: <EmailIcon />,
// field: 'email',
// },
// ];

// const AuthForm = ({ formType }) => {
// const combinedFields = [...signupFields, ...loginFields];
// const isSignup = formType === 'signupForm';
// const fields = isSignup ? combinedFields : loginFields;
// const buttonLabel = isSignup ? 'Sign Up' : 'Login';
// const startIcon = isSignup ? <PersonAddIcon /> : <LoginIcon />;

// return (
// <RCZodForm
// schemaName={formType}
// fields={fields}
// buttonLabel={buttonLabel}
// startIcon={startIcon}
// />
// );
// };

// export default AuthForm;
File renamed without changes.
File renamed without changes.
29 changes: 29 additions & 0 deletions src/assets/currentlyUnused/CartSummary.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// import React from 'react';
// import { Box, Typography } from '@mui/material';

// const CartSummary = ({ quantity, totalCost }) => {
// return (
// <Box>
// <Typography
// variant="h6"
// sx={{
// mt: 2,
// fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' }, // Adjust font size for breakpoints
// }}
// >
// Items: {quantity}
// </Typography>
// <Typography
// variant="h6"
// sx={{
// mt: 2,
// fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' }, // Adjust font size for breakpoints
// }}
// >
// Grand Total: ${totalCost}
// </Typography>
// </Box>
// );
// };

// export default CartSummary;
Loading

0 comments on commit 88557b8

Please sign in to comment.