fix(buttons): removed and added contact button

HoseaCodes · Nov 6, 2021 · a439a31 · a439a31
1 parent 9f1dab8
commit a439a31
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 30 deletions.
diff --git a/src/Components/Form/Contact.css b/src/Components/Form/Contact.css
@@ -13,51 +13,26 @@
 
 .contact-container p {
   opacity: 0.6;
+  font-size: 2rem;
 }
 
 .contact-input,
 .area {
   width: 100% !important;
 }
 
-.btn {
-  border: 2px solid #fff;
-  color: white !important;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 0.8em;
-  margin-bottom: 10px;
-  padding: 2px 2px;
-  transition: all 0.5s;
-  text-decoration: none;
-  background-color: #206a5d;
-  padding: 5px;
-  opacity: 0.6;
-  margin-top: 20px;
-  width: 40%;
-  align-self: center;
-}
-.btn:hover {
-  padding: 10px 20px;
-  left: 35%;
-  animation: header-btn 10s steps(1) -1s normal;
-  background-color: transparent;
-  font-size: larger;
-}
 .contact-input::placeholder,
 .area::placeholder {
   font-size: 1.5rem;
 }
 
 @media only screen and (min-width: 768px) {
   .contact-container {
-    height: 50vh;
     width: 100%;
   }
 }
 @media only screen and (max-width: 480px) {
   .contact-container {
-    height: 50vh;
     width: 100vw;
   }
   .contact-container .contact-input {

diff --git a/src/Components/Form/ContactForm.jsx b/src/Components/Form/ContactForm.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { StyledFormSubmit } from '../../Layout/Form/styledInput';
 import './Contact.css'
 
 const ContactForm = () => {
@@ -9,10 +10,10 @@ const ContactForm = () => {
                 <input className='contact-input' type="text" name="name" placeholder="Name" />
                 <input className='contact-input' type="email" name="email" placeholder="Enter Email" />
                 <textarea className='area' name="message" placeholder='Your Message' />
-                <input className='btn' type="submit" value="Submit" />
+                <StyledFormSubmit type="submit" value="Submit"/>
             </form>
         </div>
     </>
     )
 }
-export default ContactForm;
+export default ContactForm;
diff --git a/src/Pages/Contact/Contact.css b/src/Pages/Contact/Contact.css
@@ -4,7 +4,7 @@
   justify-content: center;
   align-items: center;
   background-color: #1a1e23;
-  height: 60vh;
+  height: 40vh;
 }
 
 .contact-container p {
@@ -60,6 +60,6 @@ form {
   font-size: 3rem;
   text-transform: uppercase;
   text-align: center;
-  padding-top: 3rem;
+  padding-top: 8rem;
   letter-spacing: 0.5rem;
 }