diff --git a/components/Auction/Auction.module.css b/components/Auction/Auction.module.css
index 9184538..fb80861 100644
--- a/components/Auction/Auction.module.css
+++ b/components/Auction/Auction.module.css
@@ -25,10 +25,10 @@
.auctionContainer {
display: flex;
width: 70%;
- background-color: rgb(245, 235, 235);
+ background-color: var(--colorAuctionBackground);
justify-content: space-around;
align-items: center;
- border: 1px solid #f4f4f4;
+ border: 1px solid var(--colorBackgroundLight);
border-radius: 20px;
box-shadow: 0 0 15px - 7px rgba(0, 0, 0, 0.65);
margin-bottom: 20px;
diff --git a/components/Auction/new.module.css b/components/Auction/new.module.css
index f4b69a4..fbf9e41 100644
--- a/components/Auction/new.module.css
+++ b/components/Auction/new.module.css
@@ -7,16 +7,18 @@
display: flex;
padding: 5% 10%;
flex-direction: column;
- border: 1px solid #f4f4f4;
+ border: 1px solid var(--colorBackgroundMedium);
border-radius: 20px;
box-shadow: 0 0 15px -7px rgba(0,0,0,.65);
width: 40%;
- background-color: white;
+ background-color: var(--colorBackgroundMedium);
overflow-x: hidden;
}
.inputBox, .submitBtn {
- border: 0.5px solid #ccc;
+ border: 0.5px solid var(--colorAuctionInput);
+ background-color: var(--colorBackgroundDark);
+ color: var(--colorWhite);
border-radius: 5px;
padding: 10px;
padding-left: 10px;
@@ -25,10 +27,15 @@
width: 100%;
}
+.inputBox:disabled{
+ background-color: var(--colorBackgroundLight);
+}
+
.submitBtn {
cursor: pointer;
background-color: rgb(27, 199, 27);
color: white;
+ border-color: var(--colorBackgroundMedium);
}
.submitBtn:hover {
diff --git a/components/Dark-Theme/Themes.js b/components/Dark-Theme/Themes.js
new file mode 100644
index 0000000..735bffe
--- /dev/null
+++ b/components/Dark-Theme/Themes.js
@@ -0,0 +1,48 @@
+export const lightTheme = {
+ colorBackgroundLight: '#f4f4f4',
+ colorBackgroundMedium: '#f4f4f4',
+ colorBackgroundDark: '#f4f4f4',
+ colorExchangeBackground: 'aliceblue',
+ colorBodyBackground: '#e9ebff',
+ colorText: '#363636',
+ colorTransactionBorder: '#f0e2e7',
+ colorCardBorder: '#f4f4f4',
+ colorButtonGreen: '#2ecc71',
+ colorButtonRed: '#ff3838',
+ colorButtonPink: '#ee1a75',
+ colorButtonBorder: 'white',
+ colorFilterHover: '#bdc3c7',
+ colorAuctionBackground: 'rgb(245, 235, 235)',
+ colorWhite: 'black',
+ colorAuctionInput: '#ccc',
+ colorStockLabel: '#464646',
+ colorChartBackground: 'white',
+ colorChartBorder: 'white',
+ colorStockText: '#540075',
+ colorNavbarLink: '#041484',
+ colorActiveLink: '#e30464',
+};
+export const darkTheme = {
+ colorBackgroundLight: '#27262D',
+ colorBackgroundMedium: '#1D1C22',
+ colorBackgroundDark: '#0e0e11',
+ colorExchangeBackground: 'var(--colorBackgroundMedium)',
+ colorBodyBackground: 'var(--colorBackgroundLight)',
+ colorText: '#E1E1EC',
+ colorTransactionBorder: 'rgb(76, 39, 52)',
+ colorCardBorder: 'rgb(51, 55, 57)',
+ colorButtonGreen: '#1d8147',
+ colorButtonRed: '#9e0000',
+ colorButtonPink: '#c70f5f',
+ colorButtonBorder: 'var(--colorButtonPink)',
+ colorFilterHover: '#3a3f42',
+ colorAuctionBackground: '#2e1717',
+ colorWhite: '#fff',
+ colorAuctionInput: 'white',
+ colorStockLabel: 'var(--colorWhite)',
+ colorChartBackground: '#241212',
+ colorChartBorder: '#34383a',
+ colorStockText: '#cf56ff',
+ colorNavbarLink: '#7eb2fb',
+ colorActiveLink: '#fb2e86',
+};
diff --git a/components/Dark-Theme/globalStyles.js b/components/Dark-Theme/globalStyles.js
new file mode 100644
index 0000000..f6e7c20
--- /dev/null
+++ b/components/Dark-Theme/globalStyles.js
@@ -0,0 +1,20 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+ :root{
+ ${({ theme }) => {
+ let style = ``;
+ for (const variableName in theme) {
+ if (variableName in theme) {
+ style += `--${variableName}: ${theme[variableName]};`;
+ }
+ }
+ return style;
+ }}
+ }
+ body{
+ transition: all 0.50s linear;
+ }
+ `;
+
+export default GlobalStyles;
diff --git a/components/Dark-Theme/useDarkMode.js b/components/Dark-Theme/useDarkMode.js
new file mode 100644
index 0000000..e42b2bc
--- /dev/null
+++ b/components/Dark-Theme/useDarkMode.js
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { setCookie, getCookie } from '../../utils/cookie';
+import { lightTheme, darkTheme } from '@components/Dark-Theme/Themes';
+
+export const useDarkMode = () => {
+ const [theme, setTheme] = useState('light');
+ const [themeData, setThemeData] = useState(lightTheme);
+ const [mountedComponent, setMountedComponent] = useState(false);
+ const setMode = (mode) => {
+ setCookie('theme', mode, 30);
+ setTheme(mode);
+ const themeMode = mode === 'light' ? lightTheme : darkTheme;
+ setThemeData(themeMode);
+ };
+
+ const themeToggler = () => {
+ const toggle = theme === 'light' ? setMode('dark') : setMode('light');
+ return toggle;
+ };
+
+ useEffect(() => {
+ const localTheme = getCookie('theme');
+ const themeMode = localTheme === 'light' ? lightTheme : darkTheme;
+ if (localTheme) {
+ setTheme(localTheme);
+ setThemeData(themeMode);
+ } else {
+ //default
+ setMode('light');
+ }
+ setMountedComponent(true);
+ }, []);
+ return [theme, themeData, themeToggler, mountedComponent];
+};
diff --git a/components/NavBar/index.js b/components/NavBar/index.js
index 68bd451..4e4c1bb 100644
--- a/components/NavBar/index.js
+++ b/components/NavBar/index.js
@@ -4,6 +4,8 @@ import styles from './navbar.module.css';
import Link from 'next/link';
import Image from 'next/image';
import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
+import DarkThemeIcon from '../dark-theme-icon/index';
+import { useDarkModeContext } from 'stores/dark-mode-context';
import { USER_DATA_URL, LOGIN_URL, PATHS, NAV_MENU } from 'constants.js';
const NavBar = () => {
@@ -12,6 +14,7 @@ const NavBar = () => {
const RDS_LOGO = '/assets/Real-Dev-Squad1x.png';
const GITHUB_LOGO = '/assets/github.png';
const DEFAULT_AVATAR = '/assets/default_avatar.jpg';
+ const [theme, themeData, themeToggler] = useDarkModeContext();
const [userData, setUserData] = useState({});
const [toggle, setToggle] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -132,6 +135,9 @@ const NavBar = () => {
</li>
);
})}
+ <li className={styles.darkTheme}>
+ <DarkThemeIcon theme={theme} themeToggleHandler={themeToggler} />
+ </li>
<li
className={`${styles.navBarLoginLi} ${
mountedComponent ? '' : 'd-none'
diff --git a/components/NavBar/navbar.module.css b/components/NavBar/navbar.module.css
index bca6433..f41c9e5 100644
--- a/components/NavBar/navbar.module.css
+++ b/components/NavBar/navbar.module.css
@@ -28,6 +28,11 @@
overflow: hidden;
background-color: #1d1283;
}
+.darkTheme {
+ padding: 19px 16px;
+ margin: 10px;
+ display: none;
+}
.navBarLogoLi {
padding: 12px 20px;
@@ -121,14 +126,14 @@
margin-top: 2px;
text-decoration: none;
font-weight: bold;
- color: #041484;
+ color: var(--colorNavbarLink);
cursor: pointer;
background: none;
border: none;
}
.active {
- color: #e30464;
+ color: var(--colorActiveLink);
}
@media screen and (max-width: 970px) {
@@ -182,6 +187,10 @@
float: none;
}
+ .darkTheme {
+ padding: 10px 40px;
+ }
+
.mainBanner,
.logoImg {
margin-top: 40px;
diff --git a/components/coins-status/coin.module.css b/components/coins-status/coin.module.css
index 08d86e3..0355d8e 100644
--- a/components/coins-status/coin.module.css
+++ b/components/coins-status/coin.module.css
@@ -26,7 +26,7 @@
padding: 10px 5px 2px 5px;
margin-bottom: 8px;
margin-left: 20px;
- background-color: white;
+ background-color: var(--colorBackgroundMedium);
}
.coinData {
display: flex;
diff --git a/components/custom-button/custom-button.style.js b/components/custom-button/custom-button.style.js
index fa5964b..f7aa954 100644
--- a/components/custom-button/custom-button.style.js
+++ b/components/custom-button/custom-button.style.js
@@ -18,14 +18,14 @@ const InvertedButtonStles = css`
const primaryStyle = css`
-webkit-transition: background 0.2s; /* For Safari 3.0 to 6.0 */
- background-color: #ee1a75; /* For modern browsers */
- border: 1px solid white;
+ background-color: var(--colorButtonPink); /* For modern browsers */
+ border: 1px solid var(--colorButtonBorder);
color: white;
transition: background 0.2s;
&:hover {
- background: white;
- border: 1px solid #ee1a75;
- color: #ee1a75;
+ background: var(--colorBackgroundLight);
+ border: 1px solid var(--colorButtonPink);
+ color: var(--colorButtonPink);
}
`;
const BaseButtonStyles = css`
@@ -47,6 +47,7 @@ const selectButton = (props) => {
return props.inverted ? InvertedButtonStles : BaseButtonStyles;
};
+
export const CustomButtonContainer = styled.button`
border-radius: 6px;
cursor: pointer;
diff --git a/components/dark-theme-icon/dark-mode.module.css b/components/dark-theme-icon/dark-mode.module.css
new file mode 100644
index 0000000..68e244a
--- /dev/null
+++ b/components/dark-theme-icon/dark-mode.module.css
@@ -0,0 +1,5 @@
+.container img {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
diff --git a/components/dark-theme-icon/index.js b/components/dark-theme-icon/index.js
new file mode 100644
index 0000000..02d7c36
--- /dev/null
+++ b/components/dark-theme-icon/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from './dark-mode.module.css';
+
+function DarkThemeIcon({ theme, themeToggleHandler }) {
+ return (
+ <div
+ onClick={themeToggleHandler}
+ onKeyDown={themeToggleHandler}
+ className={classNames.container}
+ >
+ {theme === 'light' ? (
+ <img src="/assets/moon.png" alt="moon" />
+ ) : (
+ <img src="/assets/sun.png" alt="sun" />
+ )}
+ </div>
+ );
+}
+
+export default DarkThemeIcon;
diff --git a/components/exchange-rate-row/exchange-rate-row.module.css b/components/exchange-rate-row/exchange-rate-row.module.css
index cb4d28d..fb712e0 100644
--- a/components/exchange-rate-row/exchange-rate-row.module.css
+++ b/components/exchange-rate-row/exchange-rate-row.module.css
@@ -2,7 +2,7 @@
font-weight: 500;
display: flex;
justify-content: space-between;
- background-color: aliceblue;
+ background-color: var(--colorExchangeBackground);
margin: 5px;
padding: 5px;
border-radius: 6px;
diff --git a/components/filter/filter.module.css b/components/filter/filter.module.css
index 141a2df..43f341f 100644
--- a/components/filter/filter.module.css
+++ b/components/filter/filter.module.css
@@ -8,11 +8,11 @@
.showList li {
list-style-type: none;
padding: 7px;
- background-color: #fff;
+ background-color: var(--colorBackgroundLight);
}
.showList li:hover {
- background-color: #bdc3c7;
+ background-color: var(--colorFilterHover);
}
.showList {
diff --git a/components/filter/index.js b/components/filter/index.js
index b2e7a51..e615781 100644
--- a/components/filter/index.js
+++ b/components/filter/index.js
@@ -2,8 +2,10 @@ import styles from './filter.module.css';
import Image from 'next/image';
import { useState, useRef } from 'react';
import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
+import { useDarkModeContext } from 'stores/dark-mode-context';
const Filter = (props) => {
+ const [theme, themeData, themeToggler] = useDarkModeContext();
const { changeTransactions } = props;
const [toggle, setToggle] = useState(false);
const filterRef = useRef();
@@ -20,7 +22,11 @@ const Filter = (props) => {
>
<div className="icon">
<Image
- src="/assets/filter-icon.svg"
+ src={
+ theme === 'light'
+ ? '/assets/filter-icon.svg'
+ : '/assets/filter-icon-dark.svg'
+ }
alt="Filter icon"
width={20}
height={20}
diff --git a/components/stock-card/index.js b/components/stock-card/index.js
index 1a9e96a..97dd5e0 100644
--- a/components/stock-card/index.js
+++ b/components/stock-card/index.js
@@ -63,7 +63,7 @@ export const Card = ({ stock, operationType }) => {
min-width: 300px;
border-radius: 4px;
transition: 0.2s;
- background: #ffffff;
+ background: var(--colorBackgroundMedium);
}
.stock-card:hover {
box-shadow: 0px 4px 10px #ccc;
@@ -77,13 +77,13 @@ export const Card = ({ stock, operationType }) => {
text-align: center;
width: 100%;
padding: 1rem;
- background-color: #ffffff;
+ background-color: var(--colorBackgroundMedium);
}
.stock-card-product-name {
font-weight: bold;
font-size: 1.3em;
- color: #540075;
+ color: var(--colorStockText);
}
p {
margin-block-start: 0.5rem;
@@ -96,7 +96,7 @@ export const Card = ({ stock, operationType }) => {
}
.stock-card-product-quantity {
font-size: 1.3em;
- color: #540075;
+ color: var(--colorStockText);
}
`}
</style>
diff --git a/components/stock-operation-modal/stock-operation.module.css b/components/stock-operation-modal/stock-operation.module.css
index f8ca7e6..3375463 100644
--- a/components/stock-operation-modal/stock-operation.module.css
+++ b/components/stock-operation-modal/stock-operation.module.css
@@ -13,7 +13,7 @@
.modalWrapper {
position: fixed;
z-index: 100;
- background: white;
+ background: var(--colorBackgroundMedium);
border-radius: 10px;
padding: 20px 20px;
width: 40%;
@@ -50,7 +50,7 @@
.label {
font-weight: bold;
margin: 0.5rem 0;
- color: #464646;
+ color: var(--colorStockLabel);
}
.select {
@@ -61,6 +61,8 @@
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
+ background-color: var(--colorBackgroundDark);
+ color: var(--colorWhite);
}
.closedButton {
@@ -96,7 +98,7 @@
.modalWrapper {
position: fixed;
z-index: 100;
- background: white;
+ background: var(--colorBackgroundMedium);
border-radius: 10px;
padding: 20px 10px;
width: 80%;
diff --git a/components/transaction-chart/index.js b/components/transaction-chart/index.js
index 61ca055..59e312d 100644
--- a/components/transaction-chart/index.js
+++ b/components/transaction-chart/index.js
@@ -38,7 +38,7 @@ function getDataset(transactionData) {
};
}
-const TransactionChart = ({ transactionChartData }) => {
+const TransactionChart = ({ transactionChartData, theme }) => {
const [chartData, setChartData] = useState({});
useEffect(() => {
const chart = () => {
@@ -62,6 +62,7 @@ const TransactionChart = ({ transactionChartData }) => {
{
ticks: {
autoSkip: true,
+ fontColor: theme === 'light' ? '#666' : '#fff',
},
gridLines: {
display: true,
@@ -70,6 +71,9 @@ const TransactionChart = ({ transactionChartData }) => {
],
xAxes: [
{
+ ticks: {
+ fontColor: theme === 'light' ? '#666' : '#fff',
+ },
gridLines: {
display: true,
},
diff --git a/components/transaction-chart/transaction-chart.module.css b/components/transaction-chart/transaction-chart.module.css
index d76785a..cce0df7 100644
--- a/components/transaction-chart/transaction-chart.module.css
+++ b/components/transaction-chart/transaction-chart.module.css
@@ -2,8 +2,8 @@
display: flex;
justify-content: center;
width: calc(50em/2);
- background-color: #fdfbfb;
- border: 1px solid #f4f1f1;
+ background-color: var(--colorChartBackground);
+ border: 1px solid var(--colorChartBorder);
cursor: pointer;
font-size: 20px;
}
diff --git a/components/transaction-details/transaction-details.module.css b/components/transaction-details/transaction-details.module.css
index 3e7412d..6986a16 100644
--- a/components/transaction-details/transaction-details.module.css
+++ b/components/transaction-details/transaction-details.module.css
@@ -10,8 +10,8 @@
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
- border-top: 1px solid #f0e2e7;
- border-bottom: 1px solid #f0e2e7;;
+ border-top: 1px solid var(--colorTransactionBorder);
+ border-bottom: 1px solid var(--colorTransactionBorder);
cursor: pointer;
height:6em;
font-size: 17px;
diff --git a/components/transaction-operation/transaction-operation.module.css b/components/transaction-operation/transaction-operation.module.css
index 709df7c..2a56b46 100644
--- a/components/transaction-operation/transaction-operation.module.css
+++ b/components/transaction-operation/transaction-operation.module.css
@@ -13,7 +13,7 @@
.modalWrapper {
position: fixed;
z-index: 100;
- background: white;
+ background: var(--colorBackgroundMedium);
border-radius: 10px;
padding: 32px 24px;
width: 40%;
@@ -50,7 +50,7 @@
.label {
font-weight: bold;
margin: 0.5rem 0;
- color: #464646;
+ color: var(--colorStockLabel);
}
.select {
@@ -61,6 +61,8 @@
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
+ background-color: var(--colorBackgroundDark);
+ color: var(--colorWhite);
}
.closedButton {
@@ -96,7 +98,7 @@
.modalWrapper {
position: fixed;
z-index: 100;
- background: white;
+ background: var(--colorBackgroundMedium);
border-radius: 10px;
padding: 20px 10px;
width: 80%;
diff --git a/pages/_app.js b/pages/_app.js
index 8b08555..2a9aae6 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,7 +2,14 @@ import React from 'react';
import { wrapper } from '../redux/store';
import '../styles/globals.css';
+import { DarkModeProvider } from 'stores/dark-mode-context';
-const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;
+const MyApp = ({ Component, pageProps }) => {
+ return (
+ <DarkModeProvider>
+ <Component {...pageProps} />
+ </DarkModeProvider>
+ );
+};
export default wrapper.withRedux(MyApp);
diff --git a/pages/auction/index.js b/pages/auction/index.js
index 4022eca..1f84db9 100644
--- a/pages/auction/index.js
+++ b/pages/auction/index.js
@@ -5,23 +5,44 @@ import { Footer } from '@components/footer';
import Head from 'next/head';
import HandleAuctions from '@components/Auction';
import styles from '@components/Auction/Auction.module.css';
+import GlobalStyles from '@components/Dark-Theme/globalStyles';
+import { ThemeProvider } from 'styled-components';
+import { useDarkModeContext } from 'stores/dark-mode-context';
const Auctions = () => {
+ const [
+ theme,
+ themeData,
+ themeToggler,
+ mountedComponent,
+ ] = useDarkModeContext();
+
+ if (!mountedComponent) return <div />;
return (
- <div>
- <Head>
- <title>Auction | Crypto</title>
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
- </Head>
- <NavBar personData={personData} />
- <Link href="/auction/new">
- <div className={styles.newAuctionBtnContainer}>
- <button className={styles.newAuctionBtn}>Create New Auction</button>
+ <ThemeProvider theme={themeData}>
+ <>
+ <GlobalStyles />
+ <div>
+ <Head>
+ <title>Auction | Crypto</title>
+ <meta
+ name="viewport"
+ content="initial-scale=1.0, width=device-width"
+ />
+ </Head>
+ <NavBar personData={personData} />
+ <Link href="/auction/new">
+ <div className={styles.newAuctionBtnContainer}>
+ <button className={styles.newAuctionBtn}>
+ Create New Auction
+ </button>
+ </div>
+ </Link>
+ <HandleAuctions />
+ <Footer />
</div>
- </Link>
- <HandleAuctions />
- <Footer />
- </div>
+ </>
+ </ThemeProvider>
);
};
diff --git a/pages/auction/new.js b/pages/auction/new.js
index d1a0c03..0cb4601 100644
--- a/pages/auction/new.js
+++ b/pages/auction/new.js
@@ -5,23 +5,42 @@ import { Footer } from '@components/footer';
import Head from 'next/head';
import CreateNewAuction from '@components/Auction/createNewAuction';
import styles from '@components/Auction/Auction.module.css';
+import GlobalStyles from '@components/Dark-Theme/globalStyles';
+import { ThemeProvider } from 'styled-components';
+import { useDarkModeContext } from 'stores/dark-mode-context';
const NewAuction = () => {
+ const [
+ theme,
+ themeData,
+ themeToggler,
+ mountedComponent,
+ ] = useDarkModeContext();
+
+ if (!mountedComponent) return <div />;
return (
- <div>
- <Head>
- <title>Create New Auction | Crypto</title>
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
- </Head>
- <NavBar personData={personData} />
- <Link href="/auction">
- <a>
- <h2 className={styles.auctionPageNavigation}>Go Back</h2>
- </a>
- </Link>
- <CreateNewAuction />
- <Footer />
- </div>
+ <ThemeProvider theme={themeData}>
+ <>
+ <GlobalStyles />
+ <div>
+ <Head>
+ <title>Create New Auction | Crypto</title>
+ <meta
+ name="viewport"
+ content="initial-scale=1.0, width=device-width"
+ />
+ </Head>
+ <NavBar personData={personData} />
+ <Link href="/auction">
+ <a>
+ <h2 className={styles.auctionPageNavigation}>Go Back</h2>
+ </a>
+ </Link>
+ <CreateNewAuction />
+ <Footer />
+ </div>
+ </>
+ </ThemeProvider>
);
};
diff --git a/pages/currency-exchange/index.js b/pages/currency-exchange/index.js
index 852956e..6ad1bb0 100644
--- a/pages/currency-exchange/index.js
+++ b/pages/currency-exchange/index.js
@@ -5,20 +5,36 @@ import NavBar from '@components/NavBar';
import ExchageRaterow from '@components/exchange-rate-row';
import exchageRates from 'mock/exchange-rates';
import styles from './currency-exchange.module.css';
+import GlobalStyles from '@components/Dark-Theme/globalStyles';
+import { ThemeProvider } from 'styled-components';
+import { useDarkModeContext } from 'stores/dark-mode-context';
export default function Bank() {
const { exchange_rates } = styles;
+ const [
+ theme,
+ themeData,
+ themeToggler,
+ mountedComponent,
+ ] = useDarkModeContext();
+
+ if (!mountedComponent) return <div />;
return (
- <div>
- <Head>
- <title>Currency Exchange</title>
- <link rel="icon" href="/favicon.ico" />
- </Head>
- <NavBar personData={personData} />
- <div className={exchange_rates}>
- {exchageRates.map((row) => (
- <ExchageRaterow {...row} key={row.id} />
- ))}
- </div>
- </div>
+ <ThemeProvider theme={themeData}>
+ <>
+ <GlobalStyles />
+ <div>
+ <Head>
+ <title>Currency Exchange</title>
+ <link rel="icon" href="/favicon.ico" />
+ </Head>
+ <NavBar personData={personData} />
+ <div className={exchange_rates}>
+ {exchageRates.map((row) => (
+ <ExchageRaterow {...row} key={row.id} />
+ ))}
+ </div>
+ </div>
+ </>
+ </ThemeProvider>
);
}
diff --git a/pages/index.js b/pages/index.js
index b0c7f1b..5acaba2 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -12,45 +12,63 @@ import TransactionOperationModal from '@components/transaction-operation-modal';
import NavBar from '@components/NavBar';
import CustomButton from 'components/custom-button';
import { useRouter } from 'next/router';
+import GlobalStyles from '@components/Dark-Theme/globalStyles';
+import { ThemeProvider } from 'styled-components';
+import { useDarkModeContext } from 'stores/dark-mode-context';
export default function Home() {
const router = useRouter();
+ const [
+ theme,
+ themeData,
+ themeToggler,
+ mountedComponent,
+ ] = useDarkModeContext();
+ if (!mountedComponent) return <div />;
return (
- <div className={styles.homeContainer}>
- <Head>
- <title>Bank Dashboard</title>
- <link rel="icon" href="/favicon.ico" />
- </Head>
- <NavBar />
- <main className={styles.mainBody}>
- <div className={styles.leftSection}>
- <div className={styles.homeUser}>
- <CoinsStatus coins={coinsData} />
- <TransactionOperationModal personData={personData} />
- </div>
- </div>
- <div className={styles.rightSection}>
- <CustomButton
- onClick={() => router.push('/currency-exchange')}
- buttonPrimary
- >
- Go to currency Exchange
- </CustomButton>
- <div className={styles.homeTransaction}>
- <div className={styles.transactionGraph}>
- <div className={`${styles.card} ${styles.content}`}>
- <TransactionChart transactionChartData={transactionChartData} />
+ <ThemeProvider theme={themeData}>
+ <>
+ <GlobalStyles />
+ <div className={styles.homeContainer}>
+ <Head>
+ <title>Bank Dashboard</title>
+ <link rel="icon" href="/favicon.ico" />
+ </Head>
+ <NavBar personData={personData} />
+ <main className={styles.mainBody}>
+ <div className={styles.leftSection}>
+ <div className={styles.homeUser}>
+ <CoinsStatus coins={coinsData} />
+ <TransactionOperationModal personData={personData} />
</div>
</div>
- </div>
- <div className={`${styles.card} ${styles.content}`}>
- <div className={`${styles.heading}`}>
- <p> Latest Transactions</p>
+ <div className={styles.rightSection}>
+ <CustomButton
+ onClick={() => router.push('/currency-exchange')}
+ buttonPrimary
+ >
+ Go to currency Exchange
+ </CustomButton>
+ <div className={styles.homeTransaction}>
+ <div className={styles.transactionGraph}>
+ <div className={`${styles.card} ${styles.content}`}>
+ <TransactionChart
+ transactionChartData={transactionChartData}
+ theme={theme}
+ />
+ </div>
+ </div>
+ </div>
+ <div className={`${styles.card} ${styles.content}`}>
+ <div className={`${styles.heading}`}>
+ <p> Latest Transactions</p>
+ </div>
+ <TransactionList transactions={transactionData} />
+ </div>
</div>
- <TransactionList transactions={transactionData} />
- </div>
+ </main>
+ <Footer />
</div>
- </main>
- <Footer />
- </div>
+ </>
+ </ThemeProvider>
);
}
diff --git a/pages/trading/index.js b/pages/trading/index.js
index 474fff8..db682eb 100644
--- a/pages/trading/index.js
+++ b/pages/trading/index.js
@@ -7,10 +7,19 @@ import NavBar from '@components/NavBar';
import Link from 'next/link';
import { getStocks } from '../../redux/action';
import styles from '../../styles/Home.module.css';
+import GlobalStyles from '@components/Dark-Theme/globalStyles';
+import { ThemeProvider } from 'styled-components';
+import { useDarkModeContext } from 'stores/dark-mode-context';
const Invest = () => {
const stocks = useSelector((state) => state.stocksDetails.stocks);
const dispatch = useDispatch();
+ const [
+ theme,
+ themeData,
+ themeToggler,
+ mountedComponent,
+ ] = useDarkModeContext();
useEffect(() => {
const fetchData = async () => {
@@ -21,48 +30,52 @@ const Invest = () => {
fetchData();
}, []);
+ if (!mountedComponent) return <div />;
return (
- <>
- <NavBar personData={personData} />
- <div className="main-container">
- <div className="layout">
- <div className="content">
- <div className="shoppinglist-container">
- {stocks.map((itemName) => (
- <Card
- key={itemName.id}
- stock={itemName}
- operationType={'BUY'}
- />
- ))}
- </div>
- <div>
- <Link href="/trading/sell">
- <div className={`${styles.trade}`}>Sell Stocks</div>
- </Link>
+ <ThemeProvider theme={themeData}>
+ <>
+ <GlobalStyles />
+ <NavBar personData={personData} />
+ <div className="main-container">
+ <div className="layout">
+ <div className="content">
+ <div className="shoppinglist-container">
+ {stocks.map((itemName) => (
+ <Card
+ key={itemName.id}
+ stock={itemName}
+ operationType={'BUY'}
+ />
+ ))}
+ </div>
+ <div>
+ <Link href="/trading/sell">
+ <div className={`${styles.trade}`}>Sell Stocks</div>
+ </Link>
+ </div>
</div>
+ <Footer />
</div>
- <Footer />
- </div>
- <style jsx>{`
- .layout {
- min-height: calc(100vh-58px);
- position: relative;
- }
+ <style jsx>{`
+ .layout {
+ min-height: calc(100vh-58px);
+ position: relative;
+ }
- .content {
- min-height: 87vh;
- padding-bottom: 75px;
- }
- .shoppinglist-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-evenly;
- align-items: stretch;
- }
- `}</style>
- </div>
- </>
+ .content {
+ min-height: 87vh;
+ padding-bottom: 75px;
+ }
+ .shoppinglist-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-items: stretch;
+ }
+ `}</style>
+ </div>
+ </>
+ </ThemeProvider>
);
};
diff --git a/pages/trading/sell.js b/pages/trading/sell.js
index 2191f04..dd26716 100644
--- a/pages/trading/sell.js
+++ b/pages/trading/sell.js
@@ -7,6 +7,9 @@ import { Card } from '@components/stock-card';
import Link from 'next/link';
import { getUserStocks } from '../../redux/action';
import styles from '../../styles/Home.module.css';
+import GlobalStyles from '@components/Dark-Theme/globalStyles';
+import { ThemeProvider } from 'styled-components';
+import { useDarkModeContext } from 'stores/dark-mode-context';
const SellStocks = () => {
const userStocksData = useSelector(
@@ -14,6 +17,12 @@ const SellStocks = () => {
);
const userStocks = userStocksData.stocks;
const dispatch = useDispatch();
+ const [
+ theme,
+ themeData,
+ themeToggler,
+ mountedComponent,
+ ] = useDarkModeContext();
useEffect(() => {
const fetchData = async () => {
@@ -24,13 +33,19 @@ const SellStocks = () => {
fetchData();
}, []);
+ if (!mountedComponent) return <div />;
const showAlert = () => {
return (
- <div className={`${styles.trade}`}>
- <Link href="https://www.realdevsquad.com/">
- Please log in to continue!
- </Link>
- </div>
+ <ThemeProvider theme={themeData}>
+ <>
+ <GlobalStyles />
+ <div className={`${styles.trade}`}>
+ <Link href="https://www.realdevsquad.com/">
+ Please log in to continue!
+ </Link>
+ </div>
+ </>
+ </ThemeProvider>
);
};
@@ -41,45 +56,49 @@ const SellStocks = () => {
));
const NO_STOCKS_MESSAGE =
"You don't have any stocks yet. Click below to buy some";
+ if (!mountedComponent) return <div />;
return (
- <>
- <NavBar personData={personData} />
- <div className="main-container">
- <div className="layout">
- {userStocksData.isLoggedIn && (
- <div className="content">
- <div className="shoppinglist-container">
- {availableStocks.length ? availableStocks : NO_STOCKS_MESSAGE}
+ <ThemeProvider theme={themeData}>
+ <>
+ <GlobalStyles />
+ <NavBar personData={personData} />
+ <div className="main-container">
+ <div className="layout">
+ {userStocksData.isLoggedIn && (
+ <div className="content">
+ <div className="shoppinglist-container">
+ {availableStocks.length ? availableStocks : NO_STOCKS_MESSAGE}
+ </div>
+ <div>
+ <Link href="/trading">
+ <div className={`${styles.trade}`}>Buy Stocks</div>
+ </Link>
+ </div>
</div>
- <div>
- <Link href="/trading">
- <div className={`${styles.trade}`}>Buy Stocks</div>
- </Link>
- </div>
- </div>
- )}
- <div>{!userStocksData.isLoggedIn && showAlert()}</div>
- <Footer />
- </div>
- <style jsx>{`
- .layout {
- min-height: calc(100vh-58px);
- position: relative;
- }
+ )}
+ <div>{!userStocksData.isLoggedIn && showAlert()}</div>
+ <Footer />
+ </div>
+ <style jsx>{`
+ .layout {
+ min-height: calc(100vh-58px);
+ position: relative;
+ }
- .content {
- min-height: 87vh;
- padding-bottom: 75px;
- }
- .shoppinglist-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-evenly;
- align-items: stretch;
- }
- `}</style>
- </div>
- </>
+ .content {
+ min-height: 87vh;
+ padding-bottom: 75px;
+ }
+ .shoppinglist-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-items: stretch;
+ }
+ `}</style>
+ </div>
+ </>
+ </ThemeProvider>
);
};
diff --git a/public/assets/filter-icon-dark.svg b/public/assets/filter-icon-dark.svg
new file mode 100644
index 0000000..a720cba
--- /dev/null
+++ b/public/assets/filter-icon-dark.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 210.68 210.68" style="enable-background:new 0 0 210.68 210.68;stroke: white;fill: white;" xml:space="preserve">
+<path d="M205.613,30.693c0-10.405-10.746-18.149-32.854-23.676C154.659,2.492,130.716,0,105.34,0
+ C79.965,0,56.021,2.492,37.921,7.017C15.813,12.544,5.066,20.288,5.066,30.693c0,3.85,1.476,7.335,4.45,10.479l68.245,82.777v79.23
+ c0,2.595,1.341,5.005,3.546,6.373c1.207,0.749,2.578,1.127,3.954,1.127c1.138,0,2.278-0.259,3.331-0.78l40.075-19.863
+ c2.55-1.264,4.165-3.863,4.169-6.71l0.077-59.372l68.254-82.787C204.139,38.024,205.613,34.542,205.613,30.693z M44.94,20.767
+ C61.467,17.048,82.917,15,105.34,15s43.874,2.048,60.399,5.767c18.25,4.107,23.38,8.521,24.607,9.926
+ c-1.228,1.405-6.357,5.819-24.607,9.926c-16.525,3.719-37.977,5.767-60.399,5.767S61.467,44.338,44.94,40.62
+ c-18.249-4.107-23.38-8.521-24.607-9.926C21.56,29.288,26.691,24.874,44.94,20.767z M119.631,116.486
+ c-1.105,1.341-1.711,3.023-1.713,4.761l-0.075,57.413l-25.081,12.432v-69.835c0-1.741-0.605-3.428-1.713-4.771L40.306,54.938
+ C58.1,59.1,81.058,61.387,105.34,61.387c24.283,0,47.24-2.287,65.034-6.449L119.631,116.486z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/public/assets/moon.png b/public/assets/moon.png
new file mode 100644
index 0000000..30396f9
Binary files /dev/null and b/public/assets/moon.png differ
diff --git a/public/assets/sun.png b/public/assets/sun.png
new file mode 100644
index 0000000..5dbfe2c
Binary files /dev/null and b/public/assets/sun.png differ
diff --git a/stores/dark-mode-context.js b/stores/dark-mode-context.js
new file mode 100644
index 0000000..4317578
--- /dev/null
+++ b/stores/dark-mode-context.js
@@ -0,0 +1,29 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { createContext, useContext } from 'react';
+import { useDarkMode } from '@components/Dark-Theme/useDarkMode';
+
+const DarkModeContext = createContext();
+
+export function DarkModeProvider({ children }) {
+ const [theme, themeData, themeToggler, mountedComponent] = useDarkMode();
+
+ let sharedState = [theme, themeData, themeToggler, mountedComponent];
+
+ return (
+ <DarkModeContext.Provider value={sharedState}>
+ {children}
+ </DarkModeContext.Provider>
+ );
+}
+
+export function useDarkModeContext() {
+ const state = useContext(DarkModeContext);
+
+ if (state === undefined) {
+ throw new Error(
+ 'useDarkModeContext must be used within a DarkModeProvider'
+ );
+ }
+
+ return state;
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
index e05e993..e57e3ef 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -24,20 +24,20 @@
width: 7rem;
}
.greenButton {
- background-color: #2ecc71;
+ background-color: var(--colorButtonGreen);
text-align: center;
border: none;
}
.redButton {
- background-color: #ff3838;
+ background-color: var(--colorButtonRed);
text-align: center;
border: none;
}
.card {
- border: 1px solid #f4f4f4;
+ border: 1px solid var(--colorCardBorder);
border-radius: 5px;
padding: 1px;
- background: white;
+ background: var(--colorBackgroundLight);
font-size: 20px;
margin-top: 10px;
}
@@ -79,7 +79,7 @@
margin: 0;
padding: 1rem;
display: block;
- color:#540075;
+ color: var(--colorStockText);
font-weight: bold;
font-size: 1.2rem;
cursor: pointer;
diff --git a/styles/globals.css b/styles/globals.css
index 270cded..e8fb35a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,11 +1,11 @@
-html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
- background-color: #e9ebff;
+ background-color: var(--colorBodyBackground);
min-height: 100%;
+ color: var(--colorText);
}
@media only screen and (min-width: 905px) {
html,
@@ -21,7 +21,7 @@ a {
box-sizing: border-box;
}
.text-gray {
- color: #363636;
+ color: var(--colorText);
}
.card {
margin: 10px;
diff --git a/utils/cookie.js b/utils/cookie.js
new file mode 100644
index 0000000..0aaa3d0
--- /dev/null
+++ b/utils/cookie.js
@@ -0,0 +1,22 @@
+const setCookie = (name, value, days) => {
+ const domain = '.realdevsquad.com';
+ const expires = new Date(
+ Date.now() + 24 * days * 60 * 60 * 1000
+ ).toUTCString();
+ const encodeValue = encodeURIComponent(value);
+ const cookieStr = `${name}=${encodeValue}; expires=${expires}; domain=${domain}; path=/`;
+ document.cookie = cookieStr;
+};
+
+const getCookie = (cookieName) => {
+ const name = `${cookieName}=`;
+ const allCookieArray = document.cookie.split(';');
+ for (let i = 0; i < allCookieArray.length; i += 1) {
+ const temp = allCookieArray[i].trim();
+ if (temp.indexOf(name) === 0)
+ return decodeURIComponent(temp.substring(name.length, temp.length));
+ }
+ return '';
+};
+
+export { setCookie, getCookie };