Merge pull request #279 from Web-Dev-Path/refactor/to-scss-cardcolumns

Refactor/to scss cardcolumns

Author: oluwatobiss

CHANGELOG.md

@@ -184,6 +184,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Layout
   - RelatedPosts
   - Footer
+  - CardsColumns
   - Nav
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility

components/ContactUs/ContactUsCards/index.js

@@ -1,4 +1,5 @@
-import { ContactCardsColumns } from '../../containers/CardColumns/ContactCardsColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
+import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
 import RevealContentContainer from '../../containers/RevealContentContainer';
 import styles from './ContactUsCards.module.scss';
 
@@ -34,7 +35,7 @@ export default function ContactUsCards() {
   return (
     <article className={styles.contactCards}>
       <RevealContentContainer>
-        <ContactCardsColumns cards={cards} />
+        <CardsColumns cards={cards} cardComponent={ContactUsCard} />
       </RevealContentContainer>
     </article>
   );

components/blog/BlogPostsContainer/index.js

@@ -1,6 +1,6 @@
 import Link from 'next/link';
-import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
+import { CardsColumns } from '@/components/containers/CardsColumns';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -37,7 +37,12 @@ const BlogPostsContainer = ({
         {swipe ? (
           <>
             {[posts.slice(0, 6)].map((p, index) => (
-              <BlogCardsColumns key={index} cards={p} />
+              <CardsColumns
+                key={index}
+                cards={p}
+                cardComponent={BlogCard}
+                customClass='blog'
+              />
             ))}
           </>
         ) : (

components/containers/CardColumns/BlogCardsColumns.js

@@ -0,0 +1,11 @@
+.innerContent {
+  padding-bottom: 4rem;
+}
+
+.cardColumnSwiper {
+  margin-bottom: 5rem;
+
+  :global(.swiper-pagination-bullet-active) {
+    background-color: var(--dark-bg);
+  }
+}