mirror of
https://github.com/we-promise/sure.git
synced 2026-05-09 21:54:58 +00:00
83cb287294
* chore(design-system): swap raw gray classes for semantic tokens in settings/
Pilot for the broader raw-color sweep. Maps 21 occurrences across 11
files to design-system equivalents:
- text-white bg-gray-900 hover:bg-gray-800 (CTA buttons)
-> text-inverse button-bg-primary hover:button-bg-primary-hover
- bg-gray-25 / bg-gray-50 / bg-gray-100 (subtle surface backgrounds)
-> bg-surface-inset
- bg-gray-800 (tooltip pills) -> bg-inverse
- text-white inside tooltips -> text-inverse
- text-gray-300 (muted tooltip labels) -> text-inverse opacity-70
- text-gray-600 (muted body text) -> text-secondary
- hover:text-gray-700 -> hover:text-primary
- focus:ring-gray-900 -> focus:ring-button-bg-primary
The 7 status-indicator dots (`bg-gray-400`) are intentionally left
as raw classes. Gray-400 against both light and dark container bgs
gives reasonable contrast either way, and there's no semantic token
that fits a "neutral inactive indicator" use case yet. Worth a
follow-up if a `bg-subdued` token would benefit other places.
* fix(design-system): use theme-aware focus ring on provider submit buttons
Two issues caught in code review:
1. focus:ring-button-bg-primary silently emits no CSS (CodeRabbit, Codex).
button-bg-primary is a custom @utility, not a theme color, so Tailwind's
ring-{name} resolution finds no --color-button-bg-primary and falls
back to the default. Replaces with focus:ring-gray-900
theme-dark:focus:ring-white — same color flip as the button bg, but
resolved through theme colors so ring-{name} actually generates CSS.
2. _enable_banking_panel.html.erb dropped focus-ring + transition entirely
in the original sweep (CodeRabbit). Restores parity with the other
provider panels using the corrected ring classes.
Long-term cleanup: tracked under issue #1653 (modifier-aware utilities)
to make button-bg-primary also a theme color so ring-button-bg-primary
becomes valid.
89 lines
4.0 KiB
Plaintext
89 lines
4.0 KiB
Plaintext
<div class="space-y-4">
|
|
<div>
|
|
<h2 class="font-medium mb-1"><%= t(".title") %></h2>
|
|
<% if ENV["TWELVE_DATA_API_KEY"].present? %>
|
|
<p class="text-sm text-secondary"><%= t(".env_configured_message") %></p>
|
|
<% else %>
|
|
<div class="text-secondary text-sm mb-4">
|
|
<span><%= t(".description") %></span>
|
|
<details class="inline">
|
|
<summary class="cursor-pointer font-medium text-secondary underline inline"> <%= t(".show_details") %></summary>
|
|
<ol class="text-sm text-secondary mt-2 list-decimal ml-6 space-y-2">
|
|
<li><%= t(".step_1_html") %></li>
|
|
<li><%= t(".step_2_html") %></li>
|
|
<li><%= t(".step_3") %></li>
|
|
</ol>
|
|
</details>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= styled_form_with model: Setting.new,
|
|
url: settings_hosting_path,
|
|
method: :patch,
|
|
data: {
|
|
controller: "auto-submit-form",
|
|
"auto-submit-form-trigger-event-value": "blur"
|
|
} do |form| %>
|
|
<% has_key = ENV["TWELVE_DATA_API_KEY"].present? || Setting.twelve_data_api_key.present? %>
|
|
<%= form.text_field :twelve_data_api_key,
|
|
label: t(".label"),
|
|
type: "password",
|
|
placeholder: t(".placeholder"),
|
|
value: has_key ? "********" : "",
|
|
disabled: ENV["TWELVE_DATA_API_KEY"].present?,
|
|
container_class: @twelve_data_usage.present? && !@twelve_data_usage.success? ? "border-red-500" : "",
|
|
data: { "auto-submit-form-target": "auto" } %>
|
|
<% end %>
|
|
|
|
<% if @twelve_data_usage.present? && @twelve_data_usage.success? %>
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<p class="text-sm text-secondary">
|
|
<%= t(".api_calls_used",
|
|
used: number_with_delimiter(@twelve_data_usage.data.used),
|
|
limit: number_with_delimiter(@twelve_data_usage.data.limit),
|
|
percentage: number_to_percentage(@twelve_data_usage.data.utilization, precision: 1)) %>
|
|
</p>
|
|
<div class="w-52 h-1.5 bg-surface-inset rounded-2xl">
|
|
<div class="h-full bg-green-500 rounded-2xl"
|
|
style="width: <%= [@twelve_data_usage.data.utilization, 2].max %>%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-inset rounded-md px-1.5 py-0.5 w-fit">
|
|
<p class="text-xs font-medium text-secondary uppercase">
|
|
<%= t(".plan", plan: @twelve_data_usage.data.plan) %>
|
|
</p>
|
|
</div>
|
|
|
|
<% if @plan_restricted_securities.present? %>
|
|
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mt-4">
|
|
<div class="flex items-start gap-2">
|
|
<%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5") %>
|
|
<div class="text-sm">
|
|
<p class="font-medium text-amber-800"><%= t(".plan_upgrade_warning_title") %></p>
|
|
<p class="text-amber-700 mt-1"><%= t(".plan_upgrade_warning_description") %></p>
|
|
<ul class="mt-2 space-y-1">
|
|
<% @plan_restricted_securities.each do |security| %>
|
|
<li class="text-amber-700">
|
|
<span class="font-medium"><%= security[:ticker] %></span>
|
|
<% if security[:name].present? %>
|
|
<span class="text-amber-600">(<%= security[:name] %>)</span>
|
|
<% end %>
|
|
<span class="text-amber-600">— <%= t(".requires_plan", plan: security[:required_plan]) %></span>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<p class="mt-2">
|
|
<a href="https://twelvedata.com/pricing" target="_blank" rel="noopener noreferrer" class="text-amber-800 underline font-medium">
|
|
<%= t(".view_pricing") %>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|