Refactor: styled-components to CSS modules - initial setup and contactUs cards

Migrating project back to CSS Modules with SCSS from style-components

Author: cherylli

CHANGELOG.md

@@ -152,3 +152,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Updated outdated dependencies
 
 ### Fixed
+
+### Changed
+- Started migrating styles from Styled Components to CSS Modules (ContactUsCard)

components/ContactUs/ContactUsCards/ContactUsCards.module.scss

@@ -0,0 +1,3 @@
+.contactCards {
+  background-color: var(--bg-contact-card);
+}

components/ContactUsCards.js renamed to components/ContactUs/ContactUsCards/index.js

@@ -1,9 +1,8 @@
-import { ContactCardsColumns } from './containers/CardColumns/ContactCardsColumns';
-import RevealContentContainer from './containers/RevealContentContainer';
-import styled from 'styled-components';
+import { ContactCardsColumns } from '../../containers/CardColumns/ContactCardsColumns';
+import RevealContentContainer from '../../containers/RevealContentContainer';
+import styles from './ContactUsCards.module.scss';
 
 const cards = [
-
   {
     title: 'FAQ',
     image: '/images/svg/faq-icon.svg',
@@ -31,16 +30,12 @@ const cards = [
   },
 ];
 
-const ContactCardsContainer = styled.div`
-  background-color: ${({ theme }) => theme.colors.white};
-`;
-
 export default function ContactUsCards() {
   return (
-    <ContactCardsContainer>
+    <article className={styles.contactCards}>
       <RevealContentContainer>
         <ContactCardsColumns cards={cards} />
       </RevealContentContainer>
-    </ContactCardsContainer>
+    </article>
   );
 }

pages/_app.js

@@ -2,9 +2,9 @@ import Layout from '@/components/layout/Layout';
 import { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme, GlobalStyles } from '@/styles/themeConfig';
+import '@/styles/index.scss';
 
 function MyApp({ Component, pageProps }) {
-  
   // Only uncomment when the darkTheme is set
   // const [theme, setTheme] = useState('light');
   // const toggleTheme = () => {

pages/contact.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import ContactUsFormSubscribe from '@/components/ContactUs';
-import ContactUsCards from '@/components/ContactUsCards';
+import ContactUsCards from '@/components/ContactUs/ContactUsCards';
 import S from '@/styles/pages/contactStyles';
 
 export default function ContactUs() {

styles/_mixins.scss

@@ -0,0 +1,57 @@
+@use './variables' as *;
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+  -ms-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}
+
+@mixin tablet {
+  @media (min-width: $tablet-breakpoint) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $desktop-breakpoint) {
+    @content;
+  }
+}
+
+@mixin desktop-breakpoint-plus {
+  @media (min-width: $desktop-breakpoint-plus) {
+    @content;
+  }
+}
+
+@mixin medium-desktop {
+  @media (min-width: $medium-desktop-breakpoint) {
+    @content;
+  }
+}
+
+@mixin large-desktop {
+  @media (min-width: $large-desktop-breakpoint) {
+    @content;
+  }
+}
+
+@mixin desktop-breakpoint-minus {
+  @media (max-width: $desktop-breakpoint-minus) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: $lg-mobile-breakpoint) {
+    @content;
+  }
+}
+
+@mixin small-mobile {
+  @media (max-width: $sm-mobile-breakpoint) {
+    @content;
+  }
+}

styles/_variables.scss

@@ -0,0 +1,15 @@
+// Media Query Breakpoints
+$sm-mobile-breakpoint: 350px;
+$mobile-breakpoint: 578px;
+$lg-mobile-breakpoint: 767px;
+$tablet-breakpoint: 768px;
+$desktop-breakpoint-minus: 1023px;
+$desktop-breakpoint: 1024px;
+$desktop-breakpoint-plus: 1025px;
+$medium-desktop-breakpoint: 1250px;
+$large-desktop-breakpoint: 1440px;
+$extra-large-breakpoint: 2560px;
+
+//Fonts
+$copy-font: 'Assistant';
+$heading-font: 'Open Sans';

styles/index.scss

@@ -0,0 +1,3 @@
+@use './themes';
+@use './mixins';
+@use './variables';

styles/themes.scss

@@ -0,0 +1,16 @@
+:root {
+  --bg-contact-card: #ffffff;
+  --bg-color: #eaeaea;
+}
+
+// placeholder colors
+[data-theme='dark'] {
+  --bg-contact-card: #232431;
+  --bg-color: #333;
+}
+
+// Theming notes:
+/*
+Set document data-theme to dark to activate dark theme, for example
+  document.documentElement.setAttribute('data-theme', 'dark');
+ */