Fix/design system violations (#2422)

* fix: replace hardcoded bg-white with bg-container in notification notice

* fix: replace hardcoded text-white with fg-inverse in notification CTA

* fix: replace hardcoded text-white with fg-inverse in text tooltip

* fix: replace hardcoded bg-gray-900 text-white with bg-inverse fg-inverse in invitations form

* fix: replace hardcoded bg-gray-800 text-white with bg-inverse fg-inverse in AI consent form

* fix: replace hardcoded text-white with fg-inverse in changelog page

* fix: replace hardcoded text-white and border-gray-500 with fg-inverse and border-secondary in investment tooltip

* fix: replace hardcoded text-white with fg-inverse in holdings missing price tooltip

* fix: replace hardcoded text-white and bg-gray-400 with fg-inverse and bg-surface-inset in settings profiles

* fix: replace hardcoded bg-orange-500 text-white with bg-yellow-600 fg-inverse in settings hosting danger zone

---------

Co-authored-by: Eran Avidor <eavidor@Eran-Avidor-MBP.lan>

app/views/chats/_ai_consent.html.erb

@@ -18,7 +18,7 @@
     <%= form_with url: user_path(Current.user), method: :patch, class: "w-full", data: { turbo: false } do |form| %>
       <%= form.hidden_field "user[ai_enabled]", value: true %>
       <%= form.hidden_field "user[redirect_to]", value: "home" %>
-      <%= form.submit "Enable Maybe AI", class: "cursor-pointer hover:bg-black w-full py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
+      <%= form.submit "Enable Maybe AI", class: "cursor-pointer hover:bg-inverse-hover w-full py-2 px-4 bg-inverse fg-inverse rounded-lg text-sm font-medium" %>
     <% end %>
   <% end %>
 

app/views/holdings/_missing_price_tooltip.html.erb

@@ -4,7 +4,7 @@
     <%= tag.span t(".missing_data"), class: "font-normal text-xs" %>
   </div>
   <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
-    <div class="text-white">
+    <div class="fg-inverse">
       <%= t(".description") %>
     </div>
   </div>

app/views/investments/_value_tooltip.html.erb

@@ -3,14 +3,14 @@
 <div data-controller="tooltip" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
   <%= icon("info", size: "sm") %>
   <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
-    <div class="text-white">
+    <div class="fg-inverse">
       <%= t(".total_value_tooltip") %>
     </div>
     <div class="flex pt-3">
       <div class="text-gray-300">
         <%= t(".cash") %>
       </div>
-      <div class="text-white ml-auto">
+      <div class="fg-inverse ml-auto">
         <%= tag.p format_money(cash, precision: 0) %>
       </div>
     </div>
@@ -18,18 +18,18 @@
       <div class="text-gray-300">
         <%= t(".holdings") %>
       </div>
-      <div class="text-white ml-auto">
+      <div class="fg-inverse ml-auto">
         <%= tag.p format_money(holdings, precision: 0) %>
       </div>
     </div>
 
-    <hr class="my-2 border-gray-500">
+    <hr class="my-2 border-secondary">
 
     <div class="flex">
       <div class="text-gray-300">
         <%= t(".total") %>
       </div>
-      <div class="text-white font-bold ml-auto">
+      <div class="fg-inverse font-bold ml-auto">
         <%= tag.p format_money(balance, precision: 0) %>
       </div>
     </div>

app/views/invitations/new.html.erb

@@ -17,7 +17,7 @@
         { label: t(".role_label") } %>
 
       <div class="w-full">
-        <%= form.submit t(".submit"), class: "bg-gray-900 text-white rounded-lg px-4 py-2 w-full" %>
+        <%= form.submit t(".submit"), class: "bg-inverse fg-inverse rounded-lg px-4 py-2 w-full" %>
       </div>
     <% end %>
   <% end %>

app/views/pages/changelog.html.erb

@@ -5,7 +5,7 @@
     <div class="w-full md:w-1/3">
       <div class="md:px-3 flex items-center gap-3">
         <% if @release_notes[:avatar].present? %>
-          <div class="text-white shrink-0 w-9 h-9">
+          <div class="fg-inverse shrink-0 w-9 h-9">
             <%= image_tag @release_notes[:avatar], class: "rounded-full w-full h-full object-cover" %>
           </div>
         <% else %>

app/views/settings/hostings/_danger_zone_settings.html.erb

@@ -7,12 +7,12 @@
       </div>
       <%=
             button_to t("settings.hostings.show.clear_cache"), clear_cache_settings_hosting_path, method: :delete,
-              class: "w-full md:w-auto bg-orange-500 text-white text-sm font-medium rounded-lg px-4 py-2",
+              class: "w-full md:w-auto bg-yellow-600 fg-inverse text-sm font-medium rounded-lg px-4 py-2",
               data: { turbo_confirm: {
                 title: t("settings.hostings.show.confirm_clear_cache.title"),
                 body: t("settings.hostings.show.confirm_clear_cache.body"),
                 accept: t("settings.hostings.show.clear_cache"),
-                acceptClass: "w-full bg-orange-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                acceptClass: "w-full bg-yellow-600 fg-inverse rounded-xl text-center p-[10px] border mb-2"
               }}
       %>
     </div>

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

@@ -67,7 +67,7 @@
           <div class="flex gap-2 items-center justify-between bg-container p-4 border border-alpha-black-25 rounded-lg">
             <div class="flex gap-2 items-center">
               <div class="w-9 h-9 shrink-0">
-                <div class="text-white w-full h-full bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= invitation.email[0] %></div>
+                <div class="fg-inverse w-full h-full bg-surface-inset rounded-full flex items-center justify-center text-lg uppercase"><%= invitation.email[0] %></div>
               </div>
               <div class="flex">
                 <p class="text-primary font-medium text-sm"><%= invitation.email %></p>

app/views/shared/_text_tooltip.erb

@@ -1,5 +1,5 @@
 <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm px-1.5 py-1 rounded-md">
-  <div class="text-white font-normal max-w-[200px]">
+  <div class="fg-inverse font-normal max-w-[200px]">
     <%= tooltip_text %>
   </div>
 </div>

app/views/shared/notifications/_cta.html.erb

@@ -3,7 +3,7 @@
 <div id="cta">
   <%= tag.div class: "relative flex gap-3 rounded-lg bg-container p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %>
     <div class="h-5 w-5 shrink-0 p-px text-primary">
-      <div class="flex h-full items-center justify-center rounded-full bg-success text-white">
+      <div class="flex h-full items-center justify-center rounded-full bg-success fg-inverse">
         <%= icon "check", size: "xs", color: "current" %>
       </div>
     </div>

app/views/shared/notifications/_notice.html.erb

@@ -31,6 +31,6 @@
   </div>
 
   <div class="absolute -top-2 -right-2">
-    <%= icon "x", class: "p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
+    <%= icon "x", class: "p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-container text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
   </div>
 <% end %>