Merge pull request #287 from Web-Dev-Path/refactor/to-scss-NewsletterSubscribe

Refactor/to scss NewsletterSubscribe

Author: Satoshi-Sh

CHANGELOG.md

@@ -186,6 +186,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Footer
   - CardsColumns
   - Nav
+  - NewsletterSubscribe
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling

components/NewsletterSubscribe/NewsletterForm/NewsletterForm.module.scss

@@ -0,0 +1,132 @@
+@use '@/styles/index' as *;
+
+.section {
+  padding: 2.5rem 0;
+  background-color: var(--color-primary-accent);
+
+  @include desktop {
+    padding: 1rem 0;
+  }
+}
+
+.innerContainer {
+  @include desktop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+  }
+}
+
+.title {
+  font-size: 1.5rem;
+  color: var(--color-primary-content);
+  margin: 0;
+  white-space: nowrap;
+  display: flex;
+  gap: 0.5rem;
+
+  @include medium-desktop {
+    font-size: 1.75rem;
+    gap: 1rem;
+  }
+
+  @include desktop {
+    height: auto;
+  }
+}
+
+.rightChevron {
+  position: relative;
+  top: 0.1rem;
+  @include large-desktop {
+    top: unset;
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+}
+
+.form {
+  @include desktop {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-left: auto;
+  }
+}
+
+.input {
+  display: block;
+  font-size: 1.2rem;
+  border-radius: 1rem;
+  height: 2rem;
+  margin: 1rem 0;
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--dark-bg);
+  width: 100%;
+
+  &::placeholder {
+    color: var(--color-primary-content);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  @include large-desktop {
+    font-size: 1.5rem;
+    height: 3rem;
+    border-radius: 3rem;
+    max-width: 25rem;
+  }
+}
+
+.inputName {
+  @extend .input;
+
+  @include desktop {
+    width: 12.25rem;
+  }
+}
+
+.inputEmail {
+  @extend .input;
+
+  @include desktop {
+    width: 16rem;
+  }
+
+  @include large-desktop {
+    width: 26rem;
+  }
+}
+
+.formInfo {
+  font-size: 1rem;
+  font-style: italic;
+  color: var(--color-primary-content);
+}
+
+.formResponse {
+  margin-top: 1rem;
+
+  @include desktop {
+    font-size: 1.2rem;
+    margin: 0;
+  }
+}
+
+.formSending {
+  @extend .formResponse;
+}
+
+.formSuccess {
+  @extend .formResponse;
+}
+
+.formError {
+  @extend .formResponse;
+  color: var(--error);
+}

components/NewsletterSubscribe/NewsletterForm/index.js

@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { decode } from 'html-entities';
 import { NewsLetterSubmitButton } from '@/components/buttons/SubmitButton';
-import S from './styles';
+import styles from './NewsletterForm.module.scss';
+import Container from '@/components/containers/Container';
 
 const NewsletterForm = ({ status, message, subscribe, getReCaptchaToken }) => {
   const [error, setError] = useState(null);
@@ -109,29 +110,31 @@ const NewsletterForm = ({ status, message, subscribe, getReCaptchaToken }) => {
   };
 
   return (
-    <S.Section>
-      <S.InnerContainer>
-        <S.Title>
+    <section className={styles.section}>
+      <Container className={styles.innerContainer}>
+        <h2 className={styles.title}>
           Sign up for news
-          <S.RightChevron>
+          <span className={styles.rightChevron}>
             <Image
               src='/images/svg/right-chevron.svg'
               height={18}
               width={18}
               alt='Right Chevron SVG'
             />
-          </S.RightChevron>
-        </S.Title>
+          </span>
+        </h2>
         <div>
-          <S.Form onSubmit={handleFormSubmit}>
-            <S.InputName
+          <form className={styles.form} onSubmit={handleFormSubmit}>
+            <input
+              className={styles.inputName}
               onChange={event => setName(event?.target?.value ?? '')}
               type='text'
               name='name'
               value={name}
               placeholder='name'
             />
-            <S.InputEmail
+            <input
+              className={styles.inputEmail}
               onChange={event => setEmail(event?.target?.value ?? '')}
               type='email'
               name='email'
@@ -140,32 +143,36 @@ const NewsletterForm = ({ status, message, subscribe, getReCaptchaToken }) => {
               onKeyUp={event => handleInputKeyEvent(event)}
             />
             <NewsLetterSubmitButton label='Subscribe' />
-          </S.Form>
+          </form>
 
-          <S.FormInfo>
+          <div className={styles.formInfo}>
             {reCaptchaFail && (
-              <S.FormSending>
+              <div className={styles.formSending}>
                 Please, refresh your screen and try it again.
-              </S.FormSending>
+              </div>
             )}
 
-            {status === 'sending' && <S.FormSending>Sending...</S.FormSending>}
+            {status === 'sending' && (
+              <div className={styles.formSending}>Sending...</div>
+            )}
             {status === 'error' || error ? (
-              <S.FormError
+              <div
+                className={styles.formError}
                 dangerouslySetInnerHTML={{
                   __html: error || getMessage(message),
                 }}
               />
             ) : null}
             {status === 'success' && status !== 'error' && !error && (
-              <S.FormSuccess
+              <div
+                className={styles.formSuccess}
                 dangerouslySetInnerHTML={{ __html: decode(message) }}
               />
             )}
-          </S.FormInfo>
+          </div>
         </div>
-      </S.InnerContainer>
-    </S.Section>
+      </Container>
+    </section>
   );
 };