From dcc71f9d4188da7459f178cda635cdaa5d61aef3 Mon Sep 17 00:00:00 2001 From: Breno Date: Fri, 6 Dec 2024 10:46:29 -0300 Subject: [PATCH 01/13] Remove duplicate content --- src/components/CompanyUpdatesPage/StayUpdated/index.tsx | 4 ++-- src/components/ProductPage/DontMissAThing/index.tsx | 2 +- src/pages/podcasts/index.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CompanyUpdatesPage/StayUpdated/index.tsx b/src/components/CompanyUpdatesPage/StayUpdated/index.tsx index 87a475ea..4c36720f 100644 --- a/src/components/CompanyUpdatesPage/StayUpdated/index.tsx +++ b/src/components/CompanyUpdatesPage/StayUpdated/index.tsx @@ -31,8 +31,8 @@ const StayUpdated = () => {

- Subscribe to our Newsletter for news about Estuary - Flow straight into your inbox. + Join our Newsletter for news about Estuary Flow + straight into your inbox.

diff --git a/src/components/ProductPage/DontMissAThing/index.tsx b/src/components/ProductPage/DontMissAThing/index.tsx index 283a3660..55bec366 100644 --- a/src/components/ProductPage/DontMissAThing/index.tsx +++ b/src/components/ProductPage/DontMissAThing/index.tsx @@ -12,7 +12,7 @@ const DontMissAThing = () => {
diff --git a/src/pages/podcasts/index.tsx b/src/pages/podcasts/index.tsx index 93aaddb5..f8693621 100644 --- a/src/pages/podcasts/index.tsx +++ b/src/pages/podcasts/index.tsx @@ -94,7 +94,7 @@ const LpPodcats = ({

- Subscribe to our newsletter to get the latest + Sign up for our newsletter to get the latest news and updates

From 78da4a19495c480e82a0763aeb51b6973d6ab1a1 Mon Sep 17 00:00:00 2001 From: Breno Date: Fri, 6 Dec 2024 15:51:45 -0300 Subject: [PATCH 02/13] Add dark blue color --- src/components/BackgroundImages/shared.ts | 2 +- src/components/BlogBanner/styles.module.less | 2 +- src/components/BlogPost/styles.module.less | 4 ++-- .../BlogPostPopupModal/styles.module.less | 2 +- src/components/BlogPostToc/styles.module.less | 4 ++-- src/components/ContactUsForm/styles.module.less | 2 +- .../ContactUsPage/Address/styles.module.less | 2 +- .../DeploymentOptions/styles.module.less | 2 +- .../EtlToolsPage/ListOfComparisons/index.tsx | 4 ++-- .../Comparison/styles.module.less | 2 +- src/components/Footer/styles.module.less | 2 +- src/components/HTMLTooltip/index.tsx | 2 +- src/components/Header/styles.module.less | 6 +++--- .../HeaderNavbar/Card/styles.module.less | 4 ++-- src/components/HeaderNavbar/styles.module.less | 2 +- src/components/Homepage/Hero/styles.module.less | 2 +- .../Homepage/MoveAndTransform/styles.module.less | 2 +- src/components/Integration/styles.module.less | 2 +- .../Layout/ReleaseBanner/styles.module.less | 4 ++-- src/components/MainConnectors/index.tsx | 2 +- src/components/PipelinesTable/style.module.less | 4 ++-- src/components/PricingCalculator/index.tsx | 4 +++- .../PricingCalculator/styles.module.less | 4 ++-- .../ChooseYourPlan/PlanCard/styles.module.less | 2 +- .../ChooseYourPlan/styles.module.less | 2 +- .../Faq/FaqAccordion/styles.module.less | 2 +- .../PricingPage/Faq/styles.module.less | 2 +- .../HowEstuaryFlowCompares/styles.module.less | 2 +- .../ProductPage/HowItWorks/styles.module.less | 2 +- .../IncreaseProductivity/styles.module.less | 2 +- .../ProductPage/Streaming/styles.module.less | 2 +- src/components/ShareArticle/styles.module.less | 2 +- src/components/SidebarCta/styles.module.less | 4 ++-- src/components/Signup/styles.module.less | 4 ++-- src/components/Table/styles.module.less | 2 +- src/globalStyles/wrappers.module.less | 2 +- src/layouts/CaseStudy/style.less | 8 ++++---- src/pages/about/styles.module.less | 16 ++++++++-------- src/pages/podcasts/styles.module.less | 6 +++--- src/style.less | 6 +++--- .../author/SectionOne/styles.module.less | 2 +- .../connector/ChangeData/styles.module.less | 2 +- .../connector/Hero/Content/styles.module.less | 2 +- .../connector/Pipelines/styles.module.less | 2 +- 44 files changed, 71 insertions(+), 69 deletions(-) diff --git a/src/components/BackgroundImages/shared.ts b/src/components/BackgroundImages/shared.ts index 864d6e63..a617cc11 100644 --- a/src/components/BackgroundImages/shared.ts +++ b/src/components/BackgroundImages/shared.ts @@ -1,2 +1,2 @@ -export const darkImgStyle = { backgroundColor: '#04192b' }; +export const darkImgStyle = { backgroundColor: 'var(--dark-blue)' }; export const lightImgStyle = { backgroundColor: '#f9fafc' }; diff --git a/src/components/BlogBanner/styles.module.less b/src/components/BlogBanner/styles.module.less index bf1f52cf..cb01c290 100644 --- a/src/components/BlogBanner/styles.module.less +++ b/src/components/BlogBanner/styles.module.less @@ -57,7 +57,7 @@ margin-right: auto; border-radius: 24px; overflow: hidden; - background-color: #04192B; + background-color: var(--dark-blue); @media (max-width: 1350px) { padding: 48px 30px; diff --git a/src/components/BlogPost/styles.module.less b/src/components/BlogPost/styles.module.less index 86aef8be..4f0d3b50 100644 --- a/src/components/BlogPost/styles.module.less +++ b/src/components/BlogPost/styles.module.less @@ -170,7 +170,7 @@ line-height: 48px; span { - color: #04192b !important; + color: var(--dark-blue) !important; font-size: 2.25rem; font-style: normal; font-weight: 600; @@ -230,7 +230,7 @@ font-size: 1.25rem; font-weight: 600; line-height: 30px; - color: #04192b; + color: var(--dark-blue); margin-bottom: 16px; margin-top: 0; } diff --git a/src/components/BlogPostPopupModal/styles.module.less b/src/components/BlogPostPopupModal/styles.module.less index 17cd683a..ffcb22d1 100644 --- a/src/components/BlogPostPopupModal/styles.module.less +++ b/src/components/BlogPostPopupModal/styles.module.less @@ -112,7 +112,7 @@ } svg { - color: #04192b; + color: var(--dark-blue); @media (max-width: 780px) { color: #ffffff; diff --git a/src/components/BlogPostToc/styles.module.less b/src/components/BlogPostToc/styles.module.less index 62522d3b..4c8b0c06 100644 --- a/src/components/BlogPostToc/styles.module.less +++ b/src/components/BlogPostToc/styles.module.less @@ -5,7 +5,7 @@ h3 { margin: 0 0 8px; - color: #04192b; + color: var(--dark-blue); font-size: 16px; font-style: normal; font-weight: 600; @@ -89,7 +89,7 @@ font-weight: 600; font-size: 1.25rem; line-height: 30px; - color: #04192b; + color: var(--dark-blue); } .tocSubItems { diff --git a/src/components/ContactUsForm/styles.module.less b/src/components/ContactUsForm/styles.module.less index 4a3f9383..475073e5 100644 --- a/src/components/ContactUsForm/styles.module.less +++ b/src/components/ContactUsForm/styles.module.less @@ -22,7 +22,7 @@ .title { font-size: 2.5rem; font-weight: 600; - color: #04192b; + color: var(--dark-blue); margin: 0; text-align: center; } diff --git a/src/components/ContactUsPage/Address/styles.module.less b/src/components/ContactUsPage/Address/styles.module.less index d4606e69..234d2e2d 100644 --- a/src/components/ContactUsPage/Address/styles.module.less +++ b/src/components/ContactUsPage/Address/styles.module.less @@ -30,7 +30,7 @@ .city { font-size: 1.375rem; font-weight: 600; - color: #04192b; + color: var(--dark-blue); margin: 0; text-transform: uppercase; } diff --git a/src/components/DeploymentOptions/styles.module.less b/src/components/DeploymentOptions/styles.module.less index b3a07aa3..569c49d9 100644 --- a/src/components/DeploymentOptions/styles.module.less +++ b/src/components/DeploymentOptions/styles.module.less @@ -8,7 +8,7 @@ font-size: 2.5rem; font-weight: 600; line-height: 48px; - color: #04192B; + color: var(--dark-blue); margin-bottom: 40px; span { diff --git a/src/components/EtlToolsPage/ListOfComparisons/index.tsx b/src/components/EtlToolsPage/ListOfComparisons/index.tsx index 110eb51d..5a9d210e 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/index.tsx +++ b/src/components/EtlToolsPage/ListOfComparisons/index.tsx @@ -26,7 +26,7 @@ const tabStyling = { 'border': '1px solid #5072EB4D', 'borderRadius': '100px', 'textTransform': 'none', - 'color': '#04192B', + 'color': 'var(--dark-blue)', 'transition': 'var(--default-transition)', '&:hover': { @@ -42,7 +42,7 @@ const tabStyling = { '&.Mui-selected': { backgroundColor: '#5072EB26', border: '2px solid #5072EB', - color: '#04192B', + color: 'var(--dark-blue)', }, }; diff --git a/src/components/EtlToolsXvsYPage/Comparison/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/styles.module.less index fb751ede..b7eb9de9 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/styles.module.less +++ b/src/components/EtlToolsXvsYPage/Comparison/styles.module.less @@ -12,7 +12,7 @@ } h2 { - color: #04192B; + color: var(--dark-blue); font-weight: 600; font-size: 2.25rem; diff --git a/src/components/Footer/styles.module.less b/src/components/Footer/styles.module.less index eee03a8d..e767048b 100644 --- a/src/components/Footer/styles.module.less +++ b/src/components/Footer/styles.module.less @@ -5,7 +5,7 @@ display: flex; flex-direction: column; - background-color: var(--background-color-primary); + background-color: var(--dark-blue); } .globalFooterWrapper { diff --git a/src/components/HTMLTooltip/index.tsx b/src/components/HTMLTooltip/index.tsx index 168e16f8..829e1425 100644 --- a/src/components/HTMLTooltip/index.tsx +++ b/src/components/HTMLTooltip/index.tsx @@ -47,7 +47,7 @@ const HTMLTooltip = styled( ({ theme, backgroundColor = '#ffffff', - color = '#04192B', + color = 'var(--dark-blue)', maxWidth = 232, fontSize = 16, borderColor = '#5072EB', diff --git a/src/components/Header/styles.module.less b/src/components/Header/styles.module.less index 9a10aae4..5b455539 100644 --- a/src/components/Header/styles.module.less +++ b/src/components/Header/styles.module.less @@ -9,7 +9,7 @@ width: 100%; height: 116px; top: 0; - background: #04192b; + background: var(--dark-blue); @media (max-width: 1400px) { padding-left: ~'calc(min(2vw,160px))'; @@ -40,7 +40,7 @@ } .headerBar { - background-color: #04192b; + background-color: var(--dark-blue); height: 116px; width: 100%; } @@ -59,7 +59,7 @@ top: 80px; left: 0; right: 0; - background-color: #04192b; + background-color: var(--dark-blue); } } diff --git a/src/components/HeaderNavbar/Card/styles.module.less b/src/components/HeaderNavbar/Card/styles.module.less index 96ee7c82..413e9f4d 100644 --- a/src/components/HeaderNavbar/Card/styles.module.less +++ b/src/components/HeaderNavbar/Card/styles.module.less @@ -2,7 +2,7 @@ .wrapper { width: 100%; - background-color: #04192b; + background-color: var(--dark-blue); flex-direction: column; @media (min-width: 1025px) { @@ -35,7 +35,7 @@ gap: 16px; padding-top: 24px; padding-bottom: 24px; - background-color: #04192b; + background-color: var(--dark-blue); @media (max-height: 880px) { overflow: auto; diff --git a/src/components/HeaderNavbar/styles.module.less b/src/components/HeaderNavbar/styles.module.less index 3157d867..52506e38 100644 --- a/src/components/HeaderNavbar/styles.module.less +++ b/src/components/HeaderNavbar/styles.module.less @@ -3,7 +3,7 @@ gap: 12px; padding-left: 7%; padding-right: 28px; - background-color: #04192b; + background-color: var(--dark-blue); @media (max-width: 1280px) { padding-left: 4%; diff --git a/src/components/Homepage/Hero/styles.module.less b/src/components/Homepage/Hero/styles.module.less index 6251c1a2..4d694952 100644 --- a/src/components/Homepage/Hero/styles.module.less +++ b/src/components/Homepage/Hero/styles.module.less @@ -28,7 +28,7 @@ padding-top: 100px; display: flex; flex-direction: column; - background-color: #04192b; + background-color: var(--dark-blue); width: 100%; @media (max-width: 1024px) { diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less index eaca476e..5910666d 100644 --- a/src/components/Homepage/MoveAndTransform/styles.module.less +++ b/src/components/Homepage/MoveAndTransform/styles.module.less @@ -46,7 +46,7 @@ text-align: center; max-width: 75%; margin: 24px 0 0 0; - color: #04192b; + color: var(--dark-blue); @media (max-width: 810px) { font-size: 1rem; diff --git a/src/components/Integration/styles.module.less b/src/components/Integration/styles.module.less index 96f45b04..74cb6ef4 100644 --- a/src/components/Integration/styles.module.less +++ b/src/components/Integration/styles.module.less @@ -174,7 +174,7 @@ color: #47506D; &:hover { - color: #04192B; + color: var(--dark-blue); } } } diff --git a/src/components/Layout/ReleaseBanner/styles.module.less b/src/components/Layout/ReleaseBanner/styles.module.less index 6adee704..b45f57e7 100644 --- a/src/components/Layout/ReleaseBanner/styles.module.less +++ b/src/components/Layout/ReleaseBanner/styles.module.less @@ -27,7 +27,7 @@ span { background-color: #FFA800; - color: #04192B; + color: var(--dark-blue); border-radius: 36px; padding: 4px 16px; line-height: 30px; @@ -75,7 +75,7 @@ } .darkBackgroundColor { - background-color: var(--background-color-primary); + background-color: var(--dark-blue); } .lightBackgroundColor { diff --git a/src/components/MainConnectors/index.tsx b/src/components/MainConnectors/index.tsx index 5d2ee232..47855f39 100644 --- a/src/components/MainConnectors/index.tsx +++ b/src/components/MainConnectors/index.tsx @@ -17,7 +17,7 @@ type MainConnectorsProps = { const MainConnectors = ({ isLightTheme = false }: MainConnectorsProps) => { const linkClasses = clsx(link, isLightTheme && hasLightBackgroundColor); - const svgLogoColor = isLightTheme ? '#04192B' : '#ffffff'; + const svgLogoColor = isLightTheme ? 'var(--dark-blue)' : '#ffffff'; return (
    diff --git a/src/components/PipelinesTable/style.module.less b/src/components/PipelinesTable/style.module.less index 91219a9e..8e54ef36 100644 --- a/src/components/PipelinesTable/style.module.less +++ b/src/components/PipelinesTable/style.module.less @@ -28,7 +28,7 @@ th { border: none; background-color: #eef1fd; - color: #04192b; + color: var(--dark-blue); padding: 28px; text-align: center; } @@ -47,7 +47,7 @@ border: none; border-top: 2px solid #d7dce5; padding: 28px; - color: #04192b; + color: var(--dark-blue); background-color: #f6f8fe; span { diff --git a/src/components/PricingCalculator/index.tsx b/src/components/PricingCalculator/index.tsx index ca0f4662..b53bb524 100644 --- a/src/components/PricingCalculator/index.tsx +++ b/src/components/PricingCalculator/index.tsx @@ -247,7 +247,9 @@ export const PricingCalculator = ({ inputProps={{ style: { textAlign: 'center', - color: isDarkTheme ? '#fff' : '#04192B', + color: isDarkTheme + ? '#fff' + : 'var(--dark-blue)', }, min: 2, max: maxConnectors, diff --git a/src/components/PricingCalculator/styles.module.less b/src/components/PricingCalculator/styles.module.less index 497e6fce..bc47386e 100644 --- a/src/components/PricingCalculator/styles.module.less +++ b/src/components/PricingCalculator/styles.module.less @@ -142,7 +142,7 @@ } .brandName { - color: '#04192b'; + color: var(--dark-blue); font-weight: 400; font-size: 1rem; @@ -161,7 +161,7 @@ text-align: center; span { - color: #04192b; + color: var(--dark-blue); } @media (max-width: 425px) { diff --git a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less index 721d7e39..2e8842cb 100644 --- a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less +++ b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less @@ -96,7 +96,7 @@ .price { font-size: 1.5rem; font-weight: 700; - color: #04192b; + color: var(--dark-blue); line-height: 28.8px; white-space: nowrap; diff --git a/src/components/PricingPage/ChooseYourPlan/styles.module.less b/src/components/PricingPage/ChooseYourPlan/styles.module.less index 355f577e..1fd6672f 100644 --- a/src/components/PricingPage/ChooseYourPlan/styles.module.less +++ b/src/components/PricingPage/ChooseYourPlan/styles.module.less @@ -3,7 +3,7 @@ font-size: 2.5rem; font-weight: 600; line-height: 40px; - color: #04192B; + color: var(--dark-blue); margin: 0; padding: 0 20px; diff --git a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less index d25587d4..e286613e 100644 --- a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less +++ b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less @@ -59,7 +59,7 @@ h4, h5 { - color: #04192B; + color: var(--dark-blue); font-size: 1.125rem; font-weight: 700; } diff --git a/src/components/PricingPage/Faq/styles.module.less b/src/components/PricingPage/Faq/styles.module.less index 83a0d4eb..803a4222 100644 --- a/src/components/PricingPage/Faq/styles.module.less +++ b/src/components/PricingPage/Faq/styles.module.less @@ -4,7 +4,7 @@ text-align: center; font-size: 2.5rem; font-weight: 600; - color: #04192B; + color: var(--dark-blue); } .questionsList { diff --git a/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less b/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less index e91600ab..27b212a5 100644 --- a/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less +++ b/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less @@ -4,7 +4,7 @@ line-height: 48px; text-align: center; margin: 0; - color: #04192b; + color: var(--dark-blue); @media (max-width: 810px) { font-size: 1.75rem; diff --git a/src/components/ProductPage/HowItWorks/styles.module.less b/src/components/ProductPage/HowItWorks/styles.module.less index b53d4904..cbd239ab 100644 --- a/src/components/ProductPage/HowItWorks/styles.module.less +++ b/src/components/ProductPage/HowItWorks/styles.module.less @@ -51,7 +51,7 @@ text-align: center; margin: 0; max-width: 980px; - color: #04192b; + color: var(--dark-blue); @media (max-width: 810px) { font-size: 1rem; diff --git a/src/components/ProductPage/IncreaseProductivity/styles.module.less b/src/components/ProductPage/IncreaseProductivity/styles.module.less index 9a2c1ae9..5667aebb 100644 --- a/src/components/ProductPage/IncreaseProductivity/styles.module.less +++ b/src/components/ProductPage/IncreaseProductivity/styles.module.less @@ -69,6 +69,6 @@ flex: 1; & > h3 { - color: #04192b; + color: var(--dark-blue); } } diff --git a/src/components/ProductPage/Streaming/styles.module.less b/src/components/ProductPage/Streaming/styles.module.less index 9f75d6f2..d316ce35 100644 --- a/src/components/ProductPage/Streaming/styles.module.less +++ b/src/components/ProductPage/Streaming/styles.module.less @@ -58,7 +58,7 @@ .batchEltColumn { border: 1px solid #d7dce540; - background-color: #04192b; + background-color: var(--dark-blue); } .textWrapper { diff --git a/src/components/ShareArticle/styles.module.less b/src/components/ShareArticle/styles.module.less index 2a74ecbd..10b464b2 100644 --- a/src/components/ShareArticle/styles.module.less +++ b/src/components/ShareArticle/styles.module.less @@ -7,7 +7,7 @@ font-weight: 600; font-size: 1.25rem; line-height: 30px; - color: #04192b; + color: var(--dark-blue); } @media (max-width: 1150px) { diff --git a/src/components/SidebarCta/styles.module.less b/src/components/SidebarCta/styles.module.less index c08c40a4..353dbbae 100644 --- a/src/components/SidebarCta/styles.module.less +++ b/src/components/SidebarCta/styles.module.less @@ -16,7 +16,7 @@ } h3 { - color: #04192b; + color: var(--dark-blue); text-align: center; font-size: 1.25rem; font-style: normal; @@ -32,7 +32,7 @@ } .image { - background: #04192b url('../../images/pattern-sidebar-cta.svg') no-repeat bottom left / contain; + background: var(--dark-blue) url('../../images/pattern-sidebar-cta.svg') no-repeat bottom left / contain; text-align: center; border-radius: 16px; padding-top: 16px; diff --git a/src/components/Signup/styles.module.less b/src/components/Signup/styles.module.less index 67b143dd..fb567565 100644 --- a/src/components/Signup/styles.module.less +++ b/src/components/Signup/styles.module.less @@ -9,13 +9,13 @@ .sectionTopBottomPadding; // TODO: Remove this background or add it to background image component - background: #04192b url(../../images/lp-podcast/signup-bg.png) no-repeat center / cover; + background: var(--dark-blue) url(../../images/lp-podcast/signup-bg.png) no-repeat center / cover; width: 100%; height: auto; // TODO: Why is it repeating here? @media (max-width: 767px) { - background: #04192b url(../../images/lp-podcast/signup-bg.png) no-repeat center / contain; + background: var(--dark-blue) url(../../images/lp-podcast/signup-bg.png) no-repeat center / contain; } } diff --git a/src/components/Table/styles.module.less b/src/components/Table/styles.module.less index 5bf86040..e8da28c3 100644 --- a/src/components/Table/styles.module.less +++ b/src/components/Table/styles.module.less @@ -19,7 +19,7 @@ th { background-color: #EEF1FD; - color: #04192B; + color: var(--dark-blue); font-size: 1.25rem; font-weight: 600; padding: 24px; diff --git a/src/globalStyles/wrappers.module.less b/src/globalStyles/wrappers.module.less index 405a9744..ae9e1ed3 100644 --- a/src/globalStyles/wrappers.module.less +++ b/src/globalStyles/wrappers.module.less @@ -12,5 +12,5 @@ .defaultWrapperDarkBlue { .sectionTopBottomPadding; - background-color: #04192B; + background-color: var(--dark-blue); } \ No newline at end of file diff --git a/src/layouts/CaseStudy/style.less b/src/layouts/CaseStudy/style.less index 7501696b..74e0b3de 100644 --- a/src/layouts/CaseStudy/style.less +++ b/src/layouts/CaseStudy/style.less @@ -23,7 +23,7 @@ h1 { margin: 0; - color: #04192b; + color: var(--dark-blue); font-size: 20px; font-weight: 500; line-height: 28px; @@ -52,7 +52,7 @@ h6 { font-size: 20px; font-weight: 600; - color: #04192b; + color: var(--dark-blue); margin-top: 30px; margin-bottom: 16px; } @@ -84,7 +84,7 @@ margin: 0; font-size: 20px; font-weight: 500; - color: #04192b; + color: var(--dark-blue); } .description { @@ -150,7 +150,7 @@ h6 { font-size: 25px; font-weight: 500; - color: #04192b; + color: var(--dark-blue); margin: 0; margin-bottom: 24px; } diff --git a/src/pages/about/styles.module.less b/src/pages/about/styles.module.less index 06e3eaee..25720c3b 100644 --- a/src/pages/about/styles.module.less +++ b/src/pages/about/styles.module.less @@ -28,7 +28,7 @@ h1 { width: 600px; - color: #04192b; + color: var(--dark-blue); margin-top: 0; @media (max-width: 810px) { @@ -105,7 +105,7 @@ .sectionTwo { .sectionTopBottomPadding; - background-color: #04192b; + background-color: var(--dark-blue); background-image: url('../../images/overlay-vector-right.svg'); background-position: bottom right; background-repeat: no-repeat; @@ -199,7 +199,7 @@ } .sectionTitle { - color: #04192b; + color: var(--dark-blue); margin-top: 12px; @media (max-width: 810px) { @@ -226,7 +226,7 @@ .cardTitle { font-size: 1.5rem; - color: var(--background-color-primary); + color: var(--dark-blue); font-weight: 600; @media (max-width: 810px) { @@ -332,7 +332,7 @@ p { font-size: 1.5rem; - color: var(--background-color-primary); + color: var(--dark-blue); font-weight: 600; color: #47506d; @@ -542,7 +542,7 @@ font-size: 24px; line-height: 30px; text-decoration-line: underline; - color: #04192b; + color: var(--dark-blue); margin-top: 24px; margin-bottom: 12px; @@ -553,7 +553,7 @@ } a { - color: #04192b; + color: var(--dark-blue); } } @@ -679,7 +679,7 @@ font-size: 24px; line-height: 30px; text-align: center; - color: #04192b; + color: var(--dark-blue); margin-top: 15px; margin-bottom: 12px; diff --git a/src/pages/podcasts/styles.module.less b/src/pages/podcasts/styles.module.less index 958a741a..002282c5 100644 --- a/src/pages/podcasts/styles.module.less +++ b/src/pages/podcasts/styles.module.less @@ -37,7 +37,7 @@ font-weight: 500; font-size: 71px; line-height: 86px; - color: #04192b; + color: var(--dark-blue); margin-bottom: 40px; @media (max-width: 767px) { @@ -84,7 +84,7 @@ font-weight: 500; font-size: 36px; line-height: 48px; - color: #04192b; + color: var(--dark-blue); margin-bottom: 24px; @media (max-width: 767px) { @@ -121,7 +121,7 @@ font-weight: 500; font-size: 56px; line-height: 68px; - color: #04192b; + color: var(--dark-blue); margin-bottom: 40px; @media (max-width: 767px) { diff --git a/src/style.less b/src/style.less index 81317a26..b564e2db 100644 --- a/src/style.less +++ b/src/style.less @@ -30,7 +30,7 @@ --color-heading: #1a202c; --color-heading-black: black; --color-accent: #d1dce5; - --background-color-primary: #04192b; + --dark-blue: #04192b; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } @@ -52,7 +52,7 @@ html { overflow-y: scroll; overflow: visible; scroll-behavior: smooth; - // background-color: var(--background-color-primary); + // background-color: var(--dark-blue); // TODO: add above background color here and check sections that do not have background color } @@ -287,7 +287,7 @@ table th { padding-top: 12px; padding-bottom: 12px; text-align: left; - background-color: #04192b; + background-color: var(--dark-blue); color: white; } diff --git a/src/templates/author/SectionOne/styles.module.less b/src/templates/author/SectionOne/styles.module.less index 27990ad2..692639e7 100644 --- a/src/templates/author/SectionOne/styles.module.less +++ b/src/templates/author/SectionOne/styles.module.less @@ -59,7 +59,7 @@ p { font-size: 1.125rem; line-height: 32.4px; - color: #04192B; + color: var(--dark-blue); margin: 0 0 20px 0; } } diff --git a/src/templates/connector/ChangeData/styles.module.less b/src/templates/connector/ChangeData/styles.module.less index a4ef5984..5922ab69 100644 --- a/src/templates/connector/ChangeData/styles.module.less +++ b/src/templates/connector/ChangeData/styles.module.less @@ -27,7 +27,7 @@ font-size: 36px; line-height: 43px; margin: 0; - color: #04192b; + color: var(--dark-blue); span { color: #5072eb; diff --git a/src/templates/connector/Hero/Content/styles.module.less b/src/templates/connector/Hero/Content/styles.module.less index d5ffc480..048c8cdc 100644 --- a/src/templates/connector/Hero/Content/styles.module.less +++ b/src/templates/connector/Hero/Content/styles.module.less @@ -1,7 +1,7 @@ .container { h1 { span:nth-of-type(2n) { - color: #04192b; + color: var(--dark-blue); } span:nth-of-type(2n + 1) { diff --git a/src/templates/connector/Pipelines/styles.module.less b/src/templates/connector/Pipelines/styles.module.less index d82532f7..7dc3613b 100644 --- a/src/templates/connector/Pipelines/styles.module.less +++ b/src/templates/connector/Pipelines/styles.module.less @@ -17,7 +17,7 @@ } @media (min-width: 1280px) { - color: #04192b; + color: var(--dark-blue); font-size: 60px; line-height: 72px; } From e8d33748cbe168910bf4946525a3e14b445f1457 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 13:36:24 -0300 Subject: [PATCH 03/13] Add grey color variable --- src/components/Advantages/styles.module.less | 6 ++--- .../AuthorBlogPostCard/styles.module.less | 6 ++--- src/components/Bio/styles.module.less | 2 +- src/components/BlogPost/index.tsx | 2 +- src/components/BlogPost/styles.module.less | 12 +++++----- .../BlogPostPopupModal/styles.module.less | 4 ++-- src/components/BlogPostToc/styles.module.less | 6 ++--- src/components/Breadcrumbs/styles.module.less | 2 +- src/components/Card/styles.module.less | 2 +- .../CardsSection/styles.module.less | 2 +- src/components/Carousel/styles.module.less | 2 +- .../Hero/styles.module.less | 2 +- src/components/Connectors/styles.module.less | 6 ++--- .../ContactUsForm/styles.module.less | 2 +- .../ContactUsPage/Address/styles.module.less | 2 +- .../ContactUsPage/GetEmail/styles.module.less | 2 +- .../styles.module.less | 2 +- .../Hero/styles.module.less | 2 +- .../DiagramConnectors/styles.module.less | 2 +- .../LearnMoreArticles/Card/styles.module.less | 2 +- .../XvsYCard/styles.module.less | 2 +- .../IntroductoryDetails/styles.module.less | 4 ++-- .../Comparison/styles.module.less | 4 ++-- .../FeatureCard/styles.module.less | 4 ++-- .../MoveAndTransform/styles.module.less | 8 +++---- .../Homepage/SeeHow/styles.module.less | 2 +- .../IncreaseProductivity4x/styles.module.less | 2 +- .../Integration/SeeHow/styles.module.less | 2 +- .../Testimonials/styles.module.less | 2 +- src/components/Integration/styles.module.less | 8 +++---- .../NewsletterSignupForm/styles.module.less | 2 +- .../JoinPartnerProgram/styles.module.less | 2 +- .../PartnerProgramDetails/styles.module.less | 6 ++--- .../styles.module.less | 2 +- src/components/PricingCalculator/index.tsx | 2 +- .../PricingCalculator/styles.module.less | 10 ++++---- .../PlanCard/styles.module.less | 6 ++--- .../PricingPage/ChooseYourPlan/index.tsx | 2 +- .../PricingPage/Faq/FaqAccordion/index.tsx | 6 ++++- .../Faq/FaqAccordion/styles.module.less | 2 +- .../styles.module.less | 2 +- .../Step/styles.module.less | 2 +- .../styles.module.less | 2 +- .../DeliverRealTimeData/styles.module.less | 4 ++-- .../HowEstuaryFlowCompares/styles.module.less | 2 +- .../HowItWorks/Hover/styles.module.less | 2 +- .../ProductPage/HowItWorks/index.tsx | 2 +- .../IncreaseProductivity/styles.module.less | 2 +- .../ReadyToStart/styles.module.less | 4 ++-- src/components/SocialLinks/index.tsx | 2 +- src/components/Table/styles.module.less | 2 +- src/components/TestimonialsCarousel/index.tsx | 2 +- .../TestimonialsCarousel/styles.module.less | 2 +- .../VerticalList/styles.module.less | 4 ++-- src/layouts/CaseStudy/style.less | 6 ++--- src/pages/about/styles.module.less | 24 +++++++++---------- src/pages/podcasts/styles.module.less | 6 ++--- src/pages/solutions/styles.module.less | 4 ++-- src/style.less | 3 ++- .../author/SectionOne/styles.module.less | 2 +- .../author/SectionTwo/styles.module.less | 2 +- .../components/Card/styles.module.less | 2 +- .../connector/ChangeData/styles.module.less | 6 ++--- .../connector/Hero/Content/index.tsx | 6 ++--- .../connector/Hero/Content/styles.module.less | 6 ++--- .../connector/Hero/styles.module.less | 2 +- .../connector/Pipelines/styles.module.less | 4 ++-- 67 files changed, 129 insertions(+), 124 deletions(-) diff --git a/src/components/Advantages/styles.module.less b/src/components/Advantages/styles.module.less index 1fd1ce01..329336c3 100644 --- a/src/components/Advantages/styles.module.less +++ b/src/components/Advantages/styles.module.less @@ -20,7 +20,7 @@ font-weight: 600; line-height: 48px; margin: 0; - color: #47506d; + color: var(--grey); max-width: 600px; @media (max-width: 768px) { @@ -39,7 +39,7 @@ font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #47506d; + color: var(--grey); margin: 0; @media (max-width: 768px) { @@ -64,7 +64,7 @@ font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #47506d; + color: var(--grey); margin: 0; @media (max-width: 768px) { diff --git a/src/components/AuthorBlogPostCard/styles.module.less b/src/components/AuthorBlogPostCard/styles.module.less index 32f3d952..b95197c9 100644 --- a/src/components/AuthorBlogPostCard/styles.module.less +++ b/src/components/AuthorBlogPostCard/styles.module.less @@ -23,7 +23,7 @@ font-size: 1.25rem; line-height: 30px; font-weight: 600; - color: #47506D; + color: var(--grey); margin: 16px 0; @media (min-width: 1049px) { @@ -86,7 +86,7 @@ font-size: 0.875rem; font-weight: 400; line-height: 16.8px; - color: #47506d; + color: var(--grey); } } @@ -104,7 +104,7 @@ span { background-color: #47506d12; - color: #47506d; + color: var(--grey); border-radius: 36px; padding: 4px 16px; font-size: 0.875rem; diff --git a/src/components/Bio/styles.module.less b/src/components/Bio/styles.module.less index 1eb99c6d..781d3d25 100644 --- a/src/components/Bio/styles.module.less +++ b/src/components/Bio/styles.module.less @@ -16,7 +16,7 @@ } .authorName { - color: #47506d; + color: var(--grey); display: flex; flex-direction: column; margin-left: 8px; diff --git a/src/components/BlogPost/index.tsx b/src/components/BlogPost/index.tsx index c4c70f10..5205eb22 100644 --- a/src/components/BlogPost/index.tsx +++ b/src/components/BlogPost/index.tsx @@ -104,7 +104,7 @@ const BlogPost = ({ ) : null}
    - + { post.body.data.childMarkdownRemark diff --git a/src/components/BlogPost/styles.module.less b/src/components/BlogPost/styles.module.less index 4f0d3b50..f71d897e 100644 --- a/src/components/BlogPost/styles.module.less +++ b/src/components/BlogPost/styles.module.less @@ -53,12 +53,12 @@ .headerInfo { h1 { margin-top: 36px; - color: #47506d; + color: var(--grey); text-transform: uppercase; } p { - color: #47506d; + color: var(--grey); } } @@ -110,7 +110,7 @@ } .blogPostDate { - color: #47506d; + color: var(--grey); font-size: 1rem; font-weight: 400; line-height: 22px; @@ -246,7 +246,7 @@ p { font-size: 1rem; line-height: 30px; - color: #47506d; + color: var(--grey); margin: 0; max-width: 780px; margin-bottom: 16px; @@ -283,7 +283,7 @@ .authorNameAndRole { display: flex; flex-direction: column; - color: #47506d; + color: var(--grey); } .authorName { @@ -346,7 +346,7 @@ .globalMaxWidth; h2 { - color: #47506d; + color: var(--grey); font-size: 2.25rem; font-style: normal; font-weight: 700; diff --git a/src/components/BlogPostPopupModal/styles.module.less b/src/components/BlogPostPopupModal/styles.module.less index ffcb22d1..abd41d0e 100644 --- a/src/components/BlogPostPopupModal/styles.module.less +++ b/src/components/BlogPostPopupModal/styles.module.less @@ -61,7 +61,7 @@ line-height: 19.2px; text-align: center; margin: 32px 0; - color: #47506d; + color: var(--grey); @media (max-width: 1280px) { font-size: 0.875rem; @@ -84,7 +84,7 @@ } button { - color: #47506d; + color: var(--grey); background-color: transparent; padding: 16px 24px; width: 100%; diff --git a/src/components/BlogPostToc/styles.module.less b/src/components/BlogPostToc/styles.module.less index 4c8b0c06..b972186a 100644 --- a/src/components/BlogPostToc/styles.module.less +++ b/src/components/BlogPostToc/styles.module.less @@ -59,13 +59,13 @@ margin: 12px 0; &::marker { - color: #47506d; + color: var(--grey); } } .isItemSelected { font-weight: bold !important; - color: #47506d !important; + color: var(--grey) !important; } .accordion { @@ -78,7 +78,7 @@ padding: 0; svg { - color: #47506d; + color: var(--grey); font-size: 2rem; max-width: 36px; } diff --git a/src/components/Breadcrumbs/styles.module.less b/src/components/Breadcrumbs/styles.module.less index 5962a3c0..08c8ba98 100644 --- a/src/components/Breadcrumbs/styles.module.less +++ b/src/components/Breadcrumbs/styles.module.less @@ -31,7 +31,7 @@ max-width: calc(100% - 160px); a { - color: #47506d; + color: var(--grey); font-weight: 400; &:hover { diff --git a/src/components/Card/styles.module.less b/src/components/Card/styles.module.less index 6aa9c306..c2b59989 100644 --- a/src/components/Card/styles.module.less +++ b/src/components/Card/styles.module.less @@ -24,7 +24,7 @@ h3, p { - color: #47506D; + color: var(--grey); } h3 { diff --git a/src/components/CardsSection/styles.module.less b/src/components/CardsSection/styles.module.less index 5ae8f8d9..07b7ee0a 100644 --- a/src/components/CardsSection/styles.module.less +++ b/src/components/CardsSection/styles.module.less @@ -26,7 +26,7 @@ } p { - color: #47506D; + color: var(--grey); font-size: 1rem; font-weight: 400; line-height: 30px; diff --git a/src/components/Carousel/styles.module.less b/src/components/Carousel/styles.module.less index dd17b037..6edd5ac9 100644 --- a/src/components/Carousel/styles.module.less +++ b/src/components/Carousel/styles.module.less @@ -83,7 +83,7 @@ border-radius: 50%; background-color: #fff; color: #fff; - border-color: #47506D; + border-color: var(--grey); } .dotSelected { diff --git a/src/components/CompanyUpdatesPage/Hero/styles.module.less b/src/components/CompanyUpdatesPage/Hero/styles.module.less index c9372126..ab37d35c 100644 --- a/src/components/CompanyUpdatesPage/Hero/styles.module.less +++ b/src/components/CompanyUpdatesPage/Hero/styles.module.less @@ -12,7 +12,7 @@ position: absolute; z-index: 1; line-height: 100%; - color: #47506D; + color: var(--grey); text-align: center; font-size: 0.6rem; diff --git a/src/components/Connectors/styles.module.less b/src/components/Connectors/styles.module.less index 4e7c6e08..f08297d2 100644 --- a/src/components/Connectors/styles.module.less +++ b/src/components/Connectors/styles.module.less @@ -166,7 +166,7 @@ font-weight: 600; font-size: 16px; line-height: 24px; - color: #47506d; + color: var(--grey); } .connectorCard { @@ -190,7 +190,7 @@ font-size: 17px; line-height: 30px; align-items: center; - color: #47506d; + color: var(--grey); margin-top: 0; } @@ -199,7 +199,7 @@ font-size: 17px; line-height: 30px; align-items: center; - color: #47506d; + color: var(--grey); margin-top: 0; } diff --git a/src/components/ContactUsForm/styles.module.less b/src/components/ContactUsForm/styles.module.less index 475073e5..6c7ac46d 100644 --- a/src/components/ContactUsForm/styles.module.less +++ b/src/components/ContactUsForm/styles.module.less @@ -30,7 +30,7 @@ .description { font-size: 1rem; text-align: center; - color: #47506d; + color: var(--grey); max-width: 670px; margin-bottom: 48px; } diff --git a/src/components/ContactUsPage/Address/styles.module.less b/src/components/ContactUsPage/Address/styles.module.less index 234d2e2d..03d65cfd 100644 --- a/src/components/ContactUsPage/Address/styles.module.less +++ b/src/components/ContactUsPage/Address/styles.module.less @@ -37,7 +37,7 @@ .address { font-size: 1.25rem; - color: #47506d; + color: var(--grey); max-width: 670px; margin-bottom: 0; max-width: 340px; diff --git a/src/components/ContactUsPage/GetEmail/styles.module.less b/src/components/ContactUsPage/GetEmail/styles.module.less index d379f05c..916d92a2 100644 --- a/src/components/ContactUsPage/GetEmail/styles.module.less +++ b/src/components/ContactUsPage/GetEmail/styles.module.less @@ -17,7 +17,7 @@ .title { font-size: 2rem; font-weight: 600; - color: #47506d; + color: var(--grey); letter-spacing: 1px; margin: 0; line-height: normal; diff --git a/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less b/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less index 6ffafcb5..68ff6ee8 100644 --- a/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less +++ b/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less @@ -7,7 +7,7 @@ h2, h3 { font-size: 1.25rem; line-height: 24px; - color: #47506D; + color: var(--grey); text-transform: uppercase; font-weight: 700; } diff --git a/src/components/DeploymentOptionsPage/Hero/styles.module.less b/src/components/DeploymentOptionsPage/Hero/styles.module.less index 749c4743..dd399057 100644 --- a/src/components/DeploymentOptionsPage/Hero/styles.module.less +++ b/src/components/DeploymentOptionsPage/Hero/styles.module.less @@ -33,7 +33,7 @@ font-size: 0.9vw; font-weight: 600; line-height: 1vw; - color: #47506D; + color: var(--grey); text-align: center; } diff --git a/src/components/DiagramConnectors/styles.module.less b/src/components/DiagramConnectors/styles.module.less index 4faa7e29..a3a51bdf 100644 --- a/src/components/DiagramConnectors/styles.module.less +++ b/src/components/DiagramConnectors/styles.module.less @@ -59,7 +59,7 @@ } span { - color: #47506d; + color: var(--grey); font-size: 0.875rem; font-weight: 400; line-height: 120%; diff --git a/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less b/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less index f853d72d..b672ada0 100644 --- a/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less +++ b/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less @@ -12,7 +12,7 @@ font-size: 1.25rem; line-height: 30px; font-weight: 600; - color: #47506D; + color: var(--grey); } div { diff --git a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less index 37637abf..8d4fc96f 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less +++ b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less @@ -36,7 +36,7 @@ font-size: 1.25rem; font-weight: 700; line-height: 28px; - color: #47506D; + color: var(--grey); text-align: center; @media (max-width: 824px) { diff --git a/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less index 470d54c0..3d4f264c 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less +++ b/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less @@ -10,14 +10,14 @@ } h3 { - color: #47506D; + color: var(--grey); font-weight: 600; font-size: 1.5rem; line-height: 36px; } p { - color: #47506D; + color: var(--grey); font-size: 1.25rem; font-weight: 400; line-height: 36px; diff --git a/src/components/EtlToolsXvsYPage/Comparison/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/styles.module.less index b7eb9de9..e887867c 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/styles.module.less +++ b/src/components/EtlToolsXvsYPage/Comparison/styles.module.less @@ -27,7 +27,7 @@ p, .rightColumn li { - color: #47506D; + color: var(--grey); font-size: 1.25rem; line-height: 36px; @@ -50,7 +50,7 @@ thead { th { background-color: transparent; - color: #47506D; + color: var(--grey); font-weight: 600; font-size: 1rem; } diff --git a/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less b/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less index 71800b45..eed754bc 100644 --- a/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less +++ b/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less @@ -8,13 +8,13 @@ margin: 0; h3 { - color: #47506D; + color: var(--grey); font-size: 1.25rem; font-weight: 700; } p { - color: #47506D; + color: var(--grey); font-size: 1rem; line-height: 30px; flex: 1; diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less index 5910666d..f5e488ad 100644 --- a/src/components/Homepage/MoveAndTransform/styles.module.less +++ b/src/components/Homepage/MoveAndTransform/styles.module.less @@ -25,7 +25,7 @@ text-align: center; text-transform: uppercase; margin: 0 48px; - color: #47506d; + color: var(--grey); @media (max-width: 810px) { font-size: 1.75rem; @@ -80,7 +80,7 @@ font-size: 1.25rem; font-weight: 700; line-height: 24px; - color: #47506d; + color: var(--grey); text-transform: uppercase; margin: 0; @@ -103,7 +103,7 @@ font-size: 1rem; font-weight: 400; line-height: 30px; - color: #47506d; + color: var(--grey); margin: 12px 0 0 0; } } @@ -116,7 +116,7 @@ svg { display: block; - color: #47506D; + color: var(--grey); } } diff --git a/src/components/Homepage/SeeHow/styles.module.less b/src/components/Homepage/SeeHow/styles.module.less index 481c8b00..8e4ba80e 100644 --- a/src/components/Homepage/SeeHow/styles.module.less +++ b/src/components/Homepage/SeeHow/styles.module.less @@ -11,7 +11,7 @@ text-transform: uppercase; max-width: 1072px; text-align: center; - color: #47506d; + color: var(--grey); & span:nth-child(odd) { color: #5072eb; diff --git a/src/components/Integration/IncreaseProductivity4x/styles.module.less b/src/components/Integration/IncreaseProductivity4x/styles.module.less index 83e59685..fb45ea4b 100644 --- a/src/components/Integration/IncreaseProductivity4x/styles.module.less +++ b/src/components/Integration/IncreaseProductivity4x/styles.module.less @@ -43,7 +43,7 @@ .description { .globalMaxWidth; - color: #47506D; + color: var(--grey); font-size: 1.25rem; font-weight: 400; line-height: 30px; diff --git a/src/components/Integration/SeeHow/styles.module.less b/src/components/Integration/SeeHow/styles.module.less index f88d1397..14c25921 100644 --- a/src/components/Integration/SeeHow/styles.module.less +++ b/src/components/Integration/SeeHow/styles.module.less @@ -14,7 +14,7 @@ font-size: 4rem; font-weight: 600; line-height: 89.6px; - color: #47506D; + color: var(--grey); text-align: center; margin: 0; diff --git a/src/components/Integration/Testimonials/styles.module.less b/src/components/Integration/Testimonials/styles.module.less index 05b2f76d..6a385f98 100644 --- a/src/components/Integration/Testimonials/styles.module.less +++ b/src/components/Integration/Testimonials/styles.module.less @@ -15,7 +15,7 @@ text-align: center; text-transform: uppercase; margin: 0; - color: #47506D; + color: var(--grey); span { color: #5072EB; diff --git a/src/components/Integration/styles.module.less b/src/components/Integration/styles.module.less index 74cb6ef4..3fea3b0a 100644 --- a/src/components/Integration/styles.module.less +++ b/src/components/Integration/styles.module.less @@ -164,14 +164,14 @@ .descriptionDark { .description; - color: #47506D; + color: var(--grey); p { - color: #47506D; + color: var(--grey); } a { - color: #47506D; + color: var(--grey); &:hover { color: var(--dark-blue); @@ -206,7 +206,7 @@ .sectionTitleDark { .sectionTitle; - color: #47506D; + color: var(--grey); } .sectionTitleLight { diff --git a/src/components/NewsletterSignupForm/styles.module.less b/src/components/NewsletterSignupForm/styles.module.less index 99ec7a0a..15b2bab4 100644 --- a/src/components/NewsletterSignupForm/styles.module.less +++ b/src/components/NewsletterSignupForm/styles.module.less @@ -63,7 +63,7 @@ padding-left: 48px; &::placeholder { - color: #47506d; + color: var(--grey); line-height: 20px; font-size: 1rem; opacity: 0.6; diff --git a/src/components/PartnersPage/JoinPartnerProgram/styles.module.less b/src/components/PartnersPage/JoinPartnerProgram/styles.module.less index 3fb6c53c..16da639a 100644 --- a/src/components/PartnersPage/JoinPartnerProgram/styles.module.less +++ b/src/components/PartnersPage/JoinPartnerProgram/styles.module.less @@ -26,7 +26,7 @@ } > p:first-of-type { - color: #47506D; + color: var(--grey); font-size: 1rem; font-weight: 400; line-height: 30px; diff --git a/src/components/PartnersPage/PartnerProgramDetails/styles.module.less b/src/components/PartnersPage/PartnerProgramDetails/styles.module.less index 4021aab0..cb3ba166 100644 --- a/src/components/PartnersPage/PartnerProgramDetails/styles.module.less +++ b/src/components/PartnersPage/PartnerProgramDetails/styles.module.less @@ -11,13 +11,13 @@ font-size: 1.5rem; font-weight: 700; line-height: 28.8px; - color: #47506D; + color: var(--grey); } p { font-size: 1.125rem; line-height: 32.4px; - color: #47506D; + color: var(--grey); margin: 0; max-width: 590px; } @@ -71,7 +71,7 @@ } span { - color: #47506D; + color: var(--grey); font-size: 1rem; font-weight: 400; line-height: 18.2px; diff --git a/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less b/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less index 6221a1fd..5731ad05 100644 --- a/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less +++ b/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less @@ -26,7 +26,7 @@ } p { - color: #47506D; + color: var(--grey); font-size: 1rem; font-weight: 400; line-height: 30px; diff --git a/src/components/PricingCalculator/index.tsx b/src/components/PricingCalculator/index.tsx index b53bb524..0be2666d 100644 --- a/src/components/PricingCalculator/index.tsx +++ b/src/components/PricingCalculator/index.tsx @@ -104,7 +104,7 @@ const PricingSlider = styled(Slider)(() => { 'top': '-60px', 'fontSize': '1.25rem', 'fontWeight': 500, - 'color': '#47506D', + 'color': 'var(--grey)', '@media (max-width: 1200px)': { fontSize: '1rem', diff --git a/src/components/PricingCalculator/styles.module.less b/src/components/PricingCalculator/styles.module.less index bc47386e..a71a79af 100644 --- a/src/components/PricingCalculator/styles.module.less +++ b/src/components/PricingCalculator/styles.module.less @@ -13,7 +13,7 @@ font-size: 1rem; font-weight: 700; line-height: 24px; - color: #47506d; + color: var(--grey); } .highlightedCard { @@ -46,7 +46,7 @@ gap: 8px; p { - color: '#47506d'; + color: var(--grey); margin: 0; font-size: 1rem; font-weight: 400; @@ -56,7 +56,7 @@ .gbInput { font-family: var(--font-family); - color: #47506d; + color: var(--grey); font-weight: 500; height: 52px; max-width: 119px; @@ -152,7 +152,7 @@ } .brandPrice { - color: #47506d; + color: var(--grey); font-size: 1rem; font-weight: 500; line-height: 24px; @@ -177,7 +177,7 @@ .detail { font-size: 0.875rem; - color: #47506d; + color: var(--grey); line-height: 16.8px; span { diff --git a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less index 2e8842cb..861cf90f 100644 --- a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less +++ b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less @@ -83,7 +83,7 @@ p { font-size: 1rem; line-height: 22.4px; - color: #47506d; + color: var(--grey); margin: 0; @media (max-width: 425px) { @@ -126,7 +126,7 @@ font-size: 1rem; font-weight: 500; line-height: 30px; - color: #47506d; + color: var(--grey); } .planDescriptionStyle { @@ -172,7 +172,7 @@ font-size: 1rem; line-height: 22.4px; font-weight: 700; - color: #47506d; + color: var(--grey); @media (max-width: 425px) { font-size: 0.875rem; diff --git a/src/components/PricingPage/ChooseYourPlan/index.tsx b/src/components/PricingPage/ChooseYourPlan/index.tsx index 1dc8c8e5..d3fba8a6 100644 --- a/src/components/PricingPage/ChooseYourPlan/index.tsx +++ b/src/components/PricingPage/ChooseYourPlan/index.tsx @@ -22,7 +22,7 @@ const ChooseYourPlan = () => { ) : ( - + )}
    } diff --git a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less index e286613e..8d20b211 100644 --- a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less +++ b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less @@ -65,7 +65,7 @@ } h5 { - color: #47506D; + color: var(--grey); font-size: 1rem; } } diff --git a/src/components/PricingPage/PricingCalculatorSection/styles.module.less b/src/components/PricingPage/PricingCalculatorSection/styles.module.less index 13f2247a..0cabcb9f 100644 --- a/src/components/PricingPage/PricingCalculatorSection/styles.module.less +++ b/src/components/PricingPage/PricingCalculatorSection/styles.module.less @@ -42,7 +42,7 @@ font-size: 1.25rem; line-height: 30px; font-weight: 400; - color: #47506D; + color: var(--grey); margin: 0; max-width: 620px; diff --git a/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less b/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less index 152db2a0..7e097f3e 100644 --- a/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less +++ b/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less @@ -16,7 +16,7 @@ h3, p { - color: #47506D; + color: var(--grey); } h3 { diff --git a/src/components/ProductPage/CreateADataPipelineInMinutes/styles.module.less b/src/components/ProductPage/CreateADataPipelineInMinutes/styles.module.less index 8736c032..ce74f2be 100644 --- a/src/components/ProductPage/CreateADataPipelineInMinutes/styles.module.less +++ b/src/components/ProductPage/CreateADataPipelineInMinutes/styles.module.less @@ -4,7 +4,7 @@ align-items: center; h2, p { - color: #47506d; + color: var(--grey); text-align: center; margin: 0; } diff --git a/src/components/ProductPage/DeliverRealTimeData/styles.module.less b/src/components/ProductPage/DeliverRealTimeData/styles.module.less index 74723220..5b997913 100644 --- a/src/components/ProductPage/DeliverRealTimeData/styles.module.less +++ b/src/components/ProductPage/DeliverRealTimeData/styles.module.less @@ -78,7 +78,7 @@ } p { - color: #47506D; + color: var(--grey); } } @@ -97,7 +97,7 @@ } p { - color: #47506D; + color: var(--grey); } } diff --git a/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less b/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less index 27b212a5..8ff2ff02 100644 --- a/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less +++ b/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less @@ -29,7 +29,7 @@ font-weight: 600; line-height: 24px; text-align: center; - color: #47506d; + color: var(--grey); margin: 0; } } \ No newline at end of file diff --git a/src/components/ProductPage/HowItWorks/Hover/styles.module.less b/src/components/ProductPage/HowItWorks/Hover/styles.module.less index bf554a3f..f7e0f9e4 100644 --- a/src/components/ProductPage/HowItWorks/Hover/styles.module.less +++ b/src/components/ProductPage/HowItWorks/Hover/styles.module.less @@ -204,7 +204,7 @@ p { .baseHoverTitleStyle; - color: #47506d; + color: var(--grey); font-size: 1rem; font-weight: 400; line-height: 19.2px; diff --git a/src/components/ProductPage/HowItWorks/index.tsx b/src/components/ProductPage/HowItWorks/index.tsx index df87fd9c..8df4838a 100644 --- a/src/components/ProductPage/HowItWorks/index.tsx +++ b/src/components/ProductPage/HowItWorks/index.tsx @@ -22,7 +22,7 @@ const HowItWorks = () => {
    diff --git a/src/components/ProductPage/IncreaseProductivity/styles.module.less b/src/components/ProductPage/IncreaseProductivity/styles.module.less index 5667aebb..331a6bf3 100644 --- a/src/components/ProductPage/IncreaseProductivity/styles.module.less +++ b/src/components/ProductPage/IncreaseProductivity/styles.module.less @@ -49,7 +49,7 @@ font-size: 1rem; font-weight: 400; line-height: 30px; - color: #47506d; + color: var(--grey); text-align: center; margin: 0; } diff --git a/src/components/ProductPage/ReadyToStart/styles.module.less b/src/components/ProductPage/ReadyToStart/styles.module.less index 8151e2a1..00543af7 100644 --- a/src/components/ProductPage/ReadyToStart/styles.module.less +++ b/src/components/ProductPage/ReadyToStart/styles.module.less @@ -110,12 +110,12 @@ font-size: 1.5rem; font-weight: 700; line-height: 28.8px; - color: #47506d; + color: var(--grey); margin: 0; } p { - color: #47506d; + color: var(--grey); margin: 0; line-height: 30px; font-size: 1rem; diff --git a/src/components/SocialLinks/index.tsx b/src/components/SocialLinks/index.tsx index 01ad924a..a8426538 100644 --- a/src/components/SocialLinks/index.tsx +++ b/src/components/SocialLinks/index.tsx @@ -7,7 +7,7 @@ import WebsiteIcon from '../../svgs/share-social-icons/website-outlined.svg'; import OutboundLink from '../LinksAndButtons/OutboundLink'; import { container, highlightedIconStyle } from './styles.module.less'; -const iconColor = '#47506D'; +const iconColor = 'var(--grey)'; interface SocialLinks { socialLinks: { diff --git a/src/components/Table/styles.module.less b/src/components/Table/styles.module.less index e8da28c3..c7f5e146 100644 --- a/src/components/Table/styles.module.less +++ b/src/components/Table/styles.module.less @@ -3,7 +3,7 @@ font-size: 1rem; border-collapse: separate; border-spacing: 0; - color: #47506D; + color: var(--grey); border-bottom: 1px solid #EEF1FD; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; diff --git a/src/components/TestimonialsCarousel/index.tsx b/src/components/TestimonialsCarousel/index.tsx index 555379d7..0383f2f9 100644 --- a/src/components/TestimonialsCarousel/index.tsx +++ b/src/components/TestimonialsCarousel/index.tsx @@ -60,7 +60,7 @@ const TestimonialsCarousel = ({ diff --git a/src/components/TestimonialsCarousel/styles.module.less b/src/components/TestimonialsCarousel/styles.module.less index 91f3ded2..fb7a4d06 100644 --- a/src/components/TestimonialsCarousel/styles.module.less +++ b/src/components/TestimonialsCarousel/styles.module.less @@ -76,5 +76,5 @@ } .isDarkTheme { - color: #47506D; + color: var(--grey); } \ No newline at end of file diff --git a/src/components/VerticalList/styles.module.less b/src/components/VerticalList/styles.module.less index 87ac306f..f0927bbe 100644 --- a/src/components/VerticalList/styles.module.less +++ b/src/components/VerticalList/styles.module.less @@ -49,7 +49,7 @@ font-weight: 700; font-size: 24px; line-height: 30px; - color: #47506d; + color: var(--grey); @media (max-width: 768px) { font-size: 18px; @@ -67,7 +67,7 @@ font-weight: 400; font-size: 18px; line-height: 30px; - color: #47506d; + color: var(--grey); margin-bottom: 40px; @media (max-width: 768px) { diff --git a/src/layouts/CaseStudy/style.less b/src/layouts/CaseStudy/style.less index 74e0b3de..68135b26 100644 --- a/src/layouts/CaseStudy/style.less +++ b/src/layouts/CaseStudy/style.less @@ -38,7 +38,7 @@ } .side-content { - color: #47506d; + color: var(--grey); font-size: 14px; font-weight: 400; line-height: 20px; @@ -91,7 +91,7 @@ p { font-size: 14px; font-weight: 400; - color: #47506d; + color: var(--grey); line-height: 21px; } } @@ -115,7 +115,7 @@ } .content { - color: #47506d; + color: var(--grey); .title { font-size: 16px; diff --git a/src/pages/about/styles.module.less b/src/pages/about/styles.module.less index 25720c3b..466d2862 100644 --- a/src/pages/about/styles.module.less +++ b/src/pages/about/styles.module.less @@ -39,7 +39,7 @@ p { font-size: 1.25rem; - color: #47506d; + color: var(--grey); margin-bottom: 0; @media (max-width: 810px) { @@ -47,7 +47,7 @@ } a { - color: #47506d; + color: var(--grey); font-size: 1.25rem; text-decoration-line: underline; } @@ -237,7 +237,7 @@ .referralText { font-size: 1.5rem; font-weight: 600; - color: #47506d; + color: var(--grey); text-align: center; margin-bottom: 80px; @@ -289,7 +289,7 @@ margin: 0; text-decoration: none; cursor: pointer; - color: #47506d; + color: var(--grey); text-align: center; transition: var(--default-transition); @@ -315,12 +315,12 @@ p, ul li { - color: #47506d; + color: var(--grey); } h3 { font-size: 18px; - color: #47506d; + color: var(--grey); margin-bottom: 0; } } @@ -334,7 +334,7 @@ font-size: 1.5rem; color: var(--dark-blue); font-weight: 600; - color: #47506d; + color: var(--grey); @media (max-width: 810px) { font-size: var(--fontSize-1); @@ -356,7 +356,7 @@ p { margin: 0px; - color: #47506d; + color: var(--grey); @media (max-width: 810px) { font-size: var(--fontSize-0); @@ -420,7 +420,7 @@ text-align: center; letter-spacing: 2px; text-transform: uppercase; - color: #47506d; + color: var(--grey); margin-bottom: 24px; display: block; @@ -451,7 +451,7 @@ } a { - color: #47506d; + color: var(--grey); text-decoration: underline; } } @@ -562,7 +562,7 @@ font-weight: 400; font-size: 18px; line-height: 30px; - color: #47506d; + color: var(--grey); @media (max-width: 811px) { font-size: 14px; @@ -697,7 +697,7 @@ font-size: 18px; line-height: 30px; text-align: center; - color: #47506d; + color: var(--grey); @media (max-width: 811px) { font-size: 14px; diff --git a/src/pages/podcasts/styles.module.less b/src/pages/podcasts/styles.module.less index 002282c5..8dde841c 100644 --- a/src/pages/podcasts/styles.module.less +++ b/src/pages/podcasts/styles.module.less @@ -51,7 +51,7 @@ font-weight: 400; font-size: 18px; line-height: 30px; - color: #47506d; + color: var(--grey); @media (max-width: 767px) { font-size: 14px; @@ -142,7 +142,7 @@ font-weight: 400; font-size: 24px; line-height: 140%; - color: #47506d; + color: var(--grey); margin-bottom: 40px; gap: 20px; flex-wrap: wrap; @@ -173,7 +173,7 @@ font-weight: 400; font-size: 24px; line-height: 140%; - color: #47506d; + color: var(--grey); margin-bottom: 24px; @media (max-width: 767px) { diff --git a/src/pages/solutions/styles.module.less b/src/pages/solutions/styles.module.less index 7471b79a..4c29c821 100644 --- a/src/pages/solutions/styles.module.less +++ b/src/pages/solutions/styles.module.less @@ -33,7 +33,7 @@ p { font-size: var(--fontSize-1); - color: #47506d; + color: var(--grey); @media (max-width: 810px) { font-size: var(--fontSize-0); @@ -74,7 +74,7 @@ } p { - color: #47506d; + color: var(--grey); line-height: 30px; @media (max-width: 810px) { diff --git a/src/style.less b/src/style.less index b564e2db..fc91b7af 100644 --- a/src/style.less +++ b/src/style.less @@ -31,6 +31,7 @@ --color-heading-black: black; --color-accent: #d1dce5; --dark-blue: #04192b; + --grey: #47506d; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } @@ -161,7 +162,7 @@ h6>a { p { line-height: var(--lineHeight-relaxed); font-style: normal; - color: #47506D; + color: var(--grey); } ul, diff --git a/src/templates/author/SectionOne/styles.module.less b/src/templates/author/SectionOne/styles.module.less index 692639e7..3875252e 100644 --- a/src/templates/author/SectionOne/styles.module.less +++ b/src/templates/author/SectionOne/styles.module.less @@ -52,7 +52,7 @@ font-size: 1.25rem; font-weight: 600; line-height: 30px; - color: #47506D; + color: var(--grey); margin-bottom: 20px; } diff --git a/src/templates/author/SectionTwo/styles.module.less b/src/templates/author/SectionTwo/styles.module.less index 92b066b5..af72c730 100644 --- a/src/templates/author/SectionTwo/styles.module.less +++ b/src/templates/author/SectionTwo/styles.module.less @@ -12,7 +12,7 @@ h2 { font-size: 2.5rem; font-weight: 600; - color: #47506D; + color: var(--grey); text-transform: uppercase; text-align: center; diff --git a/src/templates/connector/ChangeData/components/Card/styles.module.less b/src/templates/connector/ChangeData/components/Card/styles.module.less index 73f44c2d..be118ada 100644 --- a/src/templates/connector/ChangeData/components/Card/styles.module.less +++ b/src/templates/connector/ChangeData/components/Card/styles.module.less @@ -57,7 +57,7 @@ p { font-weight: 400; font-size: 14px; - color: #47506d; + color: var(--grey); margin: 0; @media (min-width: 1280px) { diff --git a/src/templates/connector/ChangeData/styles.module.less b/src/templates/connector/ChangeData/styles.module.less index 5922ab69..b12cc762 100644 --- a/src/templates/connector/ChangeData/styles.module.less +++ b/src/templates/connector/ChangeData/styles.module.less @@ -58,7 +58,7 @@ font-weight: 400; line-height: 30px; margin: 0; - color: #47506d; + color: var(--grey); display: flex; gap: 20px; @@ -72,7 +72,7 @@ .description { font-weight: 400; font-size: 16px; - color: #47506d; + color: var(--grey); margin: 0; @media (min-width: 1280px) { @@ -89,7 +89,7 @@ display: none; font-weight: 400; font-size: 16px; - color: #47506d; + color: var(--grey); line-height: 30px; margin: 0; diff --git a/src/templates/connector/Hero/Content/index.tsx b/src/templates/connector/Hero/Content/index.tsx index 96517bfa..7d06deb2 100644 --- a/src/templates/connector/Hero/Content/index.tsx +++ b/src/templates/connector/Hero/Content/index.tsx @@ -52,15 +52,15 @@ const Content = ({ connector }: ContentProps) => { />
    • - + <100ms Data pipelines
    • - + 100+ Connectors
    • - + 2-5x less than batch ELT
    diff --git a/src/templates/connector/Hero/Content/styles.module.less b/src/templates/connector/Hero/Content/styles.module.less index 048c8cdc..81f85c5e 100644 --- a/src/templates/connector/Hero/Content/styles.module.less +++ b/src/templates/connector/Hero/Content/styles.module.less @@ -10,7 +10,7 @@ } p:first-of-type { - color: #47506d; + color: var(--grey); margin: 0; } @@ -45,7 +45,7 @@ font-size: 1rem; font-weight: 500; margin: 0; - color: #47506d; + color: var(--grey); display: flex; align-items: center; gap: 6px; @@ -86,7 +86,7 @@ font-weight: 700; font-size: 1.25rem; margin: 0; - color: #47506d; + color: var(--grey); @media (min-width: 1280px) { font-size: 1.5rem; diff --git a/src/templates/connector/Hero/styles.module.less b/src/templates/connector/Hero/styles.module.less index 7343b202..c8a80717 100644 --- a/src/templates/connector/Hero/styles.module.less +++ b/src/templates/connector/Hero/styles.module.less @@ -47,7 +47,7 @@ position: absolute; z-index: 1; text-align: center; - color: #47506d; + color: var(--grey); width: 100%; max-width: 150px; height: auto; diff --git a/src/templates/connector/Pipelines/styles.module.less b/src/templates/connector/Pipelines/styles.module.less index 7dc3613b..653e5328 100644 --- a/src/templates/connector/Pipelines/styles.module.less +++ b/src/templates/connector/Pipelines/styles.module.less @@ -9,7 +9,7 @@ font-size: 2.25rem; line-height: 43px; margin: 0; - color: #47506d; + color: var(--grey); text-align: center; span { @@ -34,7 +34,7 @@ font-weight: 600; font-size: 20px; line-height: 24px; - color: #47506d; + color: var(--grey); margin: 0; text-align: center; From 3e8211bb2323226c36051e5ba013323c31005660 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 14:07:47 -0300 Subject: [PATCH 04/13] Add variable for light grey color --- src/components/EtlToolsXvsYPage/Comparison/index.tsx | 3 ++- src/style.less | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/EtlToolsXvsYPage/Comparison/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/index.tsx index 98ae3acb..a84423f7 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/index.tsx +++ b/src/components/EtlToolsXvsYPage/Comparison/index.tsx @@ -107,7 +107,8 @@ const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => { if (position.top <= 164) { if (firstDiv) { - firstDiv.style.backgroundColor = '#F2F3F5'; + firstDiv.style.backgroundColor = + 'var(--light-grey)'; firstDiv.style.padding = '8px 24px 8px 24px'; } } else if (firstDiv) { diff --git a/src/style.less b/src/style.less index fc91b7af..53b2f8b8 100644 --- a/src/style.less +++ b/src/style.less @@ -32,6 +32,7 @@ --color-accent: #d1dce5; --dark-blue: #04192b; --grey: #47506d; + --light-grey: #f2f3f5; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } From 1dace05ef97c6a5870d4a8a967d6e4d4bfa57cb0 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 14:15:34 -0300 Subject: [PATCH 05/13] Add variable for border color --- src/components/Advantages/styles.module.less | 2 +- src/components/AuthorBlogPostCard/styles.module.less | 2 +- src/components/BlogPost/index.tsx | 3 ++- src/components/BlogPostToc/styles.module.less | 4 ++-- src/components/Card/styles.module.less | 2 +- src/components/CopyToClipboardButton/styles.module.less | 4 ++-- src/components/DiagramConnectors/styles.module.less | 2 +- .../EtlToolsPage/LearnMoreArticles/Card/styles.module.less | 2 +- .../GettingStarted/FeatureCard/styles.module.less | 2 +- src/components/Homepage/MoveAndTransform/styles.module.less | 4 ++-- src/components/Integration/Hero/styles.module.less | 2 +- src/components/LinksAndButtons/styles.module.less | 2 +- src/components/NewsletterSignupForm/styles.module.less | 2 +- src/components/PipelinesTable/style.module.less | 4 ++-- src/components/PricingCalculator/styles.module.less | 2 +- .../PricingPage/ChooseYourPlan/PlanCard/styles.module.less | 4 ++-- .../PricingPage/Faq/FaqAccordion/styles.module.less | 2 +- .../CreateADataPipelineInMinutes/Step/styles.module.less | 2 +- src/components/ProductPage/ReadyToStart/styles.module.less | 2 +- src/components/ProductPage/Streaming/styles.module.less | 2 +- src/components/SearchInput/styles.module.less | 2 +- src/components/SocialLinks/styles.module.less | 4 ++-- src/components/Tabs/styles.module.less | 4 ++-- src/components/VerticalList/styles.module.less | 4 ++-- src/components/styles.module.less | 2 +- src/pages/about/styles.module.less | 4 ++-- src/style.less | 1 + src/templates/blog/styles.module.less | 4 ++-- .../connector/ChangeData/components/Card/styles.module.less | 4 ++-- 29 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/components/Advantages/styles.module.less b/src/components/Advantages/styles.module.less index 329336c3..76ddc1c7 100644 --- a/src/components/Advantages/styles.module.less +++ b/src/components/Advantages/styles.module.less @@ -93,7 +93,7 @@ width: 90px; height: 90px; border: 1px solid; - border-color: #D7DCE5; + border-color: var(--border-color); border-radius: 8px; padding: 18px; background-color: #FFFFFF; diff --git a/src/components/AuthorBlogPostCard/styles.module.less b/src/components/AuthorBlogPostCard/styles.module.less index b95197c9..8d7c3b5a 100644 --- a/src/components/AuthorBlogPostCard/styles.module.less +++ b/src/components/AuthorBlogPostCard/styles.module.less @@ -2,7 +2,7 @@ display: flex; flex-direction: column; padding: 20px; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 16px; transition: var(--default-transition); diff --git a/src/components/BlogPost/index.tsx b/src/components/BlogPost/index.tsx index 5205eb22..aed51de2 100644 --- a/src/components/BlogPost/index.tsx +++ b/src/components/BlogPost/index.tsx @@ -271,7 +271,8 @@ const BlogPost = ({ sx={{ minHeight: '57px', width: '1px', - borderColor: '#d7dce5', + borderColor: + 'var(--border-color)', margin: '0 30px 0 20px', [theme.breakpoints.down( 520 diff --git a/src/components/BlogPostToc/styles.module.less b/src/components/BlogPostToc/styles.module.less index b972186a..4aecf14f 100644 --- a/src/components/BlogPostToc/styles.module.less +++ b/src/components/BlogPostToc/styles.module.less @@ -69,8 +69,8 @@ } .accordion { - border-top: 1px solid #d7dce5; - border-bottom: 1px solid #d7dce5; + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); border-radius: 0; } diff --git a/src/components/Card/styles.module.less b/src/components/Card/styles.module.less index c2b59989..30585163 100644 --- a/src/components/Card/styles.module.less +++ b/src/components/Card/styles.module.less @@ -3,7 +3,7 @@ flex-direction: column; gap: 16px; padding: 24px; - border: 1px solid #D7DCE5; + border: 1px solid var(--border-color); border-radius: 24px; div { diff --git a/src/components/CopyToClipboardButton/styles.module.less b/src/components/CopyToClipboardButton/styles.module.less index c682f6dd..9f7d4b29 100644 --- a/src/components/CopyToClipboardButton/styles.module.less +++ b/src/components/CopyToClipboardButton/styles.module.less @@ -13,11 +13,11 @@ border 300ms ease-in-out; background-color: #FFFFFF; - border-color: #D7DCE5; + border-color: var(--border-color); &:hover { background-color: #f9fafc; - border-color: #D7DCE5; + border-color: var(--border-color); } } diff --git a/src/components/DiagramConnectors/styles.module.less b/src/components/DiagramConnectors/styles.module.less index a3a51bdf..8f8e6bbb 100644 --- a/src/components/DiagramConnectors/styles.module.less +++ b/src/components/DiagramConnectors/styles.module.less @@ -81,7 +81,7 @@ .logoWrapper { background-color: #ffffff; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 12%; display: flex; align-items: center; diff --git a/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less b/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less index b672ada0..a11ecd6d 100644 --- a/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less +++ b/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less @@ -1,5 +1,5 @@ .container { - border: 1px solid #D7DCE5; + border: 1px solid var(--border-color); border-radius: 24px; padding: 24px; text-align: left; diff --git a/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less b/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less index eed754bc..f2a9f2c5 100644 --- a/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less +++ b/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less @@ -3,7 +3,7 @@ flex-direction: column; gap: 16px; padding: 24px; - border: 1px solid #D7DCE5; + border: 1px solid var(--border-color); border-radius: 24px; margin: 0; diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less index f5e488ad..b00ca8e9 100644 --- a/src/components/Homepage/MoveAndTransform/styles.module.less +++ b/src/components/Homepage/MoveAndTransform/styles.module.less @@ -67,7 +67,7 @@ display: flex; gap: 16px; width: 33%; - border: 4px dotted #d7dce5; + border: 4px dotted var(--border-color); border-radius: 16px; padding: 16px; position: relative; @@ -109,7 +109,7 @@ } .StepIconWrapper { - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; height: fit-content; diff --git a/src/components/Integration/Hero/styles.module.less b/src/components/Integration/Hero/styles.module.less index 2b4e91d4..aafd7103 100644 --- a/src/components/Integration/Hero/styles.module.less +++ b/src/components/Integration/Hero/styles.module.less @@ -382,7 +382,7 @@ .filledWhiteCircle { background-color: #ffffff; - border: 1px solid #D7DCE5; + border: 1px solid var(--border-color); border-radius: 50%; padding: 16px; .centralize; diff --git a/src/components/LinksAndButtons/styles.module.less b/src/components/LinksAndButtons/styles.module.less index 54dc766e..ba6278c0 100644 --- a/src/components/LinksAndButtons/styles.module.less +++ b/src/components/LinksAndButtons/styles.module.less @@ -1,7 +1,7 @@ @primaryColor: #5072eb; @hoverColor: #625eff; @lightColor: #fff; -@disabledColor: #d7dce5; +@disabledColor: var(--border-color); @secondaryColor: #fdfdfe; .baseButton { diff --git a/src/components/NewsletterSignupForm/styles.module.less b/src/components/NewsletterSignupForm/styles.module.less index 15b2bab4..63dbde5a 100644 --- a/src/components/NewsletterSignupForm/styles.module.less +++ b/src/components/NewsletterSignupForm/styles.module.less @@ -58,7 +58,7 @@ .emailInput { width: 100%; height: 52px; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 4px; padding-left: 48px; diff --git a/src/components/PipelinesTable/style.module.less b/src/components/PipelinesTable/style.module.less index 8e54ef36..510dbbc4 100644 --- a/src/components/PipelinesTable/style.module.less +++ b/src/components/PipelinesTable/style.module.less @@ -15,7 +15,7 @@ margin: 0 auto; border-collapse: separate !important; border-spacing: 0; - border: 2px solid #d7dce5; + border: 2px solid var(--border-color); border-radius: 24px; overflow: hidden; } @@ -45,7 +45,7 @@ td { border: none; - border-top: 2px solid #d7dce5; + border-top: 2px solid var(--border-color); padding: 28px; color: var(--dark-blue); background-color: #f6f8fe; diff --git a/src/components/PricingCalculator/styles.module.less b/src/components/PricingCalculator/styles.module.less index a71a79af..53b0f639 100644 --- a/src/components/PricingCalculator/styles.module.less +++ b/src/components/PricingCalculator/styles.module.less @@ -60,7 +60,7 @@ font-weight: 500; height: 52px; max-width: 119px; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 4px; @media (max-width: 425px) { diff --git a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less index 861cf90f..cbb6db5e 100644 --- a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less +++ b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less @@ -1,5 +1,5 @@ .container { - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 24px; padding: 28px; display: flex; @@ -146,7 +146,7 @@ .divider { width: 100%; - background: #d7dce5; + background: var(--border-color); } .pricePerConnectorWrapper { diff --git a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less index 8d20b211..14aaa946 100644 --- a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less +++ b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less @@ -1,5 +1,5 @@ .accordion { - border: 1px solid #D7DCE5; + border: 1px solid var(--border-color); border-radius: 24px !important; padding: 32px 40px; margin: 0 !important; diff --git a/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less b/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less index 7e097f3e..c2ede0dc 100644 --- a/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less +++ b/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.module.less @@ -5,7 +5,7 @@ display: flex; flex-direction: column; padding: 24px; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 24px; width: 100%; height: 100%; diff --git a/src/components/ProductPage/ReadyToStart/styles.module.less b/src/components/ProductPage/ReadyToStart/styles.module.less index 00543af7..8da82b3c 100644 --- a/src/components/ProductPage/ReadyToStart/styles.module.less +++ b/src/components/ProductPage/ReadyToStart/styles.module.less @@ -75,7 +75,7 @@ align-items: center; justify-content: space-between; background-color: #fdfdfe; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 16px; gap: 24px; width: 100%; diff --git a/src/components/ProductPage/Streaming/styles.module.less b/src/components/ProductPage/Streaming/styles.module.less index d316ce35..65e6259a 100644 --- a/src/components/ProductPage/Streaming/styles.module.less +++ b/src/components/ProductPage/Streaming/styles.module.less @@ -103,7 +103,7 @@ } .batchEltDescription { - color: #d7dce5; + color: var(--border-color); } .logoWrapper { diff --git a/src/components/SearchInput/styles.module.less b/src/components/SearchInput/styles.module.less index 5c37a50d..a8637f6e 100644 --- a/src/components/SearchInput/styles.module.less +++ b/src/components/SearchInput/styles.module.less @@ -3,7 +3,7 @@ display: flex; position: relative; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; min-height: 56px; diff --git a/src/components/SocialLinks/styles.module.less b/src/components/SocialLinks/styles.module.less index cdb4f005..a91f523d 100644 --- a/src/components/SocialLinks/styles.module.less +++ b/src/components/SocialLinks/styles.module.less @@ -11,7 +11,7 @@ .highlightedIconStyle { background-color: #fff; padding: 12px; - border: 1px solid #D7DCE5; + border: 1px solid var(--border-color); border-radius: 100%; display: flex; align-items: center; @@ -25,6 +25,6 @@ } &:active { - background-color: #D7DCE5; + background-color: var(--border-color); } } diff --git a/src/components/Tabs/styles.module.less b/src/components/Tabs/styles.module.less index 71c432ce..fdea40d9 100644 --- a/src/components/Tabs/styles.module.less +++ b/src/components/Tabs/styles.module.less @@ -11,13 +11,13 @@ .tabStyle { padding: 10px 20px; background-color: transparent; - border-bottom: 2px solid #D7DCE5; + border-bottom: 2px solid var(--border-color); transition: border 150ms ease-in-out; width: 100%; text-align: center; &>span { - color: #D7DCE5; + color: var(--border-color); font-weight: 600; font-size: 1.25rem; line-height: 24px; diff --git a/src/components/VerticalList/styles.module.less b/src/components/VerticalList/styles.module.less index f0927bbe..2811221d 100644 --- a/src/components/VerticalList/styles.module.less +++ b/src/components/VerticalList/styles.module.less @@ -16,7 +16,7 @@ li { flex-direction: column; - border-bottom: 1px solid #d7dce5; + border-bottom: 1px solid var(--border-color); padding-bottom: 16px; margin-bottom: 16px; } @@ -27,7 +27,7 @@ max-width: 600px; width: 100%; background: #ffffff; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; diff --git a/src/components/styles.module.less b/src/components/styles.module.less index 299d9806..81919c5d 100644 --- a/src/components/styles.module.less +++ b/src/components/styles.module.less @@ -60,7 +60,7 @@ display: flex; align-items: center; justify-content: center; - border: 1px solid #D7DCE5; + border: 1px solid var(--border-color); border-radius: 100%; min-width: 40px; height: 40px; diff --git a/src/pages/about/styles.module.less b/src/pages/about/styles.module.less index 466d2862..588886f5 100644 --- a/src/pages/about/styles.module.less +++ b/src/pages/about/styles.module.less @@ -94,7 +94,7 @@ height: 64px; display: flex; background-color: white; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); & svg, .icon-image { @@ -371,7 +371,7 @@ .currentOpeningsDivider { width: 100%; margin: 40px auto 0 auto; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); } .getInTouchButtonMobile { diff --git a/src/style.less b/src/style.less index 53b2f8b8..a88f15d3 100644 --- a/src/style.less +++ b/src/style.less @@ -33,6 +33,7 @@ --dark-blue: #04192b; --grey: #47506d; --light-grey: #f2f3f5; + --border-color: #d7dce5; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } diff --git a/src/templates/blog/styles.module.less b/src/templates/blog/styles.module.less index 95f62cfa..b14e85d7 100644 --- a/src/templates/blog/styles.module.less +++ b/src/templates/blog/styles.module.less @@ -26,7 +26,7 @@ .blogsIndexTabs { display: flex; background: #f7f9fc; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); border-radius: 4px; overflow-x: auto; white-space: nowrap; @@ -52,7 +52,7 @@ transition: var(--default-transition); &:not(:last-child) { - border-right: 1px solid #d7dce5; + border-right: 1px solid var(--border-color); } @media (max-width: 950px) { diff --git a/src/templates/connector/ChangeData/components/Card/styles.module.less b/src/templates/connector/ChangeData/components/Card/styles.module.less index be118ada..9040864b 100644 --- a/src/templates/connector/ChangeData/components/Card/styles.module.less +++ b/src/templates/connector/ChangeData/components/Card/styles.module.less @@ -3,7 +3,7 @@ flex-direction: row; gap: 16px; align-items: center; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); background-color: #f9fafc; border-radius: 100px; padding: 20px 40px 20px 20px; @@ -24,7 +24,7 @@ padding: 10px; background-color: #ffffff; border-radius: 100%; - border: 1px solid #d7dce5; + border: 1px solid var(--border-color); min-width: 56px; @media (max-width: 320px) { From ae5ff044da9976f8f47909180c334e129b7f347f Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 14:55:27 -0300 Subject: [PATCH 06/13] Add variable for white color --- src/components/Advantages/styles.module.less | 4 +-- src/components/BlogBanner/styles.module.less | 2 +- src/components/BlogPost/styles.module.less | 6 ++-- src/components/BlogPostPopupModal/index.tsx | 2 +- .../BlogPostPopupModal/styles.module.less | 6 ++-- src/components/BlogPostToc/styles.module.less | 2 +- src/components/Card/styles.module.less | 2 +- src/components/Carousel/index.tsx | 2 +- src/components/Carousel/styles.module.less | 4 +-- src/components/Container/styles.module.less | 2 +- .../CopyToClipboardButton/styles.module.less | 2 +- .../styles.module.less | 2 +- .../Hero/styles.module.less | 2 +- .../DiagramConnectors/styles.module.less | 2 +- .../EtlToolsPage/Hero/styles.module.less | 2 +- .../XvsYCard/styles.module.less | 2 +- .../VendorAvatar/styles.module.less | 2 +- .../FlowDemoVideo/styles.module.less | 2 +- src/components/Footer/styles.module.less | 4 +-- src/components/HTMLTooltip/index.tsx | 2 +- .../HeaderNavbar/CardItem/styles.module.less | 2 +- .../HeaderNavbar/styles.module.less | 2 +- .../HeroSectionDetails/styles.module.less | 2 +- .../CaseStudies/Card/styles.module.less | 6 ++-- src/components/Homepage/Hero/index.tsx | 2 +- src/components/Homepage/styles.module.less | 4 +-- .../EstuaryFlowVideo/styles.module.less | 4 +-- src/components/Integration/Hero/index.tsx | 2 +- .../Integration/Hero/styles.module.less | 4 +-- src/components/Integration/styles.module.less | 10 +++--- src/components/Layout/ReleaseBanner/index.tsx | 2 +- .../LinksAndButtons/styles.module.less | 2 +- src/components/MainConnectors/index.tsx | 2 +- .../MainConnectors/styles.module.less | 2 +- src/components/MetricCard/styles.module.less | 2 +- src/components/NewsletterSignupForm/index.tsx | 2 +- .../PartnersPage/Benefits/styles.module.less | 2 +- .../PartnerProgramDetails/styles.module.less | 4 +-- src/components/PricingCalculator/index.tsx | 6 ++-- .../PricingCalculator/styles.module.less | 2 +- .../ProductPage/DeliverRealTimeData/index.tsx | 2 +- .../DeliverRealTimeData/styles.module.less | 2 +- .../DontMissAThing/styles.module.less | 6 ++-- .../ProductPage/Hero/Card/index.tsx | 2 +- .../ProductPage/Hero/Card/styles.module.less | 6 ++-- src/components/ProductPage/Hero/index.tsx | 2 +- .../HowItWorks/Hover/styles.module.less | 2 +- .../IncreaseProductivity/styles.module.less | 2 +- .../KeyFeatures/KeyFeature/styles.module.less | 2 +- .../KeyFeatures/KeyFeatureContent/index.tsx | 2 +- .../KeyFeatureContent/styles.module.less | 2 +- .../ProductPage/KeyFeatures/index.tsx | 2 +- .../KeyFeatures/styles.module.less | 2 +- .../ProductPage/Streaming/styles.module.less | 12 ++++--- .../TheSameData/styles.module.less | 12 ++++--- src/components/SidebarCta/styles.module.less | 2 +- src/components/Signup/styles.module.less | 2 +- src/components/SocialLinks/styles.module.less | 2 +- src/components/SubscriptionBenefits/index.tsx | 4 +-- .../SubscriptionBenefits/styles.module.less | 2 +- src/components/Table/styles.module.less | 2 +- src/components/TakeATour/styles.module.less | 2 +- src/components/TestimonialsCarousel/index.tsx | 2 +- .../TestimonialsCarousel/styles.module.less | 2 +- .../VerticalList/styles.module.less | 2 +- src/components/Why/styles.module.less | 34 +++++++++---------- src/components/XvsYFilter/styles.module.less | 2 +- src/components/styles.module.less | 6 ++-- src/globalStyles/buttons.module.less | 2 +- src/pages/about/styles.module.less | 8 ++--- src/pages/podcasts/styles.module.less | 2 +- src/style.less | 3 +- .../components/Card/styles.module.less | 2 +- .../connector/RealTime/style.module.less | 2 +- src/templates/connector/styles.module.less | 2 +- 75 files changed, 133 insertions(+), 128 deletions(-) diff --git a/src/components/Advantages/styles.module.less b/src/components/Advantages/styles.module.less index 76ddc1c7..9ff1f1ca 100644 --- a/src/components/Advantages/styles.module.less +++ b/src/components/Advantages/styles.module.less @@ -96,7 +96,7 @@ border-color: var(--border-color); border-radius: 8px; padding: 18px; - background-color: #FFFFFF; + background-color: var(--white); @media (max-width: 768px) { width: 64px; @@ -145,6 +145,6 @@ h2, p, ul > li > p { - color: #fff; + color: var(--white); } } diff --git a/src/components/BlogBanner/styles.module.less b/src/components/BlogBanner/styles.module.less index cb01c290..ea488be5 100644 --- a/src/components/BlogBanner/styles.module.less +++ b/src/components/BlogBanner/styles.module.less @@ -20,7 +20,7 @@ h3 { text-transform: uppercase; - color: #ffffff; + color: var(--white); font-size: 1.5rem; font-weight: 700; line-height: 28.8px; diff --git a/src/components/BlogPost/styles.module.less b/src/components/BlogPost/styles.module.less index f71d897e..0502d21b 100644 --- a/src/components/BlogPost/styles.module.less +++ b/src/components/BlogPost/styles.module.less @@ -379,7 +379,7 @@ font-size: 3rem; font-weight: 600; line-height: 4rem; - color: #ffffff; + color: var(--white); margin: 0; @media (max-width: 1300px) { @@ -414,7 +414,7 @@ gap: 20px; span { - color: #ffffff; + color: var(--white); font-size: 1.5rem; font-weight: 500; line-height: 30px; @@ -445,7 +445,7 @@ a { border-radius: 4px; - color: #fff; + color: var(--white); font-size: 1rem; font-weight: 500; line-height: 20px; diff --git a/src/components/BlogPostPopupModal/index.tsx b/src/components/BlogPostPopupModal/index.tsx index de1910a4..a999959f 100644 --- a/src/components/BlogPostPopupModal/index.tsx +++ b/src/components/BlogPostPopupModal/index.tsx @@ -60,7 +60,7 @@ const dialogStyle = { 'display': 'grid', 'gridTemplateColumns': '0.6fr 0.4fr', 'padding': 0, - 'color': '#ffffff', + 'color': 'var(--white)', 'marginTop': '124px', 'maxHeight': 'calc(100% - 160px)', 'minHeight': '100px', diff --git a/src/components/BlogPostPopupModal/styles.module.less b/src/components/BlogPostPopupModal/styles.module.less index abd41d0e..25cd287f 100644 --- a/src/components/BlogPostPopupModal/styles.module.less +++ b/src/components/BlogPostPopupModal/styles.module.less @@ -49,7 +49,7 @@ align-items: center; justify-content: center; padding: 0 37px; - background-color: #ffffff; + background-color: var(--white); @media (max-width: 780px) { padding: 24px; @@ -73,7 +73,7 @@ } a { - color: #ffffff; + color: var(--white); background-color: #5072eb; padding: 16px 24px; width: 100%; @@ -115,7 +115,7 @@ color: var(--dark-blue); @media (max-width: 780px) { - color: #ffffff; + color: var(--white); } } } \ No newline at end of file diff --git a/src/components/BlogPostToc/styles.module.less b/src/components/BlogPostToc/styles.module.less index 4aecf14f..e21a60c2 100644 --- a/src/components/BlogPostToc/styles.module.less +++ b/src/components/BlogPostToc/styles.module.less @@ -1,5 +1,5 @@ .tableOfContents { - background: #fff; + background: var(--white); counter-reset: toc-counter; padding: 0 8px; diff --git a/src/components/Card/styles.module.less b/src/components/Card/styles.module.less index 30585163..108df13d 100644 --- a/src/components/Card/styles.module.less +++ b/src/components/Card/styles.module.less @@ -44,6 +44,6 @@ h3, p { - color: #fff; + color: var(--white); } } \ No newline at end of file diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx index ade434c0..29b558eb 100644 --- a/src/components/Carousel/index.tsx +++ b/src/components/Carousel/index.tsx @@ -39,7 +39,7 @@ const Carousel = ({ hasArrow = false, dotColor, activeDotColor, - arrowColor = '#FFFFFF', + arrowColor = 'var(--white)', hasFullWidthSlide = false, hasMultipleItemsSlide, ...rest diff --git a/src/components/Carousel/styles.module.less b/src/components/Carousel/styles.module.less index 6edd5ac9..4830ddb3 100644 --- a/src/components/Carousel/styles.module.less +++ b/src/components/Carousel/styles.module.less @@ -81,8 +81,8 @@ justify-content: center; border: 1px solid; border-radius: 50%; - background-color: #fff; - color: #fff; + background-color: var(--white); + color: var(--white); border-color: var(--grey); } diff --git a/src/components/Container/styles.module.less b/src/components/Container/styles.module.less index 860f7dc2..daf3608f 100644 --- a/src/components/Container/styles.module.less +++ b/src/components/Container/styles.module.less @@ -46,6 +46,6 @@ .lightText { h1, h2, p { - color: #fff; + color: var(--white); } } diff --git a/src/components/CopyToClipboardButton/styles.module.less b/src/components/CopyToClipboardButton/styles.module.less index 9f7d4b29..4e5da947 100644 --- a/src/components/CopyToClipboardButton/styles.module.less +++ b/src/components/CopyToClipboardButton/styles.module.less @@ -12,7 +12,7 @@ transition: background-color, border 300ms ease-in-out; - background-color: #FFFFFF; + background-color: var(--white); border-color: var(--border-color); &:hover { diff --git a/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less b/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less index b63660a8..0f2f7955 100644 --- a/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less +++ b/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less @@ -107,7 +107,7 @@ span { background-color: @primaryTagColor; - color: #FFFFFF; + color: var(--white); font-size: 0.875rem; font-weight: 700; padding: 4px 12px; diff --git a/src/components/DeploymentOptionsPage/Hero/styles.module.less b/src/components/DeploymentOptionsPage/Hero/styles.module.less index dd399057..b71cad22 100644 --- a/src/components/DeploymentOptionsPage/Hero/styles.module.less +++ b/src/components/DeploymentOptionsPage/Hero/styles.module.less @@ -38,7 +38,7 @@ } h1 { - color: #fff; + color: var(--white); } @media (min-width: 1650px) { diff --git a/src/components/DiagramConnectors/styles.module.less b/src/components/DiagramConnectors/styles.module.less index 8f8e6bbb..a6498638 100644 --- a/src/components/DiagramConnectors/styles.module.less +++ b/src/components/DiagramConnectors/styles.module.less @@ -80,7 +80,7 @@ } .logoWrapper { - background-color: #ffffff; + background-color: var(--white); border: 1px solid var(--border-color); border-radius: 12%; display: flex; diff --git a/src/components/EtlToolsPage/Hero/styles.module.less b/src/components/EtlToolsPage/Hero/styles.module.less index 26c660f9..a8d03147 100644 --- a/src/components/EtlToolsPage/Hero/styles.module.less +++ b/src/components/EtlToolsPage/Hero/styles.module.less @@ -1,6 +1,6 @@ .container { h1 { - color: #fff; + color: var(--white); } } diff --git a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less index 8d4fc96f..cf869442 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less +++ b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less @@ -50,7 +50,7 @@ display: flex; align-items: center; justify-content: center; - background-color: #fff; + background-color: var(--white); border: 1px solid #D7DCE580; border-radius: 16px; padding: 16px; diff --git a/src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/styles.module.less index bc11f93a..52b400ea 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/styles.module.less +++ b/src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/styles.module.less @@ -18,7 +18,7 @@ align-items: center; justify-content: center; border: 1px solid #D7DCE580; - background-color: #FFF; + background-color: var(--white); border-radius: 16px; padding: 16px; width: 64px; diff --git a/src/components/FlowDemoVideo/styles.module.less b/src/components/FlowDemoVideo/styles.module.less index 10573701..b89e93e6 100644 --- a/src/components/FlowDemoVideo/styles.module.less +++ b/src/components/FlowDemoVideo/styles.module.less @@ -22,7 +22,7 @@ flex-direction: column; align-items: center; gap: 32px; - color: #ffffff; + color: var(--white); padding: 0 60px; text-align: center; diff --git a/src/components/Footer/styles.module.less b/src/components/Footer/styles.module.less index e767048b..ee214e54 100644 --- a/src/components/Footer/styles.module.less +++ b/src/components/Footer/styles.module.less @@ -29,7 +29,7 @@ } .globalFooterTitle { - color: #ffffff; + color: var(--white); font-size: 2rem; line-height: 33px; font-weight: 600; @@ -64,7 +64,7 @@ } .globalFooterSubtextTitle { - color: #ffffff; + color: var(--white); font-weight: 700; font-size: 1.125rem; margin: 0 0 12px 0; diff --git a/src/components/HTMLTooltip/index.tsx b/src/components/HTMLTooltip/index.tsx index 829e1425..353c6b5a 100644 --- a/src/components/HTMLTooltip/index.tsx +++ b/src/components/HTMLTooltip/index.tsx @@ -46,7 +46,7 @@ const HTMLTooltip = styled( )( ({ theme, - backgroundColor = '#ffffff', + backgroundColor = 'var(--white)', color = 'var(--dark-blue)', maxWidth = 232, fontSize = 16, diff --git a/src/components/HeaderNavbar/CardItem/styles.module.less b/src/components/HeaderNavbar/CardItem/styles.module.less index 58e002d1..92c3b84e 100644 --- a/src/components/HeaderNavbar/CardItem/styles.module.less +++ b/src/components/HeaderNavbar/CardItem/styles.module.less @@ -1,4 +1,4 @@ -@textColor: #fff; +@textColor: var(--white); .cardItem { display: flex; diff --git a/src/components/HeaderNavbar/styles.module.less b/src/components/HeaderNavbar/styles.module.less index 52506e38..80dddb94 100644 --- a/src/components/HeaderNavbar/styles.module.less +++ b/src/components/HeaderNavbar/styles.module.less @@ -49,7 +49,7 @@ } .seeAllButton { - color: #fff; + color: var(--white); background-color: transparent; border: none; font-size: 0.875rem; diff --git a/src/components/HeroSectionDetails/styles.module.less b/src/components/HeroSectionDetails/styles.module.less index f3a950df..72f6b71e 100644 --- a/src/components/HeroSectionDetails/styles.module.less +++ b/src/components/HeroSectionDetails/styles.module.less @@ -8,7 +8,7 @@ p { margin-top: 24px; font-size: 1.25rem; - color: #fff; + color: var(--white); margin: 0 0 8px 0; @media (max-width: 768px) { diff --git a/src/components/Homepage/CaseStudies/Card/styles.module.less b/src/components/Homepage/CaseStudies/Card/styles.module.less index 74e913bd..9bd1e165 100644 --- a/src/components/Homepage/CaseStudies/Card/styles.module.less +++ b/src/components/Homepage/CaseStudies/Card/styles.module.less @@ -21,7 +21,7 @@ font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #ffffff; + color: var(--white); margin: 0; text-align: center; @@ -37,12 +37,12 @@ a { width: 100%; background-color: transparent; - color: #ffffff; + color: var(--white); } } .caseStudyLogoWrapper { - background-color: #fff; + background-color: var(--white); display: flex; align-items: center; justify-content: center; diff --git a/src/components/Homepage/Hero/index.tsx b/src/components/Homepage/Hero/index.tsx index 1d1a3b2e..fe72d0d2 100644 --- a/src/components/Homepage/Hero/index.tsx +++ b/src/components/Homepage/Hero/index.tsx @@ -16,7 +16,7 @@ import { metricCardsList, } from './styles.module.less'; -const metricIconColor = '#FFFFFF'; +const metricIconColor = 'var(--white)'; const Hero = () => { return ( diff --git a/src/components/Homepage/styles.module.less b/src/components/Homepage/styles.module.less index 968bfdb2..bc564bd0 100644 --- a/src/components/Homepage/styles.module.less +++ b/src/components/Homepage/styles.module.less @@ -14,7 +14,7 @@ margin: 0; span { - color: #ffffff; + color: var(--white); } } @@ -22,7 +22,7 @@ font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #ffffff; + color: var(--white); margin: 0; max-width: 720px; text-align: center; diff --git a/src/components/Integration/EstuaryFlowVideo/styles.module.less b/src/components/Integration/EstuaryFlowVideo/styles.module.less index 014e62e9..d848ee69 100644 --- a/src/components/Integration/EstuaryFlowVideo/styles.module.less +++ b/src/components/Integration/EstuaryFlowVideo/styles.module.less @@ -17,7 +17,7 @@ text-transform: uppercase; margin: 0; - color: #ffffff; + color: var(--white); span { color: #5072EB; @@ -36,7 +36,7 @@ } .description { - color: #ffffff; + color: var(--white); font-size: 1.25rem; font-weight: 400; line-height: 30px; diff --git a/src/components/Integration/Hero/index.tsx b/src/components/Integration/Hero/index.tsx index 626091f3..5851c471 100644 --- a/src/components/Integration/Hero/index.tsx +++ b/src/components/Integration/Hero/index.tsx @@ -30,7 +30,7 @@ import { semiCircleRightSide, } from './styles.module.less'; -const metricIconColor = '#FFFFFF'; +const metricIconColor = 'var(--white)'; export interface HeroProps { sourceConnector: Connector; diff --git a/src/components/Integration/Hero/styles.module.less b/src/components/Integration/Hero/styles.module.less index aafd7103..e270a69a 100644 --- a/src/components/Integration/Hero/styles.module.less +++ b/src/components/Integration/Hero/styles.module.less @@ -46,7 +46,7 @@ } h1 { - color: #fff; + color: var(--white); margin: 28px 0 36px 0; } } @@ -381,7 +381,7 @@ } .filledWhiteCircle { - background-color: #ffffff; + background-color: var(--white); border: 1px solid var(--border-color); border-radius: 50%; padding: 16px; diff --git a/src/components/Integration/styles.module.less b/src/components/Integration/styles.module.less index 3fea3b0a..d9638c2b 100644 --- a/src/components/Integration/styles.module.less +++ b/src/components/Integration/styles.module.less @@ -138,7 +138,7 @@ max-width: 100%; max-height: 100%; border: 1px solid #B8C7F7; - background-color: #FFFFFF; + background-color: var(--white); display: flex; align-items: center; justify-content: center; @@ -147,14 +147,14 @@ .descriptionLight { .description; - color: #FFFFFF; + color: var(--white); p { - color: #FFFFFF; + color: var(--white); } a { - color: #FFFFFF; + color: var(--white); &:hover { color: #FFFFFFcc; @@ -211,7 +211,7 @@ .sectionTitleLight { .sectionTitle; - color: #FFFFFF; + color: var(--white); } .titleAndImages { diff --git a/src/components/Layout/ReleaseBanner/index.tsx b/src/components/Layout/ReleaseBanner/index.tsx index 0bbedbc3..e55d3ef3 100644 --- a/src/components/Layout/ReleaseBanner/index.tsx +++ b/src/components/Layout/ReleaseBanner/index.tsx @@ -26,7 +26,7 @@ const ReleaseBanner = ({ theme = 'dark' }) => { Private deployments are now live! Explore how Estuary Flow can fit into your environment.

    - +
    diff --git a/src/components/LinksAndButtons/styles.module.less b/src/components/LinksAndButtons/styles.module.less index ba6278c0..3861b43b 100644 --- a/src/components/LinksAndButtons/styles.module.less +++ b/src/components/LinksAndButtons/styles.module.less @@ -1,6 +1,6 @@ @primaryColor: #5072eb; @hoverColor: #625eff; -@lightColor: #fff; +@lightColor: var(--white); @disabledColor: var(--border-color); @secondaryColor: #fdfdfe; diff --git a/src/components/MainConnectors/index.tsx b/src/components/MainConnectors/index.tsx index 47855f39..55f6adb0 100644 --- a/src/components/MainConnectors/index.tsx +++ b/src/components/MainConnectors/index.tsx @@ -17,7 +17,7 @@ type MainConnectorsProps = { const MainConnectors = ({ isLightTheme = false }: MainConnectorsProps) => { const linkClasses = clsx(link, isLightTheme && hasLightBackgroundColor); - const svgLogoColor = isLightTheme ? 'var(--dark-blue)' : '#ffffff'; + const svgLogoColor = isLightTheme ? 'var(--dark-blue)' : 'var(--white)'; return (
      diff --git a/src/components/MainConnectors/styles.module.less b/src/components/MainConnectors/styles.module.less index 819be9a6..fc073dd8 100644 --- a/src/components/MainConnectors/styles.module.less +++ b/src/components/MainConnectors/styles.module.less @@ -61,5 +61,5 @@ } .hasLightBackgroundColor { - background-color: #ffffff; + background-color: var(--white); } \ No newline at end of file diff --git a/src/components/MetricCard/styles.module.less b/src/components/MetricCard/styles.module.less index 30cf6c19..6f19ebf4 100644 --- a/src/components/MetricCard/styles.module.less +++ b/src/components/MetricCard/styles.module.less @@ -60,7 +60,7 @@ } .metricLabel { - color: #ffffff; + color: var(--white); font-size: 1.25rem; font-weight: 400; line-height: 30px; diff --git a/src/components/NewsletterSignupForm/index.tsx b/src/components/NewsletterSignupForm/index.tsx index 8e2801da..11b66cfa 100644 --- a/src/components/NewsletterSignupForm/index.tsx +++ b/src/components/NewsletterSignupForm/index.tsx @@ -62,7 +62,7 @@ const NewsletterSignupForm = ({ /> {isSubmitted ? ( - + ) : ( buttonTitle )} diff --git a/src/components/PartnersPage/Benefits/styles.module.less b/src/components/PartnersPage/Benefits/styles.module.less index d7444833..3b825e90 100644 --- a/src/components/PartnersPage/Benefits/styles.module.less +++ b/src/components/PartnersPage/Benefits/styles.module.less @@ -1,6 +1,6 @@ .container { h2 { - color: #fff; + color: var(--white); font-size: 2.5rem; font-weight: 600; line-height: 48px; diff --git a/src/components/PartnersPage/PartnerProgramDetails/styles.module.less b/src/components/PartnersPage/PartnerProgramDetails/styles.module.less index cb3ba166..8fb70c3a 100644 --- a/src/components/PartnersPage/PartnerProgramDetails/styles.module.less +++ b/src/components/PartnersPage/PartnerProgramDetails/styles.module.less @@ -136,7 +136,7 @@ h3, p { - color: #fff; + color: var(--white); } } @@ -148,7 +148,7 @@ } span { - color: #fff; + color: var(--white); } } } diff --git a/src/components/PricingCalculator/index.tsx b/src/components/PricingCalculator/index.tsx index 0be2666d..6059485f 100644 --- a/src/components/PricingCalculator/index.tsx +++ b/src/components/PricingCalculator/index.tsx @@ -239,7 +239,7 @@ export const PricingCalculator = ({ disabled={selectedConnectors === 2} aria-label={`decrease ${inputLabel}`} > - + - + diff --git a/src/components/PricingCalculator/styles.module.less b/src/components/PricingCalculator/styles.module.less index 53b0f639..723a77c5 100644 --- a/src/components/PricingCalculator/styles.module.less +++ b/src/components/PricingCalculator/styles.module.less @@ -5,7 +5,7 @@ border: 1px solid #d5ddf8; border-radius: 16px; padding: 28px; - background-color: #fff; + background-color: var(--white); min-height: 697px; } diff --git a/src/components/ProductPage/DeliverRealTimeData/index.tsx b/src/components/ProductPage/DeliverRealTimeData/index.tsx index 7394d4a2..26c57861 100644 --- a/src/components/ProductPage/DeliverRealTimeData/index.tsx +++ b/src/components/ProductPage/DeliverRealTimeData/index.tsx @@ -55,7 +55,7 @@ const DeliverRealTimeData = () => {
      - +

      7+GB/sec

      diff --git a/src/components/ProductPage/DeliverRealTimeData/styles.module.less b/src/components/ProductPage/DeliverRealTimeData/styles.module.less index 5b997913..776facd4 100644 --- a/src/components/ProductPage/DeliverRealTimeData/styles.module.less +++ b/src/components/ProductPage/DeliverRealTimeData/styles.module.less @@ -60,7 +60,7 @@ h3, p { - color: #ffffff; + color: var(--white); } } diff --git a/src/components/ProductPage/DontMissAThing/styles.module.less b/src/components/ProductPage/DontMissAThing/styles.module.less index 950c7c71..50536984 100644 --- a/src/components/ProductPage/DontMissAThing/styles.module.less +++ b/src/components/ProductPage/DontMissAThing/styles.module.less @@ -9,7 +9,7 @@ font-weight: 600; line-height: 48px; margin: 0; - color: #ffffff; + color: var(--white); @media (max-width: 768px) { font-size: 2rem; @@ -23,7 +23,7 @@ font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #ffffff; + color: var(--white); margin: 0; @media (max-width: 768px) { @@ -33,7 +33,7 @@ p { margin: 0; - color: #ffffff; + color: var(--white); &>a { color: #5072eb; diff --git a/src/components/ProductPage/Hero/Card/index.tsx b/src/components/ProductPage/Hero/Card/index.tsx index babe467b..fe6ec0ca 100644 --- a/src/components/ProductPage/Hero/Card/index.tsx +++ b/src/components/ProductPage/Hero/Card/index.tsx @@ -39,7 +39,7 @@ const Card = ({

      {description}

      - +
      ); diff --git a/src/components/ProductPage/Hero/Card/styles.module.less b/src/components/ProductPage/Hero/Card/styles.module.less index 3c0fb86a..1522a217 100644 --- a/src/components/ProductPage/Hero/Card/styles.module.less +++ b/src/components/ProductPage/Hero/Card/styles.module.less @@ -3,7 +3,7 @@ align-items: center; width: 100%; background-color: #ffffff05; - color: #ffffff; + color: var(--white); padding: 16px; border: 1px solid #5072eb33; border-radius: 24px; @@ -96,7 +96,7 @@ font-size: 1.25rem; line-height: 24px; margin: 0; - color: #ffffff; + color: var(--white); @media (max-width: 1160px) { font-size: 1rem; @@ -112,7 +112,7 @@ p { font-size: 1rem; line-height: 30px; margin: 0; - color: #ffffff; + color: var(--white); } } diff --git a/src/components/ProductPage/Hero/index.tsx b/src/components/ProductPage/Hero/index.tsx index 328c1f77..bcaf0962 100644 --- a/src/components/ProductPage/Hero/index.tsx +++ b/src/components/ProductPage/Hero/index.tsx @@ -34,7 +34,7 @@ const Hero = () => { description="Learn how to build a pipeline in minutes." isActive href={webinarsUrl} - icon={} + icon={} /> h3 { font-size: 1.5rem; diff --git a/src/components/ProductPage/KeyFeatures/KeyFeature/styles.module.less b/src/components/ProductPage/KeyFeatures/KeyFeature/styles.module.less index ba876840..3eb8f624 100644 --- a/src/components/ProductPage/KeyFeatures/KeyFeature/styles.module.less +++ b/src/components/ProductPage/KeyFeatures/KeyFeature/styles.module.less @@ -1,7 +1,7 @@ .descriptionWrapper { & > p, li { - color: #ffffff; + color: var(--white); max-width: 252px; height: 100%; font-size: 1rem; diff --git a/src/components/ProductPage/KeyFeatures/KeyFeatureContent/index.tsx b/src/components/ProductPage/KeyFeatures/KeyFeatureContent/index.tsx index b635e121..046dece1 100644 --- a/src/components/ProductPage/KeyFeatures/KeyFeatureContent/index.tsx +++ b/src/components/ProductPage/KeyFeatures/KeyFeatureContent/index.tsx @@ -79,7 +79,7 @@ const KeyFeatureContent = ({ onClick={handleAccordionOpen} expandIcon={
      - +
      } sx={accordionSummaryStyles} diff --git a/src/components/ProductPage/KeyFeatures/KeyFeatureContent/styles.module.less b/src/components/ProductPage/KeyFeatures/KeyFeatureContent/styles.module.less index f81d89bb..3a2f20d9 100644 --- a/src/components/ProductPage/KeyFeatures/KeyFeatureContent/styles.module.less +++ b/src/components/ProductPage/KeyFeatures/KeyFeatureContent/styles.module.less @@ -13,7 +13,7 @@ font-weight: 500; font-size: 1.5rem; line-height: 28.8px; - color: #ffffff; + color: var(--white); margin: 0; @media (min-width: 811px) { diff --git a/src/components/ProductPage/KeyFeatures/index.tsx b/src/components/ProductPage/KeyFeatures/index.tsx index 70edcf5a..e67fcd4f 100644 --- a/src/components/ProductPage/KeyFeatures/index.tsx +++ b/src/components/ProductPage/KeyFeatures/index.tsx @@ -18,7 +18,7 @@ import { const tooltipProps = { backgroundColor: '#091F38', - color: '#fff', + color: 'var(--white)', borderColor: '#A4B6F4', borderRadius: 36, padding: 20, diff --git a/src/components/ProductPage/KeyFeatures/styles.module.less b/src/components/ProductPage/KeyFeatures/styles.module.less index 5b24852b..89765aef 100644 --- a/src/components/ProductPage/KeyFeatures/styles.module.less +++ b/src/components/ProductPage/KeyFeatures/styles.module.less @@ -83,7 +83,7 @@ text-align: center; max-width: 900px; margin: 24px 0 0 0; - color: #ffffff; + color: var(--white); @media (max-width: 810px) { font-size: 1rem; diff --git a/src/components/ProductPage/Streaming/styles.module.less b/src/components/ProductPage/Streaming/styles.module.less index 65e6259a..8cce82be 100644 --- a/src/components/ProductPage/Streaming/styles.module.less +++ b/src/components/ProductPage/Streaming/styles.module.less @@ -1,3 +1,5 @@ +@whiteColor: var(--white); + .imageWrapper { position: relative; margin: auto; @@ -14,7 +16,7 @@ line-height: 48px; text-align: center; margin: 0; - color: #ffffff; + color: var(--white); @media (max-width: 810px) { font-size: 1.75rem; @@ -95,11 +97,11 @@ } .batchEltTitle { - color: #ffffff; + color: var(--white); } .streamingEtlDescription { - color: #ffffff; + color: var(--white); } .batchEltDescription { @@ -124,8 +126,8 @@ border: 2px solid transparent; background: linear-gradient(to bottom, #6ed5d6, #7284ff) border-box; mask: - linear-gradient(#fff 0 0) padding-box, - linear-gradient(#fff 0 0); + linear-gradient(@whiteColor 0 0) padding-box, + linear-gradient(@whiteColor 0 0); mask-composite: exclude; @media (max-width: 1280px) { diff --git a/src/components/ProductPage/TheSameData/styles.module.less b/src/components/ProductPage/TheSameData/styles.module.less index 77b744d4..8915e103 100644 --- a/src/components/ProductPage/TheSameData/styles.module.less +++ b/src/components/ProductPage/TheSameData/styles.module.less @@ -1,3 +1,5 @@ +@whiteColor: var(--white); + .textWrapper { display: flex; flex-direction: column; @@ -8,7 +10,7 @@ font-weight: 600; line-height: 48px; margin: 0; - color: #ffffff; + color: var(--white); max-width: 600px; @media (max-width: 810px) { @@ -32,7 +34,7 @@ font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #ffffff; + color: var(--white); margin: 0; @media (max-width: 810px) { @@ -70,7 +72,7 @@ margin-top: 49px; p { - color: #ffffff; + color: var(--white); margin: 32px 0 0 0; max-width: 397px; text-align: center; @@ -125,8 +127,8 @@ border: 2px solid transparent; background: linear-gradient(to bottom, #6ed5d6, #7284ff) border-box; mask: - linear-gradient(#fff 0 0) padding-box, - linear-gradient(#fff 0 0); + linear-gradient(@whiteColor 0 0) padding-box, + linear-gradient(@whiteColor 0 0); mask-composite: exclude; @media (max-width: 425px) { diff --git a/src/components/SidebarCta/styles.module.less b/src/components/SidebarCta/styles.module.less index 353dbbae..22b491ce 100644 --- a/src/components/SidebarCta/styles.module.less +++ b/src/components/SidebarCta/styles.module.less @@ -39,7 +39,7 @@ span { text-transform: uppercase; - color: #ffffff; + color: var(--white); font-size: 1.5rem; font-weight: 700; line-height: 36px; diff --git a/src/components/Signup/styles.module.less b/src/components/Signup/styles.module.less index fb567565..78d0242b 100644 --- a/src/components/Signup/styles.module.less +++ b/src/components/Signup/styles.module.less @@ -24,7 +24,7 @@ font-size: 56px; line-height: 68px; text-align: center; - color: #fff; + color: var(--white); margin-bottom: 40px; max-width: 800px; margin-left: auto; diff --git a/src/components/SocialLinks/styles.module.less b/src/components/SocialLinks/styles.module.less index a91f523d..cd1f8c0e 100644 --- a/src/components/SocialLinks/styles.module.less +++ b/src/components/SocialLinks/styles.module.less @@ -9,7 +9,7 @@ } .highlightedIconStyle { - background-color: #fff; + background-color: var(--white); padding: 12px; border: 1px solid var(--border-color); border-radius: 100%; diff --git a/src/components/SubscriptionBenefits/index.tsx b/src/components/SubscriptionBenefits/index.tsx index 87d1b278..788f9451 100644 --- a/src/components/SubscriptionBenefits/index.tsx +++ b/src/components/SubscriptionBenefits/index.tsx @@ -7,7 +7,7 @@ const SubscriptionBenefits = () => {
      • - +
        No credit card required @@ -15,7 +15,7 @@ const SubscriptionBenefits = () => {
      • - +
        30 days free trial diff --git a/src/components/SubscriptionBenefits/styles.module.less b/src/components/SubscriptionBenefits/styles.module.less index 2ee8d8e9..40e6f490 100644 --- a/src/components/SubscriptionBenefits/styles.module.less +++ b/src/components/SubscriptionBenefits/styles.module.less @@ -28,7 +28,7 @@ font-size: 0.75rem; line-height: 20px; font-weight: 500; - color: #fff; + color: var(--white); @media (min-width: 321px) { white-space: nowrap; diff --git a/src/components/Table/styles.module.less b/src/components/Table/styles.module.less index c7f5e146..8ba85320 100644 --- a/src/components/Table/styles.module.less +++ b/src/components/Table/styles.module.less @@ -63,7 +63,7 @@ } td { - background-color: #fff; + background-color: var(--white); border: none; border-top: 1px dashed #DCE3FB; padding: 12px; diff --git a/src/components/TakeATour/styles.module.less b/src/components/TakeATour/styles.module.less index 7131191c..7bbfd647 100644 --- a/src/components/TakeATour/styles.module.less +++ b/src/components/TakeATour/styles.module.less @@ -18,6 +18,6 @@ a { font-size: 12px; text-decoration-line: underline; - color: #fff; + color: var(--white); } } \ No newline at end of file diff --git a/src/components/TestimonialsCarousel/index.tsx b/src/components/TestimonialsCarousel/index.tsx index 0383f2f9..6445e837 100644 --- a/src/components/TestimonialsCarousel/index.tsx +++ b/src/components/TestimonialsCarousel/index.tsx @@ -60,7 +60,7 @@ const TestimonialsCarousel = ({ diff --git a/src/components/TestimonialsCarousel/styles.module.less b/src/components/TestimonialsCarousel/styles.module.less index fb7a4d06..a3690d50 100644 --- a/src/components/TestimonialsCarousel/styles.module.less +++ b/src/components/TestimonialsCarousel/styles.module.less @@ -25,7 +25,7 @@ font-size: 2rem; font-weight: 300; line-height: 44.8px; - color: #ffffff; + color: var(--white); margin: 24px 0 60px 0; text-align: center; diff --git a/src/components/VerticalList/styles.module.less b/src/components/VerticalList/styles.module.less index 2811221d..3c866764 100644 --- a/src/components/VerticalList/styles.module.less +++ b/src/components/VerticalList/styles.module.less @@ -26,7 +26,7 @@ .episodeLeft { max-width: 600px; width: 100%; - background: #ffffff; + background: var(--white); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; diff --git a/src/components/Why/styles.module.less b/src/components/Why/styles.module.less index 0f33977d..229f74c3 100644 --- a/src/components/Why/styles.module.less +++ b/src/components/Why/styles.module.less @@ -25,7 +25,7 @@ } .docLink { - color: #fff; + color: var(--white); text-align: center; font-size: 18px; font-style: normal; @@ -40,7 +40,7 @@ margin-right: auto; background: #5072eb; border-radius: 6px; - color: #fff; + color: var(--white); font-size: 18px; font-weight: 700; line-height: 20px; @@ -69,7 +69,7 @@ font-size: 17px; font-style: normal; font-weight: 600; - color: #fff; + color: var(--white); transition: all 0.25s linear; text-decoration: underline; } @@ -87,13 +87,13 @@ &.active, &:hover { - color: #fff; + color: var(--white); } } .sidebarLogo { h1 { - color: #fff; + color: var(--white); } } @@ -129,12 +129,12 @@ } .step0 { - background: #fff; + background: var(--white); margin-top: 8%; margin-bottom: 10.5%; .stepHeading { - color: #fff; + color: var(--white); text-align: center; font-size: 32px; font-style: normal; @@ -180,7 +180,7 @@ margin-right: auto; background: #5072eb; border-radius: 6px; - color: #fff; + color: var(--white); font-size: 18px; font-weight: 700; line-height: 20px; @@ -193,7 +193,7 @@ .stepSubheading { p { - color: #fff; + color: var(--white); font-size: 22px; font-style: normal; font-weight: 400; @@ -291,7 +291,7 @@ } .tooltipHeading { - color: #fff; + color: var(--white); font-size: 24px; font-style: normal; font-weight: 700; @@ -304,7 +304,7 @@ } .tooltipDescription { - color: #fff; + color: var(--white); font-size: 16px; font-style: normal; line-height: 22px; @@ -328,7 +328,7 @@ margin: 0; li { - color: #fff; + color: var(--white); font-size: 16px; font-style: normal; font-weight: 500; @@ -502,7 +502,7 @@ } .step7 { - background: #fff; + background: var(--white); margin-top: 8%; margin-bottom: 8%; @@ -529,7 +529,7 @@ } .stepHeading { - color: #fff; + color: var(--white); text-align: center; font-size: 32px; font-style: normal; @@ -556,7 +556,7 @@ margin-right: auto; li { - color: #fff; + color: var(--white); text-align: left; font-size: 25px; font-style: normal; @@ -601,7 +601,7 @@ margin-right: auto; background: #5072eb; border-radius: 6px; - color: #fff; + color: var(--white); font-size: 18px; font-weight: 700; line-height: 20px; @@ -616,7 +616,7 @@ } .compareLink { - color: #fff; + color: var(--white); text-align: center; font-size: 18px; font-style: normal; diff --git a/src/components/XvsYFilter/styles.module.less b/src/components/XvsYFilter/styles.module.less index 4e5bd044..a59ef694 100644 --- a/src/components/XvsYFilter/styles.module.less +++ b/src/components/XvsYFilter/styles.module.less @@ -34,7 +34,7 @@ .darkTheme { .connectorSelect { - background-color: #fff; + background-color: var(--white); } } diff --git a/src/components/styles.module.less b/src/components/styles.module.less index 81919c5d..0f13dbe8 100644 --- a/src/components/styles.module.less +++ b/src/components/styles.module.less @@ -2,7 +2,7 @@ display: flex; gap: 5px; align-items: center; - color: #fff; + color: var(--white); font-weight: 600; font-size: 1rem; align-self: center; @@ -49,7 +49,7 @@ font-style: normal; font-weight: 600; margin: 31px 0; - color: #fff; + color: var(--white); @media (min-width: 1280px) { font-size: 2rem; @@ -64,7 +64,7 @@ border-radius: 100%; min-width: 40px; height: 40px; - background-color: #FFFFFF; + background-color: var(--white); cursor: pointer; &:hover { diff --git a/src/globalStyles/buttons.module.less b/src/globalStyles/buttons.module.less index d16597c7..d6ccae3f 100644 --- a/src/globalStyles/buttons.module.less +++ b/src/globalStyles/buttons.module.less @@ -3,5 +3,5 @@ border: 2px solid #5072EB; border-radius: 4px; padding: 16px 24px; - color: #ffffff + color: var(--white); } \ No newline at end of file diff --git a/src/pages/about/styles.module.less b/src/pages/about/styles.module.less index 588886f5..5e69715f 100644 --- a/src/pages/about/styles.module.less +++ b/src/pages/about/styles.module.less @@ -137,7 +137,7 @@ } .sectionHeader { - color: #ffffff; + color: var(--white); margin-top: 12px; @media (max-width: 810px) { @@ -218,7 +218,7 @@ } .sectionThreeCard { - background-color: #ffffff; + background-color: var(--white); padding: 24px; margin: 12px; flex: 2 2 45%; @@ -249,13 +249,13 @@ .sectionFourCurrentOpenings { .sectionTopBottomPadding; - background-color: #ffffff; + background-color: var(--white); } .sectionFourCurrentOpeningsWrapper { .globalMaxWidth; - background-color: #ffffff; + background-color: var(--white); display: flex; flex-direction: column; margin-bottom: 100px; diff --git a/src/pages/podcasts/styles.module.less b/src/pages/podcasts/styles.module.less index 8dde841c..3ced1f6c 100644 --- a/src/pages/podcasts/styles.module.less +++ b/src/pages/podcasts/styles.module.less @@ -1,7 +1,7 @@ @import '../../globalStyles/sections.module.less'; .container { - background: #fff; + background: var(--white); } .hero { diff --git a/src/style.less b/src/style.less index a88f15d3..19adc432 100644 --- a/src/style.less +++ b/src/style.less @@ -34,6 +34,7 @@ --grey: #47506d; --light-grey: #f2f3f5; --border-color: #d7dce5; + --white: #fff; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } @@ -120,7 +121,7 @@ h1 { } span:nth-of-type(2n+1) { - color: #fff; + color: var(--white); } } diff --git a/src/templates/connector/ChangeData/components/Card/styles.module.less b/src/templates/connector/ChangeData/components/Card/styles.module.less index 9040864b..19f83acc 100644 --- a/src/templates/connector/ChangeData/components/Card/styles.module.less +++ b/src/templates/connector/ChangeData/components/Card/styles.module.less @@ -22,7 +22,7 @@ .containerImage { position: relative; padding: 10px; - background-color: #ffffff; + background-color: var(--white); border-radius: 100%; border: 1px solid var(--border-color); min-width: 56px; diff --git a/src/templates/connector/RealTime/style.module.less b/src/templates/connector/RealTime/style.module.less index 08ecc101..b6ea81a8 100644 --- a/src/templates/connector/RealTime/style.module.less +++ b/src/templates/connector/RealTime/style.module.less @@ -58,7 +58,7 @@ font-size: 36px; line-height: 43px; margin: 0; - color: #fff; + color: var(--white); span { color: #5072eb; diff --git a/src/templates/connector/styles.module.less b/src/templates/connector/styles.module.less index 11c440fd..5ed4255d 100644 --- a/src/templates/connector/styles.module.less +++ b/src/templates/connector/styles.module.less @@ -2,7 +2,7 @@ padding: 4%; border: 1px solid #5072eb80; border-radius: 8px; - background-color: #ffffff; + background-color: var(--white); display: flex; min-width: 24px; min-height: 24px; From 6304c85c42ba005f6854df20c9a74fc4d0a230e4 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 15:25:49 -0300 Subject: [PATCH 07/13] Add variable for blue color - replace primary color --- src/components/Advantages/Advantage/index.tsx | 2 +- src/components/Advantages/styles.module.less | 6 +++--- .../AuthorBlogPostCard/styles.module.less | 2 +- src/components/BlogBanner/styles.module.less | 2 +- src/components/BlogPost/index.tsx | 6 +++--- src/components/BlogPost/styles.module.less | 6 +++--- src/components/BlogPostCard/styles.module.less | 2 +- .../BlogPostPopupModal/styles.module.less | 6 +++--- src/components/Breadcrumbs/styles.module.less | 2 +- src/components/Card/Link.tsx | 4 ++-- src/components/Card/index.tsx | 2 +- src/components/CardsSection/styles.module.less | 2 +- src/components/Carousel/styles.module.less | 2 +- .../ListOfUpdates/styles.module.less | 2 +- src/components/Connectors/styles.module.less | 6 +++--- src/components/ContactUsForm/styles.module.less | 2 +- src/components/ContactUsPage/Address/index.tsx | 2 +- .../ContactUsPage/Address/styles.module.less | 2 +- .../DeploymentOptionDetails/styles.module.less | 2 +- .../DeploymentOptionDiagram/styles.module.less | 2 +- .../DeploymentOptions/KeyFeature/index.tsx | 2 +- src/components/DeploymentOptions/Tabs/index.tsx | 2 +- .../DeploymentOptions/styles.module.less | 2 +- .../ComparisonTable/styles.module.less | 2 +- .../DeploymentOptionsPage/Hero/styles.module.less | 2 +- .../DeploymentOptionsPage/styles.module.less | 2 +- .../DiagramDestinationConnectors/index.tsx | 8 +++++--- .../DiagramSourceConnectors/index.tsx | 11 +++++++---- .../DiagramConnectors/styles.module.less | 4 ++-- .../EtlToolsPage/LearnMoreArticles/Card/index.tsx | 2 +- .../ListOfComparisons/XvsYCard/styles.module.less | 4 ++-- .../EtlToolsPage/ListOfComparisons/index.tsx | 6 +++--- src/components/EtlToolsPage/styles.module.less | 2 +- .../IntroductoryDetails/styles.module.less | 2 +- .../EtlToolsXvsYPage/GettingStarted/index.tsx | 2 +- .../GettingStarted/styles.module.less | 2 +- src/components/EtlToolsXvsYPage/Hero/index.tsx | 2 +- src/components/HTMLTooltip/index.tsx | 2 +- src/components/Header/styles.module.less | 2 +- src/components/HeaderNavbar/Product/index.tsx | 5 ++++- src/components/HeaderNavbar/Resources/items.tsx | 8 ++++++-- src/components/Homepage/AutomateDataops/index.tsx | 2 +- .../Homepage/CaseStudies/styles.module.less | 2 +- .../Homepage/Do4xMoreWith25xLess/index.tsx | 2 +- .../Homepage/MoveAndTransform/styles.module.less | 2 +- src/components/Homepage/SeeHow/styles.module.less | 2 +- .../WhatPeopleAreSaying/styles.module.less | 2 +- src/components/Homepage/styles.module.less | 2 +- .../Integration/DataopsMadeSimple/index.tsx | 2 +- .../EstuaryFlowVideo/styles.module.less | 2 +- src/components/Integration/Hero/styles.module.less | 14 +++++++------- .../IncreaseProductivity4x/styles.module.less | 2 +- .../Integration/SeeHow/styles.module.less | 2 +- src/components/Integration/Spend25xLess/index.tsx | 2 +- .../Integration/Testimonials/styles.module.less | 2 +- src/components/Integration/styles.module.less | 8 ++++---- src/components/InternalLink/styles.module.less | 2 +- src/components/LinksAndButtons/styles.module.less | 2 +- src/components/NextStepsLink/index.tsx | 2 +- src/components/NextStepsLink/styles.module.less | 2 +- .../JoinPartnerProgram/styles.module.less | 2 +- .../ReferralIncentive/styles.module.less | 2 +- .../ResourcesAndGettingStarted/styles.module.less | 2 +- .../PricingCalculator/styles.module.less | 4 ++-- .../ChooseYourPlan/PlanCard/styles.module.less | 8 ++++---- .../PricingPage/Faq/FaqAccordion/index.tsx | 6 +++++- .../Faq/FaqAccordion/styles.module.less | 4 ++-- .../PricingCalculatorSection/styles.module.less | 2 +- .../Step/styles.module.less | 2 +- .../styles.module.less | 2 +- .../ProductPage/DeliverRealTimeData/index.tsx | 4 ++-- .../DeliverRealTimeData/styles.module.less | 6 +++--- .../ProductPage/DontMissAThing/styles.module.less | 2 +- .../ProductPage/Hero/Card/styles.module.less | 4 ++-- src/components/ProductPage/Hero/index.tsx | 2 +- .../HowEstuaryFlowCompares/styles.module.less | 2 +- .../HowItWorks/Hover/styles.module.less | 4 ++-- .../ProductPage/HowItWorks/styles.module.less | 4 ++-- .../IncreaseProductivity/styles.module.less | 2 +- .../ProductPage/KeyFeatures/styles.module.less | 2 +- src/components/ProductPage/ReadyToStart/index.tsx | 2 +- .../ProductPage/ReadyToStart/styles.module.less | 2 +- .../ProductPage/Streaming/styles.module.less | 4 ++-- .../ProductPage/TheSameData/styles.module.less | 2 +- src/components/SecurityCertificates/index.tsx | 2 +- .../ExplorePrivateDeployments/index.tsx | 2 +- src/components/SecurityPage/Map/styles.module.less | 2 +- src/components/SidebarCta/styles.module.less | 4 ++-- src/components/Signup/styles.module.less | 2 +- .../SubscriptionBenefits/styles.module.less | 2 +- src/components/Tabs/styles.module.less | 4 ++-- src/components/TakeATour/styles.module.less | 2 +- .../TestimonialsCarousel/styles.module.less | 2 +- src/components/Why/styles.module.less | 6 +++--- src/globalStyles/buttons.module.less | 2 +- src/style.less | 8 ++++---- src/templates/author/SectionOne/styles.module.less | 4 ++-- src/templates/author/SectionTwo/styles.module.less | 2 +- .../ChangeData/components/Card/styles.module.less | 2 +- src/templates/connector/ChangeData/index.tsx | 10 ++++++++-- .../connector/ChangeData/styles.module.less | 4 ++-- .../connector/Hero/Content/styles.module.less | 2 +- src/templates/connector/Hero/styles.module.less | 2 +- .../connector/Pipelines/styles.module.less | 2 +- src/templates/connector/RealTime/style.module.less | 2 +- 105 files changed, 179 insertions(+), 157 deletions(-) diff --git a/src/components/Advantages/Advantage/index.tsx b/src/components/Advantages/Advantage/index.tsx index 85d8f63f..b441f7eb 100644 --- a/src/components/Advantages/Advantage/index.tsx +++ b/src/components/Advantages/Advantage/index.tsx @@ -9,7 +9,7 @@ const Advantage = ({ title }: AdvantageProps) => { return (
      • - +

        {title}

        • diff --git a/src/components/Advantages/styles.module.less b/src/components/Advantages/styles.module.less index 9ff1f1ca..64474e5a 100644 --- a/src/components/Advantages/styles.module.less +++ b/src/components/Advantages/styles.module.less @@ -31,7 +31,7 @@ } &>span { - color: #5072eb; + color: var(--blue); } } @@ -72,11 +72,11 @@ } &>a { - color: #5072eb; + color: var(--blue); font-weight: 500; &:hover { - color: #5072eb; + color: var(--blue); text-underline-offset: 4px; text-decoration: underline; } diff --git a/src/components/AuthorBlogPostCard/styles.module.less b/src/components/AuthorBlogPostCard/styles.module.less index 8d7c3b5a..269e05a6 100644 --- a/src/components/AuthorBlogPostCard/styles.module.less +++ b/src/components/AuthorBlogPostCard/styles.module.less @@ -12,7 +12,7 @@ } &:hover { - border: 1px solid #5072eb; + border: 1px solid var(--blue); } svg { diff --git a/src/components/BlogBanner/styles.module.less b/src/components/BlogBanner/styles.module.less index ea488be5..b20376c4 100644 --- a/src/components/BlogBanner/styles.module.less +++ b/src/components/BlogBanner/styles.module.less @@ -36,7 +36,7 @@ } span { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/BlogPost/index.tsx b/src/components/BlogPost/index.tsx index aed51de2..cc49cacb 100644 --- a/src/components/BlogPost/index.tsx +++ b/src/components/BlogPost/index.tsx @@ -322,7 +322,7 @@ const BlogPost = ({
        @@ -332,7 +332,7 @@ const BlogPost = ({
        @@ -342,7 +342,7 @@ const BlogPost = ({
        diff --git a/src/components/BlogPost/styles.module.less b/src/components/BlogPost/styles.module.less index 0502d21b..76b30976 100644 --- a/src/components/BlogPost/styles.module.less +++ b/src/components/BlogPost/styles.module.less @@ -79,7 +79,7 @@ .blogsPostCardTags { background-color: #e9edfa; - color: #5072eb; + color: var(--blue); border-radius: 36px; padding: 4px 16px 4px 16px; font-weight: 500; @@ -275,7 +275,7 @@ .authorAvatarContainer { display: inline-block; padding: 4px; - border: 2px solid #5072eb; + border: 2px solid var(--blue); border-radius: 100%; margin-right: 20px; } @@ -455,7 +455,7 @@ } .pricingLink { - border: 2px solid #5072eb; + border: 2px solid var(--blue); padding: 16px 24px; @media (min-width: 1288px) { diff --git a/src/components/BlogPostCard/styles.module.less b/src/components/BlogPostCard/styles.module.less index 9d5dfa2b..e9da48e4 100644 --- a/src/components/BlogPostCard/styles.module.less +++ b/src/components/BlogPostCard/styles.module.less @@ -34,7 +34,7 @@ transition: var(--default-transition); &:hover { - border: 1px solid #5072eb; + border: 1px solid var(--blue); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } } diff --git a/src/components/BlogPostPopupModal/styles.module.less b/src/components/BlogPostPopupModal/styles.module.less index 25cd287f..f26f18b3 100644 --- a/src/components/BlogPostPopupModal/styles.module.less +++ b/src/components/BlogPostPopupModal/styles.module.less @@ -4,7 +4,7 @@ align-items: center; justify-content: center; padding-top: 54px; - background-color: #5072eb; + background-color: var(--blue); @media (max-width: 425px) { padding-bottom: 0; @@ -74,7 +74,7 @@ a { color: var(--white); - background-color: #5072eb; + background-color: var(--blue); padding: 16px 24px; width: 100%; border-radius: 4px; @@ -88,7 +88,7 @@ background-color: transparent; padding: 16px 24px; width: 100%; - border: 2px solid #5072eb; + border: 2px solid var(--blue); border-radius: 4px; cursor: pointer; } diff --git a/src/components/Breadcrumbs/styles.module.less b/src/components/Breadcrumbs/styles.module.less index 08c8ba98..17736470 100644 --- a/src/components/Breadcrumbs/styles.module.less +++ b/src/components/Breadcrumbs/styles.module.less @@ -42,7 +42,7 @@ } .crumbTitle { - color: #5072eb; + color: var(--blue); font-weight: 600; } diff --git a/src/components/Card/Link.tsx b/src/components/Card/Link.tsx index 19bbde70..1a9b87c9 100644 --- a/src/components/Card/Link.tsx +++ b/src/components/Card/Link.tsx @@ -13,12 +13,12 @@ const Link = ({ children, href, isExternal = false }: LinkProps) => isExternal ? ( {children} - + ) : ( {children} - + ); diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index edaabd0c..4c66a863 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -19,7 +19,7 @@ const Card = ({ }: CardProps) => (
        - +

        {title}

        {children}

        diff --git a/src/components/CardsSection/styles.module.less b/src/components/CardsSection/styles.module.less index 07b7ee0a..44161bd0 100644 --- a/src/components/CardsSection/styles.module.less +++ b/src/components/CardsSection/styles.module.less @@ -9,7 +9,7 @@ align-items: center; h2 { - color: #5072EB; + color: var(--blue); font-size: 2.5rem; font-weight: 600; text-align: center; diff --git a/src/components/Carousel/styles.module.less b/src/components/Carousel/styles.module.less index 4830ddb3..28a65329 100644 --- a/src/components/Carousel/styles.module.less +++ b/src/components/Carousel/styles.module.less @@ -2,7 +2,7 @@ max-width: 100vw; --slide-spacing: 1rem; --slide-size: 60%; - --active-color: #5072EB; + --active-color: var(--blue); } .threeItemsSlide { diff --git a/src/components/CompanyUpdatesPage/ListOfUpdates/styles.module.less b/src/components/CompanyUpdatesPage/ListOfUpdates/styles.module.less index c4a0bc19..0258e649 100644 --- a/src/components/CompanyUpdatesPage/ListOfUpdates/styles.module.less +++ b/src/components/CompanyUpdatesPage/ListOfUpdates/styles.module.less @@ -1,6 +1,6 @@ .container { h2 { - color: #5072eb; + color: var(--blue); text-align: center; @media (max-width: 768px) { diff --git a/src/components/Connectors/styles.module.less b/src/components/Connectors/styles.module.less index f08297d2..039fbc88 100644 --- a/src/components/Connectors/styles.module.less +++ b/src/components/Connectors/styles.module.less @@ -181,7 +181,7 @@ transition: var(--default-transition); &:hover { - border: 1px solid #5072eb; + border: 1px solid var(--blue); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } @@ -214,8 +214,8 @@ align-items: center; width: 186px; padding: 17px 10px; - background: #5072eb; - border: 1px solid #5072eb; + background: var(--blue); + border: 1px solid var(--blue); border-radius: 6px; font-weight: 500; font-size: 18px; diff --git a/src/components/ContactUsForm/styles.module.less b/src/components/ContactUsForm/styles.module.less index 6c7ac46d..4bb63555 100644 --- a/src/components/ContactUsForm/styles.module.less +++ b/src/components/ContactUsForm/styles.module.less @@ -43,7 +43,7 @@ } .redirectLink { - color: #5072eb; + color: var(--blue); &:hover { text-underline-offset: 4px; diff --git a/src/components/ContactUsPage/Address/index.tsx b/src/components/ContactUsPage/Address/index.tsx index 2a128b69..3fc7853d 100644 --- a/src/components/ContactUsPage/Address/index.tsx +++ b/src/components/ContactUsPage/Address/index.tsx @@ -24,7 +24,7 @@ const Address = () => {
        - +

        OUR OFFICE

        diff --git a/src/components/ContactUsPage/Address/styles.module.less b/src/components/ContactUsPage/Address/styles.module.less index 03d65cfd..09cb55ff 100644 --- a/src/components/ContactUsPage/Address/styles.module.less +++ b/src/components/ContactUsPage/Address/styles.module.less @@ -12,7 +12,7 @@ .title { font-size: 1.375rem; font-weight: 600; - color: #5072EB; + color: var(--blue); letter-spacing: 1px; margin: 28px 0 56px 0; } diff --git a/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less b/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less index 68ff6ee8..d455bf57 100644 --- a/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less +++ b/src/components/DeploymentOptions/DeploymentOptionDetails/styles.module.less @@ -35,7 +35,7 @@ } h4 { - color: #5072EB; + color: var(--blue); font-size: 1rem; } } \ No newline at end of file diff --git a/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less b/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less index 0f2f7955..376f6c86 100644 --- a/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less +++ b/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less @@ -1,5 +1,5 @@ @primaryTagColor: #6ED5D6; -@secondaryTagColor: #5072EB; +@secondaryTagColor: var(--blue); .container { display: grid; diff --git a/src/components/DeploymentOptions/KeyFeature/index.tsx b/src/components/DeploymentOptions/KeyFeature/index.tsx index 9830fa89..70ca1946 100644 --- a/src/components/DeploymentOptions/KeyFeature/index.tsx +++ b/src/components/DeploymentOptions/KeyFeature/index.tsx @@ -8,7 +8,7 @@ interface KeyFeatureProps { const KeyFeature = ({ title }: KeyFeatureProps) => { return (
      • - +

        {title}

        • ); diff --git a/src/components/DeploymentOptions/Tabs/index.tsx b/src/components/DeploymentOptions/Tabs/index.tsx index dd53a456..aff19440 100644 --- a/src/components/DeploymentOptions/Tabs/index.tsx +++ b/src/components/DeploymentOptions/Tabs/index.tsx @@ -3,7 +3,7 @@ import Tab from '@mui/material/Tab'; import TabList from '@mui/lab/TabList'; const tabStyling = { - 'color': '#5072EB', + 'color': 'var(--blue)', 'transition': 'var(--default-transition)', 'opacity': '0.75', 'textTransform': 'none', diff --git a/src/components/DeploymentOptions/styles.module.less b/src/components/DeploymentOptions/styles.module.less index 569c49d9..a8bb5dc9 100644 --- a/src/components/DeploymentOptions/styles.module.less +++ b/src/components/DeploymentOptions/styles.module.less @@ -1,7 +1,7 @@ @import '../../globalStyles/sections.module.less'; @primaryTagColor: #6ED5D6; -@secondaryTagColor: #5072EB; +@secondaryTagColor: var(--blue); .container { h2 { diff --git a/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less b/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less index 7834d130..be6d4aa8 100644 --- a/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less +++ b/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less @@ -2,7 +2,7 @@ h2 { font-size: 2.5rem; font-weight: 600; - color: #5072EB; + color: var(--blue); } @media(max-width: 768px) { diff --git a/src/components/DeploymentOptionsPage/Hero/styles.module.less b/src/components/DeploymentOptionsPage/Hero/styles.module.less index b71cad22..2d681d56 100644 --- a/src/components/DeploymentOptionsPage/Hero/styles.module.less +++ b/src/components/DeploymentOptionsPage/Hero/styles.module.less @@ -185,7 +185,7 @@ left: 30%; background-color: #152D5Bbb; - border-color: #5072EB; + border-color: var(--blue); @media (min-width: 1430px) { left: 168px; diff --git a/src/components/DeploymentOptionsPage/styles.module.less b/src/components/DeploymentOptionsPage/styles.module.less index cde20587..70f3d87d 100644 --- a/src/components/DeploymentOptionsPage/styles.module.less +++ b/src/components/DeploymentOptionsPage/styles.module.less @@ -6,7 +6,7 @@ } h3 { - color: #5072EB; + color: var(--blue); font-size: 1rem; } diff --git a/src/components/DiagramConnectors/DiagramDestinationConnectors/index.tsx b/src/components/DiagramConnectors/DiagramDestinationConnectors/index.tsx index 369060d8..d219e547 100644 --- a/src/components/DiagramConnectors/DiagramDestinationConnectors/index.tsx +++ b/src/components/DiagramConnectors/DiagramDestinationConnectors/index.tsx @@ -32,7 +32,9 @@ const DiagramDestinationConnectors = ({ title="Analytics" description="Load data at any speed into data warehouses and lakes from real-time to hour+ intervals as in-place updates and hard deletes or append-only change data history." hasTooltips={hasTooltips} - icon={} + icon={ + + } />
        @@ -73,7 +75,7 @@ const DiagramDestinationConnectors = ({ title="Ops" description="Stream in real-time to SQL or NoSQL, OLAP, time series, or ElasticSearch databases." hasTooltips={hasTooltips} - icon={} + icon={} />
        @@ -114,7 +116,7 @@ const DiagramDestinationConnectors = ({ title="AI" description="Build AI pipelines that load vector databases for RAG and invoke chabots like ChatGPT or use other LLM models in real-time." hasTooltips={hasTooltips} - icon={} + icon={} />
        diff --git a/src/components/DiagramConnectors/DiagramSourceConnectors/index.tsx b/src/components/DiagramConnectors/DiagramSourceConnectors/index.tsx index cc3eb050..851a50dd 100644 --- a/src/components/DiagramConnectors/DiagramSourceConnectors/index.tsx +++ b/src/components/DiagramConnectors/DiagramSourceConnectors/index.tsx @@ -69,7 +69,10 @@ const DiagramSourceConnectors = ({ real-time data stream." hasTooltips={hasTooltips} icon={ - + } />
        @@ -112,7 +115,7 @@ const DiagramSourceConnectors = ({ description="Real-time support for messaging, APIs, WebSockets as streaming data." hasTooltips={hasTooltips} - icon={} + icon={} />
        @@ -154,7 +157,7 @@ const DiagramSourceConnectors = ({ description="Extract exactly once from files, apps, and other sources as a stream." hasTooltips={hasTooltips} - icon={} + icon={} />
        @@ -197,7 +200,7 @@ const DiagramSourceConnectors = ({ SaaS vendors with native connectors built for speed and scale." hasTooltips={hasTooltips} - icon={} + icon={} />
        diff --git a/src/components/DiagramConnectors/styles.module.less b/src/components/DiagramConnectors/styles.module.less index a6498638..9dd43a08 100644 --- a/src/components/DiagramConnectors/styles.module.less +++ b/src/components/DiagramConnectors/styles.module.less @@ -123,7 +123,7 @@ & > h4 { text-align: center; - color: #5072eb; + color: var(--blue); font-size: 0.75rem; font-weight: 600; line-height: 120%; @@ -158,6 +158,6 @@ .withTooltips { &:hover { - border-color: #5072eb; + border-color: var(--blue); } } diff --git a/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx b/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx index d4f948d1..74c1ae14 100644 --- a/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx +++ b/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx @@ -12,7 +12,7 @@ const Card = ({ title, buttonHref }: CardProps) => { return (
        - +

        {title}

        diff --git a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less index cf869442..b54f0183 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less +++ b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less @@ -15,11 +15,11 @@ cursor: pointer; &:hover { - border-color: #5072EB; + border-color: var(--blue); background-color: #E6EBFC; .divider { - background-color: #5072EB; + background-color: var(--blue); } } diff --git a/src/components/EtlToolsPage/ListOfComparisons/index.tsx b/src/components/EtlToolsPage/ListOfComparisons/index.tsx index 5a9d210e..adef1410 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/index.tsx +++ b/src/components/EtlToolsPage/ListOfComparisons/index.tsx @@ -36,12 +36,12 @@ const tabStyling = { '&:active': { backgroundColor: '#E3E8FB', - border: '2px solid #5072EB', + border: '2px solid var(--blue);', }, '&.Mui-selected': { backgroundColor: '#5072EB26', - border: '2px solid #5072EB', + border: '2px solid var(--blue);', color: 'var(--dark-blue)', }, }; @@ -103,7 +103,7 @@ const ListOfComparisons = ({ estuaryVendor, vendors }: SectionThreeProps) => { {selectedVendorId === id ? ( ) : null}
        diff --git a/src/components/EtlToolsPage/styles.module.less b/src/components/EtlToolsPage/styles.module.less index f5564332..ad4a53c3 100644 --- a/src/components/EtlToolsPage/styles.module.less +++ b/src/components/EtlToolsPage/styles.module.less @@ -1,5 +1,5 @@ .sectionTitle { - color: #5072EB; + color: var(--blue); text-transform: uppercase; font-size: 2.5rem; font-weight: 600; diff --git a/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less index 3d4f264c..2b755563 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less +++ b/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less @@ -24,7 +24,7 @@ } strong { - color: #5072EB; + color: var(--blue); font-weight: 600; font-size: 1.25rem; line-height: 30px; diff --git a/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx b/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx index eca2d72c..ce99b415 100644 --- a/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx +++ b/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx @@ -15,7 +15,7 @@ import Container from '../../Container'; import { container } from './styles.module.less'; import FeatureCard from './FeatureCard'; -const iconColor = '#5072EB'; +const iconColor = 'var(--blue)'; const iconSize = 28; const GettingStarted = () => { diff --git a/src/components/EtlToolsXvsYPage/GettingStarted/styles.module.less b/src/components/EtlToolsXvsYPage/GettingStarted/styles.module.less index 51b47099..0e4261f0 100644 --- a/src/components/EtlToolsXvsYPage/GettingStarted/styles.module.less +++ b/src/components/EtlToolsXvsYPage/GettingStarted/styles.module.less @@ -4,7 +4,7 @@ h2 { font-size: 2.5rem; font-weight: 600; - color: #5072EB; + color: var(--blue); text-align: center; } diff --git a/src/components/EtlToolsXvsYPage/Hero/index.tsx b/src/components/EtlToolsXvsYPage/Hero/index.tsx index 048dd844..b221a24e 100644 --- a/src/components/EtlToolsXvsYPage/Hero/index.tsx +++ b/src/components/EtlToolsXvsYPage/Hero/index.tsx @@ -50,7 +50,7 @@ const Hero = ({ vendors, xVendor, yVendor }: SectionOneProps) => { /> View all comparisons - + } diff --git a/src/components/HTMLTooltip/index.tsx b/src/components/HTMLTooltip/index.tsx index 353c6b5a..d5be4a24 100644 --- a/src/components/HTMLTooltip/index.tsx +++ b/src/components/HTMLTooltip/index.tsx @@ -50,7 +50,7 @@ const HTMLTooltip = styled( color = 'var(--dark-blue)', maxWidth = 232, fontSize = 16, - borderColor = '#5072EB', + borderColor = 'var(--blue)', borderRadius = 8, padding = 8, }) => ({ diff --git a/src/components/Header/styles.module.less b/src/components/Header/styles.module.less index 5b455539..eebb44aa 100644 --- a/src/components/Header/styles.module.less +++ b/src/components/Header/styles.module.less @@ -123,7 +123,7 @@ width: 40px; height: 40px; border-radius: 4px; - background-color: #5072eb; + background-color: var(--blue); border: none; margin: auto 0 auto 20px; padding-top: 4px; diff --git a/src/components/HeaderNavbar/Product/index.tsx b/src/components/HeaderNavbar/Product/index.tsx index de81da64..a0fa0a68 100644 --- a/src/components/HeaderNavbar/Product/index.tsx +++ b/src/components/HeaderNavbar/Product/index.tsx @@ -58,7 +58,10 @@ const HeaderNavbarProduct = ({ active, setActive }) => { contentFooterLink={ View all comparisons - + } /> diff --git a/src/components/HeaderNavbar/Resources/items.tsx b/src/components/HeaderNavbar/Resources/items.tsx index 97f0f79b..8e277d85 100644 --- a/src/components/HeaderNavbar/Resources/items.tsx +++ b/src/components/HeaderNavbar/Resources/items.tsx @@ -22,7 +22,7 @@ export const read = [ { name: 'Docs & Guides', to: 'https://docs.estuary.dev', - Image: () => , + Image: () => , }, { name: 'About us', @@ -86,7 +86,11 @@ export const partners = [ to: '/partners/', description: 'Browse our directory of partners', Image: () => ( - + ), }, ]; diff --git a/src/components/Homepage/AutomateDataops/index.tsx b/src/components/Homepage/AutomateDataops/index.tsx index 9db0469f..bf07d819 100644 --- a/src/components/Homepage/AutomateDataops/index.tsx +++ b/src/components/Homepage/AutomateDataops/index.tsx @@ -10,7 +10,7 @@ const AutomateDataops = () => { return (
        } + icon={} title={ <> AUTOMATE DATAOPS diff --git a/src/components/Homepage/CaseStudies/styles.module.less b/src/components/Homepage/CaseStudies/styles.module.less index 7c74fb91..e30d7e5d 100644 --- a/src/components/Homepage/CaseStudies/styles.module.less +++ b/src/components/Homepage/CaseStudies/styles.module.less @@ -18,6 +18,6 @@ font-size: 2.5rem; font-weight: 600; line-height: 72px; - color: #5072eb; + color: var(--blue); text-transform: uppercase; } diff --git a/src/components/Homepage/Do4xMoreWith25xLess/index.tsx b/src/components/Homepage/Do4xMoreWith25xLess/index.tsx index 63bbb9b2..3a3c3d98 100644 --- a/src/components/Homepage/Do4xMoreWith25xLess/index.tsx +++ b/src/components/Homepage/Do4xMoreWith25xLess/index.tsx @@ -9,7 +9,7 @@ const Do4xMoreWith25xLess = () => { return (
        } + icon={} title={ <> DO 4X MORE WITH 2-5X LESS diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less index b00ca8e9..af45cfa6 100644 --- a/src/components/Homepage/MoveAndTransform/styles.module.less +++ b/src/components/Homepage/MoveAndTransform/styles.module.less @@ -35,7 +35,7 @@ } & span:nth-child(odd) { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/Homepage/SeeHow/styles.module.less b/src/components/Homepage/SeeHow/styles.module.less index 8e4ba80e..c1ab163b 100644 --- a/src/components/Homepage/SeeHow/styles.module.less +++ b/src/components/Homepage/SeeHow/styles.module.less @@ -14,7 +14,7 @@ color: var(--grey); & span:nth-child(odd) { - color: #5072eb; + color: var(--blue); } @media (max-width: 768px) { diff --git a/src/components/Homepage/WhatPeopleAreSaying/styles.module.less b/src/components/Homepage/WhatPeopleAreSaying/styles.module.less index 9f9e0659..3b25a97d 100644 --- a/src/components/Homepage/WhatPeopleAreSaying/styles.module.less +++ b/src/components/Homepage/WhatPeopleAreSaying/styles.module.less @@ -1,7 +1,7 @@ .title { font-size: 2.5rem; font-weight: 600; - color: #5072eb; + color: var(--blue); text-align: center; text-transform: uppercase; diff --git a/src/components/Homepage/styles.module.less b/src/components/Homepage/styles.module.less index bc564bd0..2f1102cb 100644 --- a/src/components/Homepage/styles.module.less +++ b/src/components/Homepage/styles.module.less @@ -9,7 +9,7 @@ font-size: 2.5rem; font-weight: 600; line-height: 48px; - color: #5072eb; + color: var(--blue); text-transform: uppercase; margin: 0; diff --git a/src/components/Integration/DataopsMadeSimple/index.tsx b/src/components/Integration/DataopsMadeSimple/index.tsx index 4d41c3c3..8ab7090c 100644 --- a/src/components/Integration/DataopsMadeSimple/index.tsx +++ b/src/components/Integration/DataopsMadeSimple/index.tsx @@ -8,7 +8,7 @@ const DataopsMadeSimple = () => { return (
        } + icon={} title={ <> DATAOPS MADE SIMPLE diff --git a/src/components/Integration/EstuaryFlowVideo/styles.module.less b/src/components/Integration/EstuaryFlowVideo/styles.module.less index d848ee69..67e1547f 100644 --- a/src/components/Integration/EstuaryFlowVideo/styles.module.less +++ b/src/components/Integration/EstuaryFlowVideo/styles.module.less @@ -20,7 +20,7 @@ color: var(--white); span { - color: #5072EB; + color: var(--blue); } @media (max-width: 768px) { diff --git a/src/components/Integration/Hero/styles.module.less b/src/components/Integration/Hero/styles.module.less index e270a69a..b220fbf3 100644 --- a/src/components/Integration/Hero/styles.module.less +++ b/src/components/Integration/Hero/styles.module.less @@ -33,7 +33,7 @@ font-size: 1.5rem; line-height: 28.8px; font-weight: 700; - color: #5072EB; + color: var(--blue); @media (max-width: 768px) { font-size: 1.25rem; @@ -208,7 +208,7 @@ .centralize; width: 176px; height: 88px; - border: 1px solid #5072EB; + border: 1px solid var(--blue); position: relative; @media (max-width: 1280px) { @@ -304,7 +304,7 @@ z-index: 2; margin-bottom: -88px; border-radius: 50%; - border: 1px #5072EB; + border: 1px var(--blue); border-style: dashed; @media (max-width: 1280px) { @@ -326,7 +326,7 @@ &::after { .ring; - border: 1px solid #5072EB; + border: 1px solid var(--blue); margin-bottom: -88px; @media (max-width: 1280px) { @@ -364,7 +364,7 @@ position: absolute; width: 16px; height: 16px; - background-color: #5072EB; + background-color: var(--blue); border-radius: 50%; z-index: 2; } @@ -375,7 +375,7 @@ width: 30px; height: 30px; background-color: #0C223E; - border: 1px solid #5072EB; + border: 1px solid var(--blue); border-radius: 50%; z-index: 1; } @@ -498,7 +498,7 @@ position: absolute; width: 1px; height: 22px; - background-color: #5072EB; + background-color: var(--blue); border-radius: 50%; z-index: 2; } diff --git a/src/components/Integration/IncreaseProductivity4x/styles.module.less b/src/components/Integration/IncreaseProductivity4x/styles.module.less index fb45ea4b..bca7d45e 100644 --- a/src/components/Integration/IncreaseProductivity4x/styles.module.less +++ b/src/components/Integration/IncreaseProductivity4x/styles.module.less @@ -23,7 +23,7 @@ text-align: center; text-transform: uppercase; margin: 0; - color: #5072EB; + color: var(--blue); padding-left: 0; @media (max-width: 768px) { diff --git a/src/components/Integration/SeeHow/styles.module.less b/src/components/Integration/SeeHow/styles.module.less index 14c25921..9e3314ae 100644 --- a/src/components/Integration/SeeHow/styles.module.less +++ b/src/components/Integration/SeeHow/styles.module.less @@ -25,7 +25,7 @@ } &>span { - color: #5072EB; + color: var(--blue); } } diff --git a/src/components/Integration/Spend25xLess/index.tsx b/src/components/Integration/Spend25xLess/index.tsx index 7fd94f2e..080c8b27 100644 --- a/src/components/Integration/Spend25xLess/index.tsx +++ b/src/components/Integration/Spend25xLess/index.tsx @@ -9,7 +9,7 @@ const Spend25xLess = () => { return (
        } + icon={} title={ <> SPEND 2-5X LESS diff --git a/src/components/Integration/Testimonials/styles.module.less b/src/components/Integration/Testimonials/styles.module.less index 6a385f98..d7fbad86 100644 --- a/src/components/Integration/Testimonials/styles.module.less +++ b/src/components/Integration/Testimonials/styles.module.less @@ -18,7 +18,7 @@ color: var(--grey); span { - color: #5072EB; + color: var(--blue); } @media (max-width: 768px) { diff --git a/src/components/Integration/styles.module.less b/src/components/Integration/styles.module.less index d9638c2b..461e9751 100644 --- a/src/components/Integration/styles.module.less +++ b/src/components/Integration/styles.module.less @@ -59,7 +59,7 @@ width: 6.5%; height: 6.5%; border-radius: 50%; - background-color: #5072EB; + background-color: var(--blue); z-index: 1; } @@ -69,7 +69,7 @@ height: auto; max-width: 21%; max-height: 21%; - border: 1px solid #5072EB; + border: 1px solid var(--blue); border-radius: 50%; background-color: transparent; display: flex; @@ -118,7 +118,7 @@ height: auto; max-width: 100%; max-height: 100%; - border: 1px #5072EB; + border: 1px var(--blue); border-style: dashed; background-color: #EEF1FD; display: flex; @@ -188,7 +188,7 @@ margin: 0; span { - color: #5072EB; + color: var(--blue); } @media (max-width: 768px) { diff --git a/src/components/InternalLink/styles.module.less b/src/components/InternalLink/styles.module.less index 1bd84820..9f2efeff 100644 --- a/src/components/InternalLink/styles.module.less +++ b/src/components/InternalLink/styles.module.less @@ -1,5 +1,5 @@ .linkStyling { - color: #5072eb; + color: var(--blue); font-weight: 500; display: flex; align-items: center; diff --git a/src/components/LinksAndButtons/styles.module.less b/src/components/LinksAndButtons/styles.module.less index 3861b43b..31dc6280 100644 --- a/src/components/LinksAndButtons/styles.module.less +++ b/src/components/LinksAndButtons/styles.module.less @@ -1,4 +1,4 @@ -@primaryColor: #5072eb; +@primaryColor: var(--blue); @hoverColor: #625eff; @lightColor: var(--white); @disabledColor: var(--border-color); diff --git a/src/components/NextStepsLink/index.tsx b/src/components/NextStepsLink/index.tsx index 5c2ff25f..65c73881 100644 --- a/src/components/NextStepsLink/index.tsx +++ b/src/components/NextStepsLink/index.tsx @@ -14,7 +14,7 @@ type NextStepsLinkProps = { const NextStepsLink = ({ children, href }: NextStepsLinkProps) => ( {children} - + ); diff --git a/src/components/NextStepsLink/styles.module.less b/src/components/NextStepsLink/styles.module.less index 22a05c61..fe451fc4 100644 --- a/src/components/NextStepsLink/styles.module.less +++ b/src/components/NextStepsLink/styles.module.less @@ -10,5 +10,5 @@ font-size: 1rem; font-weight: 600; line-height: 24px; - color: #5072eb; + color: var(--blue); } diff --git a/src/components/PartnersPage/JoinPartnerProgram/styles.module.less b/src/components/PartnersPage/JoinPartnerProgram/styles.module.less index 16da639a..1d3331e1 100644 --- a/src/components/PartnersPage/JoinPartnerProgram/styles.module.less +++ b/src/components/PartnersPage/JoinPartnerProgram/styles.module.less @@ -9,7 +9,7 @@ align-items: center; h2 { - color: #5072EB; + color: var(--blue); font-size: 2.5rem; font-weight: 600; text-align: center; diff --git a/src/components/PartnersPage/ReferralIncentive/styles.module.less b/src/components/PartnersPage/ReferralIncentive/styles.module.less index 9f1c3800..0b0f73a5 100644 --- a/src/components/PartnersPage/ReferralIncentive/styles.module.less +++ b/src/components/PartnersPage/ReferralIncentive/styles.module.less @@ -1,6 +1,6 @@ .header { h2 { - color: #5072EB; + color: var(--blue); font-size: 2.5rem; } diff --git a/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less b/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less index 5731ad05..ba7749c5 100644 --- a/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less +++ b/src/components/PartnersPage/ResourcesAndGettingStarted/styles.module.less @@ -9,7 +9,7 @@ align-items: center; h2 { - color: #5072EB; + color: var(--blue); font-size: 2.5rem; font-weight: 600; text-align: center; diff --git a/src/components/PricingCalculator/styles.module.less b/src/components/PricingCalculator/styles.module.less index 723a77c5..9ed7d4d3 100644 --- a/src/components/PricingCalculator/styles.module.less +++ b/src/components/PricingCalculator/styles.module.less @@ -18,10 +18,10 @@ .highlightedCard { background-color: #5072eb12; - border: 1px solid #5072eb; + border: 1px solid var(--blue); border-radius: 16px; padding: 16px 32px; - color: #5072eb; + color: var(--blue); display: flex; flex-direction: column; min-height: 99.2px; diff --git a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less index cbb6db5e..7df80bcd 100644 --- a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less +++ b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less @@ -29,7 +29,7 @@ } h3 { - color: #5072eb; + color: var(--blue); font-size: 1.25rem; font-weight: 700; line-height: 24px; @@ -44,7 +44,7 @@ font-size: 0.875rem; font-weight: 600; padding: 7px 12px; - color: #5072eb; + color: var(--blue); background-color: #625eff1f; border-radius: 36px; margin-left: auto; @@ -141,7 +141,7 @@ } .highlightedBorder { - border: 3px solid #5072eb; + border: 3px solid var(--blue); } .divider { @@ -163,7 +163,7 @@ .plusSign { font-size: 1.5rem; font-weight: 700; - color: #5072eb; + color: var(--blue); line-height: 28.8px; margin-left: 5px; } diff --git a/src/components/PricingPage/Faq/FaqAccordion/index.tsx b/src/components/PricingPage/Faq/FaqAccordion/index.tsx index b6aab14a..b409215e 100644 --- a/src/components/PricingPage/Faq/FaqAccordion/index.tsx +++ b/src/components/PricingPage/Faq/FaqAccordion/index.tsx @@ -48,7 +48,11 @@ const FaqAccordion = ({ )} > {expanded ? ( - + ) : ( span { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/ProductPage/DeliverRealTimeData/index.tsx b/src/components/ProductPage/DeliverRealTimeData/index.tsx index 26c57861..36aee61b 100644 --- a/src/components/ProductPage/DeliverRealTimeData/index.tsx +++ b/src/components/ProductPage/DeliverRealTimeData/index.tsx @@ -64,7 +64,7 @@ const DeliverRealTimeData = () => {
        - +

        {activeUsersAmount}

        @@ -73,7 +73,7 @@ const DeliverRealTimeData = () => {
        - +

        <100ms

        diff --git a/src/components/ProductPage/DeliverRealTimeData/styles.module.less b/src/components/ProductPage/DeliverRealTimeData/styles.module.less index 776facd4..234abf42 100644 --- a/src/components/ProductPage/DeliverRealTimeData/styles.module.less +++ b/src/components/ProductPage/DeliverRealTimeData/styles.module.less @@ -56,7 +56,7 @@ left: 50%; transform: translateX(-50%); top: 20px; - background-color: #5072eb; + background-color: var(--blue); h3, p { @@ -74,7 +74,7 @@ } h3 { - color: #5072EB; + color: var(--blue); } p { @@ -93,7 +93,7 @@ } h3 { - color: #5072EB; + color: var(--blue); } p { diff --git a/src/components/ProductPage/DontMissAThing/styles.module.less b/src/components/ProductPage/DontMissAThing/styles.module.less index 50536984..f9c827e7 100644 --- a/src/components/ProductPage/DontMissAThing/styles.module.less +++ b/src/components/ProductPage/DontMissAThing/styles.module.less @@ -36,7 +36,7 @@ color: var(--white); &>a { - color: #5072eb; + color: var(--blue); &:hover { text-underline-offset: 4px; diff --git a/src/components/ProductPage/Hero/Card/styles.module.less b/src/components/ProductPage/Hero/Card/styles.module.less index 1522a217..41f3d802 100644 --- a/src/components/ProductPage/Hero/Card/styles.module.less +++ b/src/components/ProductPage/Hero/Card/styles.module.less @@ -26,7 +26,7 @@ } &:hover { - border-color: #5072eb; + border-color: var(--blue); background-color: #5072eb33; } @@ -41,7 +41,7 @@ border-color: #5072eb40; &:hover { - border-color: #5072eb; + border-color: var(--blue); background-color: #5072eb99; } } diff --git a/src/components/ProductPage/Hero/index.tsx b/src/components/ProductPage/Hero/index.tsx index bcaf0962..1d7c6ed4 100644 --- a/src/components/ProductPage/Hero/index.tsx +++ b/src/components/ProductPage/Hero/index.tsx @@ -56,7 +56,7 @@ const Hero = () => { } diff --git a/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less b/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less index 8ff2ff02..66c54b9f 100644 --- a/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less +++ b/src/components/ProductPage/HowEstuaryFlowCompares/styles.module.less @@ -14,7 +14,7 @@ } &>span { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/ProductPage/HowItWorks/Hover/styles.module.less b/src/components/ProductPage/HowItWorks/Hover/styles.module.less index 0659a001..1797be24 100644 --- a/src/components/ProductPage/HowItWorks/Hover/styles.module.less +++ b/src/components/ProductPage/HowItWorks/Hover/styles.module.less @@ -9,8 +9,8 @@ } .darkBlueColor { - border-color: #5072eb; - color: #5072eb; + border-color: var(--blue); + color: var(--blue); } .baseHoverTitleStyle { diff --git a/src/components/ProductPage/HowItWorks/styles.module.less b/src/components/ProductPage/HowItWorks/styles.module.less index cbd239ab..372a172d 100644 --- a/src/components/ProductPage/HowItWorks/styles.module.less +++ b/src/components/ProductPage/HowItWorks/styles.module.less @@ -12,7 +12,7 @@ text-align: center; text-transform: uppercase; margin: 0; - color: #5072eb; + color: var(--blue); @media (max-width: 810px) { font-size: 1.75rem; @@ -40,7 +40,7 @@ text-align: center; text-transform: uppercase; margin: 48px 48px 16px 48px; - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/ProductPage/IncreaseProductivity/styles.module.less b/src/components/ProductPage/IncreaseProductivity/styles.module.less index 5dd6c9f8..7a71dbd1 100644 --- a/src/components/ProductPage/IncreaseProductivity/styles.module.less +++ b/src/components/ProductPage/IncreaseProductivity/styles.module.less @@ -59,7 +59,7 @@ border: 1px solid #e2e8fb; & > h3 { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/ProductPage/KeyFeatures/styles.module.less b/src/components/ProductPage/KeyFeatures/styles.module.less index 89765aef..51a6ca40 100644 --- a/src/components/ProductPage/KeyFeatures/styles.module.less +++ b/src/components/ProductPage/KeyFeatures/styles.module.less @@ -66,7 +66,7 @@ line-height: 48px; text-align: center; margin: 0; - color: #5072eb; + color: var(--blue); @media (max-width: 810px) { font-size: 1.75rem; diff --git a/src/components/ProductPage/ReadyToStart/index.tsx b/src/components/ProductPage/ReadyToStart/index.tsx index 0142e11c..387c986a 100644 --- a/src/components/ProductPage/ReadyToStart/index.tsx +++ b/src/components/ProductPage/ReadyToStart/index.tsx @@ -18,7 +18,7 @@ import { sectionTitle, } from './styles.module.less'; -const iconColor = '#5072EB'; +const iconColor = 'var(--blue)'; const ReadyToStart = () => { return ( diff --git a/src/components/ProductPage/ReadyToStart/styles.module.less b/src/components/ProductPage/ReadyToStart/styles.module.less index 8da82b3c..b5ef6933 100644 --- a/src/components/ProductPage/ReadyToStart/styles.module.less +++ b/src/components/ProductPage/ReadyToStart/styles.module.less @@ -4,7 +4,7 @@ line-height: 48px; text-align: center; margin: 0; - color: #5072eb; + color: var(--blue); @media (max-width: 768px) { font-size: 1.75rem; diff --git a/src/components/ProductPage/Streaming/styles.module.less b/src/components/ProductPage/Streaming/styles.module.less index 8cce82be..7177f667 100644 --- a/src/components/ProductPage/Streaming/styles.module.less +++ b/src/components/ProductPage/Streaming/styles.module.less @@ -26,7 +26,7 @@ } &>span { - color: #5072eb; + color: var(--blue); } } @@ -93,7 +93,7 @@ } .streamingEtlTitle { - color: #5072eb; + color: var(--blue); } .batchEltTitle { diff --git a/src/components/ProductPage/TheSameData/styles.module.less b/src/components/ProductPage/TheSameData/styles.module.less index 8915e103..d285feed 100644 --- a/src/components/ProductPage/TheSameData/styles.module.less +++ b/src/components/ProductPage/TheSameData/styles.module.less @@ -26,7 +26,7 @@ } & > span { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/SecurityCertificates/index.tsx b/src/components/SecurityCertificates/index.tsx index c86943c8..6963f242 100644 --- a/src/components/SecurityCertificates/index.tsx +++ b/src/components/SecurityCertificates/index.tsx @@ -17,7 +17,7 @@ const SecurityCertificates = ({ }: SecurityCertificatesProps) => { return ( } + icon={} title={ title ?? ( <> diff --git a/src/components/SecurityPage/ExplorePrivateDeployments/index.tsx b/src/components/SecurityPage/ExplorePrivateDeployments/index.tsx index 332f24d7..3b2691f9 100644 --- a/src/components/SecurityPage/ExplorePrivateDeployments/index.tsx +++ b/src/components/SecurityPage/ExplorePrivateDeployments/index.tsx @@ -11,7 +11,7 @@ const ExplorePrivateDeployments = () => (
        } + icon={} title={ <> EXPLORE PRIVATE DEPLOYMENTS FOR{' '} diff --git a/src/components/SecurityPage/Map/styles.module.less b/src/components/SecurityPage/Map/styles.module.less index eab27443..03a5c06a 100644 --- a/src/components/SecurityPage/Map/styles.module.less +++ b/src/components/SecurityPage/Map/styles.module.less @@ -21,7 +21,7 @@ } span { - color: #5072EB; + color: var(--blue); } } diff --git a/src/components/SidebarCta/styles.module.less b/src/components/SidebarCta/styles.module.less index 22b491ce..d8c50ecb 100644 --- a/src/components/SidebarCta/styles.module.less +++ b/src/components/SidebarCta/styles.module.less @@ -26,7 +26,7 @@ padding: 0 8px; span { - color: #5072eb; + color: var(--blue); } } } @@ -45,7 +45,7 @@ line-height: 36px; span { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/Signup/styles.module.less b/src/components/Signup/styles.module.less index 78d0242b..fb5aaaf3 100644 --- a/src/components/Signup/styles.module.less +++ b/src/components/Signup/styles.module.less @@ -37,7 +37,7 @@ } span { - color: #5072eb; + color: var(--blue); } } diff --git a/src/components/SubscriptionBenefits/styles.module.less b/src/components/SubscriptionBenefits/styles.module.less index 40e6f490..75a20388 100644 --- a/src/components/SubscriptionBenefits/styles.module.less +++ b/src/components/SubscriptionBenefits/styles.module.less @@ -36,7 +36,7 @@ span { font-weight: 700; - color: #5072EB; + color: var(--blue); } } } \ No newline at end of file diff --git a/src/components/Tabs/styles.module.less b/src/components/Tabs/styles.module.less index fdea40d9..1dfde4c7 100644 --- a/src/components/Tabs/styles.module.less +++ b/src/components/Tabs/styles.module.less @@ -25,9 +25,9 @@ } .activeTabStyle { - border-bottom: 2px solid #5072EB; + border-bottom: 2px solid var(--blue); &>span { - color: #5072EB; + color: var(--blue); } } \ No newline at end of file diff --git a/src/components/TakeATour/styles.module.less b/src/components/TakeATour/styles.module.less index 7bbfd647..d4880fb3 100644 --- a/src/components/TakeATour/styles.module.less +++ b/src/components/TakeATour/styles.module.less @@ -1,5 +1,5 @@ .container { - background-color: #5072eb; + background-color: var(--blue); height: 24px; display: flex; justify-content: center; diff --git a/src/components/TestimonialsCarousel/styles.module.less b/src/components/TestimonialsCarousel/styles.module.less index a3690d50..e14c8369 100644 --- a/src/components/TestimonialsCarousel/styles.module.less +++ b/src/components/TestimonialsCarousel/styles.module.less @@ -11,7 +11,7 @@ font-size: 1.25rem; font-weight: 700; line-height: 24px; - color: #5072eb; + color: var(--blue); text-transform: uppercase; margin: 0; diff --git a/src/components/Why/styles.module.less b/src/components/Why/styles.module.less index 229f74c3..c2a408ec 100644 --- a/src/components/Why/styles.module.less +++ b/src/components/Why/styles.module.less @@ -38,7 +38,7 @@ max-width: 195px; margin-left: auto; margin-right: auto; - background: #5072eb; + background: var(--blue); border-radius: 6px; color: var(--white); font-size: 18px; @@ -178,7 +178,7 @@ max-width: 195px; margin-left: auto; margin-right: auto; - background: #5072eb; + background: var(--blue); border-radius: 6px; color: var(--white); font-size: 18px; @@ -599,7 +599,7 @@ max-width: 195px; margin-left: auto; margin-right: auto; - background: #5072eb; + background: var(--blue); border-radius: 6px; color: var(--white); font-size: 18px; diff --git a/src/globalStyles/buttons.module.less b/src/globalStyles/buttons.module.less index d6ccae3f..8e19ba89 100644 --- a/src/globalStyles/buttons.module.less +++ b/src/globalStyles/buttons.module.less @@ -1,6 +1,6 @@ .outlinedButton { background-color: transparent; - border: 2px solid #5072EB; + border: 2px solid var(--blue); border-radius: 4px; padding: 16px 24px; color: var(--white); diff --git a/src/style.less b/src/style.less index 19adc432..111119dc 100644 --- a/src/style.less +++ b/src/style.less @@ -24,12 +24,12 @@ --fontSize-4: 1.728rem; --fontSize-5: 3.5rem; --fontSize-6: 3.75rem; - --color-primary: #5072eb; --color-text: #2e353f; --color-text-light: #b7c6dd17; --color-heading: #1a202c; --color-heading-black: black; --color-accent: #d1dce5; + --blue: #5072eb; --dark-blue: #04192b; --grey: #47506d; --light-grey: #f2f3f5; @@ -107,7 +107,7 @@ h6 { h1 { font-weight: var(--fontWeight-white); font-size: var(--fontSize-6); - color: var(--color-primary); + color: var(--blue); font-weight: var(--fontWeight-bold); margin: 0; text-transform: uppercase; @@ -208,7 +208,7 @@ blockquote { margin-left: calc(-1 * var(--spacing-6)); margin-right: var(--spacing-8); padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-6); - border-left: var(--spacing-1) solid var(--color-primary); + border-left: var(--spacing-1) solid var(--blue); font-size: var(--fontSize-2); font-style: italic; margin-bottom: var(--spacing-8); @@ -235,7 +235,7 @@ table thead tr th { } a { - color: var(--color-primary); + color: var(--blue); font-style: normal; text-decoration: none; } diff --git a/src/templates/author/SectionOne/styles.module.less b/src/templates/author/SectionOne/styles.module.less index 3875252e..fb6e299f 100644 --- a/src/templates/author/SectionOne/styles.module.less +++ b/src/templates/author/SectionOne/styles.module.less @@ -13,7 +13,7 @@ } .authorPictureWrapper { - border: 3px solid #5072EB; + border: 3px solid var(--blue); border-radius: 100%; padding: 24px; max-width: 254px; @@ -43,7 +43,7 @@ font-size: 1.5rem; font-weight: 700; line-height: 28.8px; - color: #5072EB; + color: var(--blue); margin-bottom: 8px; text-transform: uppercase; } diff --git a/src/templates/author/SectionTwo/styles.module.less b/src/templates/author/SectionTwo/styles.module.less index af72c730..6a7e66df 100644 --- a/src/templates/author/SectionTwo/styles.module.less +++ b/src/templates/author/SectionTwo/styles.module.less @@ -17,7 +17,7 @@ text-align: center; span { - color: #5072EB; + color: var(--blue); } @media (max-width: 768px) { diff --git a/src/templates/connector/ChangeData/components/Card/styles.module.less b/src/templates/connector/ChangeData/components/Card/styles.module.less index 19f83acc..b9ad1e6c 100644 --- a/src/templates/connector/ChangeData/components/Card/styles.module.less +++ b/src/templates/connector/ChangeData/components/Card/styles.module.less @@ -41,7 +41,7 @@ h3 { font-weight: 700; font-size: 16px; - color: #5072eb; + color: var(--blue); margin: 0; @media (min-width: 1280px) { diff --git a/src/templates/connector/ChangeData/index.tsx b/src/templates/connector/ChangeData/index.tsx index 4d2914c0..32665fa9 100644 --- a/src/templates/connector/ChangeData/index.tsx +++ b/src/templates/connector/ChangeData/index.tsx @@ -49,7 +49,10 @@ const ChangeData = ({ connector: { id, title, type } }: ChangeDataProps) => {

        • - + Ensure your {title} insights always reflect the latest data by connecting your databases to{' '} @@ -57,7 +60,10 @@ const ChangeData = ({ connector: { id, title, type } }: ChangeDataProps) => {
        • - + Or connect critical SaaS apps to {title} with real-time data pipelines. diff --git a/src/templates/connector/ChangeData/styles.module.less b/src/templates/connector/ChangeData/styles.module.less index b12cc762..6e90f581 100644 --- a/src/templates/connector/ChangeData/styles.module.less +++ b/src/templates/connector/ChangeData/styles.module.less @@ -30,7 +30,7 @@ color: var(--dark-blue); span { - color: #5072eb; + color: var(--blue); } @media (min-width: 1280px) { @@ -94,7 +94,7 @@ margin: 0; a { - color: #5072eb; + color: var(--blue); font-weight: 500; &:hover { diff --git a/src/templates/connector/Hero/Content/styles.module.less b/src/templates/connector/Hero/Content/styles.module.less index 81f85c5e..12639ce5 100644 --- a/src/templates/connector/Hero/Content/styles.module.less +++ b/src/templates/connector/Hero/Content/styles.module.less @@ -69,7 +69,7 @@ } span { - color: #5072eb; + color: var(--blue); font-weight: 700; } } diff --git a/src/templates/connector/Hero/styles.module.less b/src/templates/connector/Hero/styles.module.less index c8a80717..25fbcade 100644 --- a/src/templates/connector/Hero/styles.module.less +++ b/src/templates/connector/Hero/styles.module.less @@ -56,7 +56,7 @@ text-transform: uppercase; font-size: 1rem; font-weight: 700; - color: #5072eb; + color: var(--blue); @media (max-width: 1280px) { font-size: 0.75rem; diff --git a/src/templates/connector/Pipelines/styles.module.less b/src/templates/connector/Pipelines/styles.module.less index 653e5328..06e4143e 100644 --- a/src/templates/connector/Pipelines/styles.module.less +++ b/src/templates/connector/Pipelines/styles.module.less @@ -13,7 +13,7 @@ text-align: center; span { - color: #5072eb; + color: var(--blue); } @media (min-width: 1280px) { diff --git a/src/templates/connector/RealTime/style.module.less b/src/templates/connector/RealTime/style.module.less index b6ea81a8..cb1fdf62 100644 --- a/src/templates/connector/RealTime/style.module.less +++ b/src/templates/connector/RealTime/style.module.less @@ -61,7 +61,7 @@ color: var(--white); span { - color: #5072eb; + color: var(--blue); } @media (min-width: 1280px) { From 2868cc604793c7672dad8650cc5028f764c7eae4 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 20:11:10 -0300 Subject: [PATCH 08/13] Add variable for violet color --- src/components/AuthorBlogPostCard/styles.module.less | 2 +- .../ListOfComparisons/XvsYCard/styles.module.less | 2 +- .../EtlToolsXvsYPage/Comparison/FeatureData/DollarSigns.tsx | 2 +- .../Comparison/FeatureData/styles.module.less | 2 +- src/components/HeaderNavbar/CardItem/styles.module.less | 4 ++-- src/components/HeroSectionDetails/styles.module.less | 2 +- src/components/Homepage/MoveAndTransform/styles.module.less | 2 +- src/components/LinksAndButtons/styles.module.less | 2 +- src/components/MetricCard/styles.module.less | 2 +- src/pages/about/styles.module.less | 2 +- src/style.less | 1 + src/templates/connector/Hero/Content/styles.module.less | 2 +- 12 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/AuthorBlogPostCard/styles.module.less b/src/components/AuthorBlogPostCard/styles.module.less index 269e05a6..6d6da991 100644 --- a/src/components/AuthorBlogPostCard/styles.module.less +++ b/src/components/AuthorBlogPostCard/styles.module.less @@ -50,7 +50,7 @@ } .articleTag { - color: #625eff; + color: var(--violet); font-size: 1rem; font-weight: 600; line-height: 18px; diff --git a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less index b54f0183..277888b2 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less +++ b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less @@ -73,6 +73,6 @@ span { font-size: 1.25rem; font-weight: 600; - color: #625EFF; + color: var(--violet); } } \ No newline at end of file diff --git a/src/components/EtlToolsXvsYPage/Comparison/FeatureData/DollarSigns.tsx b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/DollarSigns.tsx index 82ef56b5..e85b62d6 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/FeatureData/DollarSigns.tsx +++ b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/DollarSigns.tsx @@ -3,7 +3,7 @@ import DollarSignIcon from '../../../../svgs/dollar-sign.svg'; import HyphenIcon from '../../../../svgs/hyphen.svg'; import { dollarSignsWrapper } from './styles.module.less'; -const iconColor = '#625EFF'; +const iconColor = 'var(--violet)'; const DollarSigns = ({ numberOfDollarSigns }) => { if (!numberOfDollarSigns) return null; diff --git a/src/components/EtlToolsXvsYPage/Comparison/FeatureData/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/styles.module.less index e14dc716..f52e8c09 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/FeatureData/styles.module.less +++ b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/styles.module.less @@ -7,6 +7,6 @@ } .cellTitleStyling { - color: #625EFF; + color: var(--violet); font-weight: 700; } diff --git a/src/components/HeaderNavbar/CardItem/styles.module.less b/src/components/HeaderNavbar/CardItem/styles.module.less index 92c3b84e..000e5964 100644 --- a/src/components/HeaderNavbar/CardItem/styles.module.less +++ b/src/components/HeaderNavbar/CardItem/styles.module.less @@ -19,11 +19,11 @@ @media (min-width: 1024px) { &:hover { - border-color: #625eff; + border-color: var(--violet); .headerChevronIcon { display: block; - color: #625eff; + color: var(--violet); } } diff --git a/src/components/HeroSectionDetails/styles.module.less b/src/components/HeroSectionDetails/styles.module.less index 72f6b71e..cba543b8 100644 --- a/src/components/HeroSectionDetails/styles.module.less +++ b/src/components/HeroSectionDetails/styles.module.less @@ -20,7 +20,7 @@ } span:nth-of-type(2n) { - color: #625eff; + color: var(--violet); } } } diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less index af45cfa6..b129e84d 100644 --- a/src/components/Homepage/MoveAndTransform/styles.module.less +++ b/src/components/Homepage/MoveAndTransform/styles.module.less @@ -85,7 +85,7 @@ margin: 0; span { - color: #625eff; + color: var(--violet); margin-right: 16px; @media (max-width: 810px) { diff --git a/src/components/LinksAndButtons/styles.module.less b/src/components/LinksAndButtons/styles.module.less index 31dc6280..cc79d814 100644 --- a/src/components/LinksAndButtons/styles.module.less +++ b/src/components/LinksAndButtons/styles.module.less @@ -1,5 +1,5 @@ @primaryColor: var(--blue); -@hoverColor: #625eff; +@hoverColor: var(--violet); @lightColor: var(--white); @disabledColor: var(--border-color); @secondaryColor: #fdfdfe; diff --git a/src/components/MetricCard/styles.module.less b/src/components/MetricCard/styles.module.less index 6f19ebf4..b41f9b32 100644 --- a/src/components/MetricCard/styles.module.less +++ b/src/components/MetricCard/styles.module.less @@ -49,7 +49,7 @@ } .metricValue { - color: #625eff; + color: var(--violet); font-size: 2rem; font-weight: 700; line-height: 43.2px; diff --git a/src/pages/about/styles.module.less b/src/pages/about/styles.module.less index 5e69715f..ba62e2f7 100644 --- a/src/pages/about/styles.module.less +++ b/src/pages/about/styles.module.less @@ -294,7 +294,7 @@ transition: var(--default-transition); &:hover { - background-color: #625EFF; + background-color: var(--violet); color: white; } } diff --git a/src/style.less b/src/style.less index 111119dc..4a3f677b 100644 --- a/src/style.less +++ b/src/style.less @@ -35,6 +35,7 @@ --light-grey: #f2f3f5; --border-color: #d7dce5; --white: #fff; + --violet: #625eff; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } diff --git a/src/templates/connector/Hero/Content/styles.module.less b/src/templates/connector/Hero/Content/styles.module.less index 12639ce5..c9ea1ef0 100644 --- a/src/templates/connector/Hero/Content/styles.module.less +++ b/src/templates/connector/Hero/Content/styles.module.less @@ -5,7 +5,7 @@ } span:nth-of-type(2n + 1) { - color: #625eff; + color: var(--violet); } } From 6d5024906fc8fa7def4ef60564f5f19947a864f9 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 20:15:02 -0300 Subject: [PATCH 09/13] Add variable for light blue color --- src/components/BackgroundImages/shared.ts | 2 +- src/components/BlogPost/styles.module.less | 2 +- src/components/Connectors/styles.module.less | 2 +- .../ContactUsPage/FormSection/styles.module.less | 2 +- src/components/CopyToClipboardButton/styles.module.less | 2 +- src/components/Layout/ReleaseBanner/styles.module.less | 4 ++-- src/components/SidebarCta/styles.module.less | 2 +- src/components/styles.module.less | 2 +- src/globalStyles/wrappers.module.less | 2 +- src/layouts/CaseStudy/style.less | 2 +- src/pages/about/styles.module.less | 8 ++++---- src/pages/podcasts/styles.module.less | 2 +- src/style.less | 1 + .../ChangeData/components/Card/styles.module.less | 2 +- 14 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/BackgroundImages/shared.ts b/src/components/BackgroundImages/shared.ts index a617cc11..ddffa758 100644 --- a/src/components/BackgroundImages/shared.ts +++ b/src/components/BackgroundImages/shared.ts @@ -1,2 +1,2 @@ export const darkImgStyle = { backgroundColor: 'var(--dark-blue)' }; -export const lightImgStyle = { backgroundColor: '#f9fafc' }; +export const lightImgStyle = { backgroundColor: 'var(--light-blue)' }; diff --git a/src/components/BlogPost/styles.module.less b/src/components/BlogPost/styles.module.less index 76b30976..c97e8625 100644 --- a/src/components/BlogPost/styles.module.less +++ b/src/components/BlogPost/styles.module.less @@ -214,7 +214,7 @@ .nextStepsAndAboutAuthorSection { .sectionTopBottomPadding; - background-color: #f9fafc; + background-color: var(--light-blue); display: flex; gap: 80px; justify-content: space-around; diff --git a/src/components/Connectors/styles.module.less b/src/components/Connectors/styles.module.less index 039fbc88..d349e5e3 100644 --- a/src/components/Connectors/styles.module.less +++ b/src/components/Connectors/styles.module.less @@ -122,7 +122,7 @@ } .connectorsSearchBody { - background-color: #f9fafc; + background-color: var(--light-blue); border-radius: 4px; padding: 1rem; display: flex; diff --git a/src/components/ContactUsPage/FormSection/styles.module.less b/src/components/ContactUsPage/FormSection/styles.module.less index b9bcf2e7..9e997cfc 100644 --- a/src/components/ContactUsPage/FormSection/styles.module.less +++ b/src/components/ContactUsPage/FormSection/styles.module.less @@ -3,7 +3,7 @@ .section { .defaultWrapperGrey; - background-color: #f9fafc; + background-color: var(--light-blue); background-image: url('../../../images/product-flow-vector-left.svg'); background-repeat: no-repeat; background-position-y: 480px; diff --git a/src/components/CopyToClipboardButton/styles.module.less b/src/components/CopyToClipboardButton/styles.module.less index 4e5da947..8b1e15f4 100644 --- a/src/components/CopyToClipboardButton/styles.module.less +++ b/src/components/CopyToClipboardButton/styles.module.less @@ -16,7 +16,7 @@ border-color: var(--border-color); &:hover { - background-color: #f9fafc; + background-color: var(--light-blue); border-color: var(--border-color); } } diff --git a/src/components/Layout/ReleaseBanner/styles.module.less b/src/components/Layout/ReleaseBanner/styles.module.less index b45f57e7..48ea736a 100644 --- a/src/components/Layout/ReleaseBanner/styles.module.less +++ b/src/components/Layout/ReleaseBanner/styles.module.less @@ -38,7 +38,7 @@ } p { - color: #F9FAFC; + color: var(--light-blue); font-size: 1.125rem; font-weight: 600; margin: 0; @@ -79,5 +79,5 @@ } .lightBackgroundColor { - background-color: #F9FAFC; + background-color: var(--light-blue); } \ No newline at end of file diff --git a/src/components/SidebarCta/styles.module.less b/src/components/SidebarCta/styles.module.less index d8c50ecb..ea4bec3a 100644 --- a/src/components/SidebarCta/styles.module.less +++ b/src/components/SidebarCta/styles.module.less @@ -2,7 +2,7 @@ padding: 16px; border-radius: 24px; border: 1px solid #5072eb33; - background: #f9fafc; + background: var(--light-blue); text-align: center; @media (max-width: 1150px) { diff --git a/src/components/styles.module.less b/src/components/styles.module.less index 0f13dbe8..c8bd39b1 100644 --- a/src/components/styles.module.less +++ b/src/components/styles.module.less @@ -68,7 +68,7 @@ cursor: pointer; &:hover { - background-color: #f9fafc; + background-color: var(--light-blue); } @media (max-width: 1150px) { diff --git a/src/globalStyles/wrappers.module.less b/src/globalStyles/wrappers.module.less index ae9e1ed3..0b776d1a 100644 --- a/src/globalStyles/wrappers.module.less +++ b/src/globalStyles/wrappers.module.less @@ -7,7 +7,7 @@ .defaultWrapperDark { .sectionTopBottomPadding; - background-color: #F9FAFC; + background-color: var(--light-blue); } .defaultWrapperDarkBlue { diff --git a/src/layouts/CaseStudy/style.less b/src/layouts/CaseStudy/style.less index 68135b26..ca701468 100644 --- a/src/layouts/CaseStudy/style.less +++ b/src/layouts/CaseStudy/style.less @@ -78,7 +78,7 @@ display: flex; flex-direction: column; gap: 24px; - background-color: #f9fafc; + background-color: var(--light-blue); p { margin: 0; diff --git a/src/pages/about/styles.module.less b/src/pages/about/styles.module.less index ba62e2f7..1daf267e 100644 --- a/src/pages/about/styles.module.less +++ b/src/pages/about/styles.module.less @@ -190,7 +190,7 @@ .sectionTopBottomPadding; display: flex; - background-color: #f9fafc; + background-color: var(--light-blue); flex-direction: column; } @@ -264,7 +264,7 @@ .currentOpeningsList { display: flex; flex-direction: column; - background-color: #f9fafc; + background-color: var(--light-blue); max-width: 300px; margin-right: 60px; height: fit-content; @@ -391,7 +391,7 @@ .history { .sectionTopBottomPadding; - background: #f9fafc; + background: var(--light-blue); background-image: url('../../images/product-flow-vector-left.svg'); background-repeat: no-repeat; background-position-y: 480px; @@ -525,7 +525,7 @@ } .mediaItem { - background: #f9fafc; + background: var(--light-blue); padding: 25px 24px; @media (max-width: 811px) { diff --git a/src/pages/podcasts/styles.module.less b/src/pages/podcasts/styles.module.less index 3ced1f6c..2d8a5a3b 100644 --- a/src/pages/podcasts/styles.module.less +++ b/src/pages/podcasts/styles.module.less @@ -96,7 +96,7 @@ .subscribe { .sectionTopBottomPadding; - background: #f9fafc; + background: var(--light-blue); } .subscribeWrap { diff --git a/src/style.less b/src/style.less index 4a3f677b..b4706002 100644 --- a/src/style.less +++ b/src/style.less @@ -31,6 +31,7 @@ --color-accent: #d1dce5; --blue: #5072eb; --dark-blue: #04192b; + --light-blue: #f9fafc; --grey: #47506d; --light-grey: #f2f3f5; --border-color: #d7dce5; diff --git a/src/templates/connector/ChangeData/components/Card/styles.module.less b/src/templates/connector/ChangeData/components/Card/styles.module.less index b9ad1e6c..06935577 100644 --- a/src/templates/connector/ChangeData/components/Card/styles.module.less +++ b/src/templates/connector/ChangeData/components/Card/styles.module.less @@ -4,7 +4,7 @@ gap: 16px; align-items: center; border: 1px solid var(--border-color); - background-color: #f9fafc; + background-color: var(--light-blue); border-radius: 100px; padding: 20px 40px 20px 20px; From 07e5ee1f131775150de46b7ab26426e34c886452 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 20:20:47 -0300 Subject: [PATCH 10/13] Add variable for violet100, violet200 and violet300 color --- .../DeploymentOptionDiagram/styles.module.less | 2 +- src/components/DeploymentOptions/Tabs/index.tsx | 2 +- .../Hero/styles.module.less | 2 +- src/components/Integration/styles.module.less | 2 +- .../PartnersPage/ContactUs/styles.module.less | 2 +- .../PartnerProgramDetails/styles.module.less | 2 +- src/components/PipelinesTable/style.module.less | 4 ++-- .../Faq/FaqAccordion/styles.module.less | 2 +- .../DeliverRealTimeData/styles.module.less | 4 ++-- .../IncreaseProductivity/styles.module.less | 2 +- src/components/ProductPage/KeyFeatures/index.tsx | 2 +- .../ProductPage/ReadyToStart/styles.module.less | 4 ++-- src/components/Table/styles.module.less | 16 ++++++++-------- src/style.less | 3 +++ 14 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less b/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less index 376f6c86..6aec1542 100644 --- a/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less +++ b/src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less @@ -33,7 +33,7 @@ } .solidBorderBox { - border: 1px solid #A4B6F4; + border: 1px solid var(--violet300); border-radius: 16px; padding: 16px; display: flex; diff --git a/src/components/DeploymentOptions/Tabs/index.tsx b/src/components/DeploymentOptions/Tabs/index.tsx index aff19440..d47c5657 100644 --- a/src/components/DeploymentOptions/Tabs/index.tsx +++ b/src/components/DeploymentOptions/Tabs/index.tsx @@ -7,7 +7,7 @@ const tabStyling = { 'transition': 'var(--default-transition)', 'opacity': '0.75', 'textTransform': 'none', - 'borderBottom': '1px solid #A4B6F4', + 'borderBottom': '1px solid var(--violet300)', 'width': '33.333%', '&:hover': { backgroundColor: '#ECEFFC' }, '&:active': { backgroundColor: '#E3E8FB' }, diff --git a/src/components/DeploymentOptionsPage/Hero/styles.module.less b/src/components/DeploymentOptionsPage/Hero/styles.module.less index 2d681d56..330fef03 100644 --- a/src/components/DeploymentOptionsPage/Hero/styles.module.less +++ b/src/components/DeploymentOptionsPage/Hero/styles.module.less @@ -1,4 +1,4 @@ -@purple: #A4B6F4; +@purple: var(--violet300); @darkGreen: #13475388; @lightGreen: #4EFFF2aa; @sizeProportionalToViewWidth: 1vw; diff --git a/src/components/Integration/styles.module.less b/src/components/Integration/styles.module.less index 461e9751..d097449e 100644 --- a/src/components/Integration/styles.module.less +++ b/src/components/Integration/styles.module.less @@ -120,7 +120,7 @@ max-height: 100%; border: 1px var(--blue); border-style: dashed; - background-color: #EEF1FD; + background-color: var(--violet200); display: flex; align-items: stretch; justify-content: center; diff --git a/src/components/PartnersPage/ContactUs/styles.module.less b/src/components/PartnersPage/ContactUs/styles.module.less index 694daf15..7103e0bd 100644 --- a/src/components/PartnersPage/ContactUs/styles.module.less +++ b/src/components/PartnersPage/ContactUs/styles.module.less @@ -17,7 +17,7 @@ } > :nth-child(1) { - background-color: #EEF1FD; + background-color: var(--violet200); height: 100%; justify-content: flex-end; } diff --git a/src/components/PartnersPage/PartnerProgramDetails/styles.module.less b/src/components/PartnersPage/PartnerProgramDetails/styles.module.less index 8fb70c3a..5a05a73c 100644 --- a/src/components/PartnersPage/PartnerProgramDetails/styles.module.less +++ b/src/components/PartnersPage/PartnerProgramDetails/styles.module.less @@ -52,7 +52,7 @@ } > :nth-child(1) { - border: 1px solid #A4B6F4; + border: 1px solid var(--violet300); border-radius: 1.5vw; padding: 0.5vw; width: 6.25vw; diff --git a/src/components/PipelinesTable/style.module.less b/src/components/PipelinesTable/style.module.less index 510dbbc4..04c97592 100644 --- a/src/components/PipelinesTable/style.module.less +++ b/src/components/PipelinesTable/style.module.less @@ -27,7 +27,7 @@ th { border: none; - background-color: #eef1fd; + background-color: var(--violet200); color: var(--dark-blue); padding: 28px; text-align: center; @@ -48,7 +48,7 @@ border-top: 2px solid var(--border-color); padding: 28px; color: var(--dark-blue); - background-color: #f6f8fe; + background-color: var(--violet100); span { font-weight: 600; diff --git a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less index 0814dcaf..ea21faed 100644 --- a/src/components/PricingPage/Faq/FaqAccordion/styles.module.less +++ b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less @@ -75,7 +75,7 @@ align-items: center; justify-content: center; padding: 12px; - border: 2px solid #EEF1FD; + border: 2px solid var(--violet200); border-radius: 100px; @media (max-width: 425px) { diff --git a/src/components/ProductPage/DeliverRealTimeData/styles.module.less b/src/components/ProductPage/DeliverRealTimeData/styles.module.less index 234abf42..2419836d 100644 --- a/src/components/ProductPage/DeliverRealTimeData/styles.module.less +++ b/src/components/ProductPage/DeliverRealTimeData/styles.module.less @@ -67,7 +67,7 @@ .activeUsersMetric { left: -48px; bottom: 96px; - background-color: #eef1fd; + background-color: var(--violet200); @media (max-width: 1024px) { left: 0; @@ -85,7 +85,7 @@ .latencyMetric { bottom: 0; right: 0; - background-color: #eef1fd; + background-color: var(--violet200); @media (max-width: 1024px) { bottom: 48px; diff --git a/src/components/ProductPage/IncreaseProductivity/styles.module.less b/src/components/ProductPage/IncreaseProductivity/styles.module.less index 7a71dbd1..e63bdebc 100644 --- a/src/components/ProductPage/IncreaseProductivity/styles.module.less +++ b/src/components/ProductPage/IncreaseProductivity/styles.module.less @@ -64,7 +64,7 @@ } .bottomCaseStudy { - border: 1px solid #a4b6f4; + border: 1px solid var(--violet300); background-color: #5072eb1a; flex: 1; diff --git a/src/components/ProductPage/KeyFeatures/index.tsx b/src/components/ProductPage/KeyFeatures/index.tsx index e67fcd4f..88324838 100644 --- a/src/components/ProductPage/KeyFeatures/index.tsx +++ b/src/components/ProductPage/KeyFeatures/index.tsx @@ -19,7 +19,7 @@ import { const tooltipProps = { backgroundColor: '#091F38', color: 'var(--white)', - borderColor: '#A4B6F4', + borderColor: 'var(--violet300)', borderRadius: 36, padding: 20, maxWidth: 292, diff --git a/src/components/ProductPage/ReadyToStart/styles.module.less b/src/components/ProductPage/ReadyToStart/styles.module.less index b5ef6933..c3aba577 100644 --- a/src/components/ProductPage/ReadyToStart/styles.module.less +++ b/src/components/ProductPage/ReadyToStart/styles.module.less @@ -48,8 +48,8 @@ display: flex; align-items: center; justify-content: space-between; - background-color: #f6f8fe; - border: 1px solid #a4b6f4; + background-color: var(--violet100); + border: 1px solid var(--violet300); border-radius: 16px; gap: 24px; width: 100%; diff --git a/src/components/Table/styles.module.less b/src/components/Table/styles.module.less index 8ba85320..727aa202 100644 --- a/src/components/Table/styles.module.less +++ b/src/components/Table/styles.module.less @@ -4,7 +4,7 @@ border-collapse: separate; border-spacing: 0; color: var(--grey); - border-bottom: 1px solid #EEF1FD; + border-bottom: 1px solid var(--violet200); border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; margin: 0; @@ -18,7 +18,7 @@ } th { - background-color: #EEF1FD; + background-color: var(--violet200); color: var(--dark-blue); font-size: 1.25rem; font-weight: 600; @@ -87,13 +87,13 @@ td:first-of-type { width: 340px; padding: 29px 0; - border-left: 1px solid #EEF1FD; + border-left: 1px solid var(--violet200); font-weight: 600; text-align: left; } td:last-of-type { - border-right: 1px solid #EEF1FD; + border-right: 1px solid var(--violet200); } @media (max-width: 768px) { @@ -112,8 +112,8 @@ tr { display: flex; flex-direction: column; - border-left: 1px solid #EEF1FD; - border-right: 1px solid #EEF1FD; + border-left: 1px solid var(--violet200); + border-right: 1px solid var(--violet200); } tr:first-of-type { @@ -121,7 +121,7 @@ border-top-right-radius: 32px; td:first-of-type { - border-top: 1px solid #EEF1FD; + border-top: 1px solid var(--violet200); border-top-left-radius: 32px; border-top-right-radius: 32px; } @@ -131,7 +131,7 @@ width: 100%; text-align: center; border-left: none; - background-color: #F6F8FE; + background-color: var(--violet100); } tr td:last-of-type { diff --git a/src/style.less b/src/style.less index b4706002..64ce8c70 100644 --- a/src/style.less +++ b/src/style.less @@ -37,6 +37,9 @@ --border-color: #d7dce5; --white: #fff; --violet: #625eff; + --violet100: #f6f8fe; + --violet200: #eef1fd; + --violet300: #a4b6f4; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } From 89bd7061566488f7aad182567c29d07ca9dce5a3 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 20:23:51 -0300 Subject: [PATCH 11/13] Add variable for green color --- src/components/CopyToClipboardButton/index.tsx | 2 +- src/components/CopyToClipboardButton/styles.module.less | 4 ++-- src/components/PricingPage/ChooseYourPlan/PlanCard/index.tsx | 2 +- .../PricingPage/ChooseYourPlan/PlanCard/styles.module.less | 2 +- src/style.less | 1 + 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/CopyToClipboardButton/index.tsx b/src/components/CopyToClipboardButton/index.tsx index 0e0070ab..4529b7b9 100644 --- a/src/components/CopyToClipboardButton/index.tsx +++ b/src/components/CopyToClipboardButton/index.tsx @@ -61,7 +61,7 @@ const CopyToClipboardButton = ({ )} > {isCopied ? ( - + ) : ( )} diff --git a/src/components/CopyToClipboardButton/styles.module.less b/src/components/CopyToClipboardButton/styles.module.less index 8b1e15f4..40808c15 100644 --- a/src/components/CopyToClipboardButton/styles.module.less +++ b/src/components/CopyToClipboardButton/styles.module.less @@ -23,11 +23,11 @@ .isCopiedStyling { background-color: #00A99D30; - border-color: #00A99D; + border-color: var(--green); &:hover { background-color: #00A99D30; - border-color: #00A99D; + border-color: var(--green); } } diff --git a/src/components/PricingPage/ChooseYourPlan/PlanCard/index.tsx b/src/components/PricingPage/ChooseYourPlan/PlanCard/index.tsx index bd141179..81744767 100644 --- a/src/components/PricingPage/ChooseYourPlan/PlanCard/index.tsx +++ b/src/components/PricingPage/ChooseYourPlan/PlanCard/index.tsx @@ -114,7 +114,7 @@ const PlanCard = ({
        • diff --git a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less index 7df80bcd..786e6817 100644 --- a/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less +++ b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less @@ -75,7 +75,7 @@ justify-content: center; max-width: 20px; max-height: 20px; - border: 1px solid #00a99d; + border: 1px solid var(--green); border-radius: 100%; padding: 4px; } diff --git a/src/style.less b/src/style.less index 64ce8c70..4cd328af 100644 --- a/src/style.less +++ b/src/style.less @@ -40,6 +40,7 @@ --violet100: #f6f8fe; --violet200: #eef1fd; --violet300: #a4b6f4; + --green: #00A99D; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } From 9e095c83d9ae980085681c49bbf1a184ee077ee0 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 20:25:43 -0300 Subject: [PATCH 12/13] Add variable for red color --- .../Comparison/FeatureData/CheckOrCrossIcon.tsx | 2 +- src/style.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/EtlToolsXvsYPage/Comparison/FeatureData/CheckOrCrossIcon.tsx b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/CheckOrCrossIcon.tsx index 2d4811ac..b1590f63 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/FeatureData/CheckOrCrossIcon.tsx +++ b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/CheckOrCrossIcon.tsx @@ -6,7 +6,7 @@ const CheckOrCrossIcon = ({ icon }) => { if (icon === true) { return ; } else if (icon === false) { - return ; + return ; } return null; }; diff --git a/src/style.less b/src/style.less index 4cd328af..b0a5deab 100644 --- a/src/style.less +++ b/src/style.less @@ -41,6 +41,7 @@ --violet200: #eef1fd; --violet300: #a4b6f4; --green: #00A99D; + --red: #FF3A44; --header-link-hover: #5072eb4d; --default-transition: 80ms ease-in-out; } From f2318c2820ff14510ab6fa5ea9d42c740fc332ac Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 9 Dec 2024 21:38:52 -0300 Subject: [PATCH 13/13] Add some tweaks --- src/style.less | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/style.less b/src/style.less index b0a5deab..3efba95e 100644 --- a/src/style.less +++ b/src/style.less @@ -1,8 +1,5 @@ -/* CSS Custom Properties Definitions */ - @import './globalStyles/sections.module.less'; -// TODO: Add the variables from figma with the most used values and reuse them along all the css files :root { --spacing-0: 0; --spacing-1: 0.25rem; @@ -24,11 +21,10 @@ --fontSize-4: 1.728rem; --fontSize-5: 3.5rem; --fontSize-6: 3.75rem; + --default-transition: 80ms ease-in-out; --color-text: #2e353f; --color-text-light: #b7c6dd17; - --color-heading: #1a202c; - --color-heading-black: black; - --color-accent: #d1dce5; + --header-link-hover: #5072eb4d; --blue: #5072eb; --dark-blue: #04192b; --light-blue: #f9fafc; @@ -42,8 +38,6 @@ --violet300: #a4b6f4; --green: #00A99D; --red: #FF3A44; - --header-link-hover: #5072eb4d; - --default-transition: 80ms ease-in-out; } /* HTML elements */ @@ -83,7 +77,7 @@ div.__gatsby { } hr { - background: var(--color-accent); + background: var(--border-color); height: 1px; border: 0; } @@ -108,7 +102,7 @@ h4, h5, h6 { font-weight: var(--fontWeight-bolder); - color: var(--color-heading); + color: #1a202c; } h1 { @@ -238,7 +232,7 @@ table { } table thead tr th { - border-bottom: 1px solid var(--color-accent); + border-bottom: 1px solid var(--border-color); } a {