From 61f2faf335d3951e35fc8135bff168cf01f8d94b Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Fri, 1 Aug 2025 22:27:31 +1000 Subject: [PATCH 1/8] (twoColumn) migrate styles to CSS modules, replace contentType with customInnerClass --- .../TwoColumn/TwoColumn.module.scss | 230 ++++++++++++++++++ components/containers/TwoColumn/index.js | 50 ++-- pages/about.js | 16 +- 3 files changed, 265 insertions(+), 31 deletions(-) create mode 100644 components/containers/TwoColumn/TwoColumn.module.scss diff --git a/components/containers/TwoColumn/TwoColumn.module.scss b/components/containers/TwoColumn/TwoColumn.module.scss new file mode 100644 index 00000000..f9b211ea --- /dev/null +++ b/components/containers/TwoColumn/TwoColumn.module.scss @@ -0,0 +1,230 @@ +@use '@/styles/index' as *; + +.wrapper { + align-self: stretch; + + .inner { + padding: 5rem 0; + margin: 0 auto; + width: 90%; + + .inner__content { + margin-bottom: 5rem; + @include desktop { + flex-basis: 50%; + margin-bottom: 0; + } + + .title { + font-weight: bold; + //color: $primary-content-color; + margin: 0; + } + + .content { + display: flex; + align-items: center; + margin: 3.875rem 0 2.5rem; + max-width: 39rem; + font-size: 1.5rem; + line-height: 1.938rem; + + a { + text-decoration: underline; + text-underline-offset: 2px; + + &:hover { + opacity: 0.6; + text-decoration: none; + } + } + } + } + + .inner__image { + width: 100%; + height: 34rem; + position: relative; + + @include desktop { + width: 25rem; + } + + .img { + border-radius: 0.25rem; + object-fit: cover; + } + } + + // Homepage + + &.get-involved { + @include desktop-breakpoint-minus { + padding-bottom: 0; + } + } + + &.non-profit { + @include desktop-breakpoint-minus { + .inner__content { + margin-bottom: 0; + } + } + } + + // end Homepage + + //About page + + &.our-process, + &.get-started, + &.our-purpose, + &.our-background, + &.questions { + .inner__image { + height: 10rem; + .img { + object-fit: contain; + } + } + } + + &.our-background { + .inner__image { + @include desktop { + height: 15rem; + } + } + } + + &.our-process { + .inner__image { + @include desktop { + height: 12rem; + } + } + } + + &.our-purpose { + .inner__image { + @include desktop { + height: 18rem; + } + } + } + + &.get-started { + .inner__image { + @include desktop { + height: 20rem; + } + } + } + + &.questions { + .inner__image { + @include desktop { + height: 13rem; + } + } + } + + &.wanna-learn-more { + .content { + margin: 0; + } + + .inner__image { + height: 10rem; + + @include desktop { + height: 15rem; + } + + .img { + object-fit: contain; + } + } + } + + &.two-text-columns { + justify-content: space-evenly; + + .inner { + padding: 0px; + margin: 0px; + } + + .inner__content { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + h2 { + font-size: 2rem; + line-height: 2.5rem; + } + + .inner { + margin: 0px; + padding: 0px; + } + + .inner__content { + flex-basis: unset; + + @include desktop { + width: 25rem; + } + } + + a { + margin-top: auto; + //color: $light-bg-color; + } + + a:hover { + //color: $primary-content-color; + } + } + + &.second-text-column { + height: 100%; + width: 100%; + + .inner { + height: 100%; + } + + .inner__content { + height: 100%; + } + } + + &.get-started, + &.questions { + padding-bottom: 0px; + .inner__image { + display: none; + + @include desktop { + display: unset; + } + } + + @include desktop { + padding-bottom: 5rem; + } + } + + // end About page + + @include desktop { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + } +} diff --git a/components/containers/TwoColumn/index.js b/components/containers/TwoColumn/index.js index 4cf3240f..9dab4210 100644 --- a/components/containers/TwoColumn/index.js +++ b/components/containers/TwoColumn/index.js @@ -1,5 +1,8 @@ import ButtonLink from '@/components/buttons/ButtonLink'; -import TwoColumnStyles from './styles'; +// import TwoColumnStyles from './styles'; +import styles from './TwoColumn.module.scss'; +import Container from '@/components/containers/Container'; +import Image from 'next/image'; export default function TwoColumn({ image, @@ -11,26 +14,32 @@ export default function TwoColumn({ bgColor, link, customBtnClass, + customInnerClass, linkText = 'Learn more', secondTextColumn, openNewTab, - $contentType, }) { - //Set Styles based on content type - const S = TwoColumnStyles[$contentType] - ? TwoColumnStyles[$contentType] - : TwoColumnStyles.base; + const styleProps = { + wrapper: { + color, + backgroundColor: bgColor, + }, + }; // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop return ( - - + - - {title && {title}} - {content} +
+ {title &&

{title}

} +
{content}
{link && ( )} - +
{secondTextColumn && secondTextColumn} {!secondTextColumn && image && ( - - - +
+ {altTag} +
)} - - + + ); } diff --git a/pages/about.js b/pages/about.js index f9a651c7..181183f8 100644 --- a/pages/about.js +++ b/pages/about.js @@ -34,7 +34,7 @@ export default function AboutUs() { altTag='Square Brackets' color={theme.colors.primaryContent} bgColor={theme.colors.primaryAccent} - $contentType='our-background' + customInnerClass='our-background' /> @@ -75,7 +75,7 @@ export default function AboutUs() { altTag='Open angle bracket' color={theme.colors.primaryContent} bgColor={theme.colors.white} - $contentType='our-process' + customInnerClass='our-process' /> @@ -140,7 +140,7 @@ export default function AboutUs() { altTag='Semi-colon' color={theme.colors.primaryContent} bgColor={theme.colors.white} - $contentType='our-purpose' + customInnerClass='our-purpose' /> @@ -151,7 +151,7 @@ export default function AboutUs() { altTag='Close curly bracket' color={theme.colors.primaryContent} bgColor={theme.colors.lightBg} - $contentType='wanna-learn-more' + customInnerClass='wanna-learn-more' /> } /> @@ -220,7 +220,7 @@ export default function AboutUs() { altTag='Slash' color={theme.colors.primaryContent} bgColor={theme.colors.white} - $contentType='get-started' + customInnerClass='get-started' link='mailto:hello@webdevpath.co' linkText='Ping us' customBtnClass='inverted-grey' From 2bb054b8ce380c28511099ad49f0db713fb5e4a6 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Sat, 2 Aug 2025 00:57:55 +1000 Subject: [PATCH 2/8] (twoColumn) remove styled-components styles, migrate to CSS modules and refactor variables usage --- components/blog/BlogPostContainer/index.js | 8 +- .../TwoColumn/TwoColumn.module.scss | 20 +- components/containers/TwoColumn/index.js | 15 +- components/containers/TwoColumn/styles.js | 331 ------------------ pages/about.js | 41 +-- pages/index.js | 14 +- styles/globals.scss | 2 + 7 files changed, 42 insertions(+), 389 deletions(-) delete mode 100644 components/containers/TwoColumn/styles.js diff --git a/components/blog/BlogPostContainer/index.js b/components/blog/BlogPostContainer/index.js index a2abef66..94d87c48 100644 --- a/components/blog/BlogPostContainer/index.js +++ b/components/blog/BlogPostContainer/index.js @@ -3,10 +3,8 @@ import TwoColumn from '@/components/containers/TwoColumn'; import AuthorBio from '@/components/blog/AuthorBio'; import RelatedOrLatestPosts from '@/components/blog/RelatedPosts'; import PostContent from '@/components/blog/PostContent'; -import { useTheme } from 'styled-components'; const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => { - const theme = useTheme(); const { user } = post; return ( <> @@ -28,11 +26,11 @@ const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => { content='Feel free to contact us.' image='/images/svg/square-brackets.svg' altTag='Hashtag' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} - $contentType='questions' + color='var(--color-primary-content)' + bgColor='var(--color-white)' link='/contact' linkText='Contact us' + customInnerClass='questions' customBtnClass='inverted-grey' /> diff --git a/components/containers/TwoColumn/TwoColumn.module.scss b/components/containers/TwoColumn/TwoColumn.module.scss index f9b211ea..93c3d7eb 100644 --- a/components/containers/TwoColumn/TwoColumn.module.scss +++ b/components/containers/TwoColumn/TwoColumn.module.scss @@ -17,7 +17,6 @@ .title { font-weight: bold; - //color: $primary-content-color; margin: 0; } @@ -151,8 +150,8 @@ justify-content: space-evenly; .inner { - padding: 0px; - margin: 0px; + padding: 0; + margin: 0; } .inner__content { @@ -167,8 +166,8 @@ } .inner { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } .inner__content { @@ -178,15 +177,6 @@ width: 25rem; } } - - a { - margin-top: auto; - //color: $light-bg-color; - } - - a:hover { - //color: $primary-content-color; - } } &.second-text-column { @@ -204,7 +194,7 @@ &.get-started, &.questions { - padding-bottom: 0px; + padding-bottom: 0; .inner__image { display: none; diff --git a/components/containers/TwoColumn/index.js b/components/containers/TwoColumn/index.js index 9dab4210..cbd8895e 100644 --- a/components/containers/TwoColumn/index.js +++ b/components/containers/TwoColumn/index.js @@ -1,6 +1,5 @@ -import ButtonLink from '@/components/buttons/ButtonLink'; -// import TwoColumnStyles from './styles'; import styles from './TwoColumn.module.scss'; +import ButtonLink from '@/components/buttons/ButtonLink'; import Container from '@/components/containers/Container'; import Image from 'next/image'; @@ -50,12 +49,12 @@ export default function TwoColumn({ )} - {secondTextColumn && secondTextColumn} - {!secondTextColumn && image && ( -
- {altTag} -
- )} + {secondTextColumn || + (image && ( +
+ {altTag} +
+ ))} ); diff --git a/components/containers/TwoColumn/styles.js b/components/containers/TwoColumn/styles.js deleted file mode 100644 index 73a2c4a3..00000000 --- a/components/containers/TwoColumn/styles.js +++ /dev/null @@ -1,331 +0,0 @@ -import styled, { css } from 'styled-components'; -import Container from '../Container'; -import Image from 'next/image'; - -//TwoColumn Base styles - -const TwoColumnWrapper = styled.section` - align-self: stretch; - color: ${props => (props.$color ? props.$color : '')}; - background-color: ${props => (props.$bgColor ? props.$bgColor : '')}; -`; - -const InnerContainer = styled(Container)` - padding: 5rem 0; - margin: 0 auto; - width: 90%; - max-width: ${({ theme }) => theme.breakpoints.lgDesktop}; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - } - `} -`; - -const InnerContent = styled.div` - margin-bottom: 5rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - flex-basis: 50%; - margin-bottom: 0; - } - `} -`; - -const Title = styled.h2` - font-weight: bold; - margin: 0; - color: ${props => - props.$color ? props.$color : ({ theme }) => theme.colors.primaryContent}; -`; - -const Content = styled.div` - display: flex; - align-items: center; - margin: 3.875rem 0 2.5rem; - max-width: 39rem; - font-size: 1.5rem; - line-height: 1.938rem; - - a { - text-decoration: underline; - text-underline-offset: 2px; - - &:hover { - opacity: 0.6; - text-decoration: none; - } - } -`; - -const InnerImageWrapper = styled.div` - width: 100%; - height: 34rem; - position: relative; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - width: 25rem; - } - `} -`; - -const InnerImage = styled(Image)` - border-radius: 0.25rem; - object-fit: cover; -`; - -const BaseStyles = { - TwoColumnWrapper, - InnerContainer, - InnerContent, - Title, - Content, - InnerImageWrapper, - InnerImage, -}; - -// About page InnerImage -const AboutUsInnerImage = styled(InnerImage)` - object-fit: contain; -`; - -const AboutUs = { - ...BaseStyles, - InnerImage: AboutUsInnerImage, -}; - -// Our Process -const OurProcessInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 12rem; - } - `} -`; - -const OurProcess = { - ...AboutUs, - InnerImageWrapper: OurProcessInnerImageWrapper, -}; - -// Get Started -const GetStartedInnerContainer = styled(InnerContainer)` - padding-bottom: 0px; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - padding-bottom: 5rem; - } - `} -`; - -const GetStartedInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - display: none; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 20rem; - display: unset; - } - `} -`; - -const GetStarted = { - ...AboutUs, - InnerContainer: GetStartedInnerContainer, - InnerImageWrapper: GetStartedInnerImageWrapper, -}; - -// Our Purpose -const OurPurposeInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 18rem; - } - `} -`; - -const OurPurpose = { - ...AboutUs, - InnerImageWrapper: OurPurposeInnerImageWrapper, -}; - -// Our Background -const OurBackgroundInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 15rem; - } - `} -`; - -const OurBackground = { - ...AboutUs, - InnerImageWrapper: OurBackgroundInnerImageWrapper, -}; - -// Get Involved -const GetInvolvedInnerContainer = styled(InnerContainer)` - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktopMinus}) { - padding-bottom: 0; - } - `} -`; - -const GetInvolved = { - ...BaseStyles, - InnerContainer: GetInvolvedInnerContainer, -}; - -// Non Profit -const NonProfitInnerContent = styled(InnerContent)` - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktopMinus}) { - margin-bottom: 0; - } - `} -`; - -const NonProfit = { - ...BaseStyles, - InnerContent: NonProfitInnerContent, -}; - -// Wanna Learn More -const WannaLearnMoreContent = styled(Content)` - margin: 0; -`; - -const WannaLearnMoreInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 15rem; - } - `} -`; - -const WannaLearnMoreInnerImage = styled(InnerImage)` - object-fit: contain; -`; - -const WannaLearnMore = { - ...BaseStyles, - Content: WannaLearnMoreContent, - InnerImageWrapper: WannaLearnMoreInnerImageWrapper, - InnerImage: WannaLearnMoreInnerImage, -}; - -// Questions -const QuestionsInnerContainer = styled(InnerContainer)` - padding-bottom: 0px; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - padding-bottom: 5rem; - } - `} -`; - -const QuestionsInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - display: none; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 13rem; - display: unset; - } - `} -`; - -const QuestionsMore = { - ...AboutUs, - InnerContainer: QuestionsInnerContainer, - InnerImageWrapper: QuestionsInnerImageWrapper, -}; - -// Two Text Columns -const TwoTextColumnsInnerContainer = styled(InnerContainer)` - justify-content: space-evenly !important; - - h2 { - font-size: 2rem; - line-height: 2.5rem; - } - - a { - margin-top: auto; - color: ${({ theme }) => theme.colors.lightBg}; - } - - a:hover { - color: ${({ theme }) => theme.colors.primaryContent}; - } -`; - -const TwoTextColumnsInnerContent = styled(InnerContent)` - display: flex; - flex-direction: column; - align-items: flex-start; - flex-basis: unset !important; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - width: 25rem; - } - `} -`; - -const TwoTextColumns = { - ...BaseStyles, - InnerContainer: TwoTextColumnsInnerContainer, - InnerContent: TwoTextColumnsInnerContent, -}; - -//Second Text Columns -const SecondTextColumnInnerContent = styled(TwoTextColumnsInnerContent)` - height: 100%; -`; - -const SecondTextColumnInnerContainer = styled(InnerContainer)` - height: 100%; - width: 100%; - padding: 0px; - margin: 0px; -`; - -const SecondTextColumn = { - ...BaseStyles, - InnerContainer: SecondTextColumnInnerContainer, - InnerContent: SecondTextColumnInnerContent, -}; - -export default { - 'our-process': OurProcess, - 'get-started': GetStarted, - 'our-purpose': OurPurpose, - 'our-background': OurBackground, - 'get-involved': GetInvolved, - 'non-profit': NonProfit, - 'wanna-learn-more': WannaLearnMore, - questions: QuestionsMore, - 'two-text-columns': TwoTextColumns, - 'second-text-column': SecondTextColumn, - base: BaseStyles, -}; diff --git a/pages/about.js b/pages/about.js index 181183f8..79b941a1 100644 --- a/pages/about.js +++ b/pages/about.js @@ -7,11 +7,8 @@ import Container from '@/components/containers/Container'; import { Row } from '@/components/containers/Row'; import Member from '@/components/containers/Member'; import { whoWeAre } from '@/utils/about'; -import { useTheme } from 'styled-components'; export default function AboutUs() { - const theme = useTheme(); - return (
@@ -32,8 +29,8 @@ export default function AboutUs() { rowOrder='row' image='/images/svg/square-brackets.svg' altTag='Square Brackets' - color={theme.colors.primaryContent} - bgColor={theme.colors.primaryAccent} + color='var(--color-primary-content)' + bgColor='var(--color-primary-accent)' customInnerClass='our-background' /> @@ -73,8 +70,8 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/open-angle-bracket.svg' altTag='Open angle bracket' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} + color='var(--color-primary-content)' + bgColor='var(--color-white)' customInnerClass='our-process' /> @@ -138,8 +135,8 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/semi-colon.svg' altTag='Semi-colon' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} + color='var(--color-primary-content)' + bgColor='var(--color-white)' customInnerClass='our-purpose' /> @@ -149,8 +146,8 @@ export default function AboutUs() { content={''} image='/images/svg/close-curly-bracket.svg' altTag='Close curly bracket' - color={theme.colors.primaryContent} - bgColor={theme.colors.lightBg} + color='var(--color-primary-content)' + bgColor='var(--color-light-bg)' customInnerClass='wanna-learn-more' /> } @@ -218,8 +215,8 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/slash.svg' altTag='Slash' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} + color='var(--color-primary-content)' + bgColor='var(--color-white)' customInnerClass='get-started' link='mailto:hello@webdevpath.co' linkText='Ping us' @@ -255,12 +252,12 @@ export default function AboutUs() { content='Feel free to contact us.' image='/images/svg/hashtag.svg' altTag='Hashtag' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} - $contentType='questions' + color='var(--color-primary-content)' + bgColor='var(--color-white)' link='/contact' linkText='Contact us' customBtnClass='inverted-grey' + customInnerClass='questions' />
diff --git a/pages/index.js b/pages/index.js index ec846592..d28ac659 100644 --- a/pages/index.js +++ b/pages/index.js @@ -2,10 +2,8 @@ import TwoColumn from '@/components/containers/TwoColumn'; import { CardsColumns } from '@/components/containers/CardColumns'; import S from '@/styles/pages/homeStyles'; import RevealContentContainer from '@/components/containers/RevealContentContainer'; -import { useTheme } from 'styled-components'; export default function Home() { - const theme = useTheme(); return ( <> @@ -16,7 +14,7 @@ export default function Home() { content='Web Dev Path is an open-source initiative that provides hands-on experience in a simulated professional environment to people who seek to begin or move forward in their web development journey.' link='/about' customBtnClass='inverted-grey' - bgColor={theme.colors.lightBg} + bgColor='var(--color-light-bg)' /> @@ -26,8 +24,8 @@ export default function Home() { title='Get involved.' content='Web Dev Path runs on volunteers. Here are the ways you can get involved with us:' rowOrder='row-reverse' - $contentType='get-involved' - bgColor={theme.colors.white} + customInnerClass='get-involved' + bgColor='var(--color-white)' /> @@ -71,10 +69,10 @@ export default function Home() { diff --git a/styles/globals.scss b/styles/globals.scss index 9018aa80..12d695c3 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,3 +1,5 @@ +@use './variables' as *; + :root { --bg-contact-card: #ffffff; --bg-color: #eaeaea; From df702913261c18a6b34d22ee43855120568a6aee Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Sat, 2 Aug 2025 00:59:34 +1000 Subject: [PATCH 3/8] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index abfd780c..0c949665 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -174,6 +174,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Row - Container - Wrapper + - TwoColumn - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility - Updated SearchInput width to 100% for better styling - Reverted the prop name to styles in Container component as the change of the name introduced a styling bug From 35c8023818eeedb80bb3e3b5b7b0360d933c2b26 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Sat, 2 Aug 2025 01:07:01 +1000 Subject: [PATCH 4/8] (globals.scss) remove unused import --- styles/globals.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/styles/globals.scss b/styles/globals.scss index 12d695c3..9018aa80 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,5 +1,3 @@ -@use './variables' as *; - :root { --bg-contact-card: #ffffff; --bg-color: #eaeaea; From 8d525d220095ae0c95985a35e7fef576120f5be1 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Tue, 5 Aug 2025 19:07:20 +1000 Subject: [PATCH 5/8] remove bg, bgColor which were just the defaults --- .../containers/TwoColumn/TwoColumn.module.scss | 2 ++ components/containers/TwoColumn/index.js | 7 ++----- pages/about.js | 18 ++---------------- 3 files changed, 6 insertions(+), 21 deletions(-) diff --git a/components/containers/TwoColumn/TwoColumn.module.scss b/components/containers/TwoColumn/TwoColumn.module.scss index 93c3d7eb..3006b850 100644 --- a/components/containers/TwoColumn/TwoColumn.module.scss +++ b/components/containers/TwoColumn/TwoColumn.module.scss @@ -76,9 +76,11 @@ //About page &.our-process, + &.peer-reviews, &.get-started, &.our-purpose, &.our-background, + &.version-control, &.questions { .inner__image { height: 10rem; diff --git a/components/containers/TwoColumn/index.js b/components/containers/TwoColumn/index.js index cbd8895e..7b0b9a45 100644 --- a/components/containers/TwoColumn/index.js +++ b/components/containers/TwoColumn/index.js @@ -2,6 +2,7 @@ import styles from './TwoColumn.module.scss'; import ButtonLink from '@/components/buttons/ButtonLink'; import Container from '@/components/containers/Container'; import Image from 'next/image'; +import { combineClasses } from '@/utils/classnames'; export default function TwoColumn({ image, @@ -29,11 +30,7 @@ export default function TwoColumn({ return (
diff --git a/pages/about.js b/pages/about.js index 63977e15..82388557 100644 --- a/pages/about.js +++ b/pages/about.js @@ -29,7 +29,6 @@ export default function AboutUs() { rowOrder='row' image='/images/svg/square-brackets.svg' altTag='' - color='var(--color-primary-content)' bgColor='var(--color-primary-accent)' customInnerClass='our-background' /> @@ -70,9 +69,7 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/open-angle-bracket.svg' altTag='' - color='var(--color-primary-content)' - bgColor='var(--color-white)' - customInnerClass='our-process' + customInnerClass='peer-reviews' /> @@ -135,8 +130,6 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/semi-colon.svg' altTag='' - color='var(--color-primary-content)' - bgColor='var(--color-white)' customInnerClass='our-purpose' /> @@ -146,7 +139,6 @@ export default function AboutUs() { content={''} image='/images/svg/close-curly-bracket.svg' altTag='' - color='var(--color-primary-content)' bgColor='var(--color-light-bg)' customInnerClass='wanna-learn-more' /> @@ -163,7 +155,6 @@ export default function AboutUs() { openNewTab link='https://github.com/Web-Dev-Path/web-dev-path/wiki' customBtnClass='inverted-grey' - color='var(--color-primary-content)' bgColor='var(--color-light-bg)' customInnerClass='two-text-columns' secondTextColumn={ @@ -178,7 +169,6 @@ export default function AboutUs() { linkText='Contact us' link='/contact' customBtnClass='inverted-grey' - color='var(--color-primary-content)' bgColor='var(--color-light-bg)' customInnerClass='second-text-column' /> @@ -215,8 +205,6 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/slash.svg' altTag='' - color='var(--color-primary-content)' - bgColor='var(--color-white)' customInnerClass='get-started' link='mailto:hello@webdevpath.co' linkText='Ping us' @@ -252,8 +240,6 @@ export default function AboutUs() { content='Feel free to contact us.' image='/images/svg/hashtag.svg' altTag='' - color='var(--color-primary-content)' - bgColor='var(--color-white)' link='/contact' linkText='Contact us' customBtnClass='inverted-grey' From 5c1c3654abcdf474e7e9a85f9d94476baf76ccc6 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Wed, 6 Aug 2025 12:12:58 +1000 Subject: [PATCH 6/8] refactor two column style props --- components/containers/TwoColumn/index.js | 119 ++++++++++++----------- 1 file changed, 61 insertions(+), 58 deletions(-) diff --git a/components/containers/TwoColumn/index.js b/components/containers/TwoColumn/index.js index 7b0b9a45..0c6b6867 100644 --- a/components/containers/TwoColumn/index.js +++ b/components/containers/TwoColumn/index.js @@ -1,58 +1,61 @@ -import styles from './TwoColumn.module.scss'; -import ButtonLink from '@/components/buttons/ButtonLink'; -import Container from '@/components/containers/Container'; -import Image from 'next/image'; -import { combineClasses } from '@/utils/classnames'; - -export default function TwoColumn({ - image, - altTag, - title, - content, - rowOrder, - color, - bgColor, - link, - customBtnClass, - customInnerClass, - linkText = 'Learn more', - secondTextColumn, - openNewTab, -}) { - const styleProps = { - wrapper: { - color, - backgroundColor: bgColor, - }, - }; - - // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop - return ( -
- -
- {title &&

{title}

} -
{content}
- {link && ( - - {linkText} - - )} -
- {secondTextColumn || - (image && ( -
- {altTag} -
- ))} - -
- ); -} +import styles from './TwoColumn.module.scss'; +import ButtonLink from '@/components/buttons/ButtonLink'; +import Container from '@/components/containers/Container'; +import Image from 'next/image'; +import { combineClasses } from '@/utils/classnames'; + +export default function TwoColumn({ + image, + altTag, + title, + content, + rowOrder, + color, + bgColor, + link, + customBtnClass, + customInnerClass, + linkText = 'Learn more', + secondTextColumn, + openNewTab, +}) { + const styleProps = { + wrapper: { + color, + backgroundColor: bgColor, + }, + container: { + flexDirection: rowOrder, + }, + }; + + // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop + return ( +
+ +
+ {title &&

{title}

} +
{content}
+ {link && ( + + {linkText} + + )} +
+ {secondTextColumn || + (image && ( +
+ {altTag} +
+ ))} + +
+ ); +} From b1dda09cd3ca562387b28985e957320f36107d75 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Wed, 6 Aug 2025 19:38:58 +1000 Subject: [PATCH 7/8] (twoColumn) fix second column button position --- .../containers/TwoColumn/TwoColumn.module.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/components/containers/TwoColumn/TwoColumn.module.scss b/components/containers/TwoColumn/TwoColumn.module.scss index 3006b850..be223774 100644 --- a/components/containers/TwoColumn/TwoColumn.module.scss +++ b/components/containers/TwoColumn/TwoColumn.module.scss @@ -184,6 +184,9 @@ &.second-text-column { height: 100%; width: 100%; + display: flex; + align-items: center; + justify-content: center; .inner { height: 100%; @@ -191,6 +194,15 @@ .inner__content { height: 100%; + display: flex; + position: relative; + + @include desktop { + a { + position: absolute; + bottom: 0; + } + } } } From 3df070a7fb5e95f720f69433a60cff031fdedc61 Mon Sep 17 00:00:00 2001 From: Cheryl M Date: Wed, 6 Aug 2025 19:41:00 +1000 Subject: [PATCH 8/8] remove duplicate line in changelog --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 63511c7e..ddb19009 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -179,7 +179,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Decorations/Stick - TwoColumn - Extracted :root from themes.scss to globals.scss -- Extracted :root from themes.scss to globals.scss - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility - Updated SearchInput width to 100% for better styling - Updated the prop name to propStyles in Container component to fix the name conflict that introduced a styling bug