uniNavi production release

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

@@ -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 {

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

src/lib/components/MobileMenu.module.scss

@@ -29,3 +29,11 @@
 
   position: relative;
 }
+
+.closeIcon {
+  display: flex;
+  align-items: center;
+  img {
+    height: 15px;
+  }
+}

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>

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

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>