feat(design): add logo

alexfriesen · Jan 7, 2025 · 5934a12 · 5934a12
1 parent 6c44810
commit 5934a12
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 4 deletions.
diff --git a/apps/timer/app/app.vue b/apps/timer/app/app.vue
@@ -34,6 +34,8 @@ useHead({
 
   <Head>
     <Title>zeity</Title>
+
+    <Link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   </Head>
 
   <UApp :locale="uiLocale">

diff --git a/apps/timer/app/components/AppHeader.vue b/apps/timer/app/components/AppHeader.vue
@@ -12,9 +12,11 @@ function timeNew() {
             class="bg-background/75 backdrop-blur border-b -mb-px sticky top-0 z-50 border-neutral-200 dark:border-neutral-800 min-h-12">
             <div class="mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-16">
                 <div class="lg:flex-1 flex items-center gap-1.5 min-w-0">
-                    <a href="/" class="flex items-end gap-2 font-bold text-xl text-neutral-900 dark:text-white min-w-0">
-                        {{ $t('about.title') }}
-                    </a>
+                    <UButton to="/" icon="i-zeity-logo" variant="ghost">
+                        <span class="font-bold text-xl text-neutral-900 dark:text-white min-w-0">
+                            {{ $t('about.title') }}
+                        </span>
+                    </UButton>
                 </div>
                 <div class="flex items-center justify-end lg:flex-1 gap-1.5">
                     <UButton v-if="$route.path === '/'" square class="rounded-full" icon="i-lucide-plus"

diff --git a/apps/timer/app/components/Logo.vue b/apps/timer/app/components/Logo.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="inline-block rounded-3xl p-8 m-2 border border-[var(--ui-border)] bg-[var(--ui-bg-accented)] shadow-lg aspect-square">
+        <UIcon name="i-zeity-logo" :class="logoClasses" />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    size: {
+        type: String as PropType<'sm' | 'md' | 'lg' | 'xl'>,
+        default: 'lg'
+    }
+});
+
+const sizeClasses = {
+    'sm': 'size-16',
+    'md': 'size-24',
+    'lg': 'size-32',
+    'xl': 'size-48'
+};
+
+const logoClasses = computed(() => {
+    return `text-[var(--ui-primary)] ${sizeClasses[props.size]}`;
+});
+</script>
diff --git a/apps/timer/app/pages/about.vue b/apps/timer/app/pages/about.vue
@@ -6,10 +6,14 @@ const config = useRuntimeConfig();
     <UContainer class="my-3 space-y-6">
 
         <div>
+            <div class="text-center">
+                <Logo size="lg" />
+            </div>
+
             <p class="text-center text-2xl sm:text-3xl font-extrabold tracking-tight text-[var(--ui-primary)]">
                 {{ $t('about.title') }}
             </p>
-            <p class="text-center">
+            <p class="text-center text-pretty">
                 {{ $t('about.description') }}
             </p>
         </div>

diff --git a/apps/timer/nuxt.config.ts b/apps/timer/nuxt.config.ts
@@ -32,6 +32,12 @@ export default defineNuxtConfig({
     defaultLocale: 'en',
   },
   icon: {
+    customCollections: [
+      {
+        prefix: 'zeity',
+        dir: './public/icons'
+      },
+    ],
     clientBundle: {
       scan: true,
     },

diff --git a/apps/timer/public/favicon.svg b/apps/timer/public/favicon.svg
diff --git a/apps/timer/public/icons/logo.svg b/apps/timer/public/icons/logo.svg
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,8 @@ useHead({ @@
       <Head>
         <Title>zeity</Title>
+        <Link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       </Head>
       <UApp :locale="uiLocale">
@@ Expand Down @@