From 9fa4e7d228597d720903ecd0de69ef5ea4886340 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 3 Feb 2026 18:03:21 +0000 Subject: [PATCH] Fix template editor dark theme and add #8fb6ba accent color - Fix field type buttons in template editor sidebar: add dark background fallback (#252525) when no submitter color is set, preventing browser default white button backgrounds - Fix submitter dropdown menu: change fallback from white to dark (#252525) - Update primary and accent color to #8fb6ba for subtle blue detail throughout the interface - Make action buttons (base-button) use primary color instead of neutral - Add primary color focus states to input fields and textareas - Add subtle primary hover border to outline buttons https://claude.ai/code/session_01SMJoL1Hzz3b5qqDhyD63jF --- app/javascript/application.scss | 8 ++++---- app/javascript/form.scss | 8 ++++---- app/javascript/template_builder/builder.vue | 6 +++--- app/javascript/template_builder/fields.vue | 10 +++++----- tailwind.config.js | 4 ++-- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/app/javascript/application.scss b/app/javascript/application.scss index f931d537..1f0662d3 100644 --- a/app/javascript/application.scss +++ b/app/javascript/application.scss @@ -48,19 +48,19 @@ button[disabled] .enabled, button.btn-disabled .enabled { } .base-input { - @apply input input-bordered bg-base-300; + @apply input input-bordered bg-base-300 focus:border-primary/50; } .base-textarea { - @apply textarea textarea-bordered bg-base-300 rounded-3xl; + @apply textarea textarea-bordered bg-base-300 rounded-3xl focus:border-primary/50; } .base-button { - @apply btn btn-neutral text-white text-base; + @apply btn btn-primary text-base-100 text-base; } .white-button { - @apply btn btn-outline text-base bg-base-300 border-2; + @apply btn btn-outline text-base bg-base-300 border-2 hover:border-primary/50 hover:bg-base-200; } .base-checkbox { diff --git a/app/javascript/form.scss b/app/javascript/form.scss index 3ae0798d..943dfeb9 100644 --- a/app/javascript/form.scss +++ b/app/javascript/form.scss @@ -48,7 +48,7 @@ button[disabled] .enabled, button.btn-disabled .enabled { } .base-textarea { - @apply textarea textarea-bordered bg-base-300 rounded-3xl; + @apply textarea textarea-bordered bg-base-300 rounded-3xl focus:border-primary/50; } .btn { @@ -56,15 +56,15 @@ button[disabled] .enabled, button.btn-disabled .enabled { } .base-input { - @apply input input-bordered bg-base-300; + @apply input input-bordered bg-base-300 focus:border-primary/50; } .base-button { - @apply btn btn-neutral text-white text-base; + @apply btn btn-primary text-base-100 text-base; } .white-button { - @apply btn btn-outline text-base bg-base-300 border-2; + @apply btn btn-outline text-base bg-base-300 border-2 hover:border-primary/50 hover:bg-base-200; } .base-checkbox { diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue index 34953da1..1240fb66 100644 --- a/app/javascript/template_builder/builder.vue +++ b/app/javascript/template_builder/builder.vue @@ -56,7 +56,7 @@ id="title_container" class="flex justify-between py-1.5 items-center pr-4 top-0 z-10 title-container" :class="{ sticky: withStickySubmitters || isBreakpointLg }" - :style="{ backgroundColor }" + :style="{ backgroundColor: backgroundColor || '' }" >

diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue index b1d1346d..6257df23 100644 --- a/app/javascript/template_builder/fields.vue +++ b/app/javascript/template_builder/fields.vue @@ -5,7 +5,7 @@ class="roles-dropdown w-full rounded-lg roles-dropdown" :style="withStickySubmitters ? { backgroundColor } : {}" :submitters="submitters" - :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }" + :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? '#252525' : backgroundColor }" :editable="editable && !defaultSubmitters.length" @new-submitter="save" @remove="removeSubmitter" @@ -79,7 +79,7 @@ :key="field.name" >