From 12b16c6162f02d0426b32b4a9464ad66d168f5ad Mon Sep 17 00:00:00 2001
From: Vasilica Olariu
Date: Tue, 19 Nov 2024 10:00:13 +0200
Subject: [PATCH 1/8] PM-319 - update marketing navbar
---
public/assets/logo.svg | 2 +-
src/lib/components/Accordion.module.scss | 2 +-
src/lib/components/LinksMenu.module.scss | 4 +-
src/lib/components/TcLogo.module.scss | 11 ++++-
src/lib/components/TcLogo.svelte | 3 +-
src/lib/components/TopNavbar.svelte | 3 +-
.../components/user-area/AuthArea.module.scss | 15 +++++++
src/lib/components/user-area/AuthArea.svelte | 44 +++++++++++++++++++
src/lib/components/user-area/UserArea.svelte | 35 ++-------------
src/lib/config/index.ts | 7 +++
.../config/nav-menu/all-nav-items.config.ts | 17 +++++++
.../config/nav-menu/main-navigation.config.ts | 11 +----
.../config/nav-menu/marketing-nav-items.ts | 5 +++
.../marketing-navigation.provider.ts | 2 +
.../MarketingNavigation.svelte | 12 +++--
.../components/NavigationBar.svelte | 18 +++++++-
src/lib/styles/_fonts.scss | 1 +
src/lib/tool-navigation/ToolNavigation.svelte | 2 +-
src/lib/utils/fonts.ts | 21 +++++----
uni-nav.env.dev | 1 +
uni-nav.env.prod | 1 +
uni-nav.env.qa | 1 +
22 files changed, 151 insertions(+), 67 deletions(-)
create mode 100644 src/lib/components/user-area/AuthArea.module.scss
create mode 100644 src/lib/components/user-area/AuthArea.svelte
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
index 9d06f235..03edf122 100644
--- a/public/assets/logo.svg
+++ b/public/assets/logo.svg
@@ -1 +1 @@
-
+
diff --git a/src/lib/components/Accordion.module.scss b/src/lib/components/Accordion.module.scss
index b3abe1f0..27e8418b 100644
--- a/src/lib/components/Accordion.module.scss
+++ b/src/lib/components/Accordion.module.scss
@@ -59,7 +59,7 @@
}
.accordionWrap:global(.primary) {
- font-family: $barlowCondensed;
+ font-family: $roboto;
font-weight: 500;
font-size: 20px;
line-height: 16px;
diff --git a/src/lib/components/LinksMenu.module.scss b/src/lib/components/LinksMenu.module.scss
index ce0081e6..57ad6a33 100644
--- a/src/lib/components/LinksMenu.module.scss
+++ b/src/lib/components/LinksMenu.module.scss
@@ -23,7 +23,7 @@
& { // same as secondary styles
color: #AAAAAA;
- font-family: $roboto;
+ font-family: $nunito;
font-weight: 500;
font-size: 14px;
line-height: 22px;
@@ -43,7 +43,7 @@
&.primary {
color: #2A2A2A;
- font-family: $roboto;
+ font-family: $nunito;
font-weight: 500;
font-size: 16px;
line-height: 24px;
diff --git a/src/lib/components/TcLogo.module.scss b/src/lib/components/TcLogo.module.scss
index 22368e53..95ec348e 100644
--- a/src/lib/components/TcLogo.module.scss
+++ b/src/lib/components/TcLogo.module.scss
@@ -2,12 +2,19 @@
.logo {
display: flex;
- margin-right: 48px;
+ margin-right: 40px;
flex: 0 0 auto;
img {
display: block;
- height: 22px;
+ height: 32px;
+ }
+
+ .min {
+ margin-right: 48px;
+ img {
+ height: 22px;
+ }
}
@include mobile {
diff --git a/src/lib/components/TcLogo.svelte b/src/lib/components/TcLogo.svelte
index 9b0b6942..ffae1387 100644
--- a/src/lib/components/TcLogo.svelte
+++ b/src/lib/components/TcLogo.svelte
@@ -2,6 +2,7 @@
import { allNavItems } from 'lib/config/nav-menu/all-nav-items.config';
import { getPublicPath } from 'lib/utils/paths';
import styles from './TcLogo.module.scss';
+ import { classnames } from 'lib/utils/classnames';
export let minVersion: boolean = false;
@@ -9,6 +10,6 @@
$: imgUrl = getPublicPath(`/assets/logo${minVersion ? '.min' : ''}.svg`);
-
+
diff --git a/src/lib/components/TopNavbar.svelte b/src/lib/components/TopNavbar.svelte
index bb8fd0c9..325e0d93 100644
--- a/src/lib/components/TopNavbar.svelte
+++ b/src/lib/components/TopNavbar.svelte
@@ -7,13 +7,14 @@
export {className as class};
export let showLogo = false;
export let style: 'primary'|'secondary'|'tertiary';
+ export let minVersionLogo: boolean = false;
diff --git a/src/lib/utils/fonts.ts b/src/lib/utils/fonts.ts
index b020917b..d1a24617 100644
--- a/src/lib/utils/fonts.ts
+++ b/src/lib/utils/fonts.ts
@@ -16,6 +16,12 @@ const fontsList = [
weight: 400,
q: 'family=Roboto:wght@400;500;700&display=swap'
},
+ {
+ query: '400 16px Nunito\ Sans',
+ family: 'Nunito+Sans',
+ weight: 400,
+ q: 'family=Nunito+Sans:opsz,wght@6..12,400'
+ },
{
query: '700 16px Nunito\ Sans',
family: 'Nunito+Sans',
From ac115d6a769bde4550af2dbb7b79a601f14d7016 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu
Date: Tue, 19 Nov 2024 10:28:30 +0200
Subject: [PATCH 3/8] types
---
types/src/lib/config/index.d.ts | 1 +
types/src/lib/config/nav-menu/marketing-nav-items.d.ts | 1 +
types/src/lib/functions/marketing-navigation.provider.d.ts | 1 +
3 files changed, 3 insertions(+)
diff --git a/types/src/lib/config/index.d.ts b/types/src/lib/config/index.d.ts
index 540e54f3..07f82536 100644
--- a/types/src/lib/config/index.d.ts
+++ b/types/src/lib/config/index.d.ts
@@ -1,6 +1,7 @@
export declare const PLATFORM_APP_HOST: string;
export declare const CUSTOMER_LOGIN: string;
export declare const CUSTOMER_SIGNUP: string;
+export declare const AUTH0_AUTHENTICATOR_URL: string;
export declare const DISABLE_USERFLOW: string;
export declare const USERFLOW_ENVIRONMENT_TOKEN: string;
export declare const USERFLOW_TC_SIGNATURE: string;
diff --git a/types/src/lib/config/nav-menu/marketing-nav-items.d.ts b/types/src/lib/config/nav-menu/marketing-nav-items.d.ts
index 274d03c3..cef0458c 100644
--- a/types/src/lib/config/nav-menu/marketing-nav-items.d.ts
+++ b/types/src/lib/config/nav-menu/marketing-nav-items.d.ts
@@ -1,2 +1,3 @@
import type { NavMenuItem } from "../../functions/nav-menu-item.model";
export declare const marketingNavItems: NavMenuItem;
+export declare const marketingRightItems: NavMenuItem[];
diff --git a/types/src/lib/functions/marketing-navigation.provider.d.ts b/types/src/lib/functions/marketing-navigation.provider.d.ts
index 1f94affc..11b96c3c 100644
--- a/types/src/lib/functions/marketing-navigation.provider.d.ts
+++ b/types/src/lib/functions/marketing-navigation.provider.d.ts
@@ -1,3 +1,4 @@
import type { NavMenuItem } from './nav-menu-item.model';
export declare function getMainNavItems(isAuthenticated: boolean): NavMenuItem[];
export declare function getActiveRoute(navItems: NavMenuItem[], index?: number): NavMenuItem[];
+export { marketingRightItems } from 'lib/config/nav-menu/marketing-nav-items';
From ea6155cadd3c3a2c7a4bb100149a32ee28c38281 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu
Date: Wed, 20 Nov 2024 13:10:25 +0200
Subject: [PATCH 4/8] Fixes for qa feedback
---
public/assets/logo.min.svg | 2 +-
src/lib/components/LinksMenu.module.scss | 18 ++++++--
src/lib/components/LinksMenu.svelte | 3 +-
src/lib/components/MobileMenu.module.scss | 8 ++++
src/lib/components/MobileMenu.svelte | 2 +-
src/lib/components/TcLogo.module.scss | 6 +--
src/lib/components/TopNavbar.svelte | 5 +-
src/lib/config/hosts.ts | 4 +-
.../config/nav-menu/all-nav-items.config.ts | 2 +-
.../FooterNavigation.module.scss | 44 +++++++++++-------
.../MarketingNavigation.svelte | 8 ----
.../components/NavigationBar.svelte | 41 +++++++++--------
.../mobile-navigation/MobileNavigation.svelte | 46 ++++---------------
src/lib/tool-navigation/ToolNavigation.svelte | 6 +--
src/lib/utils/window-size.store.ts | 2 +-
15 files changed, 96 insertions(+), 101 deletions(-)
diff --git a/public/assets/logo.min.svg b/public/assets/logo.min.svg
index 5498403a..394868e7 100644
--- a/public/assets/logo.min.svg
+++ b/public/assets/logo.min.svg
@@ -1 +1 @@
-
+
diff --git a/src/lib/components/LinksMenu.module.scss b/src/lib/components/LinksMenu.module.scss
index 57ad6a33..c746fe6c 100644
--- a/src/lib/components/LinksMenu.module.scss
+++ b/src/lib/components/LinksMenu.module.scss
@@ -3,7 +3,7 @@
.linksMenuWrap {
display: flex;
align-items: center;
- gap: 32px;
+ gap: 48px;
flex: 1 0 auto;
:global(.navLink) {
@@ -24,9 +24,10 @@
& { // same as secondary styles
color: #AAAAAA;
font-family: $nunito;
- font-weight: 500;
+ font-weight: 700;
font-size: 14px;
line-height: 22px;
+ white-space: nowrap;
&:hover, &:global(.hover) {
color: #FFFFFF;
@@ -44,16 +45,16 @@
&.primary {
color: #2A2A2A;
font-family: $nunito;
- font-weight: 500;
+ font-weight: 700;
font-size: 16px;
line-height: 24px;
&:hover, &:global(.hover) {
- color: rgba(#2A2A2A, 0.6);
+ color: #0d61bf;
}
&:global(.active) {
- color: #16679A;
+ color: #0d61bf;
}
}
@@ -95,6 +96,13 @@
font-weight: 500;
}
}
+
+ &.vertical {
+ flex-direction: column;
+ gap: 12px;
+ align-items: flex-start;
+ padding: 0 16px;
+ }
}
.menuItemWrap {
diff --git a/src/lib/components/LinksMenu.svelte b/src/lib/components/LinksMenu.svelte
index 131d2ce8..0f9857f4 100644
--- a/src/lib/components/LinksMenu.svelte
+++ b/src/lib/components/LinksMenu.svelte
@@ -10,6 +10,7 @@
export let menuItems: NavMenuItem[];
export let activeRoute: NavMenuItem = undefined;
export let activeRoutePath: NavMenuItem[] = [];
+ export let vertical: boolean = false;
let hoveredMenuItem: NavMenuItem = undefined;
let hoveredElement: HTMLElement = undefined;
let isPopupMenuActive: boolean = false;
@@ -41,7 +42,7 @@
}
-