Consume more tokens from arches theme

Fix header skip #87
archesproject · Oct 21, 2024 · 2814405 · 2814405
1 parent d080c4c
commit 2814405
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 18 deletions.
diff --git 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;
     display: flex;

diff --git a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
@@ -24,16 +24,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>
         </template>
         <template #item="{ item }">
@@ -46,7 +43,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>
@@ -56,8 +55,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
@@ -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
@@ -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
@@ -46,13 +46,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
@@ -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
@@ -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 USER_KEY = Symbol() as InjectionKey<UserRefAndSetter>;