From a0445d79e3502512034c09b20c743b526cad340f Mon Sep 17 00:00:00 2001 From: benjacanas Date: Fri, 1 Apr 2022 11:05:32 -0300 Subject: [PATCH 01/13] navbar mobile y espacios --- public/page-data/index/page-data.json | 2 +- .../NavBar/AnimatedNavBar/AnimatedNavbar.js | 23 ++++--- .../AnimatedNavBar/Navbar/navbarItems.scss | 18 ++++- src/components/NavBar/NavBar.scss | 66 ++++++++++++------- src/components/NavBar/Navbar.js | 33 ++++++---- src/hooks/useNavbar.js | 8 +++ src/schema/layoutSchema.js | 4 +- 7 files changed, 103 insertions(+), 51 deletions(-) diff --git a/public/page-data/index/page-data.json b/public/page-data/index/page-data.json index 9ce9bbf8..dbdcdb3a 100644 --- a/public/page-data/index/page-data.json +++ b/public/page-data/index/page-data.json @@ -2,4 +2,4 @@ "componentChunkName": "component---src-pages-index-js", "path": "/", "result": {"pageContext":{}}, - "staticQueryHashes": ["1128713364","1693928026","176670904","2898073905","3206133181","3298386516","4006044966"]} \ No newline at end of file + "staticQueryHashes": ["1128713364","1693928026","176670904","1886264361","2898073905","3206133181","4006044966"]} \ No newline at end of file diff --git a/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js b/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js index 8fc6cdd6..b7a1f865 100644 --- a/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js +++ b/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js @@ -27,7 +27,13 @@ const getComponentTitle = component => { const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => { const navbarConfig = [ ...navbarItems.map(navItem => { - if (navItem.landing) { + if (navItem.singleType) { + return { + title: navItem.label, + slug: navItem.singleType, + dropdown: () => , + } + } else if (navItem.landing) { return { title: navItem.label, slug: navItem.landing.slug, @@ -42,7 +48,9 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => { slug: navItem.landing.slug, }))} /> - ) : null, + ) : ( + + ), } } else if (navItem.url) { return { @@ -52,11 +60,6 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => { } } }), - { - title: "Blog", - slug: "blog", - dropdown: () => , - }, ] const [activeIndex, setActiveIndex] = useState([]) @@ -112,9 +115,9 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => { {navbarConfig.map((n, index) => { return ( diff --git a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss index 01b0f34c..e018185b 100644 --- a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss +++ b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss @@ -1,3 +1,5 @@ +@import "../../../../styles/global.scss"; + .navbar { &-el { margin: auto; @@ -7,6 +9,13 @@ justify-content: center; list-style: none; margin: 0; + @media screen and (max-width: $breakpoint-xl) { + flex-direction: column; + justify-content: baseline; + a { + padding: 0.5em; + } + } } &_item { position: relative; @@ -15,9 +24,14 @@ border: 0; font-size: 18px; padding: 2rem 1.5rem 1.2rem 1.5rem; - color: #1F1D37; + color: #1f1d37; display: flex; - justify-content: center; + justify-content: baseline; + @media screen and (max-width: $breakpoint-xl) { + justify-content: baseline; + margin-left: 40px; + font-size: 1.4em; + } transition: opacity 250ms; cursor: pointer; /* position above the dropdown, otherwise the dropdown will cover up the bottom sliver of the buttons */ diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 746f257f..4f9ed2a7 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -26,7 +26,7 @@ .NavBar__Link { text-decoration: none; text-transform: uppercase; - color: #1F1D37; + color: #1f1d37; font-size: 14px; font-style: normal; font-weight: 700; @@ -36,44 +36,61 @@ } .NavBar__Link:hover { text-decoration: none; - color: #3f6BE8; + color: #3f6be8; } -.NavBar__Link--active { +.navbar_item-title-active { text-decoration: none; - color: #3f6BE8; + color: #3f6be8 !important; } -.NavBar_Side{ +.NavBar_Side { display: flex; flex-direction: row; align-items: center; - justify-content: space-around; &-contact { white-space: nowrap; box-shadow: 0px 2px 10px #3f6be880; - padding: .6em; - background-color: #3F6BE8; + padding: 0.6em; + background-color: #3f6be8; color: white; - border: 1px solid #3F6BE8; + border: 1px solid #3f6be8; border-radius: 4px; - &:hover{ + &:hover { background-color: white; - color: #3F6BE8; + color: #3f6be8; } } p { - color: #1F1D37; - margin: 0 3em; + color: #1f1d37; + margin: 0 2em 0 2.5em; + } + @media screen and (max-width: $breakpoint-xl) { + margin-left: 40px; + font-size: 1.4em; + &-contact { + font-size: 0.9em; + } + p { + font-size: 1em; + margin: 0 2em; + } } } -@media screen and (min-width: 992px) { - .NavBar{ +.NavBar { + & > a { + margin: 1.5em 0 1em 50px; + } +} + +@media screen and (min-width: $breakpoint-xl) { + .NavBar { display: flex; flex-direction: row; & > a { - flex-basis: 20%; + flex-grow: 0; + margin-left: 2em; } } .NavBar__Logo { @@ -82,26 +99,25 @@ } .NavBar__Collapse { /* DESKTOP */ - justify-content: space-around; align-items: center; + .NavBar_links { + flex-grow: 1; + } } .NavBar__List { margin-top: 0rem; } .NavBar__Item { margin-right: 2.5rem; - margin-top: .5em; + margin-top: 0.5em; white-space: nowrap; } - .NavBar_Side{ - justify-content: unset; + .NavBar_Side { + margin-right: 1em; } - } - - -.theme-toggle{ +.theme-toggle { background: none; border: none; height: 54px; @@ -111,4 +127,4 @@ color: white; margin: 0 0 3px 0; } -} \ No newline at end of file +} diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js index 8cbe8a48..6e184314 100644 --- a/src/components/NavBar/Navbar.js +++ b/src/components/NavBar/Navbar.js @@ -3,6 +3,7 @@ import "./NavBar.scss" import { Link } from "gatsby" import Navbar from "react-bootstrap/Navbar" import AnimatedNavbar from "./AnimatedNavBar/AnimatedNavbar" +import { getImage, GatsbyImage } from "gatsby-plugin-image" import { useNavbar } from "../../hooks/index" @@ -16,14 +17,20 @@ import sun from "../../images/sun.svg" const NavBar = () => { const { theme, toggleTheme } = useTheme() const navbarData = useNavbar() + + const logoLight = getImage( + navbarData.allStrapiLayout?.nodes[0].navbar?.logo?.localFile + ) + const logoDark = getImage( + navbarData.allStrapiLayout?.nodes[0].navbar?.logoDark?.localFile + ) return ( <> - Logo Bitlogic { {/* Menu Links */} {navbarData && ( - +
+ +
)}
diff --git a/src/hooks/useNavbar.js b/src/hooks/useNavbar.js index 3b3b5bf2..b40a6568 100644 --- a/src/hooks/useNavbar.js +++ b/src/hooks/useNavbar.js @@ -9,6 +9,7 @@ const useNavbar = () => { navbarItem { url label + singleType landing { slug name @@ -23,6 +24,13 @@ const useNavbar = () => { } } } + logoDark { + localFile { + childImageSharp { + gatsbyImageData + } + } + } } } } diff --git a/src/schema/layoutSchema.js b/src/schema/layoutSchema.js index 6d9965e0..88e32287 100644 --- a/src/schema/layoutSchema.js +++ b/src/schema/layoutSchema.js @@ -14,7 +14,8 @@ type StrapiLayoutFooter { type StrapiLayoutNavbar { id: Int navbarItem: [StrapiLayoutNavbarNavbarItem] - logo: StrapiLayoutNavbarLogo + logo: LocalFile + logoDark: LocalFile } type StrapiLayoutNavbarNavbarItem { @@ -24,6 +25,7 @@ type StrapiLayoutFooter { url: String visible: Boolean dropdown: Boolean + singleType: String } type StrapiLayoutNavbarNavbarItemLanding { From ea05f694df27979fdfb39e464dce7403239910d5 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Fri, 1 Apr 2022 11:14:12 -0300 Subject: [PATCH 02/13] nuevo expanded grid --- src/components/expandGrid/ExpandGrid.js | 72 +++++++++++++---------- src/components/expandGrid/expandGrid.scss | 31 ++++++++-- 2 files changed, 68 insertions(+), 35 deletions(-) diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js index b3d709ad..139e89f4 100644 --- a/src/components/expandGrid/ExpandGrid.js +++ b/src/components/expandGrid/ExpandGrid.js @@ -1,16 +1,19 @@ -import React, { useRef, useState } from "react" +import React, { useEffect, useRef, useState } from "react" import { Flipper, Flipped } from "react-flip-toolkit" import MarkdownView from "react-showdown" import "./expandGrid.scss" const ExpandGrid = ({ data }) => { return ( -
+

{data.title}

{data.subtitle}
- +
@@ -32,6 +35,9 @@ const ListItem = ({ index, onClick, data }) => {
onClick(index)}>
+
+

Ver mas

+
{ ) } -const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => { - const scrollRef = useRef(null) - +const ExpandedListItem = ({ index, data }) => { return ( { - scrollToRef(scrollRef) setTimeout(() => { el.classList.add("animated-in") }, 400) }} > -
{ - onClick(index) - }} - > +
+
+

+
{ > -
@@ -91,45 +90,56 @@ const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => { } const AnimatedList = ({ items }) => { - const [focused, setFocused] = useState(null) + const [itemsArray, setItemsArray] = useState({ items, focused: null }) const scrollRef = useRef(null) + + useEffect(() => { + setItemsArray(prev => ({ ...prev, focused: items[0].id })) + }, []) + const onClick = index => { - setFocused(focused === index ? null : index) - if (focused !== null) { - scrollToRef(scrollRef) + for (let i = 0; i < items.length; i++) { + const item = itemsArray.items[i] + if (item.id === index) { + setItemsArray(prevItems => ({ + items: [ + item, + ...prevItems.items.slice(0, i), + ...prevItems.items.slice(i + 1), + ], + focused: item.id, + })) + break + } } } - const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop - 40) return (
    - {items.map((item, index) => { + {itemsArray.items.map(item => { return ( <> - {index === focused ? ( + {item.id === itemsArray.focused ? ( ) : ( diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss index a8dc45e7..6d2ffdb7 100644 --- a/src/components/expandGrid/expandGrid.scss +++ b/src/components/expandGrid/expandGrid.scss @@ -1,4 +1,4 @@ -@import "../../styles/global.scss"; +@import ".././../styles/global.scss"; .expandGrid { display: flex; @@ -29,7 +29,7 @@ display: flex; flex-direction: row; flex-wrap: wrap; - padding: 0; + padding: 0 5em; width: 100%; } @@ -37,6 +37,9 @@ border-radius: 8px; margin: 5px; flex: 0 1 calc(calc(100% / 3) - 10px); + &-focus { + flex: 0 1 calc(calc(100% / 3) - 10px); + } background-color: #ececec; cursor: pointer; @@ -62,6 +65,7 @@ display: flex; flex-direction: row; height: 100%; + position: relative; @media screen and (max-width: 890px) { flex-direction: column; align-items: unset; @@ -104,13 +108,32 @@ .additional-content { width: 100%; - margin-top: 2rem; - + overflow: hidden; @media screen and (max-width: 890px) { margin: 0; } } +.listItem-more{ + position: absolute; + inset: 0 0 0 0; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 200ms ease; + opacity: 1; + p{ + padding: 0; + margin: 0; + @include primaryBtn; + } + &-expanded{ + @extend .listItem-more; + opacity: 0; + padding: 0 !important; + } +} + .additional-content > div { opacity: 0; border-radius: 3px; From 4186bc6bf38fd8dd483b584b54ea992ace2ee5eb Mon Sep 17 00:00:00 2001 From: benjacanas Date: Fri, 1 Apr 2022 11:29:43 -0300 Subject: [PATCH 03/13] code smells --- src/components/NavBar/NavBar.scss | 9 +++------ src/components/NavBar/Navbar.js | 3 --- src/components/expandGrid/ExpandGrid.js | 2 +- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 4f9ed2a7..3aa11c99 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -3,6 +3,9 @@ .NavBar { background-color: white; z-index: 10; + & > a { + margin: 1.5em 0 1em 50px; + } } .NavBar__Logo { margin: 16px 28px; @@ -78,12 +81,6 @@ } } -.NavBar { - & > a { - margin: 1.5em 0 1em 50px; - } -} - @media screen and (min-width: $breakpoint-xl) { .NavBar { display: flex; diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js index 6e184314..1cdf2d75 100644 --- a/src/components/NavBar/Navbar.js +++ b/src/components/NavBar/Navbar.js @@ -7,9 +7,6 @@ import { getImage, GatsbyImage } from "gatsby-plugin-image" import { useNavbar } from "../../hooks/index" -// default logo -import logoLight from "../../images/tipologo-azul.png" - import { useTheme } from "../../context/themeContext" // theme images import moon from "../../images/moon-solid.svg" diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js index b3d709ad..3a80d51b 100644 --- a/src/components/expandGrid/ExpandGrid.js +++ b/src/components/expandGrid/ExpandGrid.js @@ -64,7 +64,7 @@ const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => {
    { + onClick={_el => { onClick(index) }} > From 61ebd1c5e3b84cfb420a167581de371d171cfc02 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Fri, 1 Apr 2022 11:58:28 -0300 Subject: [PATCH 04/13] merge error --- src/components/expandGrid/ExpandGrid.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js index 8fb8dddb..4a639377 100644 --- a/src/components/expandGrid/ExpandGrid.js +++ b/src/components/expandGrid/ExpandGrid.js @@ -65,11 +65,7 @@ const ExpandedListItem = ({ index, data }) => { }} >
    { - onClick(index) - }} >
    @@ -97,7 +93,6 @@ const ExpandedListItem = ({ index, data }) => { const AnimatedList = ({ items }) => { const [itemsArray, setItemsArray] = useState({ items, focused: null }) - const scrollRef = useRef(null) useEffect(() => { setItemsArray(prev => ({ ...prev, focused: items[0].id })) @@ -133,7 +128,7 @@ const AnimatedList = ({ items }) => { }} decisionData={itemsArray.focused} > -
      +
        {itemsArray.items.map(item => { return ( <> From 604b14843adfa301bd17041d2b257d59d3e6f999 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Fri, 1 Apr 2022 12:31:11 -0300 Subject: [PATCH 05/13] imagenes mas lentas --- src/components/NavBar/NavBar.scss | 2 +- .../AnimatedTransitionContinous.js | 4 ++-- .../animatedTransitionContinous.scss | 6 ++++++ 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 3aa11c99..977e8fab 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -87,7 +87,7 @@ flex-direction: row; & > a { flex-grow: 0; - margin-left: 2em; + margin: 0 0 0 2em; } } .NavBar__Logo { diff --git a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js index 521f6343..743b2408 100644 --- a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js +++ b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js @@ -6,7 +6,7 @@ const AnimatedTransitionContinous = ({ }) => { let longerText = "" - const amount = text ? 200 : 100 + const amount = text ? 200 : 50 while (longerText.length < amount) { longerText = (text || "") + "-" + longerText } @@ -14,7 +14,7 @@ const AnimatedTransitionContinous = ({ return (
        -
        +
        {longerText.split("-").map(innerText => (
        {imagePosition === "first" && ( diff --git a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss index 68df0b77..da1a75c8 100644 --- a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss +++ b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss @@ -34,6 +34,12 @@ } } } + &-image{ + animation: scrollText 240s infinite linear !important; + &:hover { + animation-play-state: unset !important; + } + } &-inner{ display: flex; flex-direction: row; From 86161eebd72ceb59b3e878a2d3f3c3a3e4078e2b Mon Sep 17 00:00:00 2001 From: benjacanas Date: Fri, 1 Apr 2022 12:49:17 -0300 Subject: [PATCH 06/13] boton idioma eliminado --- src/components/NavBar/NavBar.scss | 1 + src/components/NavBar/Navbar.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 977e8fab..23fd2331 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -55,6 +55,7 @@ white-space: nowrap; box-shadow: 0px 2px 10px #3f6be880; padding: 0.6em; + margin-right: 1em; background-color: #3f6be8; color: white; border: 1px solid #3f6be8; diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js index 1cdf2d75..c2cfc279 100644 --- a/src/components/NavBar/Navbar.js +++ b/src/components/NavBar/Navbar.js @@ -50,7 +50,6 @@ const NavBar = () => { )}
        -

        ES

        - )} -
        -
        - one_sec +
        +
        +
        +

        {title}

        +

        {description}

        + {button && ( + + )} +
        +
        + one_sec +
        ) diff --git a/src/context/themeContext.js b/src/context/themeContext.js index 98749c8f..55fee4e7 100644 --- a/src/context/themeContext.js +++ b/src/context/themeContext.js @@ -6,11 +6,13 @@ const themes = { "--nav-footer-container": "#2a2c2e", "--blog-card-container": "#f5f5f5", "--primary": "#000000", + "--primary-invert": "#ffffff", "--primary-hover": "#000000", "--primary-container": "#ffffff", "--title-jobs": "#5682c6", "--jobs-hover": "#f0f0f0", + "--secondary": "#3f6be8", "--secondary-container": "#25cad3", "--border-bottom": "#cdcdcd", }, @@ -19,12 +21,14 @@ const themes = { "--blog-card-container": "#383838", "--primary": "#ffffff", + "--primary-invert": "#000000", "--primary-hover": "#000000", "--primary-container": "#292929", "--border-bottom": "#565656", "--title-jobs": "#1ecad3", "--jobs-hover": "#8383833b", + "--secondary": "#67f293", "--secondary-container": "#191919", }, } diff --git a/src/images/moon-solid.svg b/src/images/moon-solid.svg index f12006da..e687fb82 100644 --- a/src/images/moon-solid.svg +++ b/src/images/moon-solid.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/styles/global.scss b/src/styles/global.scss index d8ce36fc..498a3fc4 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -9,6 +9,7 @@ $nav-footer-container: var(--nav-footer-container); $blog-card-container: var(--blog-card-container); $primary: var(--primary); +$primary-invert: var(--primary-invert); $primary-hover: var(--primary-hover); $primary-container: var(--primary-container); @@ -18,6 +19,8 @@ $border-bottom: var(--border-bottom); $title-jobs: var(--title-jobs); $jobs-hover: var(--jobs-hover); + + main { background-color: $primary-container !important; } @@ -51,7 +54,6 @@ $grey-light: #f5f5f5; //new colors $grey: #545468; $light-grey: #c4c4c4; -$primary: #3f6be8; $alt: #67f293; $blackBit: #242424; @@ -67,18 +69,14 @@ $extra-large: 45px; padding: 5px 15px; font-weight: 500; border: none; - background-color: $primary; - color: white; + background-color: $secondary; + color: $primary-invert; border-radius: 5px; + transition: filter 200ms ease-in; &:hover { - background-color: #b2c4f6; - color: #3c6ed0; + filter: brightness(135%); box-shadow: 0px 3px 10px rgba(138, 254, 113, 0.5); } - &:active { - background-color: #2a50bc; - color: white; - } @media screen and (min-width: $breakpoint-lg) { padding: 8px 30px; } From 932e391df1d54e8fa546c27c5c877d9de43d5d59 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Fri, 8 Apr 2022 14:08:00 -0300 Subject: [PATCH 12/13] darkmode --- public/page-data/index/page-data.json | 2 +- src/components/BannerHead/BannerHead.js | 50 ++++++++++++------- src/components/BannerList/Banner.scss | 1 + src/components/CasesSection/CasesSection.scss | 2 + src/components/Hero/Hero.scss | 1 + .../HomePage/HomeContainer/HomeContainer.js | 2 +- .../DropdownContainer/dropdown.scss | 6 ++- .../AnimatedNavBar/Navbar/navbarItems.scss | 6 +-- src/components/NavBar/NavBar.scss | 16 ++---- src/components/NavBar/Navbar.js | 2 +- .../animatedTransitionContinous.scss | 6 ++- src/components/expandGrid/expandGrid.scss | 4 +- src/components/quote/quote.scss | 2 +- 13 files changed, 55 insertions(+), 45 deletions(-) diff --git a/public/page-data/index/page-data.json b/public/page-data/index/page-data.json index dbdcdb3a..314e23fe 100644 --- a/public/page-data/index/page-data.json +++ b/public/page-data/index/page-data.json @@ -2,4 +2,4 @@ "componentChunkName": "component---src-pages-index-js", "path": "/", "result": {"pageContext":{}}, - "staticQueryHashes": ["1128713364","1693928026","176670904","1886264361","2898073905","3206133181","4006044966"]} \ No newline at end of file + "staticQueryHashes": ["1128713364","176670904","1886264361","2898073905","3206133181","3875458950","4006044966"]} \ No newline at end of file diff --git a/src/components/BannerHead/BannerHead.js b/src/components/BannerHead/BannerHead.js index 910766b9..75ddab17 100644 --- a/src/components/BannerHead/BannerHead.js +++ b/src/components/BannerHead/BannerHead.js @@ -2,31 +2,43 @@ import React from "react" import "./BannerHead.scss" import MarkdownView from "react-showdown" import { getImage, GatsbyImage } from "gatsby-plugin-image" +import { useTheme } from "../../context/themeContext" const BannerHead = ({ data }) => { - const title = data?.title; + const { theme } = useTheme() - const checkImage = () => { + const title = data?.title - if (data?.image?.url) { - return {data?.image?.name} - } else { - const image = getImage(data?.image?.localFile) - return - } + const checkImage = () => { + if (data?.image?.url) { + return ( + {data?.image?.name} + ) + } else { + const image = getImage(data?.image?.localFile) + const imageDark = data?.imageDark && getImage(data?.imageDark?.localFile) + return ( + + ) } + } - return ( - - ) + return ( + + ) } export default BannerHead diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss index c6cdc0d1..27ed8d1d 100644 --- a/src/components/BannerList/Banner.scss +++ b/src/components/BannerList/Banner.scss @@ -1,6 +1,7 @@ @import "../../styles/global.scss"; .bannerList { + color: $primary; .card_item { p { text-align: justify; diff --git a/src/components/CasesSection/CasesSection.scss b/src/components/CasesSection/CasesSection.scss index 60b76c3c..fa14caf1 100644 --- a/src/components/CasesSection/CasesSection.scss +++ b/src/components/CasesSection/CasesSection.scss @@ -1,12 +1,14 @@ @import "../../styles/global.scss"; .casesSection { + color: $primary; h2 { text-align: center; font-weight: 700; } } .case { + color: $primary; --bs-gutter-x: 0 !important; padding: 10px; &__img { diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss index b7560648..2e1cdee6 100644 --- a/src/components/Hero/Hero.scss +++ b/src/components/Hero/Hero.scss @@ -1,5 +1,6 @@ @import "../../styles/global.scss"; .hero { + color: $primary; overflow: hidden; display: flex; flex-direction: row; diff --git a/src/components/HomePage/HomeContainer/HomeContainer.js b/src/components/HomePage/HomeContainer/HomeContainer.js index 4cf658aa..f6a3917b 100644 --- a/src/components/HomePage/HomeContainer/HomeContainer.js +++ b/src/components/HomePage/HomeContainer/HomeContainer.js @@ -43,7 +43,7 @@ const Home = ({ location }) => { {/* Dynamic zone */} {data.allStrapiHome.nodes[0].body.map(component => - bodyComponents[component.strapi_component](component) + bodyComponents[component.strapi_component] ? bodyComponents[component.strapi_component](component) : null )} ) diff --git a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss index d65f2558..01e3864b 100644 --- a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss +++ b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss @@ -1,3 +1,4 @@ +@import "../../../../styles/global.scss"; .dropdown { &_elem { width: 18.5rem; @@ -10,7 +11,7 @@ margin-top: 0; margin-bottom: 1rem; &-inner{ - color: black; + color: $primary; } } } @@ -53,8 +54,9 @@ position: relative; top: -20px; &-background { + filter: brightness(120%); transform-origin: 0 0; - background-color: white; + background-color: $primary-container; border-radius: 4px; overflow: hidden; position: relative; diff --git a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss index e018185b..28eb3f8e 100644 --- a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss +++ b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss @@ -24,7 +24,7 @@ border: 0; font-size: 18px; padding: 2rem 1.5rem 1.2rem 1.5rem; - color: #1f1d37; + color: $primary; display: flex; justify-content: baseline; @media screen and (max-width: $breakpoint-xl) { @@ -37,10 +37,10 @@ /* position above the dropdown, otherwise the dropdown will cover up the bottom sliver of the buttons */ position: relative; z-index: 2; - &:hover, - &:focus { + &:hover{ opacity: 0.7; outline: none; + color: $secondary; } } &-dropdown_container { diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 23fd2331..cc6a6e08 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -1,7 +1,7 @@ @import "../../styles/global.scss"; .NavBar { - background-color: white; + background-color: $primary-container; z-index: 10; & > a { margin: 1.5em 0 1em 50px; @@ -44,7 +44,7 @@ .navbar_item-title-active { text-decoration: none; - color: #3f6be8 !important; + color: $secondary !important; } .NavBar_Side { @@ -52,18 +52,8 @@ flex-direction: row; align-items: center; &-contact { + @include primaryBtn; white-space: nowrap; - box-shadow: 0px 2px 10px #3f6be880; - padding: 0.6em; - margin-right: 1em; - background-color: #3f6be8; - color: white; - border: 1px solid #3f6be8; - border-radius: 4px; - &:hover { - background-color: white; - color: #3f6be8; - } } p { color: #1f1d37; diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js index c2cfc279..6df1a6dd 100644 --- a/src/components/NavBar/Navbar.js +++ b/src/components/NavBar/Navbar.js @@ -49,7 +49,7 @@ const NavBar = () => {
        )}
        - +