Merge remote-tracking branch 'origin/dewebsmid' into restore-old

This has been standard in the projects I've worked on so far so might as well replace it.

falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss

@@ -1,3 +1,21 @@
+// Made this more like the breakpoints used in Bootstrap 5
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+);
+
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1320px,
+);
+
 $grid-columns: 12;
 $grid-gutter-width: rem-calc(20px);
 $grid-row-columns: 6;

falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss

@@ -1,10 +1,13 @@
-$font-family-sans-serif:      "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI",
+    roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-base: $font-family-sans-serif;
+$headings-font-family: $font-family-sans-serif;
 
-$font-size-base:              rem-calc(16px);
+$font-size-base: rem-calc(14px);
 $font-size-lg: $font-size-base * 1.125;
-$font-size-sm:                $font-size-base * .875;
+$font-size-sm: $font-size-base * 0.875;
-$font-size-xs:                $font-size-base * .6875;
+$font-size-xs: $font-size-base * 0.6875;
 
 $font-weight-lighter: 200;
 $font-weight-light: 300;

falcon/_dev/css/custom.scss

@@ -1,19 +0,0 @@
-// NOTE: All bootstrap overrides have been configured under the abstracts/variables/bootstrap folder.
-
-//Abstracts: Things used throughout the site such as utility classes and generic overrides.
-//@import "custom/abstracts/base";
-//@import "custom/abstracts/utilities";
-
-// Components: parts of the theme itself that are not associated with a module.
-//@import "custom/components/";
-
-// Modules: Styling for specific modules.
-//@import "custom/modules/";
-
-//Layouts: Parts of a page, such as the header, footer, etc.
-//@import "custom/layout/header";
-//@import "custom/layout/footer";
-
-// Pages
-//@import "custom/pages/category";
-//@import "custom/pages/product";

falcon/_dev/css/theme.scss

@@ -1,3 +1,3 @@
 @import "abstracts/index";
 @import "theme/index";
-@import "custom";
+@import "theme/custom/custom";

falcon/_dev/css/theme/components/customer/_customer-links.scss

@@ -35,7 +35,6 @@
         max-width: inherit;
         padding: map.get($spacers, 2);
         font-weight: 700;
-    color: $gray-800;
         white-space: nowrap;
         border-radius: $border-radius;
         @include font-size($font-size-base);
@@ -45,13 +44,11 @@
         }
 
         @include hover-focus() {
-      color: $primary;
             text-decoration: none;
         }
 
         i {
             margin-right: map.get($spacers, 1);
-      color: $primary;
             @include font-size(26px);
             @include media-breakpoint-up(md) {
                 margin-right: map.get($spacers, 2);

falcon/_dev/css/theme/custom/_custom.scss

@@ -1,22 +1,35 @@
-/* This is the main custom SCSS file for the Falcon theme. 
+/* 
+This is the main custom SCSS file for the Falcon theme. 
 
 I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here:
 https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1
 
-⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap */
+⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
+Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
+
+*/
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
-//@import "abstracts/mixins";
+//@import "abstracts/base";
+@import "abstracts/functions";
+@import "abstracts/mixins";
+//@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
 //@import "components/buttons";
+@import "components/forms";
 
 // Modules: Styling for specific modules.
 //@import "modules/";
 
 //Layouts: Parts of a page, such as the header, footer, etc.
 //@import "layout/footer";
-//@import "layout/header";
+@import "layout/header";
+@import "layout/left-column";
+@import "layout/swiper";
 
 // Pages
+//@import "pages/checkout";
 //@import "pages/home";
+//@import "pages/listing";
+//@import "pages/product";

falcon/_dev/css/theme/custom/abstracts/_functions.scss

@@ -0,0 +1,17 @@
+@use "sass:math";
+
+// Font size utility classes generator
+// Generates utility classes like .fs-14, .fs-16, etc.
+@for $i from 8 through 72 {
+    .fs-#{$i} {
+        font-size: rem-calc($i * 1px) !important;
+    }
+}
+
+// gap size utility classes generator
+// Generates utility classes like .gap-4
+@for $i from 1 through 35 {
+    .gap-#{$i} {
+        gap: rem-calc($i * 1px) !important;
+    }
+}

falcon/_dev/css/theme/custom/abstracts/_mixins.scss

@@ -0,0 +1,73 @@
+// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
+// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass
+
+@mixin bs5-media-breakpoint-up($name) {
+    $min: map-get($grid-breakpoints, $name);
+    @if $min and $min > 0 {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-down($name) {
+    $max: map-get($grid-breakpoints, $name);
+    @if $max {
+        @media (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-between($lower, $upper) {
+    $min: map-get($grid-breakpoints, $lower);
+    $max: map-get($grid-breakpoints, $upper);
+    @if $min and $max {
+        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    }
+}
+
+@mixin bs5-media-breakpoint-only($name) {
+    $breakpoint-names: map-keys($grid-breakpoints);
+    $index: index($breakpoint-names, $name);
+    $next-name: nth($breakpoint-names, $index + 1);
+
+    @include bs5-media-breakpoint-between($name, $next-name) {
+        @content;
+    }
+}
+
+// Mixin to add an after pseudo-element with a mask image to customize button colors
+/* Example: 
+
+.btn-arrow-right{
+    &::after {
+        @include btn-after("../img/arrow-right.svg");
+    }
+}
+    
+*/
+
+@mixin btn-after($url, $color: currentColor) {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-left: 0.5em;
+    vertical-align: middle;
+    background-color: currentColor;
+    mask-image: url(#{$url});
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-image: url(#{$url});
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+}

falcon/_dev/css/theme/custom/abstracts/_utilities.scss

@@ -0,0 +1,3 @@
+// Header selector for interpolation
+// Example usage: #{$headings} { ... }
+$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -0,0 +1,26 @@
+// To customize text colors per button, use this map
+$btn-color: (
+    "primary": $white,
+    "secondary": $white,
+    "light": $primary,
+    "dark": $white,
+);
+
+// Generate button color overrides from the map
+@each $name, $color in $btn-color {
+    .btn-#{$name},
+    .btn-lg-#{$name},
+    .btn-sm-#{$name} {
+        color: $color !important;
+    }
+    .btn-outline-#{$name},
+    .btn-lg-outline-#{$name},
+    .btn-sm-outline-#{$name} {
+        color: $color;
+        &:hover,
+        &:focus,
+        &:active {
+            color: $color !important;
+        }
+    }
+}

falcon/_dev/css/theme/custom/components/_forms.scss

@@ -0,0 +1,12 @@
+.field-password-policy .input-group.js-parent-focus {
+    > * {
+        max-height: rem-calc(39px);
+    }
+    .form-control {
+        height: unset;
+    }
+    .input-group-append .btn {
+        border-top-right-radius: $border-radius !important;
+        border-bottom-right-radius: $border-radius !important;
+    }
+}

falcon/_dev/css/theme/custom/layout/_header.scss

@@ -0,0 +1,13 @@
+.header-top__row {
+    flex-wrap: wrap;
+    .header-top__block--search {
+        @include media-breakpoint-down(sm) {
+            order: 1;
+        }
+        .js-search-form {
+            max-width: unset;
+            width: 100%;
+            margin: 0;
+        }
+    }
+}

falcon/_dev/css/theme/custom/layout/_left-column.scss

@@ -0,0 +1,10 @@
+#left-column {
+    .list-group-item,
+    .list-group-item-action-dropdown-link,
+    label {
+        font-family: $font-family-base;
+        font-size: $font-size-base;
+        color: $secondary;
+        font-weight: 400;
+    }
+}

falcon/_dev/css/theme/custom/layout/_swiper.scss

@@ -0,0 +1,3 @@
+.swiper-slide {
+    height: auto;
+}

falcon/modules/is_favoriteproducts/views/templates/hook/button-product.tpl

@@ -0,0 +1,29 @@
+
+<div class="col-auto mt-2 px-1">
+    <a
+        class="product-page__action-btn btn btn-light shadow rounded-circle favorite-btn p-2"
+        href="#"
+        data-action="toggleFavorite"
+        data-active="false"
+        {if isset($product.id) && isset($product.id_product_attribute)}
+            data-key="{$product.id}_{$product.id_product_attribute}"
+        {/if}
+    >
+        <div class="favorite-btn__content favorite-btn__content--added">
+            {capture name="svg_output"}{svg_icon file='heart.svg' }{/capture}
+            {if $smarty.capture.svg_output}
+                {$smarty.capture.svg_output nofilter}
+            {else}
+                <span class="material-icons product-page__action-btn-icon d-block">favorite</span>
+            {/if}
+        </div>
+        <div class="favorite-btn__content favorite-btn__content--add">
+             {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
+            {if $smarty.capture.svg_output}
+                {$smarty.capture.svg_output nofilter}
+            {else}
+                <span class="material-icons product-page__action-btn-icon d-block">favorite_border</span>
+            {/if}
+        </div>
+    </a>
+</div>

falcon/modules/is_favoriteproducts/views/templates/hook/button.tpl

@@ -0,0 +1,28 @@
+
+<a
+    class="product-miniature__functional-btn product-miniature__functional-btn--top btn btn-light shadow rounded-circle favorite-btn"
+    href="#"
+    data-action="toggleFavorite"
+    data-active="false"
+    {if isset($product.id) && isset($product.id_product_attribute)}
+        data-key="{$product.id}_{$product.id_product_attribute}"
+    {/if}
+>
+    <div class="favorite-btn__content favorite-btn__content--added">
+        {capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+                <span class="material-icons product-miniature__functional-btn-icon d-block">favorite</span>
+        {/if}
+    </div>
+    <div class="favorite-btn__content favorite-btn__content--add">
+        {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <span class="material-icons product-miniature__functional-btn-icon d-block">favorite_border</span>
+        {/if}
+        
+    </div>
+</a>

falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl

@@ -0,0 +1,22 @@
+<div class="header-top__block header-top__block--search col-12 col-md mt-2 mt-lg-0">
+	<div id="search_from">
+		<form class="search-form js-search-form" data-search-controller-url="{$ajax_search_url}" method="get" action="{$search_controller_url}">
+			<div class="search-form__form-group">
+				<input type="hidden" name="controller" value="search">
+				<input class="js-search-input search-form__input form-control"
+					   placeholder="{l s='Enter what you are looking for' d='Modules.Issearchbar.Form'}"
+					   type="text"
+					   name="s"
+					   value="{$search_string}">
+				<button type="submit" class="search-form__btn btn">
+                    {capture name="svg_output"}{svg_icon file='search.svg'}{/capture}
+                    {if $smarty.capture.svg_output}
+                        {$smarty.capture.svg_output nofilter}
+                    {else}
+                        <span class="header-top__icon material-icons">search</span>
+                    {/if}
+				</button>
+			</div>
+		</form>
+	</div>
+</div>

falcon/modules/is_shoppingcart/views/templates/hook/is_shoppingcart.tpl

@@ -0,0 +1,89 @@
+{**
+ * 2007-2020 PrestaShop and Contributors
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.txt.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2020 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *}
+ 
+<div class="header-top__block header-top__block--cart col flex-grow-0">
+  <div class="js-blockcart blockcart cart-preview dropdown" data-refresh-url="{$refresh_url}">
+    <a href="#" role="button" id="cartDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+      class="header-top__link d-lg-block d-none">
+      <div class="header-top__icon-container">
+       {capture name="svg_output"}{svg_icon file='bag.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <span class="header-top__icon material-icons">shopping_basket</span>
+        {/if}
+        <span class="header-top__badge {if $cart.products_count > 9}header-top__badge--smaller{/if}">
+          {$cart.products_count}
+        </span>
+      </div>
+    </a>
+    <a href="{$cart_url}" class="d-flex d-lg-none header-top__link">
+      <div class="header-top__icon-container">
+       {capture name="svg_output"}{svg_icon file='bag.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <span class="header-top__icon material-icons">shopping_basket</span>
+        {/if}
+        <span class="header-top__badge {if $cart.products_count > 9}header-top__badge--smaller{/if}">
+          {$cart.products_count}
+        </span>
+      </div>
+    </a>
+    <div class="dropdown-menu blockcart__dropdown cart-dropdown dropdown-menu-right" aria-labelledby="cartDropdown">
+      <div class="cart-dropdown__content keep-open js-cart__card-body cart__card-body">
+        <div class="cart-loader">
+          <div class="spinner-border text-primary" role="status"><span
+              class="sr-only">{l s='Loading...' d='Shop.Theme.Global'}</span></div>
+        </div>
+        <div class="cart-dropdown__title d-flex align-items-center mb-3">
+          <p class="h5 mb-0 mr-2">
+            {l s='Your cart' d='Modules.Isshoppingcart.Isshoppingcart'}
+          </p>
+          <a data-toggle="dropdown" href="#" class="cart-dropdown__close dropdown-close ml-auto cursor-pointer text-decoration-none">
+            <i class="material-icons d-block">close</i>
+          </a>
+        </div>
+        {if $cart.products_count > 0}
+          <div class="cart-dropdown__products pt-3 mb-3">
+            {foreach from=$cart.products item=product}
+              {include 'module:is_shoppingcart/views/templates/front/is_shoppingcart-product-line.tpl' product=$product}
+            {/foreach}
+          </div>
+
+          <div class="cart-summary-line cart-total">
+            <span class="label">{$cart.totals.total.label}</span>
+            <span class="value">{$cart.totals.total.value}</span>
+          </div>
+
+          <div class="mt-3">
+            <a href="{$cart_url}" class="btn btn-sm btn-primary btn-block dropdown-close">
+              {l s='Proceed to checkout' d='Shop.Theme.Actions'}
+            </a>
+          </div>
+
+        {else}
+          <div class="alert alert-warning">
+            {l s='Unfortunately your basket is empty' d='Modules.Isshoppingcart.Isshoppingcart'}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

falcon/modules/ps_contactinfo/ps_contactinfo.tpl

@@ -28,7 +28,13 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Store information' d='Shop.Theme.Global'}</span>
     <a href="#footer_contact_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
+        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+        <span style="margin-bottom: 3px;">
+            {$smarty.capture.svg_output nofilter}
+        {else}
             <i class="material-icons d-block"></i>
+        {/if}
     </a>
   </div>
 

falcon/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl

@@ -28,7 +28,13 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
     <a href="#footer_account_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
+        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+        <span style="margin-bottom: 3px;">
+            {$smarty.capture.svg_output nofilter}
+        {else}
             <i class="material-icons d-block"></i>
+        {/if}
     </a>
   </div>
 

falcon/modules/ps_customersignin/ps_customersignin.tpl

@@ -34,7 +34,12 @@
     {/if}
   >
     <div class="header-top__icon-container">
+        {capture name="svg_output"}{svg_icon file='person.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
             <span class="header-top__icon material-icons">person</span>
+        {/if}
     </div>
   </a>
 </div>

falcon/modules/ps_linklist/views/templates/hook/linkblock-column.tpl

@@ -4,7 +4,13 @@
     <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
       <span class="h4 mb-0">{$linkBlock.title}</span>
       <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
+        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+        <span style="margin-bottom: 3px;">
+            {$smarty.capture.svg_output nofilter}
+        {else}
             <i class="material-icons d-block"></i>
+        {/if}
       </a>
     </div>
     <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

falcon/modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -29,7 +29,13 @@
       <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
         <span class="h4 mb-0">{$linkBlock.title}</span>
         <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
+            {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+            {if $smarty.capture.svg_output}
+            <span style="margin-bottom: 3px;">
+                {$smarty.capture.svg_output nofilter}
+            {else}
                 <i class="material-icons d-block"></i>
+            {/if}
         </a>
       </div>
       <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

falcon/modules/ps_mainmenu/ps_mainmenu.tpl

@@ -21,9 +21,14 @@
             >
               <span class="align-self-center">{$node.label}</span>
               {if $node.children|count}
+                {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+                {if $smarty.capture.svg_output}
                 <span class="d-none d-md-block pl-1" style="margin-bottom: 3px;">
-                    {svg_icon file='chevron_down.svg' }  
+                    {$smarty.capture.svg_output nofilter}
                 </span>
+                {else}
+                    <i class="material-icons d-block"></i>
+                {/if}
               {/if}
             </a>
             {if $node.children|count}

falcon/templates/_partials/footer-copyright.tpl

@@ -0,0 +1,25 @@
+<div class="footer-bottom py-3">
+    <div class="container d-flex justify-content-between align-items-center">
+        <div class="copyright">
+            <span>
+                {l
+                  s='Copyright © %year% %shop%'
+                  sprintf=['%year%' => $smarty.now|date_format:"%Y", '%shop%' => $shop.name|capitalize]
+                  d='Shop.Theme.Footer'
+                }
+            </span>
+        </div>
+        <a href="https://dewebsmid.nl/prestashop/" rel="noopener" target="_blank">
+            {l s='PrestaShop' d='Shop.Theme.Footer'}
+        </a>
+        <div class="privacy">
+            <a href="content/3-gebruiks-voorwaarden">
+                {l s='Terms & Conditions' d='Shop.Theme.Footer'}
+            </a>
+            <span class="mx-2"> | </span>
+            <a href="content/1-levering">
+                {l s='Privacy policy' d='Shop.Theme.Footer'}
+            </a>
+        </div>
+    </div>
+</div>

falcon/templates/_partials/footer.tpl

@@ -29,7 +29,7 @@
     {/block}
   </div>
 </div>
-<div class="footer-container">
+<div class="footer-container pb-0">
   <div class="container">
     <div class="row">
       {block name='hook_footer'}
@@ -42,4 +42,5 @@
       {/block}
     </div>
   </div>
+    {include file='_partials/footer-copyright.tpl'}
 </div>

falcon/templates/_partials/header.tpl

@@ -29,24 +29,14 @@
 {/block}
 
 {block name='header_nav'}
-    <nav class="header-nav border-bottom bg-light py-1 d-none d-md-block">
+
-        <div class="container">
-            <div class="row align-items-center">
-                {hook h='displayNav1'}
-                {hook h='displayNav2'}
-            </div>
-        </div>
-    </nav>
 {/block}
 
 {block name='header_top'}
     <div class="js-header-top-wrapper">
-
         <div class="header-top js-header-top">
-            <div class="header-top__content pt-md-3 pb-md-0 py-2">
+            <div class="header-top__content pb-md-0 py-2">
-
                 <div class="container">
-
                     <div class="row header-top__row">
 
                         <div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none">
@@ -58,12 +48,17 @@
                                     data-target="#mobile_top_menu_wrapper"
                             >
                                 <div class="header-top__icon-container">
+                                    {capture name="svg_output"}{svg_icon file='hamburger-menu.svg'}{/capture}
+                                    {if $smarty.capture.svg_output}
+                                        {$smarty.capture.svg_output nofilter}
+                                    {else}
                                         <span class="header-top__icon material-icons">menu</span>
+                                    {/if}
                                 </div>
                             </a>
                         </div>
 
-                        <div class="col-md-4 col header-top__block header-top__block--logo">
+                        <div class="col col-md-auto col header-top__block header-top__block--logo">
                             <a href="{$urls.pages.index}">
                                 {images_block webpEnabled=$webpEnabled}
                                     <img
@@ -79,13 +74,15 @@
                                 {/images_block}
                             </a>
                         </div>
-
                         {hook h='displayTop'}
                     </div>
-
+                    <div class="row">
-                </div>
+                       <div class="col">
-            </div>
-        </div>
-    </div>
                             {hook h='displayNavFullWidth'}  
+                       </div>
+                    </div>                       
+                </div>
+            </div>
+        </div>
+    </div>
 {/block}

falcon/templates/catalog/product.tpl

@@ -49,6 +49,9 @@
 
     <div class="row product-container js-product-container">
       <div class="col-md-5 mb-4">
+        {block name='page_header'}
+            <p class="h1 d-block d-md-none">{block name='page_title'}{$product.name}{/block}</p>
+        {/block}
         {block name='page_content_container'}
             {block name='page_content'}
               <div class="position-relative">
@@ -64,7 +67,8 @@
         <div class="col-md-7 mb-4">
           {block name='page_header_container'}
             {block name='page_header'}
-              <h1 class="h1">{block name='page_title'}{$product.name}{/block}</h1>
+                <h1 class="h1 d-none d-md-block">{block name='page_title'}{$product.name}{/block}</h1>
+                <p class="h5 d-block d-md-none">{block name='page_title'}{$product.name}{/block}</p>
             {/block}
           {/block}
           {block name='product_prices'}

falcon/templates/components/modal.tpl

@@ -14,7 +14,7 @@
               {/block}
                {block name='modal_close'}
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                  <span aria-hidden="true">&times;</span>
+                  {svg_icon file='x.svg' width="24" height="24"}
                 </button>
               {/block}
             </div>

falcon/templates/customer/history.tpl

@@ -29,7 +29,11 @@
 {/block}
 
 {block name='page_content'}
-  <h6>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
+  <p>
+    <strong>
+       {l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}
+    </strong>
+  </p>
 
   {if $orders}
     <table class="table table-striped table-bordered hidden-sm-down">
@@ -40,7 +44,7 @@
           <th>{l s='Total price' d='Shop.Theme.Checkout'}</th>
           <th class="hidden-md-down">{l s='Payment' d='Shop.Theme.Checkout'}</th>
           <th class="hidden-md-down">{l s='Status' d='Shop.Theme.Checkout'}</th>
-          <th>&nbsp;</th>
+          <th>{l s='Actions' d='Shop.Theme.Checkout'}</th>
         </tr>
       </thead>
       <tbody>
@@ -66,16 +70,14 @@
                 {$order.history.current.ostate_name}
               </span>
             </td>
-            <td class="text-sm-center order-actions align-middle">
+            <td class="order-actions align-middle d-flex">
               <a class="view-order-details-link btn btn-sm btn-primary" href="{$order.details.details_url}" data-link-action="view-order-details">
                 {l s='Details' d='Shop.Theme.Customeraccount'}
               </a>
               {if $order.details.reorder_url}
-                <div class="col-sm-6 mt-2">
+                  <a class="reorder-link btn btn-sm btn-secondary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
-                  <a class="reorder-link btn btn-sm btn-primary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
                     {l s='Reorder' d='Shop.Theme.Actions'}
                   </a>
-                </div>
               {/if}
             </td>
           </tr>