Dark mode #242
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| export const lightTheme = { | ||
| colorBackgroundLight: '#f4f4f4', | ||
|
There was a problem hiding this comment. Light/medium/Dark has same value. Why to make 2 variables for the same value? |
||
| 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', | ||
|
There was a problem hiding this comment. name is |
||
| colorAuctionInput: '#ccc', | ||
| colorStockLablel: '#464646', | ||
| colorChartBackground: 'white', | ||
|
There was a problem hiding this comment. Have consistency in the colour value declaration. Either use RGB, or name, or Hexa |
||
| colorChartBorder: 'white', | ||
| colorStockText: '#540075', | ||
| }; | ||
| 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', | ||
| colorStockText: '#cf56ff', | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import { lightTheme, darkTheme } from '@components/Dark-Theme/Themes'; | ||
|
|
||
| export const useDarkMode = () => { | ||
| const [theme, setTheme] = useState('light'); | ||
|
There was a problem hiding this comment. The names are not clear. It should be ' |
||
| 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=/`; | ||
shubham-y marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| document.cookie = cookieStr; | ||
| }; | ||
| const accessCookie = (cookieName) => { | ||
shubham-y marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| const name = `${cookieName}=`; | ||
shubham-y marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| 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); | ||
|
There was a problem hiding this comment. Any reason for using |
||
| setTheme(mode); | ||
| const themeMode = mode === 'light' ? lightTheme : darkTheme; | ||
| setThemeData(themeMode); | ||
|
There was a problem hiding this comment. The name should be change to |
||
| }; | ||
|
|
||
| const themeToggler = () => { | ||
| const toggle = theme === 'light' ? setMode('dark') : setMode('light'); | ||
|
|
||
| return toggle; | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const localTheme = accessCookie('theme'); | ||
| const themeMode = localTheme === 'light' ? lightTheme : darkTheme; | ||
| if (localTheme) { | ||
| setTheme(localTheme); | ||
| setThemeData(themeMode); | ||
| } | ||
| setMountedComponent(true); | ||
| }, []); | ||
| return [theme, themeData, themeToggler, mountedComponent]; | ||
|
There was a problem hiding this comment. We should return the |
||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .container img { | ||
| width: 20px; | ||
| height: 20px; | ||
| cursor: pointer; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" /> | ||
|
There was a problem hiding this comment. this should come from constant also alt tag is wrong. |
||
| ) : ( | ||
| <img src="/assets/sun.png" alt="sun" /> | ||
|
|
||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default DarkThemeIcon; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
repetitive code. Please remove
padding-left