feat(extra-features): Shows user's name or "log out" if logged in

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

@@ -1,5 +1,12 @@
-$border-width:                1px;
-$border-color:                $gray-300;
-$border-radius:               .4rem;
-$border-radius-lg:            .4rem;
-$border-radius-sm:            .4rem;
+$border-width: 1px;
+$border-color: $gray-300;
+$border-radius: 0.4rem;
+$border-radius-lg: 0.4rem;
+$border-radius-sm: 0.4rem;
+
+$card-border-color: $border-color;
+$table-border-color: $border-color;
+$input-border-color: $border-color;
+
+$input-focus-border-color: $border-color;
+$form-check-input-border: $border-color;

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

@@ -13,15 +13,12 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
 //@import "abstracts/base";
 @import "abstracts/functions";
 @import "abstracts/mixins";
-//@import "abstracts/utilities";
+@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";

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

@@ -1,28 +1,32 @@
 // Header selector for interpolation
-// Example usage: #{$headings} { ... }
-$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+// Example usage: #{$headers} { ... }
+$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+
+// All text selector for interpolation
+$text: "#{$headers}, p, span, a, li";
+
+// Section Spacers. Just set the two variables below and it is fully responsive!
+// $section-spacer-small applies on breakpoints lg and below, OR always if specified in the class with  --small (ex. section-spacer--small).
 
-// Section Spacers
 $section-spacer: rem-calc(50px);
 $section-spacer-small: rem-calc(25px);
 
 .section-spacer-both {
-    margin-top: $section-spacer;
-    margin-bottom: $section-spacer;
+    margin-top: $section-spacer-small;
+    margin-bottom: $section-spacer-small;
     @include bs5-media-breakpoint-up(lg) {
-        margin-top: calc($section-spacer * 1.5);
-        margin-bottom: calc($section-spacer * 1.5);
+        margin-top: $section-spacer;
+        margin-bottom: $section-spacer;
     }
     &--small {
         margin-top: $section-spacer-small;
         margin-bottom: $section-spacer-small;
         @include bs5-media-breakpoint-up(lg) {
-            margin-top: calc($section-spacer-small * 2);
-            margin-bottom: calc($section-spacer-small * 2);
+            margin-top: $section-spacer-small;
+            margin-bottom: $section-spacer-small;
         }
     }
 }
-
 .section-spacer {
     @extend .section-spacer-both;
     margin-bottom: unset;
@@ -30,3 +34,10 @@ $section-spacer-small: rem-calc(25px);
         margin-bottom: unset;
     }
 }
+.section-spacer-bottom {
+    @extend .section-spacer-both;
+    margin-top: unset;
+    &--small {
+        margin-top: unset;
+    }
+}

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

@@ -15,6 +15,28 @@ $btn-color: (
     }
 }
 
+// Configure btn-outline text color on hover per button. (Same thing as above but for btn-outline and only on hover)
+$btn-outline-hover: (
+    "primary": $white,
+    "secondary": $white,
+);
+
+@each $name, $bg in $btn-outline-hover {
+    $text-color: if(
+        map-has-key($btn-color, $name),
+        map-get($btn-color, $name),
+        $white
+    );
+
+    .btn-outline-#{$name}:hover,
+    .btn-outline-#{$name}:focus,
+    .btn-outline-#{$name}:active,
+    .btn-outline-#{$name}.active,
+    .show > .btn-outline-#{$name}.dropdown-toggle {
+        color: $text-color !important;
+    }
+}
+
 // Bootstrap touchspin
 .bootstrap-touchspin {
     flex-wrap: nowrap;

falcon/_dev/js/theme/index.js

@@ -66,6 +66,22 @@ function initStickyHeader() {
     }
 }
 
+// Sync product thumbs height with main images height
+function syncThumbsHeight() {
+    const mainImages = document.querySelector(".product-main-images");
+    const thumbs = document.querySelector(".product-thumbs.swiper");
+    // Only apply if Swiper is vertical
+    if (mainImages && thumbs && thumbs.classList.contains("swiper-vertical")) {
+        thumbs.style.maxHeight = mainImages.offsetHeight + "px";
+        thumbs.style.height = mainImages.offsetHeight + "px";
+    } else {
+        return;
+    }
+}
+
+window.addEventListener("load", syncThumbsHeight);
+window.addEventListener("resize", syncThumbsHeight);
+
 $(() => {
     initStickyHeader();
     accLinksTriggerActive();

falcon/modules/ps_customersignin/ps_customersignin.tpl

@@ -33,6 +33,17 @@
       title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}"
     {/if}
   >
+    <span class="d-none d-xl-block text-secondary">
+        {if $logged}
+            {if $customer.firstname}
+                {$customer.firstname|escape:'html':'UTF-8'}
+            {else}
+                {l s='Log out' d='Shop.Theme.Actions'}
+            {/if}
+        {else}
+            {l s='Log in' d='Shop.Theme.Actions'}
+        {/if}
+    </span>
     <div class="header-top__icon-container">
         {capture name="svg_output"}{svg_icon file='person.svg'}{/capture}
         {if $smarty.capture.svg_output}

falcon/templates/checkout/_partials/cart-summary-totals.tpl

@@ -38,6 +38,11 @@
       <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.display_taxes_label && $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
       <span class="value">{$cart.totals.total.value}</span>
     </div>
+     {if !$cart.has_delivery_address}
+      <p class="no_delivery_address_yet_message">
+        {l s='Shipping costs will be calculated in the next step, before you checkout. Shipping costs depend on the country the order is shipped to. For the Netherlands, orders with a value of € 125.00 will be shipped free of charge. You can view the shippingcosts <a href="https://www.nijssenbulbs.com/content/16-verzendkosten"><u>here</u></a>' d='Shop.Checkout.Total'}
+      </p>
+    {/if}
   {/if}
 {/block}