PM-319 update navi

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;

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;

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 {

src/lib/components/TcLogo.svelte

@@ -2,13 +2,14 @@
   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;
 
   let imgUrl: string;
   $: imgUrl = getPublicPath(`/assets/logo${minVersion ? '.min' : ''}.svg`);
 </script>
 
-<a class={styles.logo} href={allNavItems.home.url} target="_top">
+<a class={classnames(styles.logo, minVersion && 'min')} href={allNavItems.home.url} target="_top">
   <img src={imgUrl} class="full-logo" alt="Topcoder" />
 </a>

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;
 
 </script>
 
 <nav class={classnames(styles.topNavbarWrap, className, styles[style], 'uni-topNavbar')}>
   <div class={styles.topNavbarInner}>
     {#if showLogo || style === 'primary'}
-      <TcLogo minVersion />
+      <TcLogo minVersion={minVersionLogo} />
     {/if}
     <slot />
 

src/lib/components/user-area/AuthArea.module.scss

@@ -0,0 +1,15 @@
+@import 'lib/styles/mixins.scss';
+
+.btnsWrap {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+
+  > * {
+    position: relative;
+  }
+
+  @include smallMobile {
+    gap: 16px;
+  }
+}

src/lib/components/user-area/AuthArea.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import Button from '../Button.svelte';
+
+  import styles from './AuthArea.module.scss'
+  import SigninPopup from './SigninPopup.svelte';
+  import { appPubSub } from '../../../main';
+
+  export let hideSignup = false;
+  let signinPopupVisible = false;
+  let signinMethod: 'login'|'signup';
+  let signInConfig: {talentURL: string, customerURL: string};
+
+  onMount(async () => {
+    appPubSub.subscribe('signup', (data) => handleSignin('signup', data))
+    appPubSub.subscribe('login', (data) => handleSignin('login', data))
+  });
+
+  const handleSignin = (method, data?: any) => {
+    signInConfig = data;
+    signinPopupVisible = true;
+    signinMethod = method;
+  }
+</script>
+
+<div class={styles.btnsWrap}>
+  <Button label="Log In" onClick={() => handleSignin('login')}/>
+  {#if !hideSignup}
+  <Button
+    variant="primary"
+    label="Sign Up"
+    onClick={() => handleSignin('signup')}
+  />
+  {/if}
+  {#if signinPopupVisible}
+    <SigninPopup
+      signInConfig={signInConfig}
+      signinMethod={signinMethod}
+      onClose={() => signinPopupVisible = false}
+    />
+  {/if}
+</div>
+

src/lib/components/user-area/UserArea.svelte

@@ -2,29 +2,23 @@
   import { onMount } from 'svelte';
   import { getAppContext } from 'lib/app-context';
   import { checkUserAppRole, fetchUserProfile } from 'lib/functions/user-profile.provider';
-  import { fetchUserProfileCompletedness, dismissNudgesBasedOnHost } from 'lib/functions/profile-nudges';
+  import { fetchUserProfileCompletedness } from 'lib/functions/profile-nudges';
   import { AUTH_USER_ROLE } from 'lib/config/auth';
   import { DISABLE_NUDGES } from "lib/config/profile-toasts.config";
 
   import ToolSelector from '../tool-selector/ToolSelector.svelte';
-  import Button from '../Button.svelte';
   import VerticalSeparator from '../VerticalSeparator.svelte';
 
   import UserAvatar from './UserAvatar.svelte';
   import styles from './UserArea.module.scss'
   import Completedness from './Completedness.svelte';
-  import SigninPopup from './SigninPopup.svelte';
-  import { appPubSub } from '../../../main';
+  import AuthArea from './AuthArea.svelte';
 
   const ctx = getAppContext();
 
   // debounce updates to user if user.handle stays the same
   let debounce = '';
 
-  let signinPopupVisible = false;
-  let signinMethod: 'login'|'signup';
-  let signInConfig: {talentURL: string, customerURL: string};
-
   $: ({
     signOut: onSignOut = () => {},
     ready: isReady,
@@ -72,9 +66,6 @@
   $: isReady && user?.handle && fetchProfileDetails();
 
   onMount(async () => {
-    appPubSub.subscribe('signup', (data) => handleSignin('signup', data))
-    appPubSub.subscribe('login', (data) => handleSignin('login', data))
-
     if (autoFetchUser !== true) {
       return;
     }
@@ -83,26 +74,13 @@
     const authUser = await fetchUserProfile();
     $ctx.auth = {...$ctx.auth, ready: true, user: authUser};
   });
-
-  const handleSignin = (method, data?: any) => {
-    signInConfig = data;
-    signinPopupVisible = true;
-    signinMethod = method;
-  }
 </script>
 
 {#if isReady}
   <VerticalSeparator />
   <div class={styles.userAreaWrap}>
     {#if !user}
-    <div class={styles.btnsWrap}>
-      <Button label="Log In" onClick={() => handleSignin('login')}/>
-      <Button
-        variant="primary"
-        label="Sign Up"
-        onClick={() => handleSignin('signup')}
-      />
-    </div>
+      <AuthArea />
     {:else }
       <ToolSelector />
       <UserAvatar
@@ -115,13 +93,6 @@
         {/if}
       </UserAvatar>
     {/if}
-    {#if signinPopupVisible}
-      <SigninPopup
-        signInConfig={signInConfig}
-        signinMethod={signinMethod}
-        onClose={() => signinPopupVisible = false}
-      />
-    {/if}
   </div>
 {/if}
 

src/lib/config/hosts.ts

@@ -11,7 +11,8 @@ export const TC_DOMAIN: string = {
 }[HOST_ENV] || 'topcoder.com'
 
 
-export const WP_HOST_URL: string = `https://www.${TC_DOMAIN}`;
+export const WP_HOST_URL: string = `http://localhost:5173`;
+// export const WP_HOST_URL: string = `https://www.${TC_DOMAIN}`;
 export const CHALLENGE_HOST: string = `https://www.${TC_DOMAIN}`;
 export const COMMUNITY_HOST: string = `https://www.${TC_DOMAIN}`;
 

src/lib/config/index.ts

@@ -13,10 +13,17 @@ export const CUSTOMER_LOGIN: string = getEnvValue(
   "VITE_PLATFORM_APP_HOST",
   "https://app.topcoder.com"
 );
+
 export const CUSTOMER_SIGNUP: string = getEnvValue(
   "VITE_CUSTOMER_SIGNUP",
   "https://app.topcoder.com/signup"
 );
+
+export const AUTH0_AUTHENTICATOR_URL: string = getEnvValue(
+  "VITE_AUTH0_AUTHENTICATOR_URL",
+  "https://accounts-auth0.topcoder.com"
+);
+
 export const DISABLE_USERFLOW: string = getEnvValue('VITE_DISABLE_USERFLOW', '')
 export const USERFLOW_ENVIRONMENT_TOKEN: string = getEnvValue('VITE_USERFLOW_ENVIRONMENT_TOKEN')
 export const USERFLOW_TC_SIGNATURE: string = getEnvValue('VITE_USERFLOW_TC_SIGNATURE')

src/lib/config/nav-menu/all-nav-items.config.ts

@@ -13,9 +13,26 @@ import {
     PLATFORM_APP_HOST,
     WALLETAPP_HOST,
     WORK_MANAGER_HOST,
+    AUTH0_AUTHENTICATOR_URL,
 } from '..';
 
 export const allNavItems: {[key: string]: NavMenuItem} = {
+    login: {
+      label: 'Login',
+      url: `${AUTH0_AUTHENTICATOR_URL}?retUrl=${encodeURIComponent(getWordpressUrl('/home'))}`
+    },
+    freelancer: {
+      label: 'I\'m a Freelancer',
+      url: getWordpressUrl('/freelancer'),
+    },
+    howItWorks: {
+      label: 'How it works',
+      url: getWordpressUrl('/how-it-works'),
+    },
+    customerStories: {
+      label: 'Customer Stories',
+      url: getWordpressUrl('/customer-stories'),
+    },
     demo: {
       label: 'Demo',
       url: getWordpressUrl('/customer/demo'),