diff --git a/app/assets/tailwind/sure-design-system/_generated.css b/app/assets/tailwind/sure-design-system/_generated.css
index fe92a6a29..105b788e4 100644
--- a/app/assets/tailwind/sure-design-system/_generated.css
+++ b/app/assets/tailwind/sure-design-system/_generated.css
@@ -12,6 +12,7 @@
--color-success: var(--color-green-600);
--color-warning: var(--color-yellow-600);
--color-destructive: var(--color-red-600);
+ --color-info: var(--color-blue-600);
--color-shadow: --alpha(var(--color-black) / 6%);
--color-gray-25: #FAFAFA;
--color-gray-50: #F7F7F7;
@@ -199,6 +200,7 @@
--color-success: var(--color-green-500);
--color-warning: var(--color-yellow-400);
--color-destructive: var(--color-red-400);
+ --color-info: var(--color-blue-500);
--color-shadow: --alpha(var(--color-white) / 8%);
--budget-unused-fill: var(--color-gray-500);
--budget-unallocated-fill: var(--color-gray-700);
diff --git a/app/components/DS/alert.html.erb b/app/components/DS/alert.html.erb
index e56c9fc40..8f5c0fd41 100644
--- a/app/components/DS/alert.html.erb
+++ b/app/components/DS/alert.html.erb
@@ -1,7 +1,15 @@
<%= helpers.icon icon_name, size: "sm", color: icon_color, class: "shrink-0" %>
-
- <%= message %>
+
+ <% if title.present? %>
+
<%= title %>
+ <% end %>
+
+ <% if content.present? %>
+ <%= content %>
+ <% elsif message.present? %>
+ <%= message %>
+ <% end %>
diff --git a/app/components/DS/alert.rb b/app/components/DS/alert.rb
index 22241133f..b507111ff 100644
--- a/app/components/DS/alert.rb
+++ b/app/components/DS/alert.rb
@@ -1,24 +1,27 @@
class DS::Alert < DesignSystemComponent
- def initialize(message:, variant: :info)
+ VARIANTS = %i[info success warning error destructive].freeze
+
+ def initialize(message: nil, title: nil, variant: :info)
@message = message
+ @title = title
@variant = variant
end
private
- attr_reader :message, :variant
+ attr_reader :message, :title, :variant
def container_classes
base_classes = "flex items-start gap-3 p-4 rounded-lg border"
variant_classes = case variant
when :info
- "bg-blue-50 text-blue-700 border-blue-200 theme-dark:bg-blue-900/20 theme-dark:text-blue-400 theme-dark:border-blue-800"
+ "bg-info/10 border-info/20"
when :success
- "bg-green-50 text-green-700 border-green-200 theme-dark:bg-green-900/20 theme-dark:text-green-400 theme-dark:border-green-800"
+ "bg-success/10 border-success/20"
when :warning
- "bg-yellow-50 text-yellow-700 border-yellow-200 theme-dark:bg-yellow-900/20 theme-dark:text-yellow-400 theme-dark:border-yellow-800"
+ "bg-warning/10 border-warning/20"
when :error, :destructive
- "bg-red-50 text-red-700 border-red-200 theme-dark:bg-red-900/20 theme-dark:text-red-400 theme-dark:border-red-800"
+ "bg-destructive/10 border-destructive/20"
end
"#{base_classes} #{variant_classes}"
@@ -46,7 +49,7 @@ class DS::Alert < DesignSystemComponent
when :error, :destructive
"destructive"
else
- "blue-600"
+ "info"
end
end
end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index d46415e57..f00d876ea 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -17,7 +17,7 @@ module ApplicationHelper
def icon(key, size: "md", color: "default", custom: false, as_button: false, **opts)
extra_classes = opts.delete(:class)
sizes = { xs: "w-3 h-3", sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6", xl: "w-7 h-7", "2xl": "w-8 h-8" }
- colors = { default: "text-secondary", white: "text-inverse", success: "text-success", warning: "text-warning", destructive: "text-destructive", current: "text-current" }
+ colors = { default: "text-secondary", white: "text-inverse", success: "text-success", warning: "text-warning", destructive: "text-destructive", info: "text-info", current: "text-current" }
icon_classes = class_names(
"shrink-0",
diff --git a/app/views/lunchflow_items/_api_error.html.erb b/app/views/lunchflow_items/_api_error.html.erb
index cec9db68c..b1d6cee13 100644
--- a/app/views/lunchflow_items/_api_error.html.erb
+++ b/app/views/lunchflow_items/_api_error.html.erb
@@ -4,13 +4,11 @@
<% dialog.with_header(title: "Lunch Flow Connection Error") %>
<% dialog.with_body do %>
-
- <%= icon("alert-circle", class: "text-destructive w-5 h-5 shrink-0 mt-0.5") %>
-
-
Unable to connect to Lunch Flow
-
<%= error_message %>
-
-
+ <%= render DS::Alert.new(
+ title: "Unable to connect to Lunch Flow",
+ message: error_message,
+ variant: :error
+ ) %>
Common Issues:
diff --git a/app/views/lunchflow_items/_setup_required.html.erb b/app/views/lunchflow_items/_setup_required.html.erb
index b205ef4bd..afd03df41 100644
--- a/app/views/lunchflow_items/_setup_required.html.erb
+++ b/app/views/lunchflow_items/_setup_required.html.erb
@@ -3,13 +3,11 @@
<% dialog.with_header(title: "Lunch Flow Setup Required") %>
<% dialog.with_body do %>
-
- <%= icon("alert-circle", class: "text-warning w-5 h-5 shrink-0 mt-0.5") %>
-
-
API Key Not Configured
-
Before you can link Lunch Flow accounts, you need to configure your Lunch Flow API key.
-
-
+ <%= render DS::Alert.new(
+ title: "API Key Not Configured",
+ message: "Before you can link Lunch Flow accounts, you need to configure your Lunch Flow API key.",
+ variant: :warning
+ ) %>
Setup Steps:
diff --git a/app/views/settings/api_keys/created.html.erb b/app/views/settings/api_keys/created.html.erb
index 05f7eceb0..d37189000 100644
--- a/app/views/settings/api_keys/created.html.erb
+++ b/app/views/settings/api_keys/created.html.erb
@@ -62,18 +62,12 @@
-
-
- <%= icon("alert-triangle", class: "w-5 h-5 text-warning-600 mt-0.5") %>
-
-
Important Security Note
-
- This is the only time your API key will be displayed. Make sure to copy it now and store it securely.
- If you lose this key, you'll need to generate a new one.
-
-
-
-
+ <%= render DS::Alert.new(title: "Important Security Note", variant: :warning) do %>
+
+ This is the only time your API key will be displayed. Make sure to copy it now and store it securely.
+ If you lose this key, you'll need to generate a new one.
+
+ <% end %>
How to use your API key
diff --git a/app/views/settings/api_keys/created.turbo_stream.erb b/app/views/settings/api_keys/created.turbo_stream.erb
index 89dab090b..dec5baeb9 100644
--- a/app/views/settings/api_keys/created.turbo_stream.erb
+++ b/app/views/settings/api_keys/created.turbo_stream.erb
@@ -67,18 +67,12 @@
-
-
- <%= icon("alert-triangle", class: "w-5 h-5 text-warning-600 mt-0.5") %>
-
-
Important Security Note
-
- This is the only time your API key will be displayed. Make sure to copy it now and store it securely.
- If you lose this key, you'll need to generate a new one.
-
-
-
-
+ <%= render DS::Alert.new(title: "Important Security Note", variant: :warning) do %>
+
+ This is the only time your API key will be displayed. Make sure to copy it now and store it securely.
+ If you lose this key, you'll need to generate a new one.
+
+ <% end %>
How to use your API key
diff --git a/app/views/settings/api_keys/new.html.erb b/app/views/settings/api_keys/new.html.erb
index 20e322981..34def86b0 100644
--- a/app/views/settings/api_keys/new.html.erb
+++ b/app/views/settings/api_keys/new.html.erb
@@ -30,18 +30,12 @@
-
-
- <%= icon("alert-triangle", class: "w-5 h-5 text-warning-600 mt-0.5") %>
-
-
Security Warning
-
- Your API key will be displayed only once after creation. Make sure to copy and store it securely.
- Anyone with access to this key can access your data according to the permissions you select.
-
-
-
-
+ <%= render DS::Alert.new(title: "Security Warning", variant: :warning) do %>
+
+ Your API key will be displayed only once after creation. Make sure to copy and store it securely.
+ Anyone with access to this key can access your data according to the permissions you select.
+
+ <% end %>
<%= render DS::Link.new(
diff --git a/app/views/settings/hostings/_alpha_vantage_settings.html.erb b/app/views/settings/hostings/_alpha_vantage_settings.html.erb
index 47c67eff5..8a9249541 100644
--- a/app/views/settings/hostings/_alpha_vantage_settings.html.erb
+++ b/app/views/settings/hostings/_alpha_vantage_settings.html.erb
@@ -34,13 +34,8 @@
data: { "auto-submit-form-target": "auto" } %>
<% end %>
-
-
- <%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5") %>
-
-
<%= t(".rate_limit_warning") %>
-
<%= t(".no_health_check_note") %>
-
-
-
+ <%= render DS::Alert.new(variant: :warning) do %>
+
<%= t(".rate_limit_warning") %>
+
<%= t(".no_health_check_note") %>
+ <% end %>
diff --git a/app/views/settings/hostings/_eodhd_settings.html.erb b/app/views/settings/hostings/_eodhd_settings.html.erb
index e9ff03bba..0636da678 100644
--- a/app/views/settings/hostings/_eodhd_settings.html.erb
+++ b/app/views/settings/hostings/_eodhd_settings.html.erb
@@ -35,12 +35,5 @@
data: { "auto-submit-form-target": "auto" } %>
<% end %>
-
-
- <%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5") %>
-
- <%= t(".rate_limit_warning") %>
-
-
-
+ <%= render DS::Alert.new(message: t(".rate_limit_warning"), variant: :warning) %>
diff --git a/app/views/settings/hostings/_provider_selection.html.erb b/app/views/settings/hostings/_provider_selection.html.erb
index 147d082ab..4e38bb38f 100644
--- a/app/views/settings/hostings/_provider_selection.html.erb
+++ b/app/views/settings/hostings/_provider_selection.html.erb
@@ -71,13 +71,6 @@
<% if ENV["EXCHANGE_RATE_PROVIDER"].present? || ENV["SECURITIES_PROVIDERS"].present? || ENV["SECURITIES_PROVIDER"].present? %>
-