[CHUX-687] More tweaks for new navigation (#1987)

* CHUX-687:chore:more tweaks for navigation

* CHUX-687:chore:update snaps

* 2.8.12

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/)",

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;

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"
       />

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;
   }
 }