Merge pull request #166 from Web-Dev-Path/feature/styled-components-c…

…onversion Styled components conversion
Web-Dev-Path · May 20, 2023 · be28a0a · be28a0a
2 parents e5fd0ab + 832a51d
commit be28a0a
Show file tree

Hide file tree

Showing 87 changed files with 2,510 additions and 2,095 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Contact us cards section to contact page
 - Linkedin link to footer
 - Next.js 13
+- Converting components into styled-components
 
 ### Fixed
 
@@ -78,6 +79,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - next.js warning - no stylesheets in head component
 - CardColumns refactoring to accept an array of card objects as props
 - styles on newsletter button and contact page
+- error where html loaded before styles by updating \_document.js
 
 ## Unreleased
 

diff --git a/components/ContactUsCards.js b/components/ContactUsCards.js
@@ -1,6 +1,7 @@
-import contactCardStyles from '@/styles/ContactUsCards.module.scss';
-import CardsColumns from './containers/CardsColumns';
+import { ContactCardsColumns } from './containers/CardColumns/ContactCardsColumns';
 import RevealContentContainer from './containers/RevealContentContainer';
+import styled from 'styled-components';
+import { $white } from '@/styles/_variables';
 
 const cards = [
   {
@@ -29,12 +30,16 @@ const cards = [
   },
 ];
 
+const ContactCardsContainer = styled.div`
+  background-color: ${$white};
+`;
+
 export default function ContactUsCards() {
   return (
-    <div className={contactCardStyles.contactCards}>
+    <ContactCardsContainer>
       <RevealContentContainer>
-        <CardsColumns cards={cards} customClass='contact-cards' />
+        <ContactCardsColumns cards={cards} />
       </RevealContentContainer>
-    </div>
+    </ContactCardsContainer>
   );
 }
diff --git a/components/ContactUsForm.js → components/ContactUsForm/index.js b/components/ContactUsForm.js → components/ContactUsForm/index.js
@@ -3,9 +3,9 @@ import { useRef } from 'react';
 import MailchimpSubscribe from 'react-mailchimp-subscribe';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Container from '@/components/containers/Container';
-import contactUsFormStyles from '@/styles/Contact.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
-import SubmitButton from '@/components/buttons/SubmitButton';
+import { SubmitButton } from '@/components/buttons/SubmitButton';
+import S from './styles';
 
 export const ContactUsFormSubscribe = ({ setMsg }) => {
   return (
@@ -20,11 +20,9 @@ export const ContactUsFormSubscribe = ({ setMsg }) => {
               setResponseMessage={setMsg}
             />
             {status === 'error' && (
-              <div
-                className={contactUsFormStyles.contact__respseonErrorMessage}
-              >
+              <S.ResponseOnErrorMsg>
                 {`Newsletter subscription error: ${message}`}
-              </div>
+              </S.ResponseOnErrorMsg>
             )}
           </>
         );
@@ -93,11 +91,8 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
   return (
     <RevealContentContainer>
       <Container>
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          className={contactUsFormStyles.contact__form}
-        >
-          <input
+        <S.Form onSubmit={handleSubmit(onSubmit)}>
+          <S.Input
             type='text'
             placeholder='name'
             {...register('Name', {
@@ -107,83 +102,78 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
               //no white space pattern
               pattern: /[^\s-]/i,
             })}
-            className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__name}`}
           />
-          <p className={contactUsFormStyles.contact__errorMessage}>
+          <S.ErrorMsg>
             {errors.Name?.type === 'required'
               ? 'Name is required'
               : errors.Name?.type === 'pattern'
               ? 'No whitespace'
               : errors.Name?.type === 'minLength'
               ? 'Must be more than 1 character'
               : undefined}
-          </p>
-          <input
+          </S.ErrorMsg>
+          <S.Input
             type='email'
             placeholder='email'
             {...register('Email', {
               required: true,
               pattern: /^\S+@\S+$/i,
             })}
-            className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__email}`}
           />
-          <p className={contactUsFormStyles.contact__errorMessage}>
+          <S.ErrorMsg>
             {errors.Email?.type === 'required' && 'Email is required'}
-          </p>
-          <input
+          </S.ErrorMsg>
+          <S.Input
             type='text'
             placeholder='subject'
             {...register('Subject', {
               required: true,
               minLength: 2,
               pattern: /[^\s-]/i,
             })}
-            className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__subject}`}
           />
-          <p className={contactUsFormStyles.contact__errorMessage}>
+          <S.ErrorMsg>
             {errors.Subject?.type === 'required'
               ? 'Subject is required'
               : errors.Subject?.type === 'pattern'
               ? 'No whitespace'
               : errors.Subject?.type === 'minLength'
               ? 'Must be more than 1 character'
               : undefined}
-          </p>
-          <textarea
+          </S.ErrorMsg>
+          <S.TextArea
             {...register('Message', {
               required: true,
               minLength: 2,
               pattern: /[^\s-]/i,
             })}
             placeholder='Write your message here'
-            className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__message}`}
           />
-          <p className={contactUsFormStyles.contact__errorMessage}>
+          <S.ErrorMsg>
             {errors.Message?.type === 'required'
               ? 'Message is required'
               : errors.Message?.type === 'pattern'
               ? 'No whitespace'
               : errors.Message?.type === 'minLength'
               ? 'Must be more than 1 character'
               : undefined}
-          </p>
-          <div className={contactUsFormStyles.contact__subscribe}>
-            <input
-              className={contactUsFormStyles.contact__subscribeInput}
+          </S.ErrorMsg>
+          <S.SubscribeWrapper>
+            <S.SubscribeInput
               type='checkbox'
               placeholder='Subscribe to our DevNews!'
               {...register('Subscribe', {})}
             />
             Subscribe to our DevNews!
-          </div>
+          </S.SubscribeWrapper>
           <SubmitButton label='Submit' disabled={isSubmitting} />
 
           <ReCAPTCHA
             ref={contactReCaptchaRef}
             size='invisible'
             sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
           />
-        </form>
+        </S.Form>
       </Container>
     </RevealContentContainer>
   );

diff --git a/components/ContactUsForm/styles.js b/components/ContactUsForm/styles.js
@@ -0,0 +1,128 @@
+import styled, { css } from 'styled-components';
+import * as m from '@/styles/_mixins';
+import {
+  $error,
+  $darkBgColor,
+  $primaryContentColor,
+} from '@/styles/_variables';
+
+const ResponseOnErrorMsg = styled.div`
+  position: absolute;
+  right: 8%;
+  bottom: -15%;
+  width: 26rem;
+  margin: auto;
+  color: ${$error};
+
+  //media query mixins
+  ${m.mobile(css`
+    position: unset;
+  `)}
+`;
+
+const Form = styled.form`
+  padding: 2.5rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  //media query mixins
+  ${m.desktop(css`
+    max-width: 100%;
+    width: 26rem;
+    padding: 2rem 0;
+  `)}
+`;
+
+const Input = styled.input`
+  display: block;
+  font-size: 1.2rem;
+  border-radius: 1rem;
+  height: 2rem;
+  padding: 1.2rem 1.25rem;
+  border: 1px solid ${$darkBgColor};
+  max-width: 100%;
+  width: 24rem;
+
+  &::placeholder {
+    color: ${$primaryContentColor};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  //media query mixins
+  ${m.largeDesktop(css`
+    font-size: 1.5rem;
+    height: 3rem;
+    border-radius: 3rem;
+    max-width: 25rem;
+  `)}
+`;
+
+const TextArea = styled.textarea`
+  display: block;
+  font-size: 1.2rem;
+  border-radius: 1rem;
+  height: 13rem;
+  padding: 1.2rem 1.25rem;
+  border: 1px solid ${$darkBgColor};
+  max-width: 100%;
+  width: 24rem;
+  font-family: inherit;
+
+  &::placeholder {
+    color: ${$primaryContentColor};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  //media query mixins
+  ${m.largeDesktop(css`
+    font-size: 1.5rem;
+    border-radius: 3rem;
+    max-width: 25rem;
+  `)}
+
+  ${m.desktop(css`
+    border-radius: 1.5rem;
+  `)}
+`;
+
+const ErrorMsg = styled.p`
+  color: ${$error};
+  margin: 0.1rem 0 1rem;
+  font-size: 1rem;
+  height: 1.5rem;
+  font-style: italic;
+  align-self: start;
+`;
+
+const SubscribeWrapper = styled.div`
+  display: flex;
+  margin-bottom: 1.25rem;
+  opacity: 0.6;
+
+  //media query mixins
+  ${m.desktop(css`
+    font-size: 1.5rem;
+  `)}
+`;
+
+const SubscribeInput = styled.input`
+  width: 1.5rem;
+  margin-right: 10px;
+`;
+
+export default {
+  ResponseOnErrorMsg,
+  Form,
+  Input,
+  ErrorMsg,
+  SubscribeWrapper,
+  SubscribeInput,
+  TextArea,
+};
diff --git a/components/blog/BlogPostsContainer.js → components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer.js → components/blog/BlogPostsContainer/index.js
@@ -1,9 +1,8 @@
-import CardsColumns from '@/components/containers/CardsColumns';
-import Card from '@/components/containers/Card';
+import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
+import { BlogCard } from '@/components/containers/Card/BlogCard';
 import Title from '@/components/snippets/Title';
-import Link from 'next/link';
-import styles from '@/styles/Blog.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
+import S from './styles';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
 
@@ -31,7 +30,7 @@ const BlogPostsContainer = ({
 
   return (
     <RevealContentContainer>
-      <div className={styles.blogContainer}>
+      <S.BlogContainer>
         {heading ? (
           <Container>
             <Title title={heading} />
@@ -46,40 +45,36 @@ const BlogPostsContainer = ({
           swipe ? (
             <>
               {[...splitPosts(posts, 3)].map((p, index) => (
-                <CardsColumns key={index} cards={p} customClass='blog' />
+                <BlogCardsColumns key={index} cards={p} />
               ))}
             </>
           ) : (
             <Container>
-              <div className={styles.postContainer}>
+              <S.PostContainer>
                 {posts?.map((p, index) => (
-                  <Card customClass='blog' key={index} card={p} />
+                  <BlogCard $cardType='blog' key={index} card={p} />
                 ))}
-              </div>
+              </S.PostContainer>
             </Container>
           )
         }
+
         {viewall && posts.length >= 3 ? (
           <Container>
-            <Link
-              className={`${styles.bottomLink} ${styles.viewAll}`}
+            <S.ViewAllBottomLink
               href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
             >
               view all
-            </Link>
+            </S.ViewAllBottomLink>
           </Container>
         ) : null}
+
         {back ? (
           <Container>
-            <Link
-              className={`${styles.bottomLink} ${styles.backLink}}`}
-              href={`/blog`}
-            >
-              &#60; Back
-            </Link>
+            <S.BackBottomLink href={`/blog`}>&#60; Back</S.BackBottomLink>
           </Container>
         ) : null}
-      </div>
+      </S.BlogContainer>
     </RevealContentContainer>
   );
 };