From 9a26d9bd1298c90d56bf6d01e9777f1d0e8ca0e0 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 28 Aug 2019 14:04:58 +0200
Subject: [PATCH] WIP #2770 @1

---
 resources/styles/components/form.styl   |  7 +------
 resources/styles/components/search.styl | 13 +++++++------
 resources/views/partials/form.blade.php |  2 +-
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/resources/styles/components/form.styl b/resources/styles/components/form.styl
index 026d013..a7d36f6 100644
--- a/resources/styles/components/form.styl
+++ b/resources/styles/components/form.styl
@@ -13,12 +13,7 @@
     text-align: right
 
   input, textarea
-    border-radius 3px
-    color: theme('colors.grey.dark')
-    padding 12px 10px
-    border 1px solid #fff
-    display: block
-    width: 100%
+    @apply block w-full outline-none border border-grey-100 text-grey-dark rounded p-3
 
     &:focus
       border-color: theme('colors.grey.250')
diff --git a/resources/styles/components/search.styl b/resources/styles/components/search.styl
index 65f0ba5..dd1a884 100644
--- a/resources/styles/components/search.styl
+++ b/resources/styles/components/search.styl
@@ -35,27 +35,28 @@ $breakpoint-search-results = 980px
   @apply flex-grow
 
   &-input
-    @apply px-2 py-2 font-display text-2xl w-full appearance-none
+    @apply px-2 py-2 font-display text-2xl w-full appearance-none border-2 border-grey-100
 
     &:focus
-      @apply outline-none border-t border-r border-l border-grey-200
+      @apply outline-none border-grey-200
 
       .header-search-box &
-        @apply bg-grey-100
+        @apply bg-grey-100 border-grey-100
 
         &[aria-expanded=true]
-          @apply bg-white
+          @apply bg-white border-grey-200
 
     +below(450px)
       @apply text-base
 
 
   &-result-list
-    @apply border-l border-r border-b border-grey-200 shadow-lg
+    @apply bg-white border-l-2 border-r-2 border-b-2 border-grey-200 shadow-lg
     z-index: 20 !important
+    transform: translateY(-2px) // To cover border on bottom of input
 
   &-result
-    @apply bg-white px-2 py-4 border-b border-grey-200
+    @apply px-4 py-4 border-b border-grey-200
 
     &:last-child
       @apply border-none
diff --git a/resources/views/partials/form.blade.php b/resources/views/partials/form.blade.php
index cb9c3e1..3ed44b0 100644
--- a/resources/views/partials/form.blade.php
+++ b/resources/views/partials/form.blade.php
@@ -7,7 +7,7 @@
 <div id="contact-form">
     <div class="ajax-form flex flex-col max-w-half">
         @if($page->get('form_intro'))
-            <p class="form-info text-navy">{{$page->get('form_intro')}}</p>
+            <div class="form-info text-navy">@markdown($page->get('form_intro'))</div>
         @endif
         <form class="text-navy mailform" action="{{ $action ?? '/ajax/mailform' }}" method="post"
               data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}" novalidate>
-- 
2.39.5