From 27dfb4dc70b52f145d2e921799d873dd8d5f190e Mon Sep 17 00:00:00 2001
From: Isabelle <isabelle@dewebsmid.nl>
Date: Wed, 24 Dec 2025 09:30:17 +0100
Subject: [PATCH] feat(standard-styling) Enhance search and styling

Improves search bar with SVG icon support for better visual consistency.

Adds utility SCSS file for managing global styles like heading selectors.

Introduces a checkmark SVG asset and reorganizes custom SCSS files following the 7-in-1 structure for better maintainability.

Comments out optional USP bar code in header.tpl to allow easy activation.
---
 falcon/_dev/css/theme/custom/_custom.scss             | 11 +++++++++--
 .../_dev/css/theme/custom/abstracts/_utilities.scss   |  3 +++
 falcon/_dev/img/checkmark.svg                         |  3 +++
 .../views/templates/hook/is_searchbar.tpl             |  7 ++++++-
 falcon/templates/_partials/header.tpl                 |  1 -
 5 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 falcon/_dev/css/theme/custom/abstracts/_utilities.scss
 create mode 100644 falcon/_dev/img/checkmark.svg

diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss
index a660a38..fea6de0 100644
--- a/falcon/_dev/css/theme/custom/_custom.scss
+++ b/falcon/_dev/css/theme/custom/_custom.scss
@@ -1,11 +1,18 @@
-// NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
+/* 
+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
+*/
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
+@import "abstracts/utilities";
 //@import "abstracts/base";
 //@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
-//@import "components/";
 @import "components/forms";
 
 // Modules: Styling for specific modules.
diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss
new file mode 100644
index 0000000..73b6d30
--- /dev/null
+++ b/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";
diff --git a/falcon/_dev/img/checkmark.svg b/falcon/_dev/img/checkmark.svg
new file mode 100644
index 0000000..87168de
--- /dev/null
+++ b/falcon/_dev/img/checkmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
+  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+</svg>
\ No newline at end of file
diff --git a/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl b/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl
index 4cda15b..d51da7d 100644
--- a/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl
+++ b/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl
@@ -9,7 +9,12 @@
 					   name="s"
 					   value="{$search_string}">
 				<button type="submit" class="search-form__btn btn">
-					<span class="material-icons">search</span>
+                    {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>
diff --git a/falcon/templates/_partials/header.tpl b/falcon/templates/_partials/header.tpl
index 24a382c..83681c0 100644
--- a/falcon/templates/_partials/header.tpl
+++ b/falcon/templates/_partials/header.tpl
@@ -37,7 +37,6 @@
         <div class="header-top js-header-top">
             <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">