From 47161d08bf3ad63430cabb3c229848c53deb1e27 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Tue, 11 Jan 2022 12:26:00 -0300 Subject: [PATCH 01/22] theme black hardcode --- src/components/Banners/BannerActionCall.scss | 4 +- src/components/Banners/BannerBgImage.scss | 2 + src/components/Banners/BannerLogo.js | 12 ++- src/components/Banners/BannerLogo.scss | 2 + .../BitwayPage/Paragraph/Paragraph.scss | 3 +- src/components/Cards/Cards.scss | 9 +- src/components/ContactPage/Contact.scss | 6 +- src/components/EdTechCards/EdtechCards.scss | 4 +- .../EdTechPage/EdtechContainer.scss | 1 + src/components/Footer/Footer.scss | 2 +- src/components/NavBar/NavBar.scss | 9 +- src/components/NavBar/Navbar.js | 4 +- .../PartnersSection/PartnersSection.scss | 1 + src/components/ServiceCards/ServiceCards.scss | 6 +- .../ServicesPage/ServicesSection.scss | 8 ++ src/components/layout.js | 5 +- src/constants/MenuLinks/MenuLinks.js | 22 +++++ src/context/themeContext.js | 85 +++++++++++++++++++ src/styles/global.scss | 19 +++++ 19 files changed, 185 insertions(+), 19 deletions(-) create mode 100644 src/context/themeContext.js diff --git a/src/components/Banners/BannerActionCall.scss b/src/components/Banners/BannerActionCall.scss index 9644c5a0..e9ce9e5f 100644 --- a/src/components/Banners/BannerActionCall.scss +++ b/src/components/Banners/BannerActionCall.scss @@ -1,7 +1,7 @@ @import "../../styles/global.scss"; .bannerActCall { - background: linear-gradient(180deg, $white 20%, $blue 0); + background: linear-gradient(180deg, #292929 20%, $blue 0); padding: 30px 25px; max-height: 235px; display: flex; @@ -49,7 +49,7 @@ .bannerActCall { padding: 45px 65px; max-height: 600px; - background: linear-gradient(180deg, $white 35%, $blue 0); + background: linear-gradient(180deg, #292929 35%, $blue 0); &__title { color: $white; font-size: $second-large; diff --git a/src/components/Banners/BannerBgImage.scss b/src/components/Banners/BannerBgImage.scss index 77aa4c3a..f0571e12 100644 --- a/src/components/Banners/BannerBgImage.scss +++ b/src/components/Banners/BannerBgImage.scss @@ -6,6 +6,7 @@ display: flex; align-items: center; justify-content: center; + background-color: #292929; } &__titleContainer { display: flex; @@ -52,6 +53,7 @@ padding: 5px 20px; display: inline-block; transform: skew(15deg); + color: #292929; } } &__link { diff --git a/src/components/Banners/BannerLogo.js b/src/components/Banners/BannerLogo.js index 64284317..b0371258 100644 --- a/src/components/Banners/BannerLogo.js +++ b/src/components/Banners/BannerLogo.js @@ -1,12 +1,16 @@ import * as React from "react" import { getImage, GatsbyImage } from "gatsby-plugin-image" import { BgImage } from "gbimage-bridge" +import logoLight from "../../images/logoprincipal.png" import { useBanner } from "../../hooks/index" +import { useTheme } from "../../context/themeContext" import "./BannerLogo.scss" const BannerLogo = ({ banner, title }) => { + const { theme } = useTheme() + const dataBanner = useBanner() const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find( @@ -21,11 +25,15 @@ const BannerLogo = ({ banner, title }) => { <>
- + {theme === "dark" ? ( + + ) : ( + + )}

{title}

 - + {summary ? (
diff --git a/src/components/Banners/BannerLogo.scss b/src/components/Banners/BannerLogo.scss index 02c87e63..07abe52e 100644 --- a/src/components/Banners/BannerLogo.scss +++ b/src/components/Banners/BannerLogo.scss @@ -28,6 +28,7 @@ } } .BannerLogo__BgImage { + background-color: #292929; width: 100%; min-height: 600px; display: flex; @@ -48,6 +49,7 @@ font-size: 1.2rem; line-height: 16px; padding: 1.8rem 0 0.5rem; + color: rgb(226, 226, 226); } .BannerLogo__Title::after { position: absolute; diff --git a/src/components/BitwayPage/Paragraph/Paragraph.scss b/src/components/BitwayPage/Paragraph/Paragraph.scss index 4cb8161f..27ff71c0 100644 --- a/src/components/BitwayPage/Paragraph/Paragraph.scss +++ b/src/components/BitwayPage/Paragraph/Paragraph.scss @@ -1,5 +1,6 @@ @import "../../../styles/global.scss"; .bitway-paragraph { + color: white; margin-bottom: 20px; & p { font-family: $primary-font; @@ -54,7 +55,7 @@ font-weight: $bold; margin: 0; display: inline-block; - color: white; + color: #292929; transform: skew(15deg); } } diff --git a/src/components/Cards/Cards.scss b/src/components/Cards/Cards.scss index 83cf2755..234303ca 100644 --- a/src/components/Cards/Cards.scss +++ b/src/components/Cards/Cards.scss @@ -11,6 +11,7 @@ transform: translateY(60%); } &__title { + color: white; font-weight: $max-bold; font-size: $medium; line-height: $large; @@ -28,6 +29,8 @@ } } &__description { + background-color: rgba(255, 255, 255, 0.089); + color: white; padding: 20px 25px; margin-bottom: 0; p { @@ -37,11 +40,13 @@ } } &__submodules { + background-color: none; + color: white; position: relative; padding: 0 45px; &__title { - margin: 0 0 30px 0; + margin: 2em 0 30px 0; font-size: $medium; line-height: 18px; text-align: center; @@ -105,9 +110,11 @@ &__submodules { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 18px; + background-color: rgba(255, 255, 255, 0.089); &--items { box-shadow: none; + background-color: unset; } &__title { margin: 0 0 5px 0; diff --git a/src/components/ContactPage/Contact.scss b/src/components/ContactPage/Contact.scss index e80039d0..f3ce2b39 100644 --- a/src/components/ContactPage/Contact.scss +++ b/src/components/ContactPage/Contact.scss @@ -25,7 +25,7 @@ transform: skew(-15deg); height: 40px; p { - color: $white; + color: #292929; text-transform: uppercase; padding: 5px 15px; display: inline-block; @@ -46,8 +46,8 @@ .contact { max-width: 1400px; margin: 0 auto; - margin-bottom: 50px; - margin-top: 20px; + padding-bottom: 50px; + padding-top: 20px; flex-direction: row-reverse; justify-content: space-around; &__group { diff --git a/src/components/EdTechCards/EdtechCards.scss b/src/components/EdTechCards/EdtechCards.scss index cc2c6704..8cc25185 100644 --- a/src/components/EdTechCards/EdtechCards.scss +++ b/src/components/EdTechCards/EdtechCards.scss @@ -1,7 +1,7 @@ @import "../../styles/global.scss"; .EdtechCards { - background-color: $blue; + background-color: #1ecad3; width: 100%; padding: 33px 30px; @@ -35,7 +35,7 @@ &__card { display: flex; align-items: flex-end; - + background-color: rgba(255, 255, 255, 0.055); margin-right: 10px; } &__image { diff --git a/src/components/EdTechPage/EdtechContainer.scss b/src/components/EdTechPage/EdtechContainer.scss index 2fe0a4a0..1711c016 100644 --- a/src/components/EdTechPage/EdtechContainer.scss +++ b/src/components/EdTechPage/EdtechContainer.scss @@ -1,5 +1,6 @@ .EdTech { &__container { + background-color: #292929; margin-bottom: 95px; } } \ No newline at end of file diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index 2178ca4f..92f9f7bf 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -1,6 +1,6 @@ @import "../../styles/global.scss"; .Footer { - background-color: #2a2c2e; + background-color: #383838; padding: 30px 30px 34px; } .Footer__Logo { diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index cc408c85..5939cfdd 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -1,5 +1,5 @@ .NavBar { - background-color: #2a2c2e !important; + background-color: #383838; } .NavBar__Logo { margin: 16px 28px; @@ -58,3 +58,10 @@ margin-right: 2.5rem; } } + +.theme-toggle{ + width: 2rem; + height: 2rem; + border: none; + background: none; +} \ No newline at end of file diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js index 49ea79ba..adb59cb8 100644 --- a/src/components/NavBar/Navbar.js +++ b/src/components/NavBar/Navbar.js @@ -1,7 +1,7 @@ import React from "react" import Navbar from "react-bootstrap/Navbar" import { MenuLinks } from "../../constants" -import logo from "../../images/logoprincipal.png" +import logoLight from "../../images/logoprincipal.png" import { Link } from "gatsby" import "./NavBar.scss" @@ -11,7 +11,7 @@ const NavBar = () => { Logo Bitlogic diff --git a/src/components/PartnersSection/PartnersSection.scss b/src/components/PartnersSection/PartnersSection.scss index edef6d5c..e8632920 100644 --- a/src/components/PartnersSection/PartnersSection.scss +++ b/src/components/PartnersSection/PartnersSection.scss @@ -1,6 +1,7 @@ @import "../../styles/global.scss"; .partners { + background-color: #292929; padding: 30px; &__title { color: $blue; diff --git a/src/components/ServiceCards/ServiceCards.scss b/src/components/ServiceCards/ServiceCards.scss index f1e0c22e..eea7ff03 100644 --- a/src/components/ServiceCards/ServiceCards.scss +++ b/src/components/ServiceCards/ServiceCards.scss @@ -6,7 +6,7 @@ align-items: center; justify-content: space-between; padding-bottom: 55px; - + background-color: #292929; &__container { padding: 1.5rem; } @@ -33,10 +33,12 @@ } span { -webkit-text-stroke: 2px $blue; - -webkit-text-fill-color: white; + -webkit-text-fill-color: #292929; } } &__card { + background-color: rgba(255, 255, 255, 0.075); + color: #cecece; @extend %border-shadowed; padding: 30px 30px 16px; margin: 0 35px 30px; diff --git a/src/components/ServicesPage/ServicesSection.scss b/src/components/ServicesPage/ServicesSection.scss index 5ebf0392..5f719af3 100644 --- a/src/components/ServicesPage/ServicesSection.scss +++ b/src/components/ServicesPage/ServicesSection.scss @@ -1,12 +1,18 @@ @import "../../styles/global.scss"; +main{ + background-color: rgba(255, 255, 255, 0.055); +} + .servicesSection { + background-color: #292929; padding-top: 70px; } .serviceCard { &__description { p { + color: white; font-size: $small; } } @@ -16,12 +22,14 @@ width: 100px; } &__title { + color: white; font-weight: $bold; font-size: $medium; margin-bottom: 45px; } &__block { @extend %border-shadowed; + background-color: rgba(255, 255, 255, 0.055); padding: 40px; margin-bottom: 45px; } diff --git a/src/components/layout.js b/src/components/layout.js index 5f08a703..de44a829 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -4,6 +4,7 @@ import "./layout.scss" import Footer from "./Footer/Footer" import ScriptTag from "react-script-tag" import useGlobalConfig from "../hooks/useGlobalConfig" +import ThemeProvider from '../context/themeContext' const Layout = ({ children }) => { const config = useGlobalConfig() @@ -22,14 +23,14 @@ const Layout = ({ children }) => { ) ) return ( - <> + {scripts}
{children}