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/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..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) { @@ -23,10 +23,11 @@ & { // same as secondary styles color: #AAAAAA; - font-family: $roboto; - font-weight: 500; + font-family: $nunito; + font-weight: 700; font-size: 14px; line-height: 22px; + white-space: nowrap; &:hover, &:global(.hover) { color: #FFFFFF; @@ -43,17 +44,17 @@ &.primary { color: #2A2A2A; - font-family: $roboto; - font-weight: 500; + font-family: $nunito; + 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 @@ } -
+
{#each menuItems as menuItem} {#if !!menuItem.label}
diff --git a/src/lib/components/MobileMenu.module.scss b/src/lib/components/MobileMenu.module.scss index b4a22dc5..e4271cd8 100644 --- a/src/lib/components/MobileMenu.module.scss +++ b/src/lib/components/MobileMenu.module.scss @@ -29,3 +29,11 @@ position: relative; } + +.closeIcon { + display: flex; + align-items: center; + img { + height: 15px; + } +} diff --git a/src/lib/components/MobileMenu.svelte b/src/lib/components/MobileMenu.svelte index b3a575c9..f4dfcb05 100644 --- a/src/lib/components/MobileMenu.svelte +++ b/src/lib/components/MobileMenu.svelte @@ -42,7 +42,7 @@
- +
{}}> close
diff --git a/src/lib/components/TcLogo.module.scss b/src/lib/components/TcLogo.module.scss index 22368e53..d0dab624 100644 --- a/src/lib/components/TcLogo.module.scss +++ b/src/lib/components/TcLogo.module.scss @@ -2,18 +2,25 @@ .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: 26px; + } } @include mobile { - margin-right: 20px; + margin-right: 24px; img { - height: 17px; + height: 26px; } } } 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..09587fdb 100644 --- a/src/lib/components/TopNavbar.svelte +++ b/src/lib/components/TopNavbar.svelte @@ -5,15 +5,15 @@ let className = ''; export {className as class}; - export let showLogo = false; + export let showLogo = true; export let style: 'primary'|'secondary'|'tertiary'; - + export let minVersionLogo: boolean = false;
diff --git a/src/lib/marketing-navigation/components/NavigationBar.svelte b/src/lib/marketing-navigation/components/NavigationBar.svelte index 8d928a4c..4840c791 100644 --- a/src/lib/marketing-navigation/components/NavigationBar.svelte +++ b/src/lib/marketing-navigation/components/NavigationBar.svelte @@ -1,21 +1,24 @@ - + {#if isMobile} {:else} - + {#if !isMobile} + + {:else} + + {/if} diff --git a/src/lib/mobile-navigation/MobileNavigation.svelte b/src/lib/mobile-navigation/MobileNavigation.svelte index 616babf9..f4253a0d 100644 --- a/src/lib/mobile-navigation/MobileNavigation.svelte +++ b/src/lib/mobile-navigation/MobileNavigation.svelte @@ -6,9 +6,11 @@ import { classnames } from 'lib/utils/classnames'; import styles from './MobileNavigation.module.scss'; + import LinksMenu from 'lib/components/LinksMenu.svelte'; export let menuItems: NavMenuItem[]; - export let activeRoutes: NavMenuItem[] = []; + export let activeRoutePath: NavMenuItem[] = []; + export let activeRoute: NavMenuItem = null; const toggleMenuIcon = getPublicPath(`/assets/icon-menu.svg`); let menuIsVisible = false; @@ -21,41 +23,13 @@ {#if menuIsVisible} menuIsVisible = false}>
- - -
    - {#each subItem.children as child} - {#if !!child.label} -
  • - - {child.label} - -
    • - {/if} - {/each} -
  • -
- - +
{/if} diff --git a/src/lib/styles/_fonts.scss b/src/lib/styles/_fonts.scss index 7b080291..d4c9ff2f 100644 --- a/src/lib/styles/_fonts.scss +++ b/src/lib/styles/_fonts.scss @@ -1,2 +1,3 @@ $barlowCondensed: 'Barlow Condensed', BarlowCondensed, Helvetica, Arial, sans-serif; +$nunito: 'Nunito Sans', sans-serif; $roboto: Roboto, sans-serif; diff --git a/src/lib/tool-navigation/ToolNavigation.svelte b/src/lib/tool-navigation/ToolNavigation.svelte index 01294e0a..063ac8f4 100644 --- a/src/lib/tool-navigation/ToolNavigation.svelte +++ b/src/lib/tool-navigation/ToolNavigation.svelte @@ -14,6 +14,7 @@ import { checkAndLoadFonts } from 'lib/utils/fonts'; import type { NavMenuItem } from 'lib/functions/nav-menu-item.model'; import { useSessionStorage } from 'lib/utils/use-storage'; + import { marketingRightItems } from 'lib/functions/marketing-navigation.provider' import styles from './ToolNavigation.module.scss'; import ToolNavSeparator from './tool-nav-separator/ToolNavSeparator.svelte'; @@ -47,10 +48,10 @@ onMount(checkAndLoadFonts) - + {#if $isMobile} {:else}
@@ -76,9 +77,6 @@ {/if} - {#if !$isMobile && toolConfig.showSalesCta && auth.ready} - - {/if} diff --git a/src/lib/utils/fonts.ts b/src/lib/utils/fonts.ts index efe8ae25..d1a24617 100644 --- a/src/lib/utils/fonts.ts +++ b/src/lib/utils/fonts.ts @@ -4,25 +4,29 @@ import { delay } from "./delay"; * Bare minimum fonts list to check */ const fontsList = [ - { - query: '400 16px Barlow\ Condensed', - family: 'Barlow+Condensed', - weight: 400 - }, - { - query: '500 16px Barlow\ Condensed', - family: 'Barlow+Condensed', - weight: 500 - }, { query: '700 16px Roboto', family: 'Roboto', weight: 700, + q: 'family=Roboto:wght@400;500;700&display=swap' }, { query: '400 16px Roboto', family: 'Roboto', 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', + weight: 700, + q: 'family=Nunito+Sans:opsz,wght@6..12,700' }, ]; @@ -90,7 +94,8 @@ export const checkAndLoadFonts = async () => { resolve(void 0); }); link.rel = 'stylesheet'; - link.href = 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500&family=Roboto:wght@400;500;700&display=swap'; + const queries = [...new Set(notLoaded.map(d => d.q))].join('&'); + link.href = `https://fonts.googleapis.com/css2?${queries}&display=swap`; // append it before the first ({} as WindowSize, (set) => { return () => window.removeEventListener('resize', updateSizes); }); -export const isMobile = derived(windowSize, ({width}: WindowSize) => width < 768); +export const isMobile = derived(windowSize, ({width}: WindowSize) => width < 990); 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'; diff --git a/uni-nav.env.dev b/uni-nav.env.dev index 59276aa6..a9c9bc45 100644 --- a/uni-nav.env.dev +++ b/uni-nav.env.dev @@ -4,3 +4,4 @@ VITE_USERFLOW_ENVIRONMENT_TOKEN=ct_6cskavahlnco7fqjpphvbjqlla VITE_USERFLOW_TC_SIGNATURE=50cb1d775f80715513743264ef975d2fdc2eb69170d639e22f295914d47f02e2 VITE_PLATFORM_APP_HOST='https://develop.app-dev.topcoder.com' VITE_CUSTOMER_SIGNUP='https://develop.app-dev.topcoder.com/signup' +VITE_AUTH0_AUTHENTICATOR_URL='https://accounts-auth0.topcoder-dev.com' diff --git a/uni-nav.env.prod b/uni-nav.env.prod index faa32160..ea0540bb 100644 --- a/uni-nav.env.prod +++ b/uni-nav.env.prod @@ -4,3 +4,4 @@ VITE_USERFLOW_ENVIRONMENT_TOKEN=ct_4no3lqex75fr3dhojxzu47vpf4 VITE_USERFLOW_TC_SIGNATURE=a36a72415c488dc781d32277756cd50313c25e8ac0f929f76172601cfc08139e VITE_PLATFORM_APP_HOST='https://app.topcoder.com' VITE_CUSTOMER_SIGNUP='https://app.topcoder.com/signup' +VITE_AUTH0_AUTHENTICATOR_URL='https://accounts-auth0.topcoder.com' diff --git a/uni-nav.env.qa b/uni-nav.env.qa index 1f3e2bc1..d2947bd0 100644 --- a/uni-nav.env.qa +++ b/uni-nav.env.qa @@ -4,3 +4,4 @@ VITE_USERFLOW_ENVIRONMENT_TOKEN=ct_44zs4tkk2fcfhk4knitv3sujge VITE_USERFLOW_TC_SIGNATURE=bce044d6dea2f4c1e2bea5df0b5e4dd8e1f4f7518c2b33219ba04317b9251782 VITE_PLATFORM_APP_HOST='https://qa.app-dev.topcoder.com' VITE_CUSTOMER_SIGNUP='https://qa.app-dev.topcoder.com/signup' +VITE_AUTH0_AUTHENTICATOR_URL='https://accounts-auth0.topcoder-dev.com'