From ca0deae927951d841cc97a6a3abfda9ab765894c Mon Sep 17 00:00:00 2001
From: Stavros Tomas <55188371+stavros-tomas@users.noreply.github.com>
Date: Wed, 19 Jun 2024 10:38:49 +0100
Subject: [PATCH] [CHUX-687] More tweaks for new navigation (#1987)

* CHUX-687:chore:more tweaks for navigation

* CHUX-687:chore:update snaps

* 2.8.12
---
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 .../ec-navigation-link/ec-navigation-link.vue |  4 +++-
 .../__snapshots__/ec-navigation.spec.ts.snap  |  8 +++----
 .../ec-navigation/ec-navigation.vue           | 22 ++++++++++++-------
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 33470aba5..28c872f88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.11",
+  "version": "2.8.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "2.8.11",
+      "version": "2.8.12",
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "10.9.0",
diff --git a/package.json b/package.json
index 9796dfa18..a79412a51 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.11",
+  "version": "2.8.12",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
diff --git a/src/components/ec-navigation-link/ec-navigation-link.vue b/src/components/ec-navigation-link/ec-navigation-link.vue
index 6c1f2e88b..6e80976db 100644
--- a/src/components/ec-navigation-link/ec-navigation-link.vue
+++ b/src/components/ec-navigation-link/ec-navigation-link.vue
@@ -87,7 +87,7 @@ withDefaults(defineProps<NavigationLinkProps>(), {
 @import '../../styles/tools/transitions.css';
 
 .ec-navigation-link {
-  @apply tw-small-text;
+  @apply tw-h6;
   @apply tw-py-12 tw-px-24;
   @apply tw-flex tw-items-center;
   @apply tw-no-underline;
@@ -163,9 +163,11 @@ withDefaults(defineProps<NavigationLinkProps>(), {
   }
 
   &--light-mode {
+    @apply tw-small-text;
     @apply tw-px-0 tw-py-16;
     @apply tw-text-gray-3;
     @apply tw-bg-transparent;
+    @apply tw-capitalize;
 
     &:hover {
       @apply tw-text-gray-2;
diff --git a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
index 5001784e8..15a41e98b 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -49,7 +49,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
     >
       <img
         alt="Test Brand"
-        class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
+        class="ec-navigation__branding-logo"
         data-test="ec-navigation__branding-logo"
         src="/img/my-brand.png"
       />
@@ -135,7 +135,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
     >
       <img
         alt="Test Brand"
-        class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
+        class="ec-navigation__branding-logo"
         data-test="ec-navigation__branding-logo"
         src="/img/my-brand.png"
       />
@@ -224,7 +224,7 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
     >
       <img
         alt="Test Brand"
-        class="ec-navigation__branding-logo ec-navigation__branding-logo--responsive"
+        class="ec-navigation__branding-logo"
         data-test="ec-navigation__branding-logo"
         src="/img/my-brand.png"
       />
@@ -310,7 +310,7 @@ exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" p
     >
       <img
         alt="Test Brand"
-        class="ec-navigation__branding-logo"
+        class="ec-navigation__branding-logo ec-navigation__branding-logo--light-mode"
         data-test="ec-navigation__branding-logo"
         src="/img/my-brand.png"
       />
diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index aefa77aa7..6a537d256 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -38,7 +38,7 @@
       >
         <img
           class="ec-navigation__branding-logo"
-          :class="{ 'ec-navigation__branding-logo--responsive': isResponsive }"
+          :class="{ 'ec-navigation__branding-logo--light-mode': isInLightMode }"
           :src="branding.logo"
           :alt="branding.name"
           data-test="ec-navigation__branding-logo"
@@ -168,6 +168,10 @@ function onNavigationLinkClicked() {
     @apply tw-mt-16 tw-mb-24;
   }
 
+  &__call-to-action {
+    @apply tw-mt-16 tw-mb-8;
+  }
+
   &--light-mode {
     @apply tw-bg-gray-7;
     @apply tw-text-gray-3;
@@ -213,16 +217,18 @@ function onNavigationLinkClicked() {
     @apply tw-py-0 tw-px-24;
     @apply tw-mt-24 tw-mb-8 tw-mx-0;
     @apply tw-text-center;
-  }
 
-  &__branding--light-mode {
-    @apply tw-m-0 tw-p-0;
-    @apply tw-text-left;
+    &--light-mode {
+      @apply tw-m-0 tw-p-0;
+      @apply tw-text-left;
+    }
   }
 
   &__branding-logo {
-    @apply tw-align-top;
-    @apply tw-w-88;
+    &--light-mode {
+      @apply tw-align-top;
+      @apply tw-w-88;
+    }
   }
 
   &__separator {
@@ -239,7 +245,7 @@ function onNavigationLinkClicked() {
   &__copyright {
     @apply tw-caption-text;
     @apply tw-whitespace-nowrap;
-    @apply tw-py-0 tw-px-24;
+    @apply tw-px-24 tw-pt-8 tw-pb-16;
     @apply tw-text-center;
   }
 }