From a66ffa38172660117c077e5f282a354efaace0e3 Mon Sep 17 00:00:00 2001 From: yolit-bitlogic Date: Mon, 17 Jan 2022 13:25:32 -0300 Subject: [PATCH 1/5] fix bugs --- src/components/Banners/BannerLogo.js | 2 ++ .../BlogPage/BlogGrid/BlogGrid.scss | 2 +- src/components/JobsPage/JobsPage.scss | 16 +++++++--- src/context/themeContext.js | 32 +++++++++++-------- src/styles/global.scss | 3 ++ 5 files changed, 36 insertions(+), 19 deletions(-) diff --git a/src/components/Banners/BannerLogo.js b/src/components/Banners/BannerLogo.js index 38f3eca5..d0aa8bf8 100644 --- a/src/components/Banners/BannerLogo.js +++ b/src/components/Banners/BannerLogo.js @@ -23,6 +23,8 @@ const BannerLogo = ({ banner, title }) => { const imagenDM = getImage(imageDarkMode?.localFile) const logoDM = getImage(logoDarkMode?.localFile) + console.log(logoDM) + return ( <> {theme === "dark" && imagenDM && logoDM ? ( diff --git a/src/components/BlogPage/BlogGrid/BlogGrid.scss b/src/components/BlogPage/BlogGrid/BlogGrid.scss index 42da018a..66a897f2 100644 --- a/src/components/BlogPage/BlogGrid/BlogGrid.scss +++ b/src/components/BlogPage/BlogGrid/BlogGrid.scss @@ -10,7 +10,7 @@ h3 { padding-left: 5px; font-size: $medium; - color: $black; + color: $primary; } } } diff --git a/src/components/JobsPage/JobsPage.scss b/src/components/JobsPage/JobsPage.scss index 1ac920f8..c4a87067 100644 --- a/src/components/JobsPage/JobsPage.scss +++ b/src/components/JobsPage/JobsPage.scss @@ -2,17 +2,20 @@ .cats-job-title { a { - color: rgb(86, 130, 198); - font-weight: 700; + color: $title-jobs; + font-weight: 700; } } .cats-multiselect-label { color: $primary !important; } +.cats-multiselect-label-block { + border: 2px solid $border-bottom !important; +} .cats-job { - border-bottom: 1px solid #cdcdcd; + border-bottom: 1px solid $border-bottom !important; padding-left: 15px !important; > div { overflow-x: hidden !important; @@ -22,10 +25,10 @@ } &:hover { - background: #f0f0f0 !important; + background: $jobs-hover !important; cursor: pointer; & .cats-job-column-value { - color: $primary-hover !important; + color: $primary !important; } } } @@ -49,6 +52,9 @@ .cats-column-header { padding-left: 15px !important; + border-bottom: 2px solid $border-bottom !important; + border-top: 2px solid $border-bottom !important; + } .banner__head { diff --git a/src/context/themeContext.js b/src/context/themeContext.js index 138c5612..e5900f49 100644 --- a/src/context/themeContext.js +++ b/src/context/themeContext.js @@ -3,24 +3,30 @@ import PropTypes from 'prop-types' const themes = { light: { - '--nav-footer-container': '#2a2c2e', - '--blog-card-container': '#f5f5f5', - '--primary': '#000000', - '--primary-hover': '#000000', - '--primary-container': '#ffffff', + "--nav-footer-container": "#2a2c2e", + "--blog-card-container": "#f5f5f5", + "--primary": "#000000", + "--primary-hover": "#000000", + "--primary-container": "#ffffff", + "--title-jobs": "#5682c6", + "--jobs-hover": "#f0f0f0", - '--secondary-container': '#25cad3', + "--secondary-container": "#25cad3", + "--border-bottom": "#cdcdcd", }, dark: { - '--nav-footer-container': '#383838', - '--blog-card-container': '#383838', + "--nav-footer-container": "#383838", + "--blog-card-container": "#383838", - '--primary': '#ffffff', - '--primary-hover': '#000000', - '--primary-container': '#292929', + "--primary": "#ffffff", + "--primary-hover": "#000000", + "--primary-container": "#292929", + "--border-bottom": "#565656", + "--title-jobs": "#1ecad3", + "--jobs-hover": "#8383833b", - '--secondary-container': '#191919', - } + "--secondary-container": "#191919", + }, } const ThemeContext = createContext(null) diff --git a/src/styles/global.scss b/src/styles/global.scss index bb2449c1..2d32e00d 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -12,6 +12,9 @@ $primary-container: var(--primary-container); $secondary: var(--secondary); $secondary-container: var(--secondary-container); +$border-bottom: var(--border-bottom); +$title-jobs: var(--title-jobs); +$jobs-hover: var(--jobs-hover); main { background-color: $primary-container !important; From 715b5be9045e8dd99fa576f7a05c4e6e9b089d52 Mon Sep 17 00:00:00 2001 From: yolit-bitlogic <88732226+yolit-bitlogic@users.noreply.github.com> Date: Mon, 17 Jan 2022 13:26:56 -0300 Subject: [PATCH 2/5] Delete consoleLog --- src/components/Banners/BannerLogo.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Banners/BannerLogo.js b/src/components/Banners/BannerLogo.js index d0aa8bf8..38f3eca5 100644 --- a/src/components/Banners/BannerLogo.js +++ b/src/components/Banners/BannerLogo.js @@ -23,8 +23,6 @@ const BannerLogo = ({ banner, title }) => { const imagenDM = getImage(imageDarkMode?.localFile) const logoDM = getImage(logoDarkMode?.localFile) - console.log(logoDM) - return ( <> {theme === "dark" && imagenDM && logoDM ? ( From 664e513e828f4ed8e9b95d1df44e98f251c11bb1 Mon Sep 17 00:00:00 2001 From: yolit-bitlogic Date: Mon, 17 Jan 2022 13:35:21 -0300 Subject: [PATCH 3/5] =?UTF-8?q?Modificaci=C3=B3n=20del=20themeContext?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/context/themeContext.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/context/themeContext.js b/src/context/themeContext.js index e5900f49..50f331e3 100644 --- a/src/context/themeContext.js +++ b/src/context/themeContext.js @@ -36,22 +36,23 @@ export const useTheme = () => useContext(ThemeContext) const ThemeProvider = ({ children }) => { // default theme: light - const DEFAULT_THEME = 'light' - const [theme, setTheme] = useState(DEFAULT_THEME) + const DEFAULT_THEME = "light" + const localTheme = localStorage.getItem("theme") + const deviseTheme = getDeviseTheme() + const [theme, setTheme] = useState(localTheme || deviseTheme || DEFAULT_THEME) - useEffect(() => { - const localTheme = localStorage.getItem('theme') - const deviseTheme = getDeviseTheme() - // local storage > devise theme - setTheme(localTheme || deviseTheme || DEFAULT_THEME) - }, []) + // useEffect(() => { + + // // local storage > devise theme + // setTheme(localTheme || deviseTheme || DEFAULT_THEME) + // }, []) useEffect(() => { - localStorage.setItem('theme', theme) + localStorage.setItem("theme", theme) }, [theme]) const toggleTheme = () => { - setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')) + setTheme(prevTheme => (prevTheme === "light" ? "dark" : "light")) } return ( From fc2ecc1cc45262de840af7bdb3ae4deeea920387 Mon Sep 17 00:00:00 2001 From: yolit-bitlogic Date: Mon, 17 Jan 2022 13:37:02 -0300 Subject: [PATCH 4/5] delete consoleLog --- src/components/Banners/BannerLogo.js | 2 -- src/components/EdTechPage/EdTechContainer.js | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/components/Banners/BannerLogo.js b/src/components/Banners/BannerLogo.js index d0aa8bf8..38f3eca5 100644 --- a/src/components/Banners/BannerLogo.js +++ b/src/components/Banners/BannerLogo.js @@ -23,8 +23,6 @@ const BannerLogo = ({ banner, title }) => { const imagenDM = getImage(imageDarkMode?.localFile) const logoDM = getImage(logoDarkMode?.localFile) - console.log(logoDM) - return ( <> {theme === "dark" && imagenDM && logoDM ? ( diff --git a/src/components/EdTechPage/EdTechContainer.js b/src/components/EdTechPage/EdTechContainer.js index ebb19850..5e8b8b12 100644 --- a/src/components/EdTechPage/EdTechContainer.js +++ b/src/components/EdTechPage/EdTechContainer.js @@ -9,8 +9,6 @@ import "./EdtechContainer.scss" const EdTech = () => { const data = useEdTech() - console.log(data) - const bannerData = useBanner() const edTechs = data?.allStrapiEdteches?.nodes From c8a4ddb65425f55f98f980e905cda41372bda3cd Mon Sep 17 00:00:00 2001 From: Yuliya Sharapa Date: Mon, 17 Jan 2022 15:02:05 -0300 Subject: [PATCH 5/5] fix useContext --- src/context/themeContext.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/context/themeContext.js b/src/context/themeContext.js index 50f331e3..98749c8f 100644 --- a/src/context/themeContext.js +++ b/src/context/themeContext.js @@ -34,10 +34,11 @@ const ThemeContext = createContext(null) // const { theme, setTheme, toggleTheme } = useTheme() export const useTheme = () => useContext(ThemeContext) + const ThemeProvider = ({ children }) => { // default theme: light - const DEFAULT_THEME = "light" - const localTheme = localStorage.getItem("theme") + const DEFAULT_THEME = 'light' + const localTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : undefined const deviseTheme = getDeviseTheme() const [theme, setTheme] = useState(localTheme || deviseTheme || DEFAULT_THEME) @@ -48,11 +49,11 @@ const ThemeProvider = ({ children }) => { // }, []) useEffect(() => { - localStorage.setItem("theme", theme) + localStorage.setItem('theme', theme) }, [theme]) const toggleTheme = () => { - setTheme(prevTheme => (prevTheme === "light" ? "dark" : "light")) + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')) } return ( @@ -63,18 +64,21 @@ const ThemeProvider = ({ children }) => { } const getDeviseTheme = () => { - if (window.matchMedia) { - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - return 'dark' + if (typeof window !== 'undefined') { + if (window.matchMedia) { + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark' + } else { + return 'light' + } } else { + // cambiar si cambia el tema por defecto return 'light' } } else { - // cambiar si cambia el tema por defecto - return 'light' + return undefined } } - ThemeProvider.propTypes = { children: PropTypes.object }