feat(web): improve NavBar design (#1522)

.gitignore

@@ -36,3 +36,4 @@ apps/librelingo_tools/dist
 *.tsbuildinfo
 report.*.*.json
 /coverage/
+apps/docs/build/

apps/lluis/NavBar/NavBarButton.svelte

@@ -0,0 +1,26 @@
+<script lang="typescript">
+  import LinkOrButton from "../primitives/LinkOrButton.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let href: string | null = null
+</script>
+
+<div>
+  <LinkOrButton href={href} on:click="{() => dispatch('click')}">
+    <slot />
+  </LinkOrButton>
+</div>
+
+<style type="text/scss">
+  div :global(*) {
+    display: block;
+    padding: 6px;
+    color: var(--navbar-text-color);
+    border-radius: var(--button-radius-small);
+
+    &:hover, &:focus {
+      background-color: var(--navbar-highlight-color);
+    }
+  }
+</style>

apps/lluis/ButtonSet.svelte → apps/lluis/NavBar/NavBarButtonSet.svelte

@@ -4,6 +4,7 @@
 
 <style type="text/scss">
   .buttonset {
+    height: 100%;
     display: flex;
     gap: var(--spacing-medium);
   }

apps/lluis/NavBar/NavBarItem.svelte

@@ -0,0 +1,11 @@
+<div> 
+  <slot />
+</div>
+
+<style type="text/scss">
+  div {
+    display: block;
+    padding: 6px;
+    color: var(--navbar-text-color);
+  }
+</style>

apps/lluis/primitives/LinkOrButton.svelte

@@ -0,0 +1,28 @@
+<script lang="typescript">
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let href: string | null = null
+</script>
+
+{#if href !== null}
+	<a href={href} {...$$restProps}>
+    <slot />
+	</a>
+{/if}
+
+{#if href === null}
+	<button on:click={() => dispatch("click")} {...$$restProps}>
+    <slot />
+	</button>
+{/if}
+
+<style type="text/scss">
+  button {
+    display: block;
+    background: transparent;
+    border: 0;
+    font-size: inherit;
+    cursor: pointer;
+  }
+</style>

apps/web/cypress/integration/common/i_see_link_in_navbar.js

@@ -0,0 +1,6 @@
+import { Given } from "cypress-cucumber-preprocessor/steps"
+
+Given(/I see an? "(.*)" link in the navbar/, (text) => {
+    cy.get("nav[role=navigation] a").contains(text).should("be.visible")
+})
+

apps/web/cypress/integration/coursePage.feature

@@ -10,7 +10,7 @@ Feature: Course page
     And I see 10 skills that are not started
     And I see a skill that has no image set
     And I see 3 skills that have an image set
-    And I see a "Log in" button
+    And I see a "Log in" link in the navbar
 
   Scenario: Opening course page with a stale skill
     Given I open "/course/test"

apps/web/cypress/integration/coursePage/index.js

@@ -81,7 +81,6 @@ Then("I see a completed skill", () => {
 
 Then("I see a started skill", () => {
     cy.get("[data-started=true][data-stale=false]").should("have.length", 1)
-    cy.get(".svg-inline--fa").should("be.visible")
 })
 
 And("I see a skill with 20% progress", () => {

apps/web/src/components/NavBar.svelte

@@ -1,14 +1,12 @@
 <script lang="typescript">
   import settings from "../settings"
   import authStore from "../auth"
-  import SponsorButton from "./SponsorButton.svelte"
-  import GitHubButton from "./GitHubButton.svelte"
-  import NavBar from "lluis/NavBar.svelte"
+  import NavBar from "lluis/NavBar/NavBar.svelte"
   import Icon from "lluis/Icon.svelte"
-  import Button from "lluis/Button.svelte"
+  import NavBarButton from "lluis/NavBar/NavBarButton.svelte"
   import Logo from "lluis/Logo.svelte"
-  import ButtonLink from "lluis/ButtonLink.svelte"
-  import ButtonSet from "lluis/ButtonSet.svelte"
+  import NavBarItem from "lluis/NavBar/NavBarItem.svelte"
+  import NavBarButtonSet from "lluis/NavBar/NavBarButtonSet.svelte"
   export let hasAuth = false
 
   type WindowWithLogout = Window & {
@@ -17,39 +15,37 @@
   const _Logout = () => (window as unknown as WindowWithLogout)._Logout()
 </script>
 
-<NavBar>
+<NavBar data-test="navbar">
   <div slot="left">
     <Logo src="/images/logo.svg" alt="LibreLingo" />
   </div>
 
   <div slot="right">
-    <ButtonSet>
-      <SponsorButton />
-      <GitHubButton />
+    <NavBarButtonSet>
       {#if hasAuth && settings.features.authEnabled}
         {#if $authStore.user}
-          <Button size="small" outlined inverted info>
+          <NavBarItem>
             <Icon size="small" icon="user" />
             <span>{$authStore.user.name}</span>
-          </Button>
-          <Button
-            on:click="{() => _Logout()}"
-            size="small"
-            outlined
-            inverted
-            info
-          >
+          </NavBarItem>
+          <NavBarButton on:click="{() => _Logout()}">
             Log out
-          </Button>
+          </NavBarButton>
         {:else}
-          <ButtonLink href="/sign-up" size="small" outlined inverted info>
+          <NavBarButton href="/sign-up">
             Sign up
-          </ButtonLink>
-          <ButtonLink href="/login" size="small" outlined inverted info>
+          </NavBarButton>
+          <NavBarButton href="/login">
             Log in
-          </ButtonLink>
+          </NavBarButton>
         {/if}
       {/if}
-    </ButtonSet>
+    </NavBarButtonSet>
   </div>
 </NavBar>
+
+<style>
+  div {
+    height: 100%;
+  }
+</style>

apps/web/src/db/db.js

@@ -52,10 +52,10 @@ if (isBrowser() === true) {
     window._DB = db
 
     // Detect fake user session
-    if (Cookies.get("loginDb") === getUserDbName("---fakeUser")) {
+    if (Cookies.get("loginDb") === getUserDbName("JohnDoe")) {
         authStore.update((value) => ({
             ...value,
-            user: { name: "---fakeUser" },
+            user: { name: "JohnDoe" },
             online: true,
         }))
     }
@@ -84,7 +84,7 @@ if (isBrowser() === true) {
 
     // Fake login for testing purposes
     window._fakeLogin = () => {
-        Cookies.set("loginDb", getUserDbName("---fakeUser"), {
+        Cookies.set("loginDb", getUserDbName("JohnDoe"), {
             expires: settings.database.auth.expireDays,
         })
         window.location.href = "/course/spanish-from-english/"

apps/web/src/mystyles.scss

@@ -62,11 +62,13 @@
     --spacing-small: 8px;
     --spacing-medium: 12px;
     --spacing-large: calc(var(--spacing-small) + var(--spacing-medium));
+    --button-radius-small: calc(var(--spacing-small) / 2);
     --blue: #325f74;
-    --white: #bfb5af;
+    --white: #faf4f0;
 
     --navbar-background: var(--blue);
     --navbar-text-color: var(--white);
+    --navbar-highlight-color: rgba(255, 255, 255, .1);
     --navbar-height: 52px;
     --navbar-padding-vertical: var(--spacing-small);
     --navbar-padding-horizontal: var(--spacing-medium);