refactor: style contact us page

assets/css/theme.css

@@ -953,6 +953,10 @@ select {
   margin-top: 2rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -1090,6 +1094,10 @@ select {
   width: max-content;
 }
 
+.w-1\/5 {
+  width: 20%;
+}
+
 .max-w-\[100px\] {
   max-width: 100px;
 }
@@ -1114,6 +1122,18 @@ select {
   max-width: 100%;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1624,6 +1644,15 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
 .line-through {
   text-decoration-line: line-through;
 }
@@ -1636,6 +1665,14 @@ select {
   text-underline-offset: 2px;
 }
 
+.underline-offset-auto {
+  text-underline-offset: auto;
+}
+
+.underline-offset-1 {
+  text-underline-offset: 1px;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1697,6 +1734,70 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   --tw-ring-color: transparent;
 }
 
+.file\:mr-4::file-selector-button {
+  margin-right: 1rem;
+}
+
+.file\:w-full::file-selector-button {
+  width: 100%;
+}
+
+.file\:rounded-full::file-selector-button {
+  border-radius: 9999px;
+}
+
+.file\:border-0::file-selector-button {
+  border-width: 0px;
+}
+
+.file\:bg-violet-50::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
+}
+
+.file\:bg-transparent::file-selector-button {
+  background-color: transparent;
+}
+
+.file\:px-4::file-selector-button {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.file\:py-2::file-selector-button {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.file\:text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.file\:font-semibold::file-selector-button {
+  font-weight: 600;
+}
+
+.file\:text-violet-700::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(109 40 217 / var(--tw-text-opacity));
+}
+
+.file\:text-blue-950::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(23 37 84 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-500::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-500::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .last\:hidden:last-child {
   display: none;
 }
@@ -1762,6 +1863,21 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   text-decoration-line: none;
 }
 
+.hover\:file\:bg-violet-100::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
+}
+
+.hover\:file\:bg-blue-900::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+}
+
+.hover\:file\:text-blue-900::file-selector-button:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
 .focus\:border-0:focus {
   border-width: 0px;
 }

modules/contactform/views/templates/widget/contactform.tpl

@@ -22,93 +22,89 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<section class="contact-form">
+<section class="mx-auto max-w-6xl">
-  <form action="{$urls.pages.contact}" method="post" {if $contact.allow_file_upload}enctype="multipart/form-data"{/if}>
+  <form class="w-full flex flex-col gap-4" action="{$urls.pages.contact}" method="post" {if $contact.allow_file_upload}enctype="multipart/form-data"{/if}>
-
-    {if $notifications}
-      <div class="col-xs-12 alert {if $notifications.nw_error}alert-danger{else}alert-success{/if}">
-        <ul>
-          {foreach $notifications.messages as $notif}
-            <li>{$notif}</li>
-          {/foreach}
-        </ul>
-      </div>
-    {/if}
-
     {if !$notifications || $notifications.nw_error}
-      <section class="form-fields">
+      <div class="form-group row">
-
+        <div class="col-md-9 col-md-offset-3">
-        <div class="form-group row">
+          <h3 class="text-xl font-medium">{l s='Contact us' d='Shop.Theme.Global'}</h3>
-          <div class="col-md-9 col-md-offset-3">
-            <h3>{l s='Contact us' d='Shop.Theme.Global'}</h3>
-          </div>
         </div>
-
+      </div>
-        <div class="form-group row">
+      <section class="form-fields w-full flex max-md:flex-col flex-wrap">
-          <label class="col-md-3 form-control-label">{l s='Subject' d='Shop.Forms.Labels'}</label>
+        <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
-          <div class="col-md-6">
+          <label class="col-md-3 font-medium">{l s='Subject' d='Shop.Forms.Labels'}</label>
-            <select name="id_contact" class="form-control form-control-select">
+            <select name="id_contact" class="dropdown-toggle relative py-1 px-4 pr-8 w-full leading-1 border border-gray-300 text-left">
               {foreach from=$contact.contacts item=contact_elt}
                 <option value="{$contact_elt.id_contact}">{$contact_elt.name}</option>
               {/foreach}
             </select>
-          </div>
         </div>
 
-        <div class="form-group row">
+        <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
-          <label class="col-md-3 form-control-label">{l s='Email address' d='Shop.Forms.Labels'}</label>
+          <label class="col-md-3 font-medium">{l s='Email address' d='Shop.Forms.Labels'}</label>
-          <div class="col-md-6">
             <input
-              class="form-control"
+              class="form-control px-4 py-1 border border-gray-300 w-full"
               name="from"
               type="email"
               value="{$contact.email}"
               placeholder="{l s='your@email.com' d='Shop.Forms.Help'}"
             >
-          </div>
         </div>
 
         {if $contact.orders}
-          <div class="form-group row">
+          <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
-            <label class="col-md-3 form-control-label">{l s='Order reference' d='Shop.Forms.Labels'}</label>
+            <label class="col-md-3 font-medium">
-            <div class="col-md-6">
+            {l s='Order reference' d='Shop.Forms.Labels'}
-              <select name="id_order" class="form-control form-control-select">
+
+              <i class="text-xs font-light">
+                {l s='( optional )' d='Shop.Forms.Help'}
+              </i>
+            </label>
+            <div class="flex flex-col">
+              <select name="id_order" class="dropdown-toggle relative w-full py-1 px-4 pr-8 leading-1 border border-gray-300 text-left">
                 <option value="">{l s='Select reference' d='Shop.Forms.Help'}</option>
                 {foreach from=$contact.orders item=order}
                   <option value="{$order.id_order}">{$order.reference}</option>
                 {/foreach}
               </select>
             </div>
-            <span class="col-md-3 form-control-comment">
-              {l s='optional' d='Shop.Forms.Help'}
-            </span>
           </div>
         {/if}
 
-        {if $contact.allow_file_upload}
+        <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
-          <div class="form-group row">
+          <label class="col-md-3 font-medium">{l s='Message' d='Shop.Forms.Labels'}</label>
-            <label class="col-md-3 form-control-label">{l s='Attachment' d='Shop.Forms.Labels'}</label>
-            <div class="col-md-6">
-              <input type="file" name="fileUpload" class="filestyle" data-buttonText="{l s='Choose file' d='Shop.Theme.Actions'}">
-            </div>
-            <span class="col-md-3 form-control-comment">
-              {l s='optional' d='Shop.Forms.Help'}
-            </span>
-          </div>
-        {/if}
-
-        <div class="form-group row">
-          <label class="col-md-3 form-control-label">{l s='Message' d='Shop.Forms.Labels'}</label>
           <div class="col-md-9">
             <textarea
-              class="form-control"
+              class="form-control px-4 py-1 border border-gray-300 w-full"
               name="message"
               placeholder="{l s='How can we help?' d='Shop.Forms.Help'}"
-              rows="3"
+              rows="1"
             >{if $contact.message}{$contact.message}{/if}</textarea>
           </div>
         </div>
 
+
+        {if $contact.allow_file_upload}
+          <div class="form-group flex flex-col gap-2 px-2 my-2 w-full md:w-1/2">
+            <label class="col-md-3 font-medium">{l s='Attachment' d='Shop.Forms.Labels'}
+              <i class="text-xs font-light">
+                {l s='( optional )' d='Shop.Forms.Help'}
+              </i>
+            </label>
+            <div class="flex flex-col w-full">
+              <input type="file" name="fileUpload"
+              class="form-control text-sm text-blue-950
+                    border border-gray-300 my-2 w-full
+                    file:mr-4 file:py-2 file:px-4
+                    file:rounded-full file:border-0
+                    file:text-sm file:font-semibold
+                    file:bg-transparent file:text-blue-950
+                    hover:file:text-blue-900"
+              data-buttonText="{l s='Choose file' d='Shop.Theme.Actions'}">
+            </div>
+          </div>
+        {/if}
+
         {if isset($id_module)}
           <div class="form-group row">
             <div class="offset-md-3">
@@ -127,7 +123,7 @@
         </style>
         <input type="text" name="url" value=""/>
         <input type="hidden" name="token" value="{$token}" />
-        <input class="btn btn-primary" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
+        <input class="uppercase font-medium py-2 text-center w-full bg-blue-950 hover:bg-blue-900 text-gray-50" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
       </footer>
     {/if}
 

modules/ps_contactinfo/ps_contactinfo-rich.tpl

@@ -24,39 +24,26 @@
  *}
 
 <div class="contact-rich">
-  <h4>{l s='Store information' d='Shop.Theme.Global'}</h4>
+  <h4 class="text-2xl font-bold">{l s='Store information' d='Shop.Theme.Global'}</h4>
-  <div class="block">
+<div class="mx-auto max-w-6xl">
-    <div class="icon"><i class="material-icons">&#xE55F;</i></div>
+    <h4 class="text-xl font-medium mt-6">
-    <div class="data">{$contact_infos.address.formatted nofilter}</div>
+        Our Stylists
-  </div>
+    </h4>
-  {if $contact_infos.phone}
+    <p>
-    <hr/>
+        Our Stylists are here for you. We have helped dress some of the biggest names in Hollywood and Professional
-    <div class="block">
+        sports. Our staff of highly experienced tailors and stylists understand the demands placed on you to always look
-      <div class="icon"><i class="material-icons">&#xE0CD;</i></div>
+        your very best.
-      <div class="data">
+    </p>
-        {l s='Call us:' d='Shop.Theme.Global'}<br/>
+    <p class="mt-3">
-        <a href="tel:{$contact_infos.phone}">{$contact_infos.phone}</a>
+        Your personal stylist is ready to assist you in all your clothing needs.
-       </div>
+    </p>
-    </div>
+    <h4 class="text-xl font-medium mt-6">Customer Service</h4>
-  {/if}
+    <p> Let us show you how custom works.
-  {if $contact_infos.fax}
+        We will walk you through your first order.
-    <hr/>
+        Just drop us a line at
-    <div class="block">
+       <a href="mailto:customerservice@brooksbingham.com" class="underline underline-offset-2">customerservice@brooksbingham.com</a>
-      <div class="icon"><i class="material-icons">&#xE0DF;</i></div>
+        , and we will get in touch with you.
-      <div class="data">
+    </p>
-        {l s='Fax:' d='Shop.Theme.Global'}<br/>
+</div>
-        {$contact_infos.fax}
+<hr class="my-8"/>
-      </div>
-    </div>
-  {/if}
-  {if $contact_infos.email}
-    <hr/>
-    <div class="block">
-      <div class="icon"><i class="material-icons">&#xE158;</i></div>
-      <div class="data email">
-        {l s='Email us:' d='Shop.Theme.Global'}<br/>
-       </div>
-       <a href="mailto:{$contact_infos.email}">{$contact_infos.email}</a>
-    </div>
-  {/if}
 </div>

templates/contact.tpl

@@ -27,7 +27,7 @@
 {block name='page_header_container'}{/block}
 
 {block name='left_column'}
-  <div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
+  <div id="left-column" class="">
     {widget name="ps_contactinfo" hook='displayLeftColumn'}
   </div>
 {/block}