feat(web): improve NavBar design

kantord · Aug 15, 2021 · 4a4b16b · 4a4b16b
1 parent 30e5f18
commit 4a4b16b
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,4 @@ apps/librelingo_tools/dist
 *.tsbuildinfo
 report.*.*.json
 /coverage/
+apps/docs/build/
diff --git a/apps/lluis/NavBar.svelte → apps/lluis/NavBar/NavBar.svelte b/apps/lluis/NavBar.svelte → apps/lluis/NavBar/NavBar.svelte
diff --git a/apps/lluis/NavBar/NavBarButton.svelte b/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>
diff --git a/apps/lluis/ButtonSet.svelte → apps/lluis/NavBar/NavBarButtonSet.svelte b/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);
   }

diff --git a/apps/lluis/NavBar/NavBarItem.svelte b/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>
diff --git a/apps/lluis/primitives/LinkOrButton.svelte b/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>
diff --git a/apps/web/src/components/NavBar.svelte b/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 & {
@@ -23,33 +21,31 @@
   </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>
diff --git a/apps/web/src/db/db.js b/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/"

diff --git a/apps/web/src/mystyles.scss b/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);