merge dev to main

src/components/BlogPage/BlogGrid/BlogGrid.scss

@@ -10,7 +10,7 @@
         h3 {
             padding-left: 5px;
             font-size: $medium;
-            color: $black;
+            color: $primary;
         }
     }
 }

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
 

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 {

src/context/themeContext.js

@@ -3,42 +3,50 @@ 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)
 
 // const { theme, setTheme, toggleTheme } = useTheme()
 export const useTheme = () => useContext(ThemeContext)
 
+
 const ThemeProvider = ({ children }) => {
   // default theme: light
   const DEFAULT_THEME = 'light'
-  const [theme, setTheme] = useState(DEFAULT_THEME)
+  const localTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : undefined
+  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)
@@ -56,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
 }

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;