From ae0f1a2016864d9777571e6aefa6f39b4a27ab20 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Tue, 17 Jun 2025 01:08:56 +1000 Subject: [PATCH 1/8] revert ContactUsCards to use scss --- components/{ => ContactUs}/ContactUsCards.js | 15 ++--- .../ContactUs/ContactUsCards.module.scss | 6 ++ pages/contact.js | 2 +- styles/_mixins.scss | 57 +++++++++++++++++++ styles/_variables.scss | 29 ++++++++++ 5 files changed, 98 insertions(+), 11 deletions(-) rename components/{ => ContactUs}/ContactUsCards.js (72%) create mode 100644 components/ContactUs/ContactUsCards.module.scss create mode 100644 styles/_mixins.scss create mode 100644 styles/_variables.scss diff --git a/components/ContactUsCards.js b/components/ContactUs/ContactUsCards.js similarity index 72% rename from components/ContactUsCards.js rename to components/ContactUs/ContactUsCards.js index 5f07f64b..2af3e3d5 100644 --- a/components/ContactUsCards.js +++ b/components/ContactUs/ContactUsCards.js @@ -1,9 +1,8 @@ -import { ContactCardsColumns } from './containers/CardColumns/ContactCardsColumns'; -import RevealContentContainer from './containers/RevealContentContainer'; -import styled from 'styled-components'; +import { ContactCardsColumns } from '../containers/CardColumns/ContactCardsColumns'; +import RevealContentContainer from '../containers/RevealContentContainer'; +import styles from './ContactUsCards.module.scss'; const cards = [ - { title: 'FAQ', image: '/images/svg/faq-icon.svg', @@ -31,16 +30,12 @@ const cards = [ }, ]; -const ContactCardsContainer = styled.div` - background-color: ${({ theme }) => theme.colors.white}; -`; - export default function ContactUsCards() { return ( - +
- +
); } diff --git a/components/ContactUs/ContactUsCards.module.scss b/components/ContactUs/ContactUsCards.module.scss new file mode 100644 index 00000000..6cb58ceb --- /dev/null +++ b/components/ContactUs/ContactUsCards.module.scss @@ -0,0 +1,6 @@ +@use '../../styles/mixins' as *; +@use '../../styles/variables' as *; + +.contactCards { + background-color: $white; +} diff --git a/pages/contact.js b/pages/contact.js index cb98d482..38a584d1 100644 --- a/pages/contact.js +++ b/pages/contact.js @@ -1,6 +1,6 @@ import { useState } from 'react'; import ContactUsFormSubscribe from '@/components/ContactUs'; -import ContactUsCards from '@/components/ContactUsCards'; +import ContactUsCards from '@/components/ContactUs/ContactUsCards'; import S from '@/styles/pages/contactStyles'; export default function ContactUs() { diff --git a/styles/_mixins.scss b/styles/_mixins.scss new file mode 100644 index 00000000..80e8bac8 --- /dev/null +++ b/styles/_mixins.scss @@ -0,0 +1,57 @@ +@use './variables' as *; + +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + -ms-transition: $args; + -o-transition: $args; + transition: $args; +} + +@mixin tablet { + @media (min-width: $tablet-breakpoint) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-breakpoint) { + @content; + } +} + +@mixin desktop-breakpoint-plus { + @media (min-width: $desktop-breakpoint-plus) { + @content; + } +} + +@mixin medium-desktop { + @media (min-width: $medium-desktop-breakpoint) { + @content; + } +} + +@mixin large-desktop { + @media (min-width: $large-desktop-breakpoint) { + @content; + } +} + +@mixin desktop-breakpoint-minus { + @media (max-width: $desktop-breakpoint-minus) { + @content; + } +} + +@mixin mobile { + @media (max-width: $lg-mobile-breakpoint) { + @content; + } +} + +@mixin small-mobile { + @media (max-width: $sm-mobile-breakpoint) { + @content; + } +} diff --git a/styles/_variables.scss b/styles/_variables.scss new file mode 100644 index 00000000..df9fad34 --- /dev/null +++ b/styles/_variables.scss @@ -0,0 +1,29 @@ +// Media Query Breakpoints +$sm-mobile-breakpoint: 350px; +$mobile-breakpoint: 578px; +$lg-mobile-breakpoint: 767px; +$tablet-breakpoint: 768px; +$desktop-breakpoint-minus: 1023px; +$desktop-breakpoint: 1024px; +$desktop-breakpoint-plus: 1025px; +$medium-desktop-breakpoint: 1250px; +$large-desktop-breakpoint: 1440px; +$extra-large-breakpoint: 2560px; + +//Colors +$primary-content-color: #292929; +$primary-bg-color: #eaeaea; +$dark-bg-color: #023047; +$light-bg-color: #8cd5e8; +$primary-accent-color: #ffcc4c; +$secondary-accent-color: #19aad1; +$error: #be1313; +$black: #000000; +$white: #ffffff; +$transparent: transparent; +$box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15); +$box-shadow-bottom: 0 10px 20px -5px rgba(0, 0, 0, 0.15); + +//Fonts +$copy-font: 'Assistant'; +$heading-font: 'Open Sans'; From c424010ec0bbb4267b24f1d22ad87f39af07a876 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Tue, 17 Jun 2025 01:44:48 +1000 Subject: [PATCH 2/8] add theming --- .../ContactUs/ContactUsCards.module.scss | 5 +- components/layout/Layout/index.js | 50 +++++++++---------- pages/_app.js | 2 +- styles/index.scss | 3 ++ styles/themes.scss | 14 ++++++ 5 files changed, 44 insertions(+), 30 deletions(-) create mode 100644 styles/index.scss create mode 100644 styles/themes.scss diff --git a/components/ContactUs/ContactUsCards.module.scss b/components/ContactUs/ContactUsCards.module.scss index 6cb58ceb..68304683 100644 --- a/components/ContactUs/ContactUsCards.module.scss +++ b/components/ContactUs/ContactUsCards.module.scss @@ -1,6 +1,3 @@ -@use '../../styles/mixins' as *; -@use '../../styles/variables' as *; - .contactCards { - background-color: $white; + background-color: var(--white); } diff --git a/components/layout/Layout/index.js b/components/layout/Layout/index.js index b1ff612b..810c0ac6 100644 --- a/components/layout/Layout/index.js +++ b/components/layout/Layout/index.js @@ -1,25 +1,25 @@ -import { useRouter } from 'next/router'; -import { heroOptions } from '@/utils/hero-options'; -import Hero from '@/components/layout/Hero'; -import Meta from '@/components/layout/Meta'; -import Footer from '@/components/layout/Footer'; -import S from './styles'; - -export default function Layout({ children }) { - const router = useRouter(); - const heroPathKeys = Object.keys(heroOptions) - .sort((a, b) => a - b) - .filter(k => router.pathname.startsWith(k)); - - const heroKey = heroPathKeys[heroPathKeys.length - 1]; - return ( - <> - - - - {children} -