From d1e73781e0192c4876e44ff04155b4b44e1f5a19 Mon Sep 17 00:00:00 2001 From: Vlad-Stefan Harbuz Date: Sat, 28 Feb 2026 22:36:38 +0000 Subject: [PATCH 1/3] fix(ui): improve logo --- app/components/AppHeader.vue | 11 +++--- app/components/AppLogo.vue | 43 ++++++++++++++---------- app/components/AppMark.vue | 25 ++++++++++++++ app/pages/index.vue | 9 ++--- public-dev/logo-icon.svg | 13 +++++++ public-dev/logo-mark.svg | 2 ++ public-dev/logo.svg | 15 ++------- public-staging/logo-icon.svg | 13 +++++++ public-staging/logo-mark.svg | 2 ++ public-staging/logo.svg | 15 ++------- public/logo-icon.svg | 13 +++++++ public/logo-mark.svg | 2 ++ public/logo.svg | 15 ++------- pwa-assets.config.ts | 2 +- test/nuxt/a11y.spec.ts | 17 ++++++++++ test/unit/server/utils/file-tree.spec.ts | 2 +- 16 files changed, 129 insertions(+), 70 deletions(-) create mode 100644 app/components/AppMark.vue create mode 100644 public-dev/logo-icon.svg create mode 100644 public-dev/logo-mark.svg create mode 100644 public-staging/logo-icon.svg create mode 100644 public-staging/logo-mark.svg create mode 100644 public/logo-icon.svg create mode 100644 public/logo-mark.svg diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 1600bb4c9..34228901a 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -213,9 +213,9 @@ onKeyStroke( v-if="!isSearchExpanded && !isOnHomePage" to="/" :aria-label="$t('header.home')" - class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring" + class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4" > - + @@ -224,13 +224,12 @@ onKeyStroke( :to="{ name: 'index' }" :aria-label="$t('header.home')" dir="ltr" - class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded" + class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4" > - - npmx + diff --git a/app/components/AppLogo.vue b/app/components/AppLogo.vue index 68c0e582f..a31201348 100644 --- a/app/components/AppLogo.vue +++ b/app/components/AppLogo.vue @@ -8,25 +8,34 @@ defineProps<{ diff --git a/app/components/AppMark.vue b/app/components/AppMark.vue new file mode 100644 index 000000000..bed49eb4a --- /dev/null +++ b/app/components/AppMark.vue @@ -0,0 +1,25 @@ + + + diff --git a/app/pages/index.vue b/app/pages/index.vue index 74d38d65d..3a63c2492 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -34,15 +34,12 @@ defineOgImageComponent('Default', { >

- - npmx + diff --git a/public-dev/logo-icon.svg b/public-dev/logo-icon.svg new file mode 100644 index 000000000..befaf6550 --- /dev/null +++ b/public-dev/logo-icon.svg @@ -0,0 +1,13 @@ + + + + / + diff --git a/public-dev/logo-mark.svg b/public-dev/logo-mark.svg new file mode 100644 index 000000000..c60a193dc --- /dev/null +++ b/public-dev/logo-mark.svg @@ -0,0 +1,2 @@ + + diff --git a/public-dev/logo.svg b/public-dev/logo.svg index befaf6550..de48ec0ec 100644 --- a/public-dev/logo.svg +++ b/public-dev/logo.svg @@ -1,13 +1,2 @@ - - - - / - + + diff --git a/public-staging/logo-icon.svg b/public-staging/logo-icon.svg new file mode 100644 index 000000000..befaf6550 --- /dev/null +++ b/public-staging/logo-icon.svg @@ -0,0 +1,13 @@ + + + + / + diff --git a/public-staging/logo-mark.svg b/public-staging/logo-mark.svg new file mode 100644 index 000000000..c60a193dc --- /dev/null +++ b/public-staging/logo-mark.svg @@ -0,0 +1,2 @@ + + diff --git a/public-staging/logo.svg b/public-staging/logo.svg index befaf6550..de48ec0ec 100644 --- a/public-staging/logo.svg +++ b/public-staging/logo.svg @@ -1,13 +1,2 @@ - - - - / - + + diff --git a/public/logo-icon.svg b/public/logo-icon.svg new file mode 100644 index 000000000..befaf6550 --- /dev/null +++ b/public/logo-icon.svg @@ -0,0 +1,13 @@ + + + + / + diff --git a/public/logo-mark.svg b/public/logo-mark.svg new file mode 100644 index 000000000..c60a193dc --- /dev/null +++ b/public/logo-mark.svg @@ -0,0 +1,2 @@ + + diff --git a/public/logo.svg b/public/logo.svg index befaf6550..de48ec0ec 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,13 +1,2 @@ - - - - / - + + diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts index dc49c8087..13e320523 100644 --- a/pwa-assets.config.ts +++ b/pwa-assets.config.ts @@ -2,5 +2,5 @@ import { defineConfig, minimal2023Preset } from '@vite-pwa/assets-generator/conf export default defineConfig({ preset: minimal2023Preset, - images: ['public/logo.svg', 'public-dev/logo.svg', 'public-staging/logo.svg'], + images: ['public/logo-icon.svg', 'public-dev/logo-icon.svg', 'public-staging/logo-icon.svg'], }) diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts index 9fa5f127b..4774a5ce6 100644 --- a/test/nuxt/a11y.spec.ts +++ b/test/nuxt/a11y.spec.ts @@ -119,6 +119,7 @@ import { AppFooter, AppHeader, AppLogo, + AppMark, AboutLogoImg, AboutLogoList, AuthorAvatar, @@ -329,6 +330,22 @@ describe('component accessibility audits', () => { }) }) + describe('AppMark', () => { + it('should have no accessibility violations', async () => { + const component = await mountSuspended(AppMark) + const results = await runAxe(component) + expect(results.violations).toEqual([]) + }) + + it('should have no accessibility violations with custom class', async () => { + const component = await mountSuspended(AppMark, { + props: { class: 'h-6 w-6 text-accent' }, + }) + const results = await runAxe(component) + expect(results.violations).toEqual([]) + }) + }) + describe('AboutLogoImg', () => { it('should have no accessibility violations with string src', async () => { const component = await mountSuspended(AboutLogoImg, { diff --git a/test/unit/server/utils/file-tree.spec.ts b/test/unit/server/utils/file-tree.spec.ts index 7e5f7de06..362083f1c 100644 --- a/test/unit/server/utils/file-tree.spec.ts +++ b/test/unit/server/utils/file-tree.spec.ts @@ -48,7 +48,7 @@ describe('convertToFileTree', () => { { type: 'directory', name: 'assets', - files: [{ type: 'file', name: 'logo.svg', size: 42 }], + files: [{ type: 'file', name: 'logo-icon.svg', size: 42 }], }, ] From fbd54a1245b45d653614b09f9a391b12378e9599 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Mon, 2 Mar 2026 09:12:24 +0000 Subject: [PATCH 2/3] fix: minor logo improvements in header --- app/components/AppHeader.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 34228901a..bfe80b8ef 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -224,12 +224,12 @@ onKeyStroke( :to="{ name: 'index' }" :aria-label="$t('header.home')" dir="ltr" - class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4" + class="relative inline-flex items-center gap-1 py-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4" > - + From b86c0b94f79ee3500413120ff476072879a849c2 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Mon, 2 Mar 2026 09:25:12 +0000 Subject: [PATCH 3/3] fix: make logo in header a 2px smaller --- app/components/AppHeader.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index bfe80b8ef..18801fca3 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -224,12 +224,12 @@ onKeyStroke( :to="{ name: 'index' }" :aria-label="$t('header.home')" dir="ltr" - class="relative inline-flex items-center gap-1 py-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4" + class="relative inline-flex items-center gap-1 py-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4" > - +