From 7e3bbaf8604e76ef3613aa03664ab9e92be58598 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Tue, 10 Sep 2024 15:08:52 -0400
Subject: [PATCH] Consume more tokens from arches theme

Fix header skip #87
---
 arches_lingo/src/arches_lingo/App.vue             |  2 +-
 .../arches_lingo/components/header/PageHeader.vue | 15 +++++++--------
 .../arches_lingo/components/login/LoginForm.vue   |  2 +-
 .../arches_lingo/components/login/LoginLinks.vue  |  6 ++++++
 .../arches_lingo/components/sidenav/SideNav.vue   |  6 +++---
 .../components/user/UserInteraction.vue           |  8 +++-----
 arches_lingo/src/arches_lingo/constants.ts        |  1 +
 7 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/App.vue b/arches_lingo/src/arches_lingo/App.vue
index 4c8ad376..63e54bf1 100644
--- a/arches_lingo/src/arches_lingo/App.vue
+++ b/arches_lingo/src/arches_lingo/App.vue
@@ -74,7 +74,7 @@ router.beforeEach(async (to, _from, next) => {
 
 <style scoped>
 main {
-    font-family: sans-serif;
+    font-family: system-ui, sans-serif;
     height: 100vh;
     width: 100vw;
     overflow-x: hidden;
diff --git a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
index c5d4a0cd..6a662edb 100644
--- a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
+++ b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
@@ -20,16 +20,13 @@ const items = ref([
 </script>
 
 <template>
-    <Menubar
-        class="page-header"
-        :model="items"
-    >
+    <Menubar :model="items">
         <template #start>
             <RouterLink
                 :to="{ name: routeNames.root }"
                 style="text-decoration: none; color: inherit"
             >
-                <h2>{{ $gettext("Arches Lingo") }}</h2>
+                <h1>{{ $gettext("Arches Lingo") }}</h1>
             </RouterLink>
             <SearchDialog />
         </template>
@@ -43,7 +40,9 @@ const items = ref([
                     :class="item.icon"
                     aria-hidden="true"
                 ></i>
-                <span>{{ item.label }}</span>
+                <span style="font-weight: var(--p-button-label-font-weight)">{{
+                    item.label
+                }}</span>
             </RouterLink>
         </template>
         <template #end>
@@ -53,8 +52,8 @@ const items = ref([
 </template>
 
 <style scoped>
-.page-header {
-    border-radius: 0;
+:deep(.p-menubar-start) {
+    gap: var(--p-menubar-gap);
 }
 
 @media screen and (max-width: 960px) {
diff --git a/arches_lingo/src/arches_lingo/components/login/LoginForm.vue b/arches_lingo/src/arches_lingo/components/login/LoginForm.vue
index 66454c54..5f03309a 100644
--- a/arches_lingo/src/arches_lingo/components/login/LoginForm.vue
+++ b/arches_lingo/src/arches_lingo/components/login/LoginForm.vue
@@ -65,7 +65,7 @@ const submit = async () => {
 form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--p-content-gap);
     width: 30%;
 }
 
diff --git a/arches_lingo/src/arches_lingo/components/login/LoginLinks.vue b/arches_lingo/src/arches_lingo/components/login/LoginLinks.vue
index 7438c82e..831a8f17 100644
--- a/arches_lingo/src/arches_lingo/components/login/LoginLinks.vue
+++ b/arches_lingo/src/arches_lingo/components/login/LoginLinks.vue
@@ -4,6 +4,8 @@ import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
 
+import { SECONDARY } from "@/arches_lingo/constants.ts";
+
 const { $gettext } = useGettext();
 </script>
 
@@ -13,11 +15,15 @@ const { $gettext } = useGettext();
             as="a"
             :label="$gettext('Register')"
             :href="arches.urls.signup"
+            :severity="SECONDARY"
+            :outlined="true"
         />
         <Button
             as="a"
             :label="$gettext('Multi-factor login')"
             :href="arches.urls.auth + '?next=/'"
+            :severity="SECONDARY"
+            :outlined="true"
         />
     </div>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue b/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue
index 3422bae2..36893f9a 100644
--- a/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue
+++ b/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue
@@ -41,13 +41,13 @@ const items = ref([
     display: flex;
     flex-direction: column;
     align-items: center;
-    min-width: 3rem;
+    min-width: var(--p-button-icon-only-width);
     border-right: 1px solid var(--p-menubar-border-color);
 }
 
 .p-button {
-    min-height: 3rem;
-    min-width: 3rem;
+    min-height: var(--p-button-icon-only-width);
+    min-width: var(--p-button-icon-only-width);
     border-radius: 0;
     font-size: 1.5rem;
 }
diff --git a/arches_lingo/src/arches_lingo/components/user/UserInteraction.vue b/arches_lingo/src/arches_lingo/components/user/UserInteraction.vue
index 7ba1bd01..60ab41db 100644
--- a/arches_lingo/src/arches_lingo/components/user/UserInteraction.vue
+++ b/arches_lingo/src/arches_lingo/components/user/UserInteraction.vue
@@ -52,13 +52,11 @@ const greeting = computed(() => {
 </script>
 
 <template>
-    <div style="display: flex; align-items: center">
+    <div style="display: flex; align-items: center; gap: var(--p-content-gap)">
         <span v-if="user">{{ greeting }}</span>
         <Button
-            style="margin-left: 1rem"
+            :label="$gettext('Sign out')"
             @click="issueLogout"
-        >
-            {{ $gettext("Sign out") }}
-        </Button>
+        ></Button>
     </div>
 </template>
diff --git a/arches_lingo/src/arches_lingo/constants.ts b/arches_lingo/src/arches_lingo/constants.ts
index 701063dc..27cabed7 100644
--- a/arches_lingo/src/arches_lingo/constants.ts
+++ b/arches_lingo/src/arches_lingo/constants.ts
@@ -4,6 +4,7 @@ import type { UserRefAndSetter } from "@/arches_lingo/types.ts";
 
 export const ANONYMOUS = "anonymous";
 export const ERROR = "error";
+export const SECONDARY = "secondary";
 
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 export const SEARCH_RESULTS_PER_PAGE = 25;