Update Simple Form

src/components/EnquiryFormSimple.css

@@ -27,19 +27,19 @@
   display: block;
   margin: 0;
   border: none;
-  padding: 1em;
+  border-bottom: 1px solid #bababa;
+  padding: 0.5em 0;
   line-height: 1;
   transition: border-color 0.2s;
   resize: none;
-  background: var(--lightGrey);
-  border-radius: 0;
 }
 
 .EnquiryForm--Input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--lightGrey) inset !important;
 }
 
-.EnquiryForm--Input:focus {
+.EnquiryForm--Input:focus,
+.EnquiryForm--Textarea:focus {
   outline: none;
   border-color: black;
 }
@@ -50,11 +50,10 @@
   cursor: progress;
 }
 
-.EnquiryForm--Input::placeholder {
-  text-transform: uppercase;
+.EnquiryForm--Input::placeholder,
+.EnquiryForm--Textarea {
+  text-transform: none;
 }
 
 .EnquiryForm--SubmitButton {
-  width: 90%;
-  margin: 2rem auto 0;
 }

src/components/EnquiryFormSimple.js

@@ -23,15 +23,6 @@ export default ({
         required
       />
     </label>
-    <label className='EnquiryForm--Label'>
-      <input
-        className='EnquiryForm--Input'
-        type='phone'
-        placeholder='Phone'
-        name='phone'
-        required
-      />
-    </label>
     <label className='EnquiryForm--Label'>
       <input
         className='EnquiryForm--Input'
@@ -54,7 +45,7 @@ export default ({
     {!!subject && <input type='hidden' name='subject' value={subject} />}
     <input type='hidden' name='form-name' value={name} />
     <input
-      className='Button Button--tertiary EnquiryForm--SubmitButton'
+      className='Button EnquiryForm--SubmitButton'
       type='submit'
       value='Enquire'
     />

src/globalStyles.css

@@ -1,5 +1,6 @@
 :root {
   --primary: #ff3d3d;
+  --primary-light: #ff6f6f;
   --secondary: #212121;
   --lightGrey: whitesmoke;
   --midGrey: #cacaca;
@@ -7,6 +8,7 @@
   --font-system: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
     'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
+  --borderRadius: 3px;
 }
 
 html {
@@ -193,50 +195,34 @@ pre code:after {
 /* Buttons */
 
 .Button {
-  border-radius: none;
-  display: inline-block;
   background: var(--primary);
   color: white;
   text-transform: uppercase;
-  padding: 1.5rem;
-  border: 1px solid;
-  border-radius: 0.1rem;
-  border-color: var(--primary);
   text-decoration: none;
-  font-size: 1.8rem;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: inherit;
+  font-weight: 400;
+  letter-spacing: 0.15em;
+  font-size: 1.4rem;
+  display: inline-block;
+  padding: 1rem 2rem;
+  border: none;
+  transition: all 0.2s ease;
   cursor: pointer;
-  max-width: 35rem;
+  border-radius: var(--borderRadius);
 }
 .Button:hover,
 .Button:focus {
-  background: white;
-  border-color: currentColor;
-  color: var(--tertiary);
+  background: var(--primary-light);
+  outline: none;
 }
 .Button[disabled] {
   opacity: 0.4;
   pointer-events: none;
   cursor: progress;
 }
-.Button.Button--tertiary {
-  background: var(--tertiary);
-  border-color: var(--tertiary);
-}
-.Button.Button--tertiary:hover,
-.Button.Button--tertiary:focus {
-  background: transparent;
-  border-color: currentColor;
-  color: var(--tertiary);
-}
 .Button.Button--inverted {
   background: white;
   border-color: white;
-  color: var(--tertiary);
+  color: var(--primary);
 }
 .Button.Button--inverted:hover,
 .Button.Button--inverted:focus {