From 7e7a5d26460f5bc82d6c373a6d2186b488c91541 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 23 Aug 2024 07:24:35 +0200
Subject: [PATCH] fix(SW-96): add css variable for use of mobile header height

---
 app/globals.css                                          | 1 +
 components/Current/Header/MainMenu/mainMenu.module.css   | 2 +-
 components/Current/Header/header.module.css              | 2 +-
 components/Lightbox/Lightbox.module.css                  | 4 ++--
 components/TempDesignSystem/SidePeek/sidePeek.module.css | 8 ++++----
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index b33c7954c..6180a72f6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -100,6 +100,7 @@
   --max-width: 113.5rem;
   --max-width-content: 74.75rem;
   --max-width-text-block: 49.5rem;
+  --mobile-site-header-height: 70.047px;
 }
 
 * {
diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css
index 15ac58e6d..af3f3eee4 100644
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/components/Current/Header/MainMenu/mainMenu.module.css
@@ -8,7 +8,7 @@
   top: 0;
   width: 100%;
   z-index: 99999;
-  height: 70.047px;
+  height: var(--mobile-site-header-height);
 }
 
 .container {
diff --git a/components/Current/Header/header.module.css b/components/Current/Header/header.module.css
index 6e1001420..1e91a497c 100644
--- a/components/Current/Header/header.module.css
+++ b/components/Current/Header/header.module.css
@@ -4,6 +4,6 @@
 
 @media screen and (max-width: 1366px) {
   .header {
-    height: 70.047px;
+    height: var(--mobile-site-header-height);
   }
 }
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css
index fa3ea4f1c..494368206 100644
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -3,7 +3,7 @@
 }
 
 .mobileGallery {
-  margin-top: 70.047px;
+  margin-top: var(--mobile-site-header-height);
   height: 100%;
   position: relative;
   display: flex;
@@ -112,7 +112,7 @@
 }
 
 .fullViewContainer {
-  margin-top: 70.047px;
+  margin-top: var(--mobile-site-header-height);
   background-color: var(--UI-Text-High-contrast);
   height: 100%;
   padding: var(--Spacing-x2);
diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css
index e08f776e8..0297f9d04 100644
--- a/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -1,10 +1,10 @@
 .sidePeek {
   position: fixed;
-  top: 70.047px;
+  top: var(--mobile-site-header-height);
   right: auto;
   bottom: 0;
   width: 100%;
-  height: calc(100vh - 70.047px);
+  height: calc(100vh - var(--mobile-site-header-height));
   background-color: var(--Base-Background-Primary-Normal);
   z-index: 100;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
@@ -24,7 +24,7 @@
 
 .overlay {
   position: absolute;
-  top: 70.047px;
+  top: var(--mobile-site-header-height);
   bottom: 0;
   left: 0;
   right: 0;
@@ -46,7 +46,7 @@
   }
 
   to {
-    top: 70.047px;
+    top: var(--mobile-site-header-height);
   }
 }