Merge pull request #242 from Web-Dev-Path/refactor/to-scss-ButtonLink

CSS Modules Migration for ButtonLink Component

Author: Satoshi-Sh

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

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'
         />
       </RevealContentContainer>
     </>

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);
+    }
+  }
+}

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 (
-    <S.ButtonLink
+    <a
       href={link}
-      $colorScheme={$colorScheme}
+      className={buttonClass}
       target={openNewTab ? '_blank' : undefined}
       rel='noopener noreferrer'
     >
       {children}
-    </S.ButtonLink>
+    </a>
   );
 }

components/buttons/ButtonLink/styles.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 && (
             <ButtonLink
               link={link}
-              $colorScheme={$btnColorScheme}
+              customBtnClass={customBtnClass}
               openNewTab={openNewTab}
             >
               {linkText}

components/containers/TwoColumn/index.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:[email protected]'
           linkText='Ping us'
-          $btnColorScheme='inverted-grey'
+          customBtnClass='inverted-grey'
         />
       </RevealContentContainer>
       <RevealContentContainer>
@@ -261,7 +260,7 @@ export default function AboutUs() {
           $contentType='questions'
           link='/contact'
           linkText='Contact us'
-          $btnColorScheme='inverted-grey'
+          customBtnClass='inverted-grey'
         />
       </RevealContentContainer>
     </div>

pages/about.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}
         />
       </RevealContentContainer>
@@ -76,7 +75,7 @@ export default function Home() {
           bgColor={theme.colors.primaryContent}
           link='/about'
           $contentType='non-profit'
-          $btnColorScheme='inverted-white'
+          customBtnClass='inverted-white'
         />
       </RevealContentContainer>
     </>

pages/index.js

@@ -1,6 +1,9 @@
 :root {
   --bg-contact-card: #ffffff;
   --bg-color: #eaeaea;
+  --color-white: #ffffff;
+  --color-primary-content: #292929;
+  --color-transparent: transparent;
 }
 
 // placeholder colors