+ ) : (
+ 
+ )}
+
-
-
-
-
- router.push('/currency-exchange')}
- buttonPrimary
- >
- Go to currency Exchange
-
-
-
-
-
+ <>
+
+
+
);
}
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 ;
return (
- <>
-
+
+ Bank Dashboard
+
+
+
+
-
+
-
+
-
-
-
-
-
+
+
Latest Transactions
+
+ router.push('/currency-exchange')}
+ buttonPrimary
+ >
+ Go to currency Exchange
+
+
-
+
+
+
+
+
+
+
+
+ Latest Transactions
+
-
-
+ <>
+
);
};
@@ -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 ;
return (
- <>
-
-
+
+
);
};
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 ;
const showAlert = () => {
return (
-
- {stocks.map((itemName) => (
-
-
-
-
+ <>
+
-
+ .content {
+ min-height: 87vh;
+ padding-bottom: 75px;
+ }
+ .shoppinglist-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-items: stretch;
+ }
+ `}
+ Sell Stocks
-
+
+
-
-
+
-
-
+
+
+ {stocks.map((itemName) => (
+
+
+
+
Sell Stocks
+
+
-
- Please log in to continue!
-
-
+
+
+ Please log in to continue!
+
+
+
+
-
- {userStocksData.isLoggedIn && (
-
+ {children}
+
+ );
+}
+
+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 };
-
+
+
);
};
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 @@
+
+
+
+
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 (
+
- {availableStocks.length ? availableStocks : NO_STOCKS_MESSAGE}
+
+ <>
+
-
+ .content {
+ min-height: 87vh;
+ padding-bottom: 75px;
+ }
+ .shoppinglist-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-items: stretch;
+ }
+ `}
+
+
-
-
+ {userStocksData.isLoggedIn && (
+
- )}
-
+
-
+ {availableStocks.length ? availableStocks : NO_STOCKS_MESSAGE}
+
+
+
+
Buy Stocks
+
+
-
-
- Buy Stocks
-
- {!userStocksData.isLoggedIn && showAlert()}
-
-