Improve dark mode styles across multiple pages (#2125)

* fix: improve dark mode readability across the app

* fix: improve dark mode support for asset percentage text

* fix: apply suggested patch for theme-related improvements

* chore: apply PR feedback – remove dark:, align with design tokens, update form builder

* chore: revert background token and restore original style for visual consistency

* chore: remove unnecessary class attributes from form fields using builder

* refactor: move number_field and date_field into metaprogramming block

* refactor: replace bg-divider-adaptive divs with <hr> and border-secondary

* fix: apply requested changes and linting fixes

app/views/settings/_settings_nav.html.erb

@@ -4,7 +4,7 @@
       <%= lucide_icon "chevron-left", class: "w-5 h-5 text-secondary" %>
       <span class="hidden md:block">Back</span>
     <% end %>
-    <%= link_to previous_path, class: "hidden md:block uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
+    <%= link_to previous_path, class: "hidden md:block uppercase bg-surface-inset-hover rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
       esc
     <% end %>
   </div>
@@ -89,7 +89,7 @@
       <% end %>
     </section>
   </nav>
-  <nav class="space-y-4 overflow-y-auto  md:hidden" id="mobile-settings-nav"  data-preserve-scroll data-controller="preserve-scroll">
+  <nav class="space-y-4 overflow-y-auto  md:hidden" id="mobile-settings-nav" data-preserve-scroll data-controller="preserve-scroll">
 
     <ul class="flex space-y-1">
 

app/views/settings/_settings_nav_item.html.erb

@@ -2,7 +2,7 @@
 
 <%= link_to path, class: class_names(
   "flex items-center gap-2 btn btn--ghost whitespace-nowrap",
-  page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-gray-100 border-transparent"
+  page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-surface-hover border-transparent"
 ), aria: { current: ("page" if page_active?(path)) } do %>
   <%= lucide_icon(icon, class: "w-5 h-5") if icon %>
   <%= name %>

app/views/settings/_user_avatar_field.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (form:, user:) %>
 
 <div class="flex md:flex-row flex-col md:items-center items-center gap-4" data-controller="profile-image-preview">
-  <div class="relative flex justify-center items-center bg-gray-50 size-26 md:size-24 rounded-full border-alpha-black-300 border border-dashed">
+  <div class="relative flex justify-center items-center bg-container size-26 md:size-24 rounded-full  border-primary border border-dashed overflow-hidden">
 
     <%# The image preview once user has uploaded a new file  %>
     <div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
@@ -10,8 +10,8 @@
 
     <%# The placeholder image for empty avatar field  %>
     <div data-profile-image-preview-target="placeholderImage"
-         class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
-      <div class="h-full w-full flex justify-center items-center">
+         class="h-full w-full flex justify-center  items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
+      <div class="h-full w-full flex justify-center items-center bg-container">
         <%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %>
       </div>
     </div>
@@ -48,9 +48,8 @@
       </span>
     <% end %>
 
-    
     <p class="mt-2 text-xs text-secondary"><%= t(".accepted_formats") %></p>
-    
+
     <%= form.file_field :profile_image,
         accept: "image/png, image/jpeg",
         class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",

app/views/settings/profiles/show.html.erb

@@ -43,7 +43,7 @@
             <%= render "settings/user_avatar", user: user %>
           </div>
           <p class="text-primary font-medium text-sm"><%= user.display_name %></p>
-          <div class="rounded-md bg-gray-100 px-1.5 py-0.5">
+          <div class="rounded-md bg-surface px-1.5 py-0.5">
             <p class="uppercase text-secondary font-medium text-xs"><%= user.role %></p>
           </div>
           <% if Current.user.admin? && user != Current.user %>
@@ -55,7 +55,7 @@
                         title: t(".confirm_remove_member.title"),
                         body: t(".confirm_remove_member.body", name: user.display_name),
                         accept: t(".remove_member"),
-                        acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                        acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
                       }} do %>
                 <%= lucide_icon "x", class: "w-5 h-5" %>
               <% end %>
@@ -72,7 +72,7 @@
               </div>
               <div class="flex">
                 <p class="text-primary font-medium text-sm"><%= invitation.email %></p>
-                <div class="rounded-md bg-gray-100 px-1.5 py-0.5">
+                <div class="rounded-md bg-surface px-1.5 py-0.5">
                   <p class="uppercase text-secondary font-medium text-xs"><%= t(".pending") %></p>
                 </div>
               </div>
@@ -86,7 +86,7 @@
                              readonly
                              autocomplete="off"
                              value="<%= accept_invitation_url(invitation.token) %>"
-                             class="text-sm bg-gray-50 px-2 py-1 rounded border border-gray-200 w-72">
+                             class="text-sm bg-gray-50 px-2 py-1 rounded border border-secondary w-72">
                   <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
                     <span data-clipboard-target="iconDefault">
                       <%= lucide_icon "copy", class: "w-5 h-5" %>
@@ -105,7 +105,7 @@
                           title: t(".confirm_remove_invitation.title"),
                           body: t(".confirm_remove_invitation.body", email: invitation.email),
                           accept: t(".remove_invitation"),
-                          acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                          acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
                         }} do %>
                   <%= lucide_icon "x", class: "w-5 h-5" %>
                 <% end %>
@@ -141,7 +141,7 @@
                   title: t(".confirm_reset.title"),
                   body: t(".confirm_reset.body"),
                   accept: t(".reset_account"),
-                  acceptClass: "w-full bg-orange-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                  acceptClass: "w-full btn btn--destructive  text-primary rounded-xl text-center p-[10px]  mb-2"
                 }}
         %>
       </div>
@@ -158,7 +158,7 @@
                 title: t(".confirm_delete.title"),
                 body: t(".confirm_delete.body"),
                 accept: t(".delete_account"),
-                acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
               }}
       %>
     </div>