topcoder-platform · kkartunov · Nov 20, 2024 · Nov 20, 2024
diff --git a/public/assets/logo.min.svg b/public/assets/logo.min.svg
diff --git 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
@@ -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 @@
   }
 </script>
 
-<div class={styles.linksMenuWrap} bind:this={ref}>
+<div class={classnames(styles.linksMenuWrap, vertical && styles.vertical)} bind:this={ref}>
   {#each menuItems as menuItem}
     {#if !!menuItem.label}
     <div class={styles.menuItemWrap}>

diff --git 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
@@ -42,7 +42,7 @@
 </script>
 
 <div class={styles.mobileMenuWrap} transition:fade={{duration: 200}}>
-  <TopNavbar style="primary">
+  <TopNavbar style="primary" showLogo={false}>
     <div class={styles.closeIcon} slot="right" on:click={handleClose} on:keydown={() => {}}>
       <img src={closeMenuIcon} alt="close" />
     </div>

diff --git a/src/lib/components/TcLogo.module.scss b/src/lib/components/TcLogo.module.scss
@@ -13,14 +13,14 @@
   .min {
     margin-right: 48px;
     img {
-      height: 22px;
+      height: 26px;
     }
   }
 
   @include mobile {
-    margin-right: 20px;
+    margin-right: 24px;
     img {
-      height: 17px;
+      height: 26px;
     }
   }
 }
diff --git a/src/lib/components/TopNavbar.svelte b/src/lib/components/TopNavbar.svelte
@@ -5,15 +5,14 @@
 
   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;
-
 </script>
 
 <nav class={classnames(styles.topNavbarWrap, className, styles[style], 'uni-topNavbar')}>
   <div class={styles.topNavbarInner}>
-    {#if showLogo || style === 'primary'}
+    {#if showLogo && style === 'primary'}
       <TcLogo minVersion={minVersionLogo} />
     {/if}
     <slot />

diff --git a/src/lib/config/hosts.ts b/src/lib/config/hosts.ts
@@ -11,8 +11,8 @@ export const TC_DOMAIN: string = {
 }[HOST_ENV] || 'topcoder.com'
 
 
-export const WP_HOST_URL: string = `http://localhost:5173`;
-// 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}`;
 

diff --git a/src/lib/config/nav-menu/all-nav-items.config.ts b/src/lib/config/nav-menu/all-nav-items.config.ts
@@ -42,7 +42,7 @@ export const allNavItems: {[key: string]: NavMenuItem} = {
       url: getWordpressUrl('/customer/product'),
     },
     talent: {
-      label: 'Talent',
+      label: 'The Talent',
       url: getWordpressUrl('/about-talent'),
     },
     support: {

diff --git a/src/lib/footer-navigation/FooterNavigation.module.scss b/src/lib/footer-navigation/FooterNavigation.module.scss
@@ -11,6 +11,9 @@
     margin-left: auto;
     margin-right: auto;
   }
+  @include tablet {
+    padding: 48px 15px;
+  }
 }
 
 .footerInner {
@@ -23,7 +26,6 @@
   }
   @include tablet {
     flex-direction: column;
-    gap: 32px;
   }
 }
 
@@ -38,7 +40,7 @@
   h5 {
     font-weight: 700;
     font-size: 16px;
-    line-height: 20px;
+    line-height: 22px;
     margin-top: 0;
     margin-bottom: 16px;
   }
@@ -51,21 +53,20 @@
 
 .footerNavigation {
   position: relative;
-  max-height: 332px;
   box-sizing: border-box;
 
   @include maxViewWidth;
   margin: 0 auto;
 
   @include tabletOnly {
     max-height: none;
-    padding: 16px;
     width: 100%;
   }
 
   @include mobile {
     padding: 0;
     max-height: none;
+    width: 100%;
   }
 }
 
@@ -78,6 +79,13 @@
   > a {
     display: inline-block;
   }
+
+  @include tablet {
+    padding-bottom: 17px;
+    > a {
+      height: 48px;
+    }
+  }
 }
 
 .menuSections {
@@ -95,7 +103,10 @@
   }
 
   @include mobile {
-    flex-direction: column;
+    flex-wrap: wrap;
+    .menuSection {
+      flex: 1 1 45%;
+    }
   }
 }
 
@@ -132,14 +143,6 @@
   @include mobile {
     padding: 0;
     padding-bottom: 16px;
-    &:not(:last-child) {
-      border-bottom: 1px solid #767676;
-    }
-
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-    }
 
     &Entry {
       flex: 1 1 50%;
@@ -204,6 +207,11 @@
   padding-top: 48px;
   border-top: 1px solid #F7F9FF;
   margin-top: 48px;
+
+  @include mobile {
+    margin-top: 18px;
+    padding-top: 34px;
+  }
 }
 
 .footerSocial {
@@ -214,13 +222,12 @@
     position: relative;
     bottom: auto;
     right: auto;
-    margin-top: 48px;
-    justify-content: center;
+    margin-top: 16px;
   }
 }
 
 .cta.cta {
-  display: flex;
+  display: inline-flex;
   border-radius: 4px;
   align-items: center;
   justify-content: center;
@@ -234,4 +241,9 @@
   font-weight: 700;
   margin-top: 16px;
   margin-bottom: 16px;
+  white-space: nowrap;
+
+  @include mobile {
+    width: 100%;
+  }
 }
diff --git a/src/lib/marketing-navigation/MarketingNavigation.svelte b/src/lib/marketing-navigation/MarketingNavigation.svelte
@@ -11,9 +11,6 @@
   import { checkAndLoadFonts } from 'lib/utils/fonts';
   import NavigationBar from './components/NavigationBar.svelte';
   import Banner from 'lib/components/Banner.svelte';
-  import Button from 'lib/components/Button.svelte';
-  import { AUTH0_AUTHENTICATOR_URL } from 'lib/config';
-  import { allNavItems } from 'lib/config/nav-menu/all-nav-items.config';
 
   const ctx = getAppContext()
   $: ({auth} = $ctx)
@@ -31,11 +28,6 @@
   let secondaryRoute: NavMenuItem;
   let tertiaryRoute: NavMenuItem;
   $: [primaryRoute, secondaryRoute, tertiaryRoute] = activeRoute
-
-  const handleLogin = () => {
-    window.location.href = `${AUTH0_AUTHENTICATOR_URL}?retUrl=${allNavItems.home.url}`
-  }
-
   onMount(checkAndLoadFonts)
 </script>
 

diff --git a/src/lib/marketing-navigation/components/NavigationBar.svelte b/src/lib/marketing-navigation/components/NavigationBar.svelte
@@ -1,23 +1,24 @@
 <script type="ts">
-    import type { NavMenuItem } from 'lib/functions/nav-menu-item.model';
-    import LinksMenu from '../../components/LinksMenu.svelte';
-    import TopNavbar from 'lib/components/TopNavbar.svelte';
-    import MobileNavigation from 'lib/mobile-navigation/MobileNavigation.svelte';
-    import { marketingRightItems } from 'lib/functions/marketing-navigation.provider'
+  import type { NavMenuItem } from 'lib/functions/nav-menu-item.model';
+  import LinksMenu from '../../components/LinksMenu.svelte';
+  import TopNavbar from 'lib/components/TopNavbar.svelte';
+  import MobileNavigation from 'lib/mobile-navigation/MobileNavigation.svelte';
+  import { marketingRightItems } from 'lib/functions/marketing-navigation.provider'
+  import { allNavItems } from 'lib/config/nav-menu/all-nav-items.config';
 
-    export let style: 'primary'|'secondary'|'tertiary';
-    export let menuItems: NavMenuItem[] = [];
-    export let activeRoutePath: NavMenuItem[] = [];
-    export let activeRoute: NavMenuItem;
-    export let isMobile: boolean = false;
-    export let minVersionLogo: boolean = false;
+  export let style: 'primary'|'secondary'|'tertiary';
+  export let menuItems: NavMenuItem[] = [];
+  export let activeRoutePath: NavMenuItem[] = [];
+  export let activeRoute: NavMenuItem;
+  export let isMobile: boolean = false;
 </script>
 
-<TopNavbar style={style} minVersionLogo={minVersionLogo}>
+<TopNavbar style={style} minVersionLogo={isMobile}>
   {#if isMobile}
     <MobileNavigation
-      menuItems={menuItems}
-      activeRoutes={activeRoutePath}
+      menuItems={[...menuItems,...marketingRightItems]}
+      activeRoute={activeRoute}
+      activeRoutePath={activeRoutePath}
     />
   {:else}
     <LinksMenu
@@ -29,14 +30,16 @@
   {/if}
 
   <svelte:fragment slot="right">
-    {#if isMobile}
-      <MobileNavigation
-        menuItems={menuItems}
-        activeRoutes={activeRoutePath}
+    {#if !isMobile}
+      <LinksMenu
+        menuItems={marketingRightItems}
+        style={style}
+        activeRoute={activeRoute}
+        activeRoutePath={activeRoutePath}
       />
     {:else}
       <LinksMenu
-        menuItems={marketingRightItems}
+        menuItems={[allNavItems.login]}
         style={style}
         activeRoute={activeRoute}
         activeRoutePath={activeRoutePath}