Merge pull request 'refactor: minor styling changes and fixes' (#16) from abhisheks/theme-elegance:main into main

Reviewed-on: brooksbingham/theme-elegance#16

_dev/js/theme.js

@@ -24,12 +24,12 @@
  */
 /* eslint-disable */
 // import 'bootstrap/dist/js/bootstrap.min';
-import  'jquery-modal'
+import "jquery-modal";
 import "jquery-offcanvas/dist/jquery.offcanvas.min.css";
 import touchspin from "bootstrap-touchspin";
 import "jquery-touchswipe";
 import "./selectors";
-import './tabs.js';
+import "./tabs.js";
 
 import "./responsive";
 import "./checkout";
@@ -165,4 +165,7 @@ $(function () {
 
   $(".th-accordion").thaccordion();
 
+  $(".toggle-main-menu").on("click", function () {
+    $(".mobile-main-menu").toggle();
+  });
 });

assets/css/theme.css

@@ -823,6 +823,26 @@ select {
   top: 100%;
 }
 
+.top-12 {
+  top: 3rem;
+}
+
+.left-2\/3 {
+  left: 66.666667%;
+}
+
+.left-\[40\%\] {
+  left: 40%;
+}
+
+.left-\[45\%\] {
+  left: 45%;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1029,10 +1049,6 @@ select {
   width: 33.333333%;
 }
 
-.w-1\/4 {
-  width: 25%;
-}
-
 .w-1\/6 {
   width: 16.666667%;
 }
@@ -1049,6 +1065,10 @@ select {
   width: 6rem;
 }
 
+.w-3\/4 {
+  width: 75%;
+}
+
 .w-40 {
   width: 10rem;
 }
@@ -1102,14 +1122,14 @@ select {
   max-width: 240px;
 }
 
-.max-w-\[250px\] {
-  max-width: 250px;
-}
-
 .max-w-full {
   max-width: 100%;
 }
 
+.max-w-\[180px\] {
+  max-width: 180px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1291,6 +1311,27 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
+.border-gray-200\/50 {
+  border-color: rgb(229 231 235 / 0.5);
+}
+
+.border-gray-500\/50 {
+  border-color: rgb(107 114 128 / 0.5);
+}
+
+.border-gray-300\/50 {
+  border-color: rgb(209 213 219 / 0.5);
+}
+
+.border-gray-200\/70 {
+  border-color: rgb(229 231 235 / 0.7);
+}
+
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1335,6 +1376,30 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.stroke-red-200 {
+  stroke: #fecaca;
+}
+
+.stroke-gray-800 {
+  stroke: #1f2937;
+}
+
+.stroke-gray-600 {
+  stroke: #4b5563;
+}
+
+.stroke-\[4px\] {
+  stroke-width: 4px;
+}
+
+.stroke-\[6px\] {
+  stroke-width: 6px;
+}
+
+.stroke-\[3px\] {
+  stroke-width: 3px;
+}
+
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1497,6 +1562,16 @@ select {
   line-height: 1rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1605,6 +1680,33 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1732,20 +1834,51 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media not all and (min-width: 768px) {
+  .max-md\:right-4 {
+    right: 1rem;
+  }
+
+  .max-md\:right-8 {
+    right: 2rem;
+  }
+
+  .max-md\:right-6 {
+    right: 1.5rem;
+  }
+
   .max-md\:hidden {
     display: none;
   }
 
+  .max-md\:w-max {
+    width: -moz-max-content;
+    width: max-content;
+  }
+
+  .max-md\:max-w-\[70\%\] {
+    max-width: 70%;
+  }
+
   .max-md\:flex-col {
     flex-direction: column;
   }
 
+  .max-md\:items-end {
+    align-items: flex-end;
+  }
+
   .max-md\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
 }
 
+@media not all and (min-width: 640px) {
+  .max-sm\:max-w-\[70\%\] {
+    max-width: 70%;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:flex {
     display: flex;
@@ -1773,6 +1906,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .md\:h-screen {
+    height: 100vh;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -1797,6 +1934,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 50%;
   }
 
+  .md\:max-w-\[350px\] {
+    max-width: 350px;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -1863,6 +2004,14 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     right: 0px;
   }
 
+  .lg\:left-16 {
+    left: 4rem;
+  }
+
+  .lg\:right-16 {
+    right: 4rem;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -1871,6 +2020,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .lg\:h-screen {
+    height: 100vh;
+  }
+
   .lg\:w-1\/3 {
     width: 33.333333%;
   }
@@ -1911,6 +2064,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     flex-wrap: nowrap;
   }
 
+  .lg\:border-none {
+    border-style: none;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }

modules/ps_customersignin/ps_customersignin.tpl

@@ -22,7 +22,7 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div id="_desktop_user_info" class="relative">
+<div id="_desktop_user_info" class="relative max-md:hidden">
   <div class="flex max-w-[200px] justify-end mx-4">
     {if $logged}
       <a

modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl

@@ -31,7 +31,8 @@
       {include file="catalog/_partials/miniatures/product.tpl" product=$product}
     {/foreach}
   </div>
-  <a class="all-product-link text-2xl font-bold" href="{$allProductsLink}">
+  <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end" href="{$allProductsLink}">
     {l s='All products' d='Shop.Theme.Catalog'}
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
   </a>
 </section>

modules/ps_imageslider/views/templates/hook/slider.tpl

@@ -29,11 +29,11 @@
       {foreach from=$homeslider.slides item=slide name='homeslider'}
         <li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}" role="option" aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
           <a href="{$slide.url}">
-            <figure class="relative h-screen bg-gray-50">
+            <figure class="relative h-auto lg:h-screen bg-gray-50">
               <img class="w-full h-full object-contain md:object-cover" src="{$slide.image_url}" alt="{$slide.legend|escape}">
               {if $slide.title || $slide.description}
-                <figcaption class="caption absolute left-16 md:left-1/2 bottom-0 top-0 right-16 flex flex-col justify-center">
+                <figcaption class="caption absolute max-md:w-max left-1/2 md:left-1/2 bottom-0 top-0 right-1/5 flex flex-col justify-center">
-                  <h2 class="text-xl md:text-2xl lg:text-4xl xl:text-6xl font-bold mb-4">{$slide.title}</h2>
+                  <h2 class="text-xl max-sm:max-w-[70%] md:text-2xl lg:text-4xl xl:text-6xl font-bold mb-4">{$slide.title}</h2>
                   <div class="text-sm md:text-base font-medium">{$slide.description nofilter}</div>
                 </figcaption>
               {/if}

modules/ps_mainmenu/ps_mainmenu.tpl

@@ -1,7 +1,7 @@
 {assign var=_counter value=0}
 {function name="menu" nodes=[] depth=0 parent=null}
     {if $nodes|count}
-      <ul class="flex flex-1 items-center justify-center top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
+      <ul class="flex flex-1 items-center justify-center top-menu max-md:flex-col max-md:items-end" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
         {foreach from=$nodes item=node}
             <li class="{$node.type}{if $node.current} current {/if} px-2 py-2 font-medium hover:text-gray-950" id="{$node.page_identifier}">
             {assign var=_counter value=$_counter+1}
@@ -18,7 +18,7 @@
     {/if}
 {/function}
 
-<button class="absolute right-4 top-1/2 block -translate-y-1/2 p-3 ring-primary focus:ring-2 lg:hidden">
+<button class="toggle-main-menu absolute right-4 top-1/2 block -translate-y-1/2 p-3 ring-primary focus:ring-2 lg:hidden">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M4 6l16 0"></path>
@@ -26,6 +26,6 @@
     <path d="M4 18l16 0"></path>
   </svg>
 </button>
-<nav class="absolute right-4 top-full w-full max-w-[250px] justify-center rounded-lg bg-white py-5 px-6 shadow lg:static lg:flex lg:w-full lg:max-w-full lg:bg-transparent lg:py-0 lg:shadow-none hidden" id="_desktop_top_menu">
+<nav class="mobile-main-menu absolute z-10 right-4 top-full w-full max-w-[180px] md:max-w-[350px] border border-gray-100 justify-center rounded-lg bg-white py-5 px-6 drop-shadow-lg lg:static lg:border-none lg:flex lg:w-full lg:max-w-full lg:bg-transparent lg:py-0 lg:shadow-none hidden" id="_desktop_top_menu">
   {menu nodes=$menu.children}
 </nav>

templates/_partials/header.tpl

@@ -35,7 +35,7 @@
         <div class="w-full">
           {hook h='displayMainMenu'}
         </div>
-        <div class="relative right-16 hidden items-center justify-end sm:flex lg:right-0">
+        <div class="relative right-16 items-center justify-end sm:flex lg:right-0">
           {hook h='displayTop'}
         </div>
       </div>

templates/customer/_partials/login-form.tpl

@@ -48,7 +48,7 @@
       <footer class="form-footer w-full mt-8">
         <input type="hidden" name="submitLogin" value="1">
         {block name='form_buttons'}
-          <button id="submit-login" class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50" data-link-action="sign-in" type="submit" >
+          <button id="submit-login" class="uppercase font-medium py-2 text-center w-full bg-blue-950 hover:bg-blue-900 text-gray-50" data-link-action="sign-in" type="submit" >
             {l s='Sign in' d='Shop.Theme.Actions'}
           </button>
         {/block}

templates/customer/authentication.tpl

@@ -31,7 +31,7 @@
       </span>
     {/block}
     {block name='login_form_container'}
-      <section class="login-form w-1/4">
+      <section class="login-form w-3/4 md:w-1/2 lg:w-1/4">
         {render file='customer/_partials/login-form.tpl' ui=$login_form}
       </section>
       <hr/>