Merge pull request #277 from Web-Dev-Path/refactor/to-scss-contactStyle

Refactor/to-scss-contactStyle

Author: briangesteban

CHANGELOG.md

@@ -157,6 +157,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Updated husky script to avoid warning
 - Resolved incorrect meta tag rendering for nested routes
 - Prevent horizontal page scroll caused by overflowing long titles
+- Fixed hero images' max-height to align with WDP mockup
+- Fixed contact us form position to maintain structure on bigger displays
 
 ### Changed
 
@@ -184,6 +186,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Layout
   - RelatedPosts
   - Footer
+  - contactStyles
   - CardsColumns
   - Nav
   - NewsletterSubscribe

components/ContactUs/ContactUsForm/ContactUsForm.module.scss

@@ -10,6 +10,7 @@
     max-width: 100%;
     width: 26rem;
     padding: 2rem 0;
+    margin-right: 6.5625rem;
   }
 }
 

components/decorations/Bracket/Bracket.module.scss

@@ -36,7 +36,7 @@
   }
 
   @include desktop-breakpoint-plus {
-    top: 45%;
+    top: 38%;
     right: 140%;
   }
 }

components/layout/Hero/styles.js

@@ -10,7 +10,8 @@ const Header = styled.div`
 
   ${props => css`
     @media (min-width: ${props.theme.breakpoints.desktop}) {
-      min-height: 100vh;
+      height: 100vh;
+      max-height: 56.25rem;
     }
   `}
 `;

pages/contact.js

@@ -1,29 +1,35 @@
 import { useState } from 'react';
 import ContactUsFormSubscribe from '@/components/ContactUs';
 import ContactUsCards from '@/components/ContactUs/ContactUsCards';
-import S from '@/styles/pages/contactStyles';
+import styles from '@/styles/pages/contact.module.scss';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
 
   return (
     <>
-      <S.ContactUsContainer>
-        <S.FormAndDecorations>
-          <Bracket className={bracketStyles.yellowBracket} />
-          <ContactUsFormSubscribe setMsg={setMessage} />
-          <S.YellowColon src='/images/svg/yellow-colon.svg' />
-          <S.ResponseMessage>
-            {message?.map((m, i) => (
-              <span key={i}>
-                {m}
-                <br />
-              </span>
-            ))}
-          </S.ResponseMessage>
-        </S.FormAndDecorations>
-      </S.ContactUsContainer>
+      <div className={styles.contactUsContainer}>
+        <div className={styles.formWrapper}>
+          <div className={styles.formAndDecorations}>
+            <Bracket className={bracketStyles.yellowBracket} />
+            <ContactUsFormSubscribe setMsg={setMessage} />
+            <img
+              className={styles.yellowColon}
+              src='/images/svg/yellow-colon.svg'
+              alt=''
+            />
+            <div className={styles.responseMessage}>
+              {message?.map((m, i) => (
+                <span key={i}>
+                  {m}
+                  <br />
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
       <ContactUsCards />
     </>
   );

styles/pages/contact.module.scss

@@ -0,0 +1,67 @@
+@use '@/styles/index' as *;
+
+.contactUsContainer {
+  background-color: var(--color-light-bg);
+  height: 42rem;
+  position: relative;
+  margin-bottom: -10rem;
+
+  @include mobile {
+    height: unset;
+    padding-bottom: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  @include desktop {
+    height: 32rem;
+  }
+}
+
+.formWrapper {
+  display: flex;
+  max-width: 98rem;
+  margin-inline: auto;
+}
+
+.formAndDecorations {
+  position: relative;
+  width: 100%;
+  margin: auto;
+
+  @include tablet {
+    width: auto;
+    margin-top: -19rem;
+    margin-right: 2rem;
+  }
+
+  @include desktop {
+    margin: -25rem 5rem 0 auto;
+  }
+}
+
+.yellowColon {
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
+
+  @include tablet {
+    position: absolute;
+    top: -10%;
+    right: -5%;
+  }
+
+  @include desktop {
+    right: -1rem;
+  }
+}
+
+.responseMessage {
+  position: unset;
+  bottom: -5%;
+  padding: 0 2rem;
+
+  @include tablet {
+    position: absolute;
+    margin-top: 1rem;
+  }
+}