change Contact page to styled components

Author: thorrellt

pages/contact.js

@@ -1,32 +1,28 @@
 import { useState } from 'react';
 import { ContactUsFormSubscribe } from '@/components/ContactUsForm/ContactUsForm';
 import ContactUsCards from '@/components/ContactUsCards';
-import contactUsFormStyles from '@/styles/Contact.module.scss';
-import Bracket from '@/components/decorations/Bracket';
+import S from '@/styles/pages/contactStyles';
 
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
 
   return (
     <>
-      <div className={contactUsFormStyles.contact}>
-        <div className={contactUsFormStyles.contact__formAndDecorations}>
-          <Bracket className={contactUsFormStyles.contact__yellowBracket} />
+      <S.ContactUsContainer>
+        <S.FormAndDecorations>
+          <S.YellowBracket />
           <ContactUsFormSubscribe setMsg={setMessage} />
-          <img
-            src='/images/svg/yellow-colon.svg'
-            className={contactUsFormStyles.contact__yellowColon}
-          />
-          <div className={contactUsFormStyles.contact__response_message}>
+          <S.YellowColon src='/images/svg/yellow-colon.svg' />
+          <S.ResponseMessage>
             {message?.map((m, i) => (
               <span key={i}>
                 {m}
                 <br />
               </span>
             ))}
-          </div>
-        </div>
-      </div>
+          </S.ResponseMessage>
+        </S.FormAndDecorations>
+      </S.ContactUsContainer>
       <ContactUsCards />
     </>
   );

styles/pages/contactStyles.js

@@ -46,8 +46,8 @@ const FormAndDecorations = styled.div`
 `;
 
 const YellowBracket = styled(Bracket)`
-  //       -webkit-transform: scaleX(-1);
-  //       transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
 
   //media query mixins
   ${m.mobile(css`
@@ -74,15 +74,14 @@ const YellowBracket = styled(Bracket)`
 
 const YellowColon = styled.img`
   //media query mixins
-  ${m.desktop(css`
-    right: -15%;
-  `)}
-
   ${m.tablet(css`
     position: absolute;
     top: -10%;
     right: -5%;
   `)}
+  ${m.desktop(css`
+    right: -15%;
+  `)}
 `;
 
 const ResponseMessage = styled.div`
@@ -102,3 +101,11 @@ const ResponseMessage = styled.div`
     max-width: fit-content;
   `)}
 `;
+
+export default {
+  ContactUsContainer,
+  FormAndDecorations,
+  YellowBracket,
+  YellowColon,
+  ResponseMessage,
+};