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/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/components/buttons/ButtonLink/ButtonLink.module.scss b/components/buttons/ButtonLink/ButtonLink.module.scss
new file mode 100644
index 00000000..63bd7c57
--- /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
+ &.inverted-grey {
+ &:hover {
+ color: var(--color-primary-content);
+ background-color: var(--color-transparent);
+ }
+ }
+
+ &.inverted-white {
+ 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..2c335e4e 100644
--- a/components/buttons/ButtonLink/index.js
+++ b/components/buttons/ButtonLink/index.js
@@ -1,21 +1,23 @@
-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,
+ customBtnClass,
openNewTab,
}) {
+ const buttonClass = customBtnClass
+ ? `${styles.buttonLink} ${styles[customBtnClass]}`
+ : styles.buttonLink;
+
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/components/containers/TwoColumn/index.js b/components/containers/TwoColumn/index.js
index 14904086..4cf3240f 100644
--- a/components/containers/TwoColumn/index.js
+++ b/components/containers/TwoColumn/index.js
@@ -11,7 +11,6 @@ export default function TwoColumn({
bgColor,
link,
customBtnClass,
- $btnColorScheme,
linkText = 'Learn more',
secondTextColumn,
openNewTab,
@@ -35,7 +34,7 @@ export default function TwoColumn({
{link && (
{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'
/>
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'
/>
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