separate SubmitButton & NewsletterSubmitButton

remove all  props in SubmitButton.js

extended SubmitButton styled component to make NewsLetterSubmitButton

Author: thorrellt

components/ContactUsForm/index.js

@@ -4,7 +4,7 @@ import MailchimpSubscribe from 'react-mailchimp-subscribe';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Container from '@/components/containers/Container';
 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 }) => {

components/buttons/SubmitButton/index.js

@@ -1,9 +1,17 @@
 import S from './styles';
 
-export default function SubmitButton({ $buttonType, label, disabled }) {
+export function SubmitButton({ label, disabled }) {
   return (
-    <S.SubmitButton $buttonType={$buttonType} type='submit' disabled={disabled}>
+    <S.SubmitButton type='submit' disabled={disabled}>
       {label}
     </S.SubmitButton>
   );
 }
+
+export function NewsLetterSubmitButton({ label, disabled }) {
+  return (
+    <S.NewsLetterSubmitButton type='submit' disabled={disabled}>
+      {label}
+    </S.NewsLetterSubmitButton>
+  );
+}

components/buttons/SubmitButton/styles.js

@@ -32,26 +32,10 @@ const SubmitButton = styled.button`
     font-size: 1.5rem;
     min-width: 16rem;
     padding: 0.5rem 2rem;
-    //check props for button variations
-    ${props =>
-      props.$buttonType === 'newsletter__button' ? NewsLetterButton : ''}
   `)}
-
-  //media query mixins
-  ${m.largeDesktop(css`
-    //check props for button variations
-    ${props =>
-      props.$buttonType === 'newsletter__button'
-        ? NewsLetterButtonLgDesktop
-        : ''}
-  `)}
-
-  //check props for button variations
-  ${props =>
-    props.$buttonType === 'newsletter__button' ? NewsLetterButton : ''}
 `;
 
-const NewsLetterButton = css`
+const NewsLetterSubmitButton = styled(SubmitButton)`
   border-radius: 1.2rem;
   font-size: 1.2rem;
   background-color: ${$darkBgColor};
@@ -62,12 +46,18 @@ const NewsLetterButton = css`
     color: ${$darkBgColor};
     border: 1px solid #{$darkBgColor};
   }
-`;
 
-const NewsLetterButtonLgDesktop = css`
-  min-width: 12rem;
-  border-radius: 3rem;
-  padding: 0.7rem 0;
+  ${m.desktop(css`
+    border-radius: 1.2rem;
+    font-size: 1.2rem;
+    padding: 0.3rem 0;
+  `)}
+
+  ${m.largeDesktop(css`
+    min-width: 12rem;
+    border-radius: 3rem;
+    padding: 0.7rem 0;
+  `)}
 `;
 
-export default { SubmitButton };
+export default { SubmitButton, NewsLetterSubmitButton };

components/mailchimp/NewsletterForm/index.js

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import { decode } from 'html-entities';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Container from '@/components/containers/Container';
-import SubmitButton from '@/components/buttons/SubmitButton';
+import { NewsLetterSubmitButton } from '@/components/buttons/SubmitButton';
 import S from './styles';
 
 const SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
@@ -144,7 +144,7 @@ const NewsletterForm = ({ status, message, onValidated }) => {
               placeholder='email'
               onKeyUp={event => handleInputKeyEvent(event)}
             />
-            <SubmitButton label='Subscribe' $buttonType='newsletter__button' />
+            <NewsLetterSubmitButton label='Subscribe' />
 
             <ReCAPTCHA
               ref={recaptchaRef}