From 11b9f1d39917f557e57512d5d3b066f6fcebcb36 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 8 Apr 2026 10:13:54 +0200
Subject: [PATCH] feat(app): polish event type selector and branding mark

Refine the event type segmented control styling and avoid duplicate "Crewli" text in the sidebar header.

Made-with: Cursor
---
 .../components/events/CreateEventDialog.vue   | 40 ++++++++++++-------
 apps/app/themeConfig.ts                       |  4 +-
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/apps/app/src/components/events/CreateEventDialog.vue b/apps/app/src/components/events/CreateEventDialog.vue
index a68a444..facf2dc 100644
--- a/apps/app/src/components/events/CreateEventDialog.vue
+++ b/apps/app/src/components/events/CreateEventDialog.vue
@@ -162,22 +162,34 @@ function onSubmit() {
             </VCol>
 
             <VCol cols="12">
-              <VBtnToggle
-                v-model="form.event_type"
-                mandatory
-                color="primary"
-                variant="outlined"
-                divided
-                density="comfortable"
+              <div class="text-caption text-medium-emphasis mb-1">
+                Type
+              </div>
+              <VSheet
+                border
+                rounded="lg"
+                class="pa-1"
               >
-                <VBtn
-                  v-for="opt in eventTypeOptions"
-                  :key="opt.value"
-                  :value="opt.value"
+                <VBtnToggle
+                  v-model="form.event_type"
+                  mandatory
+                  class="w-100"
+                  density="comfortable"
                 >
-                  {{ opt.title }}
-                </VBtn>
-              </VBtnToggle>
+                  <VBtn
+                    v-for="opt in eventTypeOptions"
+                    :key="opt.value"
+                    :value="opt.value"
+                    class="flex-grow-1 text-none"
+                    rounded="lg"
+                    :color="form.event_type === opt.value ? 'primary' : undefined"
+                    :variant="form.event_type === opt.value ? 'tonal' : 'text'"
+                    style="min-inline-size: 0;"
+                  >
+                    {{ opt.title }}
+                  </VBtn>
+                </VBtnToggle>
+              </VSheet>
             </VCol>
 
             <VCol
diff --git a/apps/app/themeConfig.ts b/apps/app/themeConfig.ts
index e990379..c56c324 100644
--- a/apps/app/themeConfig.ts
+++ b/apps/app/themeConfig.ts
@@ -12,10 +12,10 @@ export const { themeConfig, layoutConfig } = defineThemeConfig({
     logo: h(
       'span',
       {
-        class: 'crewli-wordmark text-h5 font-weight-bold',
+        class: 'crewli-mark text-h5 font-weight-bold',
         style: 'line-height: 1.2; letter-spacing: -0.02em; color: rgb(var(--v-theme-primary));',
       },
-      'Crewli',
+      'C',
     ),
     contentWidth: ContentWidth.Boxed,
     contentLayoutNav: AppContentLayoutNav.Vertical,