From a6a485e35bddcc30f849e15e09dbde6a517961c0 Mon Sep 17 00:00:00 2001 From: satoshi-sh Date: Thu, 19 Jun 2025 08:05:59 -0500 Subject: [PATCH 1/3] CSS Modules Modules Migration for ButtonLink --- CHANGELOG.md | 3 +- .../buttons/ButtonLink/ButtonLink.module.scss | 38 +++++++++++++++ components/buttons/ButtonLink/index.js | 23 ++++++--- components/buttons/ButtonLink/styles.js | 47 ------------------- styles/themes.scss | 3 ++ 5 files changed, 59 insertions(+), 55 deletions(-) create mode 100644 components/buttons/ButtonLink/ButtonLink.module.scss delete mode 100644 components/buttons/ButtonLink/styles.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 5dce0b56..a7d68f82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -156,6 +156,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Updated husky script to avoid warning ### Changed - - Started migrating styles from Styled Components to CSS Modules (ContactUsCard) - +- CSS Modules Migration for ButtonLink diff --git a/components/buttons/ButtonLink/ButtonLink.module.scss b/components/buttons/ButtonLink/ButtonLink.module.scss new file mode 100644 index 00000000..5d96b619 --- /dev/null +++ b/components/buttons/ButtonLink/ButtonLink.module.scss @@ -0,0 +1,38 @@ +.buttonLink { + padding: 0.5rem 2rem; + color: var(--color-white); + background-color: var(--color-primary-content); + border-radius: 2rem; + cursor: pointer; + font-weight: bold; + font-size: 1.5rem; + text-align: center; + min-width: 16rem; + display: inline-block; + border: 1px solid var(--color-primary-content); + text-decoration: none; + transition: all 0.3s ease; + + &:hover { + text-decoration: none; + } + + // Color scheme variations + &.invertedGrey { + &:hover { + color: var(--color-primary-content); + background-color: var(--color-transparent); + } + } + + &.invertedWhite { + border: 1px solid var(--color-white); + color: var(--color-primary-content); + background-color: var(--color-white); + + &:hover { + color: var(--color-white); + background-color: var(--color-transparent); + } + } +} diff --git a/components/buttons/ButtonLink/index.js b/components/buttons/ButtonLink/index.js index 4333e601..572a4b87 100644 --- a/components/buttons/ButtonLink/index.js +++ b/components/buttons/ButtonLink/index.js @@ -1,21 +1,32 @@ -import S from './styles'; +import styles from './ButtonLink.module.scss'; -/* The component supports the use of target with the property "openNewTab" to open the - link in a new tab.*/ export default function ButtonLink({ link, children, $colorScheme, openNewTab, + className, }) { + let buttonClass = styles.buttonLink; + + if ($colorScheme === 'inverted-grey') { + buttonClass += ` ${styles.invertedGrey}`; + } else if ($colorScheme === 'inverted-white') { + buttonClass += ` ${styles.invertedWhite}`; + } + + if (className) { + buttonClass += ` ${className}`; + } + return ( - {children} - + ); } diff --git a/components/buttons/ButtonLink/styles.js b/components/buttons/ButtonLink/styles.js deleted file mode 100644 index bd5fdeca..00000000 --- a/components/buttons/ButtonLink/styles.js +++ /dev/null @@ -1,47 +0,0 @@ -import styled, { css } from 'styled-components'; -import { transition } from '@/styles/themeConfig'; - -const ButtonLink = styled.a` - padding: 0.5rem 2rem; - color: ${({ theme }) => theme.colors.white}; - background-color: ${({ theme }) => theme.colors.primaryContent}; - border-radius: 2rem; - cursor: pointer; - font-weight: bold; - font-size: 1.5rem; - text-align: center; - min-width: 16rem; - display: inline-block; - border: 1px solid ${({ theme }) => theme.colors.primaryContent}; - ${transition('all 0.3s ease')}; - - - &:hover { - text-decoration: none; - } - - //check props for button variations - ${props => (props.$colorScheme === 'inverted-grey' ? invertedGrey : '')} - ${props => (props.$colorScheme === 'inverted-white' ? invertedWhite : '')} -`; - - -//Color Scheme Variations -const invertedGrey = css` - &:hover { - color: ${({ theme }) => theme.colors.primaryContent}; - background-color: ${({ theme }) => theme.colors.transparent}; - } -`; - -const invertedWhite = css` - border: 1px solid ${({ theme }) => theme.colors.white}; - color: ${({ theme }) => theme.colors.primaryContent}; - background-color: ${({ theme }) => theme.colors.white}; - &:hover { - color: ${({ theme }) => theme.colors.white}; - background-color: ${({ theme }) => theme.colors.transparent}; - } -`; - -export default { ButtonLink }; diff --git a/styles/themes.scss b/styles/themes.scss index 9263240f..1f844f4c 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -1,6 +1,9 @@ :root { --bg-contact-card: #ffffff; --bg-color: #eaeaea; + --color-white: #ffffff; + --color-primary-content: #292929; + --color-transparent: transparent; } // placeholder colors From cb905d06b99ceb6d802521abb407d0b872cb443f Mon Sep 17 00:00:00 2001 From: satoshi-sh Date: Mon, 23 Jun 2025 09:47:05 -0500 Subject: [PATCH 2/3] Updated the code with the original structure --- .../buttons/ButtonLink/ButtonLink.module.scss | 4 ++-- components/buttons/ButtonLink/index.js | 17 ++++------------- components/containers/TwoColumn/index.js | 3 +-- pages/about.js | 9 ++++----- 4 files changed, 11 insertions(+), 22 deletions(-) diff --git a/components/buttons/ButtonLink/ButtonLink.module.scss b/components/buttons/ButtonLink/ButtonLink.module.scss index 5d96b619..63bd7c57 100644 --- a/components/buttons/ButtonLink/ButtonLink.module.scss +++ b/components/buttons/ButtonLink/ButtonLink.module.scss @@ -18,14 +18,14 @@ } // Color scheme variations - &.invertedGrey { + &.inverted-grey { &:hover { color: var(--color-primary-content); background-color: var(--color-transparent); } } - &.invertedWhite { + &.inverted-white { border: 1px solid var(--color-white); color: var(--color-primary-content); background-color: var(--color-white); diff --git a/components/buttons/ButtonLink/index.js b/components/buttons/ButtonLink/index.js index 572a4b87..2c335e4e 100644 --- a/components/buttons/ButtonLink/index.js +++ b/components/buttons/ButtonLink/index.js @@ -3,21 +3,12 @@ import styles from './ButtonLink.module.scss'; export default function ButtonLink({ link, children, - $colorScheme, + customBtnClass, openNewTab, - className, }) { - let buttonClass = styles.buttonLink; - - if ($colorScheme === 'inverted-grey') { - buttonClass += ` ${styles.invertedGrey}`; - } else if ($colorScheme === 'inverted-white') { - buttonClass += ` ${styles.invertedWhite}`; - } - - if (className) { - buttonClass += ` ${className}`; - } + const buttonClass = customBtnClass + ? `${styles.buttonLink} ${styles[customBtnClass]}` + : styles.buttonLink; return ( {linkText} diff --git a/pages/about.js b/pages/about.js index 2de5f7a7..f37df117 100644 --- a/pages/about.js +++ b/pages/about.js @@ -10,7 +10,6 @@ import { whoWeAre } from '@/utils/about'; import { useTheme } from 'styled-components'; export default function AboutUs() { - const theme = useTheme(); return ( @@ -166,7 +165,7 @@ export default function AboutUs() { linkText='Our wiki' openNewTab link='https://github.com/Web-Dev-Path/web-dev-path/wiki' - $btnColorScheme='inverted-grey' + customBtnClass='inverted-grey' color={theme.colors.primaryContent} bgColor={theme.colors.lightBg} $contentType='two-text-columns' @@ -181,7 +180,7 @@ export default function AboutUs() { } linkText='Contact us' link='/contact' - $btnColorScheme='inverted-grey' + customBtnClass='inverted-grey' color={theme.colors.primaryContent} bgColor={theme.colors.lightBg} $contentType='second-text-column' @@ -224,7 +223,7 @@ export default function AboutUs() { $contentType='get-started' link='mailto:hello@webdevpath.co' linkText='Ping us' - $btnColorScheme='inverted-grey' + customBtnClass='inverted-grey' /> @@ -261,7 +260,7 @@ export default function AboutUs() { $contentType='questions' link='/contact' linkText='Contact us' - $btnColorScheme='inverted-grey' + customBtnClass='inverted-grey' /> From fb578735d918ff3df85a946b46f1704ff1553b0e Mon Sep 17 00:00:00 2001 From: satoshi-sh Date: Fri, 27 Jun 2025 06:21:11 -0500 Subject: [PATCH 3/3] Updated prop name of TwoColumn on the main and blog pages --- components/blog/BlogPostContainer/index.js | 2 +- pages/index.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/blog/BlogPostContainer/index.js b/components/blog/BlogPostContainer/index.js index 4e77ea76..a2abef66 100644 --- a/components/blog/BlogPostContainer/index.js +++ b/components/blog/BlogPostContainer/index.js @@ -33,7 +33,7 @@ const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => { $contentType='questions' link='/contact' linkText='Contact us' - $btnColorScheme='inverted-grey' + customBtnClass='inverted-grey' /> diff --git a/pages/index.js b/pages/index.js index 30022130..ec846592 100644 --- a/pages/index.js +++ b/pages/index.js @@ -5,7 +5,6 @@ import RevealContentContainer from '@/components/containers/RevealContentContain import { useTheme } from 'styled-components'; export default function Home() { - const theme = useTheme(); return ( <> @@ -16,7 +15,7 @@ export default function Home() { altTag='Join the project' 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' - $btnColorScheme='inverted-grey' + customBtnClass='inverted-grey' bgColor={theme.colors.lightBg} /> @@ -76,7 +75,7 @@ export default function Home() { bgColor={theme.colors.primaryContent} link='/about' $contentType='non-profit' - $btnColorScheme='inverted-white' + customBtnClass='inverted-white' />