Remove all remaining DocuSeal branding and fix bg-white for dark theme

- Empty _powered_by.html.erb, _attribution.html.erb, _email_attribution.html.erb
  and _mailer_attribution.html.erb partials to fully remove DocuSeal branding
  from all pages and emails
- Replace bg-white with bg-base-300 in all admin ERB templates:
  webhook settings, submissions, setup, templates, recipients
- Replace bg-white with bg-base-300 in all template builder Vue components:
  conditions_modal, font_modal, formula_modal, context menus, controls,
  preview, upload, area (except canvas resize handles)
- Keep bg-white only for signature/initials canvas elements where white
  backgrounds are needed for drawing

https://claude.ai/code/session_01SMJoL1Hzz3b5qqDhyD63jF

app/javascript/template_builder/area.vue

@@ -33,7 +33,7 @@
     </div>
     <div
       v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
-      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
+      class="absolute bg-base-300 rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
       style="top: -25px; height: 25px"
       @mousedown.stop
       @pointerdown.stop
@@ -45,7 +45,7 @@
         :compact="true"
         :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
         :allow-add-new="!defaultSubmitters.length"
-        :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
+        :menu-classes="'dropdown-content bg-base-300 menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
         @click="selectedAreasRef.value = [area]"
@@ -55,7 +55,7 @@
         :button-width="27"
         :editable="editable && !defaultField"
         :button-classes="'px-1'"
-        :menu-classes="'bg-white rounded-t-none'"
+        :menu-classes="'bg-base-300 rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
         @click="selectedAreasRef.value = [area]"
       />

app/javascript/template_builder/conditions_modal.vue

@@ -60,7 +60,7 @@
                 > {{ t('remove') }}</a>
               </div>
               <select
-                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                class="select select-bordered select-sm w-full bg-base-300 h-11 pl-4 text-base font-normal"
                 :class="{ 'text-gray-300': !condition.field_uuid }"
                 required
                 @change="[
@@ -89,7 +89,7 @@
               <select
                 v-model="condition.action"
                 class="select select-bordered select-sm w-full h-11 pl-4 text-base font-normal"
-                :class="{ 'bg-white': condition.field_uuid, 'bg-base-300': !condition.field_uuid }"
+                :class="{ 'bg-base-300': condition.field_uuid, 'bg-base-300': !condition.field_uuid }"
                 :required="condition.field_uuid"
               >
                 <option
@@ -102,7 +102,7 @@
               </select>
               <select
                 v-if="['radio', 'select', 'multiple'].includes(conditionField(condition)?.type) && conditionField(condition)?.options"
-                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                class="select select-bordered select-sm w-full bg-base-300 h-11 pl-4 text-base font-normal"
                 :class="{ 'text-gray-300': !condition.value }"
                 required
                 @change="condition.value = $event.target.value"
@@ -129,7 +129,7 @@
                 v-model="condition.value"
                 type="number"
                 step="any"
-                class="input input-bordered input-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                class="input input-bordered input-sm w-full bg-base-300 h-11 pl-4 text-base font-normal"
                 :class="{ 'text-gray-300': !condition.value }"
                 :placeholder="t('type_value')"
                 required

app/javascript/template_builder/controls.vue

@@ -15,7 +15,7 @@
     />
     <button
       v-if="withArrows"
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+      class="btn border-base-200 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
       style="width: 24px; height: 24px"
       @click.stop="$emit('up', item)"
     >
@@ -23,14 +23,14 @@
     </button>
     <button
       v-if="withArrows"
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+      class="btn border-base-200 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
       style="width: 24px; height: 24px"
       @click.stop="$emit('down', item)"
     >
       &darr;
     </button>
     <button
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+      class="btn border-base-200 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
       style="width: 24px; height: 24px"
       @click.stop="$emit('remove', item)"
     >

app/javascript/template_builder/field_context_menu.vue

@@ -3,7 +3,7 @@
     <div
       v-if="!isShowFormulaModal && !isShowFontModal && !isShowConditionsModal && !isShowDescriptionModal && !isShowCustomValidationModal && !isShowLengthValidationModal && !isShowNumberRangeModal && !isShowPriceModal && !isShowPaymentLinkModal"
       ref="menu"
-      class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+      class="fixed z-50 p-1 bg-base-300 shadow-lg rounded-lg border border-neutral-200 cursor-default"
       style="min-width: 170px"
       :style="menuStyle"
       @mousedown.stop

app/javascript/template_builder/field_context_submenu.vue

@@ -20,7 +20,7 @@
     <div
       v-if="isOpen"
       ref="submenu"
-      class="absolute p-1 z-50 left-full bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+      class="absolute p-1 z-50 left-full bg-base-300 shadow-lg rounded-lg border border-neutral-200 cursor-default"
       style="min-width: 170px"
       :style="submenuStyle"
       :class="menuClass"

app/javascript/template_builder/font_modal.vue

@@ -39,7 +39,7 @@
                 </label>
                 <div
                   tabindex="0"
-                  class="dropdown-content p-0 mt-1 block z-10 menu shadow bg-white border border-base-300 rounded-md w-52"
+                  class="dropdown-content p-0 mt-1 block z-10 menu shadow bg-base-300 border border-base-300 rounded-md w-52"
                 >
                   <div
                     v-for="(font, index) in fonts"
@@ -56,7 +56,7 @@
             </span>
             <span class="relative">
               <select
-                class="select input-bordered bg-white select-sm text-center pl-2"
+                class="select input-bordered bg-base-300 select-sm text-center pl-2"
                 style="font-size: 16px; line-height: 12px; width: 86px; text-align-last: center;"
                 @change="$event.target.value ? preferences.font_size = parseInt($event.target.value) : delete preferences.font_size"
               >
@@ -76,7 +76,7 @@
                 </option>
               </select>
               <span
-                class="border-l pl-1.5 absolute bg-white bottom-0 pointer-events-none text-sm h-5"
+                class="border-l pl-1.5 absolute bg-base-300 bottom-0 pointer-events-none text-sm h-5"
                 style="right: 13px; top: 6px"
               >
                 pt
@@ -90,7 +90,7 @@
                 <button
                   v-for="(type, index) in types"
                   :key="index"
-                  class="btn btn-sm join-item bg-white input-bordered hover:border-base-content/20 hover:bg-base-200/50 px-2"
+                  class="btn btn-sm join-item bg-base-300 input-bordered hover:border-base-content/20 hover:bg-base-200/50 px-2"
                   :class="{ '!bg-base-300': preferences.font_type?.includes(type.value) }"
                   @click="setFontType(type.value)"
                 >
@@ -106,7 +106,7 @@
                 <button
                   v-for="(align, index) in aligns"
                   :key="index"
-                  class="btn btn-sm join-item bg-white input-bordered hover:border-base-content/20 hover:bg-base-200/50 px-2"
+                  class="btn btn-sm join-item bg-base-300 input-bordered hover:border-base-content/20 hover:bg-base-200/50 px-2"
                   :class="{ '!bg-base-300': preferences.align === align.value }"
                   @click="align.value && preferences.align != align.value ? preferences.align = align.value : delete preferences.align"
                 >
@@ -118,14 +118,14 @@
               <div class="dropdown modal-field-font-dropdown">
                 <label
                   tabindex="0"
-                  class="cursor-pointer flex bg-white border input-bordered rounded-md h-8 items-center justify-center px-1"
+                  class="cursor-pointer flex bg-base-300 border input-bordered rounded-md h-8 items-center justify-center px-1"
                   style="-webkit-appearance: none; -moz-appearance: none;"
                 >
                   <component :is="valigns.find((v) => v.value === (preferences.valign || 'center'))?.icon" />
                 </label>
                 <div
                   tabindex="0"
-                  class="dropdown-content p-0 mt-1 block z-10 menu shadow bg-white border border-base-300 rounded-md"
+                  class="dropdown-content p-0 mt-1 block z-10 menu shadow bg-base-300 border border-base-300 rounded-md"
                 >
                   <div
                     v-for="(valign, index) in valigns"
@@ -142,7 +142,7 @@
             </span>
             <span>
               <select
-                class="input input-bordered bg-white input-sm text-lg rounded-md"
+                class="input input-bordered bg-base-300 input-sm text-lg rounded-md"
                 style="-webkit-appearance: none; -moz-appearance: none; text-indent: 0px; text-overflow: ''; padding: 0px 6px; height: 32px"
                 @change="$event.target.value ? preferences.color = $event.target.value : delete preferences.color"
               >
@@ -160,7 +160,7 @@
         </div>
         <div class="mt-4">
           <div
-            class="flex border border-base-content/20 rounded-xl bg-white px-4 h-16 modal-field-font-preview"
+            class="flex border border-base-content/20 rounded-xl bg-base-300 px-4 h-16 modal-field-font-preview"
             :style="{
               color: preferences.color || 'black',
               fontSize: (preferences.font_size || 11) + 'pt',

app/javascript/template_builder/formula_modal.vue

@@ -32,7 +32,7 @@
           <button
             v-for="f in fields"
             :key="f.uuid"
-            class="mr-1 flex btn btn-neutral btn-outline border-base-content/20 btn-sm normal-case font-normal bg-white !rounded-xl"
+            class="mr-1 flex btn btn-neutral btn-outline border-base-content/20 btn-sm normal-case font-normal bg-base-300 !rounded-xl"
             @click.prevent="insertTextUnderCursor(`{{${f.name || buildDefaultName(f)}}}`)"
           >
             <IconMathFunction

app/javascript/template_builder/import_list.vue

@@ -112,7 +112,7 @@
                   :data-tip="[0, 1, 2].map((i) => rows[i]?.[mapping.column_index] ?? '---').join('\n')"
                 >
                   <button
-                    class="btn btn-xs btn-circle bg-white border-0 border-gray-300"
+                    class="btn btn-xs btn-circle bg-base-300 border-0 border-gray-300"
                     @click.prevent
                   >
                     <IconInfoCircle class="h-4 w-4" />

app/javascript/template_builder/page_context_menu.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="menu"
-    class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+    class="fixed z-50 p-1 bg-base-300 shadow-lg rounded-lg border border-neutral-200 cursor-default"
     style="min-width: 170px"
     :style="menuStyle"
     @mousedown.stop

app/javascript/template_builder/preview.vue

@@ -23,7 +23,7 @@
           >
             <div>
               <button
-                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
+                class="btn border-gray-300 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                 @click.stop="isShowConditionsModal = true"
               >
                 <IconRouteAltLeft
@@ -48,7 +48,7 @@
           >
             <div>
               <button
-                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                class="btn border-gray-300 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                 style="width: 24px; height: 24px"
                 @click.stop="$emit('remove', item)"
               >
@@ -63,7 +63,7 @@
                 class="tooltip tooltip-left before:text-xs"
               >
                 <button
-                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
+                  class="btn border-gray-300 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                   @click.stop="$emit('reorder', item)"
                 >
                   <IconSortDescending2
@@ -75,14 +75,14 @@
               </span>
               <template v-if="withArrows">
                 <button
-                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                  class="btn border-gray-300 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('up', item)"
                 >
                   &uarr;
                 </button>
                 <button
-                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                  class="btn border-gray-300 bg-base-300 text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('down', item)"
                 >

app/javascript/template_builder/selection_context_menu.vue

@@ -3,7 +3,7 @@
     <div
       v-if="!isShowFontModal && !isShowConditionsModal"
       ref="menu"
-      class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+      class="fixed z-50 p-1 bg-base-300 shadow-lg rounded-lg border border-neutral-200 cursor-default"
       style="min-width: 170px"
       :style="menuStyle"
       @mousedown.stop

app/javascript/template_builder/upload.vue

@@ -98,7 +98,7 @@
               >
               <button
                 id="gdrive_oauth_button"
-                class="btn bg-white btn-outline w-full text-base font-medium mt-4"
+                class="btn bg-base-300 btn-outline w-full text-base font-medium mt-4"
                 data-turbo="false"
                 type="submit"
                 :disabled="isConnectGoogleDriveClicked"
@@ -130,7 +130,7 @@
               />
               <div v-if="isLoadingGoogleDrive">
                 <div
-                  class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
+                  class="bg-base-300 absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
                   style="margin: 1px"
                 />
                 <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">

app/views/setup/index.html.erb

@@ -38,10 +38,10 @@
             <%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input w-full pr-10', data: { target: 'password-input.passwordInput' } %>
             <button data-target="password-input.togglePasswordVisibility" type="button" class="absolute inset-y-0 h-12 right-0 pr-3 flex items-center">
               <span data-target="password-input.hiddenPasswordIcon">
-                <%= svg_icon('eye', class: 'w-6 h-6 shrink-0 bg-white') %>
+                <%= svg_icon('eye', class: 'w-6 h-6 shrink-0 bg-transparent') %>
               </span>
               <span data-target="password-input.visiblePasswordIcon" class="hidden">
-                <%= svg_icon('eye_off', class: 'w-6 h-6 shrink-0 bg-white') %>
+                <%= svg_icon('eye_off', class: 'w-6 h-6 shrink-0 bg-transparent') %>
               </span>
             </button>
           </password-input>

app/views/shared/_attribution.html.erb

@@ -1 +1 @@
-<%= render 'shared/powered_by', with_counter: local_assigns[:with_counter], link_path: local_assigns[:link_path] %>
+

app/views/shared/_classes.html.erb

@@ -1 +1 @@
-<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30' %>
+<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-base-300 dropdown-open border-base-content/30 before:border-base-content/30' %>

app/views/shared/_email_attribution.html.erb

@@ -1,10 +1 @@
-<p>
-  ---
-</p>
-<p>
-  <% if @current_account&.testing? %>
-    <%= t('sent_using_product_name_in_testing_mode_html', product_url: "#{Docuseal::PRODUCT_EMAIL_URL}/start", product_name: Docuseal.product_name) %>
-  <% else %>
-    <%= t('sent_using_product_name_free_document_signing_html', product_url: "#{Docuseal::PRODUCT_EMAIL_URL}/start", product_name: Docuseal.product_name) %>
-  <% end %>
-</p>
+

app/views/shared/_mailer_attribution.html.erb

@@ -1 +1 @@
-<%= render 'shared/email_attribution' %>
+

app/views/shared/_powered_by.html.erb

@@ -1,13 +1 @@
-<div class="text-center px-2">
-  <% if local_assigns[:with_counter] %>
-    <% count = CompletedSubmitter.distinct.count(:submission_id) %>
-    <% if count > 1 %>
-      <%= t('count_documents_signed_with_html', count:) %>
-    <% else %>
-      <%= t('powered_by') %>
-    <% end %>
-  <% else %>
-    <%= t('powered_by') %>
-  <% end %>
-  <a href="<%= Docuseal::PRODUCT_URL %><%= local_assigns[:link_path] %>" class="underline"><%= Docuseal.product_name %></a> - <%= t('open_source_documents_software') %>
-</div>
+

app/views/submissions/_detailed_form.html.erb

@@ -62,7 +62,7 @@
                   <% prefillable_fields.each do |field| %>
                     <% field_id = "detailed_field_#{index}_#{field['uuid'] || field['name'].parameterize}" %>
                     <% if field['type'] == 'checkbox' %>
-                      <label for="<%= field_id %>" class="flex items-center justify-between mt-1.5 pl-3 pr-2.5 h-10 border border-base-content/20 rounded-full cursor-pointer transition-colors bg-white">
+                      <label for="<%= field_id %>" class="flex items-center justify-between mt-1.5 pl-3 pr-2.5 h-10 border border-base-content/20 rounded-full cursor-pointer transition-colors bg-base-300">
                         <span class="text-base select-none px-1"> <%= field['title'].presence || field['name'] %></span>
                         <%= tag.input type: 'checkbox', name: "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", id: field_id, class: 'toggle toggle-sm', style: 'width: 38px; --handleoffset: 17px', checked: field['default_value'].present? && (field['default_value'] == true || field['default_value'].to_s == '1' || field['default_value'].to_s.downcase == 'true'), required: field['required'], value: 'true' %>
                       </label>

app/views/submissions/_link_form.html.erb

@@ -1,6 +1,6 @@
 <div>
   <div class="">
-    <input id="api_key" type="text" value="<%= start_form_url(slug: template.slug) %>" class="input font-mono input-bordered w-full bg-white" autocomplete="off" readonly>
+    <input id="api_key" type="text" value="<%= start_form_url(slug: template.slug) %>" class="input font-mono input-bordered w-full bg-base-300" autocomplete="off" readonly>
     <div class="mt-4">
       <%= render 'shared/clipboard_copy', icon: 'copy', text: start_form_url(slug: template.slug), class: 'base-button w-full block', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
     </div>

app/views/templates/_submission.html.erb

@@ -81,7 +81,7 @@
         <% elsif !submission.archived_at? && !template&.archived_at? && !submission.expired? && !submitter.declined_at? %>
           <% if current_user.email == submitter.email %>
             <div class="flex-1 md:flex-none md:w-36 flex">
-              <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]">
+              <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm btn-neutral btn-outline bg-base-300 w-full md:w-36 flex z-[1]">
                 <span class="flex items-center justify-center space-x-1 md:space-x-2">
                   <% if t('sign_now').length < 12 %>
                     <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@@ -167,7 +167,7 @@
                 <% elsif !template&.archived_at? && !submission.archived_at? && !is_submission_completed && !submission.expired? && !submitter.declined_at? %>
                   <div class="relative flex items-center space-x-3">
                     <% if current_user.email == submitter.email %>
-                      <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36 z-[1]">
+                      <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-base-300 w-28 md:w-36 z-[1]">
                         <span class="flex items-center justify-center space-x-1 md:space-x-2">
                           <% if t('sign_now').length < 12 %>
                             <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>

app/views/templates_preferences/_recipients.html.erb

@@ -16,7 +16,7 @@
               <% if template.submitters.size > 2 %>
                 <div id="order_<%= submitter['uuid'] %>" class="mr-0.5">
                   <% if is_order_set %>
-                    <%= ff.select :order, options_for_select(template.submitters.map.with_index { |_, i| [(i + 1).ordinalize, i] }, submitter['order'].presence || index), {}, class: 'select select-xs text-sm input-bordered bg-white pl-3.5' %>
+                    <%= ff.select :order, options_for_select(template.submitters.map.with_index { |_, i| [(i + 1).ordinalize, i] }, submitter['order'].presence || index), {}, class: 'select select-xs text-sm input-bordered bg-base-300 pl-3.5' %>
                   <% elsif index == 0 %>
                     <mount-on-click data-template-id="order_fields" class="link whitespace-nowrap text-sm mt-1 mr-1 block">
                       <%= t('edit_order') %>
@@ -109,7 +109,7 @@
       <turbo-stream action="replace" target="order_<%= submitter['uuid'] %>">
         <template>
           <div id="order_<%= submitter['uuid'] %>">
-            <%= select_tag "template[submitters][#{index}][order]", options_for_select(template.submitters.map.with_index { |_, i| [(i + 1).ordinalize, i] }, submitter['order'].presence || index), class: 'select select-xs text-sm input-bordered bg-white pl-3.5' %>
+            <%= select_tag "template[submitters][#{index}][order]", options_for_select(template.submitters.map.with_index { |_, i| [(i + 1).ordinalize, i] }, submitter['order'].presence || index), class: 'select select-xs text-sm input-bordered bg-base-300 pl-3.5' %>
           </div>
         </template>
       </turbo-stream>

app/views/webhook_settings/index.html.erb

@@ -6,7 +6,7 @@
       <div class="flex flex-col gap-2 md:flex-row md:justify-between md:items-center">
         <%= render 'shared/test_mode_toggle' %>
         <% if @webhook_url.persisted? %>
-          <%= link_to new_settings_webhook_path, class: 'md:ml-3 btn bg-white btn-outline btn-md gap-2 w-full md:w-fit', data: { turbo_frame: 'modal' } do %>
+          <%= link_to new_settings_webhook_path, class: 'md:ml-3 btn bg-base-300 btn-outline btn-md gap-2 w-full md:w-fit', data: { turbo_frame: 'modal' } do %>
             <%= svg_icon('plus', class: 'w-6 h-6') %>
             <span><%= t('new_webhook') %></span>
           <% end %>

app/views/webhook_settings/show.html.erb

@@ -8,7 +8,7 @@
           <%= render 'shared/test_mode_toggle' %>
         <% end %>
         <% if @webhook_url.persisted? && params[:action] == 'index' %>
-          <%= link_to new_settings_webhook_path, class: 'md:ml-3 btn bg-white btn-outline btn-md gap-2 w-full md:w-fit', data: { turbo_frame: 'modal' } do %>
+          <%= link_to new_settings_webhook_path, class: 'md:ml-3 btn bg-base-300 btn-outline btn-md gap-2 w-full md:w-fit', data: { turbo_frame: 'modal' } do %>
             <%= svg_icon('plus', class: 'w-6 h-6') %>
             <span><%= t('new_webhook') %></span>
           <% end %>
@@ -21,7 +21,7 @@
           <%= label_tag :url, 'Webhook URL', class: 'text-sm font-semibold' %>
           <% if @webhook_url.persisted? %>
             <div class="flex items-center space-x-2 md:absolute md:right-0">
-              <%= link_to webhook_secret_path(@webhook_url), class: 'btn btn-outline btn-sm bg-white', data: { turbo_frame: 'modal' } do %>
+              <%= link_to webhook_secret_path(@webhook_url), class: 'btn btn-outline btn-sm bg-base-300', data: { turbo_frame: 'modal' } do %>
                 <%= svg_icon('lock', class: 'w-4 h-4') %>
                 <span><%= @webhook_url.secret.present? ? t('edit_secret') : t('add_secret') %></span>
               <% end %>