show userArea in octana

src/lib/components/Button.module.scss

@@ -40,6 +40,10 @@
     color: #FFF;
   }
 
+  &.primary-link {
+    color: #2A2A2A;
+  }
+
   &.outline {
     border: 2px solid;
     background-color: #fff;

src/lib/components/Button.svelte

@@ -2,7 +2,7 @@
   import { classnames } from 'lib/utils/classnames';
   import styles from './Button.module.scss'
 
-  type ButtonVariant = 'primary'|'outline'|'contrast'|''
+  type ButtonVariant = 'primary'|'primary-link'|'outline'|'contrast'|''
 
   let className = '';
   export {className as class};

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

@@ -87,12 +87,12 @@
 </script>
 
 {#if isReady}
-  <VerticalSeparator />
+  <!-- <VerticalSeparator /> -->
   <div class={styles.userAreaWrap}>
     {#if !user}
       <div class={styles.btnsWrap}>
-        <Button label="Log in" onClick={onSignIn} />
-        <Button variant="primary" label="Sign Up" onClick={onSignUp} />
+        <Button variant="primary-link" label="Sign Up" onClick={onSignUp} />
+        <Button variant="primary-link" label="Login" onClick={onSignIn} />
       </div>
     {:else }
       <ToolSelector />

src/lib/marketing-navigation/MarketingNavigation.svelte

@@ -11,6 +11,7 @@
   import { windowLocation } from 'lib/utils/location.store';
   import { checkAndLoadFonts } from 'lib/utils/fonts';
   import NavigationBar from './components/NavigationBar.svelte';
+  import UserArea from 'lib/components/user-area/UserArea.svelte';
 
   const ctx = getAppContext()
   $: ({auth, navigationHandler} = $ctx)
@@ -41,5 +42,7 @@
     menuItems={menuItems}
     isMobile={$isMobile}
     navigationHandler={navigationHandler}
-  />
+  >
+    <UserArea slot="auth" />
+  </NavigationBar>
 </div>

src/lib/marketing-navigation/components/NavigationBar.svelte

@@ -4,7 +4,6 @@
   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';
   import { NavigationHandler } from "../../app-context/navigation-handler.model";
 
   export let style: 'primary'|'secondary'|'tertiary';
@@ -33,22 +32,6 @@
   {/if}
 
   <svelte:fragment slot="right">
-    {#if !isMobile}
-      <LinksMenu
-        menuItems={marketingRightItems}
-        style={style}
-        activeRoute={activeRoute}
-        activeRoutePath={activeRoutePath}
-        navigationHandler={navigationHandler}
-      />
-    {:else}
-      <LinksMenu
-        menuItems={[allNavItems.login]}
-        style={style}
-        activeRoute={activeRoute}
-        activeRoutePath={activeRoutePath}
-        navigationHandler={navigationHandler}
-      />
-    {/if}
+    <slot name="auth"></slot>
   </svelte:fragment>
 </TopNavbar>