Dev

src/components/Cards/Cards.js

@@ -25,7 +25,7 @@ const Cards = ({ tech }) => {
         <SubModulesEdTech
           key={submod.id}
           items={submod}
-          variant={submod.edTechType == "DDE" && "dataDriven"}
+          variant={submod.edTechType === "DDE" && "dataDriven"}
         />
       )
   )
@@ -36,11 +36,17 @@ const Cards = ({ tech }) => {
   return (
     <>
       <div className=" Cards container-fluid ">
-        <div className="Cards__icon ">
-          <GatsbyImage image={theme === "dark" && iconDark ? iconDark : icon} alt={tech.title} />
-        </div>
         <div className="Cards__body col-12">
-          <div className="Cards__title col-lg-8">{tech.title}</div>
+          <div className="Cards__title col-lg-10">
+            <div className="Cards__title-logo">
+              <GatsbyImage
+                imgClassName="Cards__title-logo-img"
+                image={theme === "dark" && iconDark ? iconDark : icon}
+                alt={tech.title}
+              />
+            </div>
+            <h3>{tech.title}</h3>
+          </div>
 
           <div className="Cards__container">
             <div className="row">

src/components/Cards/Cards.scss

@@ -5,18 +5,23 @@
     padding-bottom: 30px;
     margin-bottom: 30px;
   }
-  &__icon {
-    margin: 0 auto;
-    max-width: 115px;
-    transform: translateY(60%);
-  }
   &__title {
     color: $primary;
     font-weight: $max-bold;
     font-size: $medium;
     line-height: $large;
     text-align: center;
-    padding: 90px 5px 29px;
+    padding: 90px 5px 19px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    &-logo {
+      margin: 0 0;
+    }
+    img {
+      margin: 0 0;
+    }
   }
   &__container {
     padding-left: 0;
@@ -93,7 +98,17 @@
     &__title {
       font-size: $large;
       text-align: start;
-      margin-left: 200px;
+      flex-direction: row;
+      align-items: flex-end;
+      &-logo {
+        width: 115px;
+        display: flex;
+        justify-content: center;
+        margin: 0 50px;
+      }
+      img {
+        margin: 0;
+      }
     }
 
     &__description {

src/components/JobsPage/JobsPage.scss

@@ -7,8 +7,28 @@
   }
 }
 
-.cats-multiselect-label {
-  color: $primary !important;
+.cats-multiselect{
+  &-label {
+    color: $primary !important;
+
+  }
+  &-dropdown-menu{
+    background: $primary-container !important;
+    color: $primary !important;
+
+  }
+
+  &-option{
+    cursor: pointer;
+    &:hover{
+      background: rgba(128, 128, 128, 0.13) !important;
+    }
+  }
+
+  &-search input{
+    background: $primary-container !important;
+    color: $primary !important;
+  }
 }
 .cats-multiselect-label-block {
   border: 2px solid $border-bottom !important;

src/components/NavBar/NavBar.scss

@@ -64,33 +64,13 @@
 }
 
 
-.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-ball{
-  transform: translateX(24px);
-}
-
-.theme-toggle-checkbox{
-  opacity:0;
-  position:absolute;
-}
-
-.theme-toggle-label{
-  cursor: pointer;
-  width:50px;
-  height:26px;
-  background:  $secondary-container;
-  border-radius: 50px;
-  padding: 5px;
-  position:relative;
-}
-
-.theme-toggle-ball{
-  position:absolute;
-  top:2px;
-  left:2px;
-  width:22px;
-  height:22px;
-  background: $primary;
-  border-radius:50%;
-
-  transition: transform 0.2s linear;
+.theme-toggle{
+  background: none;
+  border: none;
+  img {
+    margin: 0;
+  }
+  &-sun{
+    filter: invert(100%);
+  }
 }

src/components/ServicesPage/ServicesSection.scss

@@ -1,6 +1,5 @@
 @import "../../styles/global.scss";
 
-
 .servicesSection {
   background-color: $primary-container;
   padding-top: 70px;
@@ -11,11 +10,10 @@
     p {
       color: $primary;
       font-size: $small;
-    }  
+    }
   }
   &__icon {
-    margin: 0 auto;
-    margin-top: 30px;
+    margin: 30px auto;
     width: 100px;
   }
   &__title {
@@ -38,10 +36,13 @@
       p {
         font-size: $medium;
       }
-
     }
     &__title {
       font-size: $large;
     }
+    &__icon {
+      margin: 30px auto 0;
+      width: 100px;
+    }
   }
 }

src/constants/MenuLinks/MenuLinks.js

@@ -3,6 +3,9 @@ import { Link } from "gatsby"
 import Nav from "react-bootstrap/Nav"
 import { useTheme } from "../../context/themeContext"
 
+import moon from "../../images/moon-solid.svg"
+import sun from "../../images/sun-icon-1.png"
+
 const MENU_LINKS = [
   { id: 1, text: "home", url: "/" },
   { id: 2, text: "servicios", url: "/servicios" },
@@ -30,16 +33,27 @@ const MenuLinks = ({ styleClass }) => {
         </Nav.Item>
       ))}
       <Nav.Item className="NavBar__Item">
-        <input
-          checked={theme === "light"}
-          onChange={toggleTheme}
-          type="checkbox"
-          class="theme-toggle-checkbox"
-          id="themetoggle"
-        />
-        <label for="themetoggle" class="theme-toggle-label">
-          <div class="theme-toggle-ball"></div>
-        </label>
+        <button
+          className="theme-toggle"
+          onClick={toggleTheme}
+          style={{ margin: theme === "dark" ? "0 5px 0 0" : "" }}
+        >
+          {theme === "dark" ? (
+            <img
+              src={moon}
+              className="theme-toggle-moon"
+              alt="theme"
+              width="20"
+            />
+          ) : (
+            <img
+              className="theme-toggle-sun"
+              src={sun}
+              alt="theme"
+              width="25"
+            />
+          )}
+        </button>
       </Nav.Item>
     </Nav>
   )