From 04c7325e1924d4c661e5f10f051060d460855bd5 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.ca>
Date: Tue, 12 Sep 2017 13:11:14 -0300
Subject: [PATCH] Clean up contact form.

---
 app/admin.php                                 |   2 +-
 app/setup.php                                 |   8 +-
 resources/assets/styles/common/_global.scss   |  36 +++--
 .../assets/styles/components/_buttons.scss    |   2 +-
 .../assets/styles/components/_forms.scss      | 143 +++++++++---------
 .../styles/layouts/pages/_front-page.scss     |  30 ----
 .../views/partials/contact-form.blade.php     |  26 ++--
 7 files changed, 116 insertions(+), 131 deletions(-)

diff --git a/app/admin.php b/app/admin.php
index 445b4b5..969f648 100644
--- a/app/admin.php
+++ b/app/admin.php
@@ -9,7 +9,7 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
     // Add postMessage support
     $wp_customize->get_setting('blogname')->transport = 'postMessage';
     $wp_customize->selective_refresh->add_partial('blogname', [
-        'selector' => '.brand',
+        'selector' => '.branding h1 a',
         'render_callback' => function () {
             bloginfo('name');
         }
diff --git a/app/setup.php b/app/setup.php
index 6dcf668..ef3529a 100644
--- a/app/setup.php
+++ b/app/setup.php
@@ -90,8 +90,8 @@ add_action('widgets_init', function () {
     $config = [
         'before_widget' => '<section class="widget %1$s %2$s">',
         'after_widget'  => '</section>',
-        'before_title'  => '<h3 class="tc ttu">',
-        'after_title'   => '</h3>'
+        'before_title'  => '<h2>',
+        'after_title'   => '</h2>'
     ];
     register_sidebar([
         'name'          => __('Front Page Content', 'aldine'),
@@ -102,8 +102,8 @@ add_action('widgets_init', function () {
         'id'            => 'front-page-block',
         'before_widget' => '<section class="block %1$s %2$s">',
         'after_widget'  => '</section>',
-        'before_title'  => '<h3 class="tc ttu">',
-        'after_title'   => '</h3>'
+        'before_title'  => '<h2>',
+        'after_title'   => '</h2>'
     ]);
     register_sidebar([
         'name'          => __('Network Footer Block 1', 'aldine'),
diff --git a/resources/assets/styles/common/_global.scss b/resources/assets/styles/common/_global.scss
index 0f444de..daccc22 100644
--- a/resources/assets/styles/common/_global.scss
+++ b/resources/assets/styles/common/_global.scss
@@ -31,18 +31,23 @@ h1 {
 }
 
 h2 {
-  font-size: rem(16);
-  font-weight: normal;
-  line-height: (30/16);
+  font-size: rem(30);
+  font-weight: 600;
+  color: var(--primary, $brand-primary);
+  letter-spacing: 2px;
+  line-height: (36/30);
+  text-transform: uppercase;
+  text-align: center;
   margin: 0;
-}
 
-.ml-auto {
-  margin-left: auto;
-}
-
-.mr-auto {
-  margin-right: auto;
+  &::before {
+    content: "";
+    display: block;
+    margin: 0 auto 1em;
+    width: 46px;
+    height: 5px;
+    background: var(--accent, $brand-accent);
+  }
 }
 
 :root {
@@ -81,3 +86,14 @@ a {
 .b--accent {
   border-color: var(--brand-secondary, $brand-accent);
 }
+
+@media (min-width: $medium) {
+  h2 {
+    font-size: rem(48);
+    line-height: (56/48);
+
+    &::before {
+      width: 74px;
+    }
+  }
+}
diff --git a/resources/assets/styles/components/_buttons.scss b/resources/assets/styles/components/_buttons.scss
index 40ea15d..2d163c0 100644
--- a/resources/assets/styles/components/_buttons.scss
+++ b/resources/assets/styles/components/_buttons.scss
@@ -35,7 +35,7 @@
   }
 
   &.button--outline {
-    background: $white;
+    background: transparent;
     color: var(--primary, $brand-primary);
 
     &:hover,
diff --git a/resources/assets/styles/components/_forms.scss b/resources/assets/styles/components/_forms.scss
index 6fe9608..5ba5392 100644
--- a/resources/assets/styles/components/_forms.scss
+++ b/resources/assets/styles/components/_forms.scss
@@ -1,98 +1,97 @@
-/** Search form */
-// TODO: .search-form {}
-// TODO: .search-form label {}
-// TODO: .search-form .search-field {}
-// TODO: .search-form .search-submit {}
-
-::placeholder {
-  color: $black;
-}
-
-.contact {
-  background: #f6f6f6;
-  padding: rem(65) 0 rem(120);
+.form {
+  width: rem(354);
 
-  h3 {
-    color: var(--primary, $brand-primary);
-
-    &::before {
-      content: '';
-      display: block;
-      margin: 0 auto 1rem;
-      width: rem(46);
-      height: rem(5);
-      background: var(--accent, $brand-accent);
-    }
+  ::placeholder {
+    color: $black;
   }
 
-  p {
+  &__notice {
+    margin-bottom: 2rem;
     font-size: 0.875rem;
     font-weight: 600;
     font-family: $font-family-sans-serif;
 
-    &:last-child {
-      margin-top: rem(47);
+    &--error {
+      color: $dark-red;
     }
-  }
-
-  .success {
-    color: $dark-green;
-  }
 
-  .error {
-    color: $dark-red;
+    &--success {
+      color: $dark-green;
+    }
   }
 
-  form {
-    width: 22.125rem;
+  &__row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
 
-    .error > input[type="text"],
-    .error > input[type="email"],
-    .error > textarea {
+    &--error > input[type="text"],
+    &--error > input[type="email"],
+    &--error > textarea {
       border-bottom: solid 2px $dark-red;
     }
 
-    .error > ::placeholder {
+    &--error > ::placeholder {
       color: $dark-red;
     }
-  }
 
-  label {
-    margin-bottom: 1rem;
+    &:last-child {
+      margin-top: rem(48);
+    }
   }
+}
 
-  label,
-  input[type="text"],
-  input[type="email"],
-  textarea {
-    font-size: 0.875rem;
-    font-weight: 600;
-    font-family: $font-family-sans-serif;
-    background: transparent;
-  }
+label {
+  margin-bottom: 1rem;
+}
 
-  .button {
-    background: transparent;
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+textarea {
+  flex-grow: 1;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: solid 2px $black;
+  padding: 0 0 1em;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-family: $font-family-sans-serif;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  &:focus {
+    outline: none;
+    border-bottom: solid 2px var(--accent, $brand-accent);
   }
+}
 
-  textarea {
-    height: 7.5em; // TODO
-    resize: none;
-  }
+textarea {
+  height: 7.5em;
+  resize: none;
+}
 
-  input[type="text"],
-  input[type="email"],
-  textarea {
-    flex-grow: 1;
-    border-top: 0;
-    border-right: 0;
-    border-left: 0;
-    border-bottom: solid 2px $black;
-    padding: 0 0 1em;
-
-    &:focus {
-      outline: none;
-      border-bottom: solid 2px var(--accent, $brand-accent);
-    }
+input[type="submit"] {
+  cursor: pointer;
+}
+
+// Contact form
+
+.contact {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: rem(65) 0 rem(120);
+  background: #f6f6f6;
+
+  h2 {
+    font-size: rem(24);
+    margin-bottom: rem(40);
   }
 }
diff --git a/resources/assets/styles/layouts/pages/_front-page.scss b/resources/assets/styles/layouts/pages/_front-page.scss
index 13fe0b1..6ae6819 100644
--- a/resources/assets/styles/layouts/pages/_front-page.scss
+++ b/resources/assets/styles/layouts/pages/_front-page.scss
@@ -89,27 +89,6 @@
     }
   }
 
-  .block,
-  .latest-books {
-    h3 {
-      font-size: rem(30);
-      font-weight: 600;
-      color: var(--primary, $brand-primary);
-      letter-spacing: 2px;
-      line-height: (36/30);
-      margin: 0;
-
-      &::before {
-        content: "";
-        display: block;
-        margin: 0 auto 1em;
-        width: 46px;
-        height: 5px;
-        background: var(--accent, $brand-accent);
-      }
-    }
-  }
-
   .latest-books {
     height: auto;
     padding: 0 0 rem(154);
@@ -238,15 +217,6 @@
         margin-bottom: 4.0625rem;
       }
 
-      h3 {
-        font-size: rem(48);
-        line-height: (56/48);
-
-        &::before {
-          width: 74px;
-        }
-      }
-
       p {
         font-size: rem(18);
         line-height: (32/18);
diff --git a/resources/views/partials/contact-form.blade.php b/resources/views/partials/contact-form.blade.php
index 5411ae3..470cde8 100644
--- a/resources/views/partials/contact-form.blade.php
+++ b/resources/views/partials/contact-form.blade.php
@@ -1,22 +1,22 @@
-<section class="contact flex flex-column justify-center items-center w-100" id="contact">
-  <h3 class="tc ttu">{{ $contact_form_title }}</h3>
-  <form action="{{ network_home_url('/#contact') }}" method="post">
+<section class="contact" id="contact">
+  <h2>{{ $contact_form_title }}</h2>
+  <form class="form" action="{{ network_home_url('/#contact') }}" method="post">
     @if($contact_form_response)
-      <p class="tl mb4 w-100 {{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p>
+    <p class="form__notice form__notice--{{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p>
     @endif
     <input type="hidden" name="submitted" value="1">
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_name'){{ 'error' }}@endif">
+    <p class="form__row @if(@$contact_form_response['field'] === 'visitor_name'){{ 'form__row--error' }}@endif">
       <label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label>
-      <input class="input-reset" type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p>
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_email'){{ 'error' }}@endif">
+      <input type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p>
+    <p class="form__row @if(@$contact_form_response['field'] === 'visitor_email'){{ 'form__row--error' }}@endif">
       <label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label>
-      <input class="input-reset" type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p>
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'error' }}@endif">
+      <input type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p>
+    <p class="form__row @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'form__row--error' }}@endif">
       <label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label>
-      <input class="input-reset" type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p>
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif">
+      <input type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p>
+    <p class="form__row @if(@$contact_form_response['field'] === 'message'){{ 'form__row--error' }}@endif">
       <label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label>
-      <textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
-    <p class="tc"><input class="button-reset button button--small button--outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
+      <textarea type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
+    <p class="form__row"><input class="button button--small button--outline" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
   </form>
 </section>