Updated the code with the original structure

Author: Satoshi-Sh

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

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 (
     <a

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

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:[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>