Fix Contact Us UI Elements

open-template-hub · Sep 22, 2021 · 3596d0f · 3596d0f
1 parent eb74b79
commit 3596d0f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 28 deletions.
diff --git a/src/app/page/landing-layout/contact-us-page/contact-us-page.component.html b/src/app/page/landing-layout/contact-us-page/contact-us-page.component.html
@@ -24,7 +24,7 @@ <h1>Contact Us</h1>
             required
             type="text"
           />
-          <h4>First name</h4>
+          <h4>First Name</h4>
         </div>
         <div
           [class.input-error]="submitted && form.controls.secondName.invalid"
@@ -36,7 +36,7 @@ <h4>First name</h4>
             required
             type="text"
           />
-          <h4>Second name</h4>
+          <h4>Last Name</h4>
         </div>
         <div
           [class.input-error]="submitted && form.controls.workEmail.invalid"
@@ -48,7 +48,7 @@ <h4>Second name</h4>
             required
             type="text"
           />
-          <h4>Work email</h4>
+          <h4>Email</h4>
         </div>
         <div
           [class.input-error]="submitted && form.controls.workPhone.invalid"
@@ -59,7 +59,7 @@ <h4>Work email</h4>
             placeholder="+5 (555) 555-5555"
             type="text"
           />
-          <h4>Work phone</h4>
+          <h4>Phone Number</h4>
         </div>
         <div
           [class.input-error]="
@@ -72,7 +72,7 @@ <h4>Work phone</h4>
             placeholder="example.com"
             type="text"
           />
-          <h4>Company website</h4>
+          <h4>Website</h4>
         </div>
         <div
           [class.input-error]="submitted && form.controls.companySize.invalid"
@@ -89,7 +89,7 @@ <h4>Company website</h4>
               {{ option }}
             </option>
           </select>
-          <h4>Company size</h4>
+          <h4>Company Size</h4>
         </div>
         <div
           [class.input-error]="submitted && form.controls.country.invalid"
@@ -107,16 +107,15 @@ <h4>Country</h4>
         </div>
         <div
           [class.input-error]="submitted && form.controls.anythingElse.invalid"
-          class="input-with-label your-message"
-          style="align-items: initial"
+          class="input-with-label"
         >
           <textarea
             formControlName="anythingElse"
             maxlength="500"
-            placeholder="message..."
-            rows="2"
+            placeholder="Tell us more about your project, needs, and timeline...."
+            rows="5"
           ></textarea>
-          <h4>Your message</h4>
+          <h4>Your Message</h4>
         </div>
         <div class="button-area">
           <app-button1

diff --git a/src/app/page/landing-layout/contact-us-page/contact-us-page.component.scss b/src/app/page/landing-layout/contact-us-page/contact-us-page.component.scss
@@ -17,13 +17,23 @@
   min-height: 42px;
   margin-top: 0.8em;
   margin-bottom: 0.8em;
+  align-items: center;
 
   & h4 {
     font-weight: 500;
     white-space: break-spaces;
     text-align: left;
     padding-right: 10px;
   }
+
+  & input,
+  textarea,
+  select {
+    width: 60%;
+    min-width: 60%;
+    height: -webkit-fit-content;
+    @include util.default-fonts;
+  }
 }
 
 .contact-us-page-content {
@@ -38,14 +48,6 @@
   }
 }
 
-.input-with-label input,
-.input-with-label textarea,
-.input-with-label select {
-  width: 60%;
-  min-width: 60%;
-  height: -webkit-fit-content;
-}
-
 .input-with-label input::placeholder,
 .input-with-label textarea::placeholder {
   color: var(--lighter-contrast);
@@ -76,7 +78,7 @@ select {
 
 .button-area {
   text-align: right;
-  margin-top: 35px;
+  margin-top: 70px;
 }
 
 app-button1 {
@@ -161,14 +163,6 @@ select {
   }
 }
 
-.your-message {
-  height: 76px;
-}
-
-.your-message h4 {
-  margin-top: 12px;
-}
-
 @media only screen and (max-width: 999px) {
   .contact-us-page-content {
     flex-direction: column;