From 2090467b574798cbe06166065e3929b30f70037a Mon Sep 17 00:00:00 2001 From: Shubham Date: Thu, 21 Oct 2021 18:17:22 +0530 Subject: [PATCH 01/16] Add css variables for dark mode --- components/Auction/Auction.module.css | 4 +- components/Auction/new.module.css | 13 ++++-- components/NavBar/navbar.module.css | 3 ++ components/coins-status/coin.module.css | 2 +- .../custom-button/custom-button.style.js | 11 ++--- .../exchange-rate-row.module.css | 2 +- components/filter/filter.module.css | 4 +- components/stock-card/index.js | 4 +- .../stock-operation.module.css | 6 ++- .../transaction-chart.module.css | 4 +- .../transaction-details.module.css | 4 +- .../transaction-operation.module.css | 6 ++- public/assets/filter-icon-dark.svg | 45 +++++++++++++++++++ styles/Home.module.css | 8 ++-- styles/globals.css | 6 +-- 15 files changed, 91 insertions(+), 31 deletions(-) create mode 100644 public/assets/filter-icon-dark.svg 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/NavBar/navbar.module.css b/components/NavBar/navbar.module.css index ab9ab6e..b79d368 100644 --- a/components/NavBar/navbar.module.css +++ b/components/NavBar/navbar.module.css @@ -30,6 +30,9 @@ margin: 10px 0 5px 10px; cursor: pointer; } +.darkTheme { + padding: 14px 16px; +} .profilePic { display: none; 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..96024cf 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; }; +// console.log(selectButton(props)); export const CustomButtonContainer = styled.button` border-radius: 6px; cursor: pointer; 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/stock-card/index.js b/components/stock-card/index.js index 1a9e96a..c65ffcd 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,7 +77,7 @@ export const Card = ({ stock, operationType }) => { text-align: center; width: 100%; padding: 1rem; - background-color: #ffffff; + background-color: var(--colorBackgroundMedium); } .stock-card-product-name { diff --git a/components/stock-operation-modal/stock-operation.module.css b/components/stock-operation-modal/stock-operation.module.css index f8ca7e6..33d441c 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(--colorStockLablel); } .select { @@ -61,6 +61,8 @@ border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; + background-color: var(--colorBackgroundDark); + color: var(--colorWhite); } .closedButton { 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..839f794 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(--colorBorder); + border-bottom: 1px solid var(--colorBorder); 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..6f27b9c 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(--colorStockLablel); } .select { @@ -61,6 +61,8 @@ border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; + background-color: var(--colorBackgroundDark); + color: var(--colorWhite); } .closedButton { 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/styles/Home.module.css b/styles/Home.module.css index 67b5735..c691749 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(--colorBorder2); border-radius: 5px; padding: 1px; - background: white; + background: var(--colorBackgroundLight); font-size: 20px; margin-top: 10px; } diff --git a/styles/globals.css b/styles/globals.css index a960f36..de4e4d7 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; From cc85be4561516393842a90945afca8126f2ca9a0 Mon Sep 17 00:00:00 2001 From: Shubham Date: Thu, 21 Oct 2021 18:18:10 +0530 Subject: [PATCH 02/16] Add icons for dark mode --- public/assets/moon.png | Bin 0 -> 15504 bytes public/assets/sun.png | Bin 0 -> 7256 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 public/assets/moon.png create mode 100644 public/assets/sun.png diff --git a/public/assets/moon.png b/public/assets/moon.png new file mode 100644 index 0000000000000000000000000000000000000000..30396f9a600d9aa356c798ccd41519a5b0dd9d59 GIT binary patch literal 15504 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 Date: Thu, 21 Oct 2021 18:19:56 +0530 Subject: [PATCH 03/16] Add Dark-Theme and dark-theme-icon components --- components/Dark-Theme/Themes.js | 42 +++++++++++++++++++ components/Dark-Theme/globalStyles.js | 20 +++++++++ components/Dark-Theme/useDarkMode.js | 31 ++++++++++++++ .../dark-theme-icon/dark-mode.module.css | 5 +++ components/dark-theme-icon/index.js | 20 +++++++++ stores/dark-mode-context.js | 41 ++++++++++++++++++ 6 files changed, 159 insertions(+) create mode 100644 components/Dark-Theme/Themes.js create mode 100644 components/Dark-Theme/globalStyles.js create mode 100644 components/Dark-Theme/useDarkMode.js create mode 100644 components/dark-theme-icon/dark-mode.module.css create mode 100644 components/dark-theme-icon/index.js create mode 100644 stores/dark-mode-context.js diff --git a/components/Dark-Theme/Themes.js b/components/Dark-Theme/Themes.js new file mode 100644 index 0000000..742c1d5 --- /dev/null +++ b/components/Dark-Theme/Themes.js @@ -0,0 +1,42 @@ +export const lightTheme = { + colorBackgroundLight: '#f4f4f4', + colorBackgroundMedium: '#f4f4f4', + colorBackgroundDark: '#f4f4f4', + colorExchangeBackground: 'aliceblue', + colorBodyBackground: '#e9ebff', + colorText: '#363636', + colorBorder: '#f0e2e7', + colorBorder2: '#f4f4f4', + colorButtonGreen: '#2ecc71', + colorButtonRed: '#ff3838', + colorButtonPink: '#ee1a75', + colorButtonBorder: 'white', + colorFilterHover: '#bdc3c7', + colorAuctionBackground: 'rgb(245, 235, 235)', + colorWhite: 'black', + colorAuctionInput: '#ccc', + colorStockLablel: '#464646', + colorChartBackground: 'white', + colorChartBorder: 'white', +}; +export const darkTheme = { + colorBackgroundLight: '#27262D', + colorBackgroundMedium: '#1D1C22', + colorBackgroundDark: '#0e0e11', + colorExchangeBackground: 'var(--colorBackgroundMedium)', + colorBodyBackground: 'var(--colorBackgroundLight)', + colorText: '#E1E1EC', + colorBorder: 'rgb(76, 39, 52)', + colorBorder2: 'rgb(51, 55, 57)', + colorButtonGreen: '#1d8147', + colorButtonRed: '#9e0000', + colorButtonPink: '#c70f5f', + colorButtonBorder: 'var(--colorButtonPink)', + colorFilterHover: '#3a3f42', + colorAuctionBackground: '#2e1717', + colorWhite: '#fff', + colorAuctionInput: 'white', + colorStockLablel: 'var(--colorWhite)', + colorChartBackground: '#241212', + colorChartBorder: '#34383a', +}; diff --git a/components/Dark-Theme/globalStyles.js b/components/Dark-Theme/globalStyles.js new file mode 100644 index 0000000..5020e4e --- /dev/null +++ b/components/Dark-Theme/globalStyles.js @@ -0,0 +1,20 @@ +import { createGlobalStyle } from 'styled-components'; + +const GlobalStyles = createGlobalStyle` + :root{ + ${({ theme }) => { + let s = ``; + for (var prop in theme) { + if (prop in theme) { + s += `--${prop}: ${theme[prop]};`; + } + } + return s; + }} + } + 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..4224640 --- /dev/null +++ b/components/Dark-Theme/useDarkMode.js @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +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) => { + window.localStorage.setItem('theme', mode); + 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 = window.localStorage.getItem('theme'); + const themeMode = localTheme === 'light' ? lightTheme : darkTheme; + if (localTheme) { + setTheme(localTheme); + setThemeData(themeMode); + } + setMountedComponent(true); + console.log('here'); + }, []); + return [theme, themeData, themeToggler, mountedComponent]; +}; 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 ( +
+ {theme === 'light' ? ( + moon + ) : ( + sun + )} +
+ ); +} + +export default DarkThemeIcon; diff --git a/stores/dark-mode-context.js b/stores/dark-mode-context.js new file mode 100644 index 0000000..c7de137 --- /dev/null +++ b/stores/dark-mode-context.js @@ -0,0 +1,41 @@ +/* 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 ( + + {children} + + ); +} + +export function useDarkModeContext() { + // console.log(DarkModeContext); + return useContext(DarkModeContext); +} + +// const DarkModeContext = createContext({useDarkMode()}); + +// export const DarkModeProvider = ({ children }) => { +// const [theme, themeToggler] = useDarkMode(); +// return ( +// +// {children} +// +// ); +// }; + +// export const darkModeContext = () => { +// const context = useContext(DarkModeContext); // this needs to be changed +// if (!context) +// throw new Error(`darkModeContext context can only +// be used in a component wrapped with DarkModeContext`); +// return context; +// }; From 8802689c77130fd8063766d943eec8e7da3109e4 Mon Sep 17 00:00:00 2001 From: Shubham Date: Thu, 21 Oct 2021 18:21:46 +0530 Subject: [PATCH 04/16] Changes in pages and components for dark theme --- components/NavBar/index.js | 6 ++ components/filter/index.js | 8 ++- pages/_app.js | 9 ++- pages/auction/index.js | 47 ++++++++++---- pages/auction/new.js | 47 +++++++++----- pages/currency-exchange/index.js | 40 ++++++++---- pages/index.js | 83 +++++++++++++++---------- pages/trading/index.js | 89 +++++++++++++++------------ pages/trading/sell.js | 101 ++++++++++++++++++------------- 9 files changed, 277 insertions(+), 153 deletions(-) diff --git a/components/NavBar/index.js b/components/NavBar/index.js index 447807f..8fbc575 100644 --- a/components/NavBar/index.js +++ b/components/NavBar/index.js @@ -3,8 +3,11 @@ import React, { useState, useRef } from 'react'; import styles from './navbar.module.css'; 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'; const NavBar = ({ personData: { photo } }) => { + const [theme, themeData, themeToggler] = useDarkModeContext(); const RDSLogo = '/assets/Real-Dev-Squad1x.png'; const [toggle, setToggle] = useState(false); const navbarRef = useRef(); @@ -43,6 +46,9 @@ const NavBar = ({ personData: { photo } }) => { +
+ +
{ + const [theme, themeData, themeToggler] = useDarkModeContext(); const { changeTransactions } = props; const [toggle, setToggle] = useState(false); const filterRef = useRef(); @@ -20,7 +22,11 @@ const Filter = (props) => { >
Filter icon ; +const MyApp = ({ Component, pageProps }) => { + return ( + + + + ); +}; 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
; return ( -
- - Auction | Crypto - - - - -
- + + <> + +
+ + Auction | Crypto + + + + +
+ +
+ + +
- - -
-
+ + ); }; 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
; return ( -
- - Create New Auction | Crypto - - - - - -

Go Back

- - - -
-
+ + <> + +
+ + Create New Auction | Crypto + + + + + +

Go Back

+ + + +
+
+ + ); }; 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
; return ( -
- - Currency Exchange - - - -
- {exchageRates.map((row) => ( - - ))} -
-
+ + <> + +
+ + Currency Exchange + + + +
+ {exchageRates.map((row) => ( + + ))} +
+
+ + ); } diff --git a/pages/index.js b/pages/index.js index 5bc012e..b930a93 100644 --- a/pages/index.js +++ b/pages/index.js @@ -12,45 +12,62 @@ 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
; return ( -
- - Bank Dashboard - - - -
-
-
- - -
-
-
- router.push('/currency-exchange')} - buttonPrimary - > - Go to currency Exchange - -
-
-
- + + <> + +
+ + Bank Dashboard + + + +
+
+
+ +
-
-
-
-

Latest Transactions

+
+ router.push('/currency-exchange')} + buttonPrimary + > + Go to currency Exchange + +
+
+
+ +
+
+
+
+
+

Latest Transactions

+
+ +
- -
+
+
- -
-
+ + ); } 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 ( - <> - -
-
-
-
- {stocks.map((itemName) => ( - - ))} -
-
- -
Sell Stocks
- + + <> + + +
+
+
+
+ {stocks.map((itemName) => ( + + ))} +
+
+ +
Sell Stocks
+ +
+
-
-
- -
- + .content { + min-height: 87vh; + padding-bottom: 75px; + } + .shoppinglist-container { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + } + `} +
+ + ); }; 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 ( -
- - Please log in to continue! - -
+ + <> + +
+ + Please log in to continue! + +
+ + ); }; @@ -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 ( - <> - -
-
- {userStocksData.isLoggedIn && ( -
-
- {availableStocks.length ? availableStocks : NO_STOCKS_MESSAGE} + + <> + + +
+
+ {userStocksData.isLoggedIn && ( +
+
+ {availableStocks.length ? availableStocks : NO_STOCKS_MESSAGE} +
+
+ +
Buy Stocks
+ +
-
- -
Buy Stocks
- -
-
- )} -
{!userStocksData.isLoggedIn && showAlert()}
-
-
- -
- + .content { + min-height: 87vh; + padding-bottom: 75px; + } + .shoppinglist-container { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: stretch; + } + `} +
+ + ); }; From 92c43176028f627ceba81039bbc8b81ec8e2ff05 Mon Sep 17 00:00:00 2001 From: Shubham Date: Thu, 21 Oct 2021 18:29:48 +0530 Subject: [PATCH 05/16] Changes in dark mode context --- stores/dark-mode-context.js | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/stores/dark-mode-context.js b/stores/dark-mode-context.js index c7de137..4317578 100644 --- a/stores/dark-mode-context.js +++ b/stores/dark-mode-context.js @@ -17,25 +17,13 @@ export function DarkModeProvider({ children }) { } export function useDarkModeContext() { - // console.log(DarkModeContext); - return useContext(DarkModeContext); -} - -// const DarkModeContext = createContext({useDarkMode()}); + const state = useContext(DarkModeContext); -// export const DarkModeProvider = ({ children }) => { -// const [theme, themeToggler] = useDarkMode(); -// return ( -// -// {children} -// -// ); -// }; + if (state === undefined) { + throw new Error( + 'useDarkModeContext must be used within a DarkModeProvider' + ); + } -// export const darkModeContext = () => { -// const context = useContext(DarkModeContext); // this needs to be changed -// if (!context) -// throw new Error(`darkModeContext context can only -// be used in a component wrapped with DarkModeContext`); -// return context; -// }; + return state; +} From ca990d86d7c31240d9796c31b4e653615fbb031f Mon Sep 17 00:00:00 2001 From: Shubham Date: Sat, 23 Oct 2021 19:35:07 +0530 Subject: [PATCH 06/16] Fix dark mode for mobile version --- components/Dark-Theme/Themes.js | 2 ++ components/stock-card/index.js | 4 ++-- components/stock-operation-modal/stock-operation.module.css | 2 +- .../transaction-operation/transaction-operation.module.css | 2 +- styles/Home.module.css | 2 +- 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/components/Dark-Theme/Themes.js b/components/Dark-Theme/Themes.js index 742c1d5..8b4294e 100644 --- a/components/Dark-Theme/Themes.js +++ b/components/Dark-Theme/Themes.js @@ -18,6 +18,7 @@ export const lightTheme = { colorStockLablel: '#464646', colorChartBackground: 'white', colorChartBorder: 'white', + colorStockText: '#540075', }; export const darkTheme = { colorBackgroundLight: '#27262D', @@ -39,4 +40,5 @@ export const darkTheme = { colorStockLablel: 'var(--colorWhite)', colorChartBackground: '#241212', colorChartBorder: '#34383a', + colorStockText: '#cf56ff', }; diff --git a/components/stock-card/index.js b/components/stock-card/index.js index c65ffcd..97dd5e0 100644 --- a/components/stock-card/index.js +++ b/components/stock-card/index.js @@ -83,7 +83,7 @@ export const Card = ({ stock, operationType }) => { .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); } `} diff --git a/components/stock-operation-modal/stock-operation.module.css b/components/stock-operation-modal/stock-operation.module.css index 33d441c..6dd3346 100644 --- a/components/stock-operation-modal/stock-operation.module.css +++ b/components/stock-operation-modal/stock-operation.module.css @@ -98,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-operation/transaction-operation.module.css b/components/transaction-operation/transaction-operation.module.css index 6f27b9c..d758c88 100644 --- a/components/transaction-operation/transaction-operation.module.css +++ b/components/transaction-operation/transaction-operation.module.css @@ -98,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/styles/Home.module.css b/styles/Home.module.css index c691749..c5418cc 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -80,7 +80,7 @@ margin: 0; padding: 1rem; display: block; - color:#540075; + color: var(--colorStockText); font-weight: bold; font-size: 1.2rem; cursor: pointer; From 9fd500657cfab4f952f9525bcba9dcc15eb854cc Mon Sep 17 00:00:00 2001 From: Shubham Date: Tue, 26 Oct 2021 19:45:53 +0530 Subject: [PATCH 07/16] Add cookie for dark theme --- components/Dark-Theme/useDarkMode.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/components/Dark-Theme/useDarkMode.js b/components/Dark-Theme/useDarkMode.js index 4224640..89dc204 100644 --- a/components/Dark-Theme/useDarkMode.js +++ b/components/Dark-Theme/useDarkMode.js @@ -5,8 +5,24 @@ export const useDarkMode = () => { const [theme, setTheme] = useState('light'); const [themeData, setThemeData] = useState(lightTheme); const [mountedComponent, setMountedComponent] = useState(false); + const setCookie = (name, value, days) => { + const domain = '.realdevsquad.com'; + const expires = new Date(Date.now() + 24 * days * 60 * 60 * 1000); + const cookieStr = `${name}=${value}; expires=${expires}; domain=${domain}; path=/`; + document.cookie = cookieStr; + }; + const accessCookie = (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 temp.substring(name.length, temp.length); + } + return ''; + }; const setMode = (mode) => { - window.localStorage.setItem('theme', mode); + setCookie('theme', mode, 30); setTheme(mode); const themeMode = mode === 'light' ? lightTheme : darkTheme; setThemeData(themeMode); @@ -18,14 +34,13 @@ export const useDarkMode = () => { }; useEffect(() => { - const localTheme = window.localStorage.getItem('theme'); + const localTheme = accessCookie('theme'); const themeMode = localTheme === 'light' ? lightTheme : darkTheme; if (localTheme) { setTheme(localTheme); setThemeData(themeMode); } setMountedComponent(true); - console.log('here'); }, []); return [theme, themeData, themeToggler, mountedComponent]; }; From 85c07f8dc828ea04cf465dd2e409b3058023b52d Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 5 Nov 2021 16:24:54 +0530 Subject: [PATCH 08/16] Added cookie functions in utils --- components/Dark-Theme/useDarkMode.js | 19 ++----------------- utils/cookie.js | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+), 17 deletions(-) create mode 100644 utils/cookie.js diff --git a/components/Dark-Theme/useDarkMode.js b/components/Dark-Theme/useDarkMode.js index 89dc204..b57b5f3 100644 --- a/components/Dark-Theme/useDarkMode.js +++ b/components/Dark-Theme/useDarkMode.js @@ -1,26 +1,11 @@ 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 setCookie = (name, value, days) => { - const domain = '.realdevsquad.com'; - const expires = new Date(Date.now() + 24 * days * 60 * 60 * 1000); - const cookieStr = `${name}=${value}; expires=${expires}; domain=${domain}; path=/`; - document.cookie = cookieStr; - }; - const accessCookie = (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 temp.substring(name.length, temp.length); - } - return ''; - }; const setMode = (mode) => { setCookie('theme', mode, 30); setTheme(mode); @@ -34,7 +19,7 @@ export const useDarkMode = () => { }; useEffect(() => { - const localTheme = accessCookie('theme'); + const localTheme = getCookie('theme'); const themeMode = localTheme === 'light' ? lightTheme : darkTheme; if (localTheme) { setTheme(localTheme); 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 }; From 6224ca07cd3075fe15e19cd6028f160bec228e9b Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 5 Nov 2021 16:58:12 +0530 Subject: [PATCH 09/16] Rename css variables --- components/Dark-Theme/Themes.js | 8 ++++---- .../transaction-details/transaction-details.module.css | 4 ++-- styles/Home.module.css | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/Dark-Theme/Themes.js b/components/Dark-Theme/Themes.js index 8b4294e..c593984 100644 --- a/components/Dark-Theme/Themes.js +++ b/components/Dark-Theme/Themes.js @@ -5,8 +5,8 @@ export const lightTheme = { colorExchangeBackground: 'aliceblue', colorBodyBackground: '#e9ebff', colorText: '#363636', - colorBorder: '#f0e2e7', - colorBorder2: '#f4f4f4', + colorTransactionBorder: '#f0e2e7', + colorCardBorder: '#f4f4f4', colorButtonGreen: '#2ecc71', colorButtonRed: '#ff3838', colorButtonPink: '#ee1a75', @@ -27,8 +27,8 @@ export const darkTheme = { colorExchangeBackground: 'var(--colorBackgroundMedium)', colorBodyBackground: 'var(--colorBackgroundLight)', colorText: '#E1E1EC', - colorBorder: 'rgb(76, 39, 52)', - colorBorder2: 'rgb(51, 55, 57)', + colorTransactionBorder: 'rgb(76, 39, 52)', + colorCardBorder: 'rgb(51, 55, 57)', colorButtonGreen: '#1d8147', colorButtonRed: '#9e0000', colorButtonPink: '#c70f5f', diff --git a/components/transaction-details/transaction-details.module.css b/components/transaction-details/transaction-details.module.css index 839f794..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 var(--colorBorder); - border-bottom: 1px solid var(--colorBorder); + border-top: 1px solid var(--colorTransactionBorder); + border-bottom: 1px solid var(--colorTransactionBorder); cursor: pointer; height:6em; font-size: 17px; diff --git a/styles/Home.module.css b/styles/Home.module.css index c5418cc..4016251 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -34,7 +34,7 @@ border: none; } .card { - border: 1px solid var(--colorBorder2); + border: 1px solid var(--colorCardBorder); border-radius: 5px; padding: 1px; background: var(--colorBackgroundLight); From 1225995e9f0529771a6596f3263e29e997b375fe Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 5 Nov 2021 19:03:36 +0530 Subject: [PATCH 10/16] Changes in transaction chart for dark mode --- components/transaction-chart/index.js | 6 +++++- pages/index.js | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) 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/pages/index.js b/pages/index.js index b930a93..5acaba2 100644 --- a/pages/index.js +++ b/pages/index.js @@ -53,6 +53,7 @@ export default function Home() {
From 99a20eacfac256e4a1780fdbba57bb0d6de4477c Mon Sep 17 00:00:00 2001 From: Shubham Date: Sat, 26 Feb 2022 02:10:26 +0530 Subject: [PATCH 11/16] Changes in navbar link for dark mode --- components/Dark-Theme/Themes.js | 4 ++++ components/NavBar/navbar.module.css | 7 ++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/Dark-Theme/Themes.js b/components/Dark-Theme/Themes.js index c593984..d510f6a 100644 --- a/components/Dark-Theme/Themes.js +++ b/components/Dark-Theme/Themes.js @@ -19,6 +19,8 @@ export const lightTheme = { colorChartBackground: 'white', colorChartBorder: 'white', colorStockText: '#540075', + colorNavbarLink: '#041484', + colorActiveLink: '#e30464', }; export const darkTheme = { colorBackgroundLight: '#27262D', @@ -41,4 +43,6 @@ export const darkTheme = { colorChartBackground: '#241212', colorChartBorder: '#34383a', colorStockText: '#cf56ff', + colorNavbarLink: '#7eb2fb', + colorActiveLink: '#fb2e86', }; diff --git a/components/NavBar/navbar.module.css b/components/NavBar/navbar.module.css index 04b5b05..78543ce 100644 --- a/components/NavBar/navbar.module.css +++ b/components/NavBar/navbar.module.css @@ -29,8 +29,9 @@ background-color: #1d1283; } .darkTheme { + padding: 19px 16px; + margin: 10px; display: none; - padding: 14px 16px; } .navBarLogoLi { @@ -125,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) { From b16b137838ff1c9e5ab11dcf362651ac7a32d9dc Mon Sep 17 00:00:00 2001 From: Shubham Date: Sat, 26 Feb 2022 02:11:11 +0530 Subject: [PATCH 12/16] Add default theme for dark mode --- components/Dark-Theme/useDarkMode.js | 3 +++ components/NavBar/index.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/components/Dark-Theme/useDarkMode.js b/components/Dark-Theme/useDarkMode.js index b57b5f3..e42b2bc 100644 --- a/components/Dark-Theme/useDarkMode.js +++ b/components/Dark-Theme/useDarkMode.js @@ -24,6 +24,9 @@ export const useDarkMode = () => { if (localTheme) { setTheme(localTheme); setThemeData(themeMode); + } else { + //default + setMode('light'); } setMountedComponent(true); }, []); diff --git a/components/NavBar/index.js b/components/NavBar/index.js index e063da7..4e4c1bb 100644 --- a/components/NavBar/index.js +++ b/components/NavBar/index.js @@ -135,9 +135,9 @@ const NavBar = () => { ); })} -
+
  • -
    • +
  • Date: Sat, 16 Apr 2022 13:09:52 +0530 Subject: [PATCH 13/16] Fix toggle icon for mobile view --- components/NavBar/navbar.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/NavBar/navbar.module.css b/components/NavBar/navbar.module.css index 78543ce..f41c9e5 100644 --- a/components/NavBar/navbar.module.css +++ b/components/NavBar/navbar.module.css @@ -187,6 +187,10 @@ float: none; } + .darkTheme { + padding: 10px 40px; + } + .mainBanner, .logoImg { margin-top: 40px; From daf5b904bb59059097afce8e4a02dd5638dc3f21 Mon Sep 17 00:00:00 2001 From: Shubham Date: Mon, 18 Apr 2022 00:59:19 +0530 Subject: [PATCH 14/16] Remove unwanted code --- components/custom-button/custom-button.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/custom-button/custom-button.style.js b/components/custom-button/custom-button.style.js index 96024cf..f7aa954 100644 --- a/components/custom-button/custom-button.style.js +++ b/components/custom-button/custom-button.style.js @@ -47,7 +47,7 @@ const selectButton = (props) => { return props.inverted ? InvertedButtonStles : BaseButtonStyles; }; -// console.log(selectButton(props)); + export const CustomButtonContainer = styled.button` border-radius: 6px; cursor: pointer; From 142500f2a2bcae53209858ea02aff4006d785272 Mon Sep 17 00:00:00 2001 From: Shubham Date: Thu, 23 Jun 2022 23:21:08 +0530 Subject: [PATCH 15/16] Refactor globalStyle file --- components/Dark-Theme/globalStyles.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Dark-Theme/globalStyles.js b/components/Dark-Theme/globalStyles.js index 5020e4e..f6e7c20 100644 --- a/components/Dark-Theme/globalStyles.js +++ b/components/Dark-Theme/globalStyles.js @@ -3,13 +3,13 @@ import { createGlobalStyle } from 'styled-components'; const GlobalStyles = createGlobalStyle` :root{ ${({ theme }) => { - let s = ``; - for (var prop in theme) { - if (prop in theme) { - s += `--${prop}: ${theme[prop]};`; + let style = ``; + for (const variableName in theme) { + if (variableName in theme) { + style += `--${variableName}: ${theme[variableName]};`; } } - return s; + return style; }} } body{ From fbb6599a0afb71dc5d5dfd99506a04d3cbf2004f Mon Sep 17 00:00:00 2001 From: Shubham Date: Thu, 23 Jun 2022 23:22:28 +0530 Subject: [PATCH 16/16] Fix variable name --- components/Dark-Theme/Themes.js | 4 ++-- components/stock-operation-modal/stock-operation.module.css | 2 +- .../transaction-operation/transaction-operation.module.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Dark-Theme/Themes.js b/components/Dark-Theme/Themes.js index d510f6a..735bffe 100644 --- a/components/Dark-Theme/Themes.js +++ b/components/Dark-Theme/Themes.js @@ -15,7 +15,7 @@ export const lightTheme = { colorAuctionBackground: 'rgb(245, 235, 235)', colorWhite: 'black', colorAuctionInput: '#ccc', - colorStockLablel: '#464646', + colorStockLabel: '#464646', colorChartBackground: 'white', colorChartBorder: 'white', colorStockText: '#540075', @@ -39,7 +39,7 @@ export const darkTheme = { colorAuctionBackground: '#2e1717', colorWhite: '#fff', colorAuctionInput: 'white', - colorStockLablel: 'var(--colorWhite)', + colorStockLabel: 'var(--colorWhite)', colorChartBackground: '#241212', colorChartBorder: '#34383a', colorStockText: '#cf56ff', diff --git a/components/stock-operation-modal/stock-operation.module.css b/components/stock-operation-modal/stock-operation.module.css index 6dd3346..3375463 100644 --- a/components/stock-operation-modal/stock-operation.module.css +++ b/components/stock-operation-modal/stock-operation.module.css @@ -50,7 +50,7 @@ .label { font-weight: bold; margin: 0.5rem 0; - color: var(--colorStockLablel); + color: var(--colorStockLabel); } .select { diff --git a/components/transaction-operation/transaction-operation.module.css b/components/transaction-operation/transaction-operation.module.css index d758c88..2a56b46 100644 --- a/components/transaction-operation/transaction-operation.module.css +++ b/components/transaction-operation/transaction-operation.module.css @@ -50,7 +50,7 @@ .label { font-weight: bold; margin: 0.5rem 0; - color: var(--colorStockLablel); + color: var(--colorStockLabel); } .select {