FIX: Bootstrap variables setting and minor updates

app/client/src/scss/_layout.scss

@@ -2,6 +2,16 @@
  * Your custom style
  */
 
+body {
+    --header-bg: #{inspect($body-header-bg)};
+    --header-color: #{inspect($body-header-color)};
+    --header-link: #{inspect($body-header-link)};
+    --main-nav-link-color:#{inspect($body-main-nav-link-color)};
+    --main-nav-link-hover-color:#{inspect($body-main-nav-link-hover-color)};
+    --main-nav-dropdown-hover-bg:#{inspect($body-main-nav-dropdown-hover-bg)};
+    --footer-footer-bg:#{inspect($body-footer-footer-bg)};
+}
+
 .carousel-caption {
     padding: 6rem 0;
     font-size: 3rem;

app/client/src/scss/_variables.scss

@@ -1,5 +1,8 @@
 @import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/_variables';
 
+$body-bg: #fff;
+$body-color: #212529;
+
 // site specific variables
 // bootstrap settings
 // screen size - 32px (ex. 1400 - 32 = 1368)
@@ -14,34 +17,42 @@ md: 720px,
 lg: 960px,
 xl: 1136px);
 
+$body-header-bg: $body-bg;
+$body-header-color: $body-color;
+$body-header-link: $body-color;
+$body-main-nav-link-color: $body-color;
+$body-main-nav-link-hover-color: $body-color;
+$body-main-nav-dropdown-hover-bg: $body-color;
+$body-footer-footer-bg: $body-bg;
+
 $font-family-base: 'Roboto',
 $font-family-sans-serif;
 
 $full-body-min-width: map-get($grid-breakpoints, 'lg');
 $typography-breakpoint: map-get($grid-breakpoints, 'sm') - 1;
 
-$header-bg: var(--bs-white);
+$header-bg: var(--header-bg);
-$header-color: var(--bs-dark);
+$header-color: var(--header-color);
-$header-link: var(--bs-black);
+$header-link: var(--header-link);
 
-$main-nav-link-color: var(--bs-black);
+$main-nav-link-color: var(--main-nav-link-color);
 $main-nav-link-bg: none;
 
 $main-nav-toggler-size: 2rem;
 
 $main-nav-link-hover-bg: none;
-$main-nav-link-hover-color: var(--bs-primary);
+$main-nav-link-hover-color: var(--main-nav-link-hover-color);
 
 $main-nav-dropdown-bg: $header-bg;
 $main-nav-dropdown-color: $header-link;
-$main-nav-dropdown-hover-bg: var(--bs-black);
+$main-nav-dropdown-hover-bg: var(--main-nav-dropdown-hover-bg);
 $main-nav-dropdown-hover-color: $main-nav-link-hover-color;
 
 $footer-bg: $header-bg;
 $footer-color: $header-color;
 $footer-link: $header-link;
 
-$footer-footer-bg: $main-nav-dropdown-hover-bg;
+$footer-footer-bg: var(--footer-footer-bg);
 
 $sliderelement-carousel-slide-max-y: none;
 $sliderelement-carousel-slide-bg: $header-bg;

app/client/src/scss/app.scss

@@ -1,10 +1,10 @@
+// Your custom variables
+@import '_variables';
+
 @import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/_components/_ui.bootstrap';
 @import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/_components/_ui.main';
 @import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/_components/_ui.main.ss';
 
-// Your custom variables
-@import '_variables';
-
 // Your custom styling
 @import '_typography';
 @import '_layout';

app/src/Pages/PageController.php

@@ -61,16 +61,16 @@ class PageController extends ContentController
 
     public function setAction($action)
     {
-    	$this->action = $action;
+        $this->action = $action;
     }
 
     public function ElementalArea()
     {
-    	if(!$this->getAction() || $this->getAction() === 'index') {
+        if (!$this->getAction() || $this->getAction() === 'index') {
-    		return ElementalArea::get()->byID($this->getField('ElementalAreaID'));
+            return ElementalArea::get()->byID($this->getField('ElementalAreaID'));
-	    }
+        }
 
-    	return false;
+        return false;
     }
 
     public function CurrentElement()
@@ -84,7 +84,7 @@ class PageController extends ContentController
         return false;
     }
 
-    public function SearchForm()
+    public function SearchForm(): Form
     {
         $config = $this->SiteConfig();
         return Form::create(
@@ -92,7 +92,7 @@ class PageController extends ContentController
             __FUNCTION__,
             FieldList::create(
                 TextField::create('q', 'Search ...')
-                ->setAttribute('placeholder', 'Search '.$config->getField('Title').' Website')
+                    ->setAttribute('placeholder', 'Search '.$config->getField('Title').' Website')
             ),
             FieldList::create(
                 FormAction::create(
@@ -117,7 +117,7 @@ class PageController extends ContentController
         return $this->renderWith([__CLASS__.'_search', 'Page']);
     }
 
-    private static function getSearchObjects($classNames, $term)
+    private static function getSearchObjects($classNames, $term): ArrayList
     {
         $elements = ArrayList::create();
         foreach ($classNames as $class) {
@@ -144,9 +144,9 @@ class PageController extends ContentController
 
         // get pages by title and content
         $pages = SiteTree::get()->filterAny([
-            'Title:PartialMatch' => $term,
+                'Title:PartialMatch' => $term,
-            'Content:PartialMatch' => $term,
+                'Content:PartialMatch' => $term,
-        ])->sort('Created DESC');
+            ])->sort('Created DESC');
 
         $results->merge($pages);
 
@@ -165,7 +165,7 @@ class PageController extends ContentController
             $results->push($page);
         }
 
-        // get pages by onjects
+        // get pages by objects
         $elements = self::getSearchObjects(
             self::config()->get('searchable_objects'),
             $term