feature(dark mode): misc design fixes (#2215)

* Fix category dark mode styles

* Fix sidebar account tab states

* Fix dashboard balance sheet group styles

* Fix budget dark mode styles

* Fix chart gradient split

* Fix prose styles in dark mode

* Add back chat nav id for tests

app/views/chats/_ai_greeting.html.erb

@@ -30,8 +30,8 @@
         <% questions.each do |question| %>
           <button data-action="chat#submitSampleQuestion"
                   data-chat-question-param="<%= question[:text] %>"
-                  class="w-full flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
-            <%= icon(question[:icon], color: "gray") %> <%= question[:text] %>
+                  class="w-fit flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
+            <%= icon(question[:icon]) %> <%= question[:text] %>
           </button>
         <% end %>
       </div>

app/views/chats/_chat_nav.html.erb

@@ -4,9 +4,12 @@
   <% path = chat.new_record? ? chats_path : chats_path(previous_chat_id: chat.id) %>
 
   <div class="flex items-center gap-2 grow">
-    <%= link_to path, id: "chat-nav-back", class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
-      <%= icon("menu", color: "gray" ) %>
-    <% end %>
+    <%= render LinkComponent.new(
+      id: "chat-nav-back",
+      variant: "icon",
+      icon: "menu",
+      href: path,
+    ) %>
 
     <div class="grow">
       <%= render "chats/chat_title", chat: chat, ctx: "chat" %>

app/views/chats/index.html.erb

@@ -4,9 +4,12 @@
       <% if @chats.any? %>
         <nav class="mb-6">
           <% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
-          <%= link_to back_path, class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
-            <%= icon("arrow-left", color: "gray" ) %>
-          <% end %>
+
+          <%= render LinkComponent.new(
+            variant: "icon",
+            icon: "arrow-left",
+            href: back_path,
+          ) %>
         </nav>
       <% end %>
 

app/views/chats/new.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag chat_frame do %>
-  <div class="flex flex-col h-full md:p-4">
+  <div class="flex flex-col h-full md:px-4 md:pb-4">
     <%= render "chats/chat_nav", chat: @chat %>
 
     <div class="mt-auto py-8">

app/views/chats/show.html.erb

@@ -30,7 +30,7 @@
       </div>
 
       <%# DESKTOP - Chat form %>
-      <div class="p-4 lg:mt-auto fixed lg:static left-0 bottom-16 w-full bg-surface">
+      <div class="p-4 pt-0 lg:mt-auto fixed lg:static left-0 bottom-16 w-full bg-surface">
         <%= render "messages/chat_form", chat: @chat %>
       </div>
     </div>