mirror of
https://github.com/we-promise/sure.git
synced 2026-05-10 06:05:00 +00:00
chore(design-system): replace dead Bootstrap classes with Sure tokens (#1621)
Sure uses Tailwind v4 with the design system tokens but several views still carried Bootstrap-style class names that don't render anything because no Bootstrap stylesheet is loaded. They're effectively dead markup. Replacements: - text-muted, text-muted-foreground -> text-subdued - bg-light -> bg-surface - font-italic -> italic - text-uppercase -> uppercase - font-weight-bold -> font-bold Touched files: - app/views/doorkeeper/applications/_form.html.erb - app/views/doorkeeper/applications/show.html.erb - app/views/pages/privacy.html.erb - app/views/pages/terms.html.erb - app/views/pages/redis_configuration_error.html.erb - app/views/settings/providers/_mercury_panel.html.erb Also tightening application.css: - The .hw-combobox__label rule used raw text-gray-500 / text-gray-400 via @apply. Now uses the text-secondary / text-subdued tokens so the combobox label responds to the theme. - Custom scrollbar thumbs in .windows and .scrollbar used hardcoded #d6d6d6 / #a6a6a6 hex values. Now reference var(--color-gray-300) / var(--color-gray-400). Slight color shift (the hex values were close to but not identical to those tokens), so this needs a quick visual check. And reports/print.html.erb had four <span style="color: #666"> elements on the metric cards. Replaced with class="text-secondary" merged into the existing tufte-metric-card-change class, so print uses the same secondary-text color the rest of the app uses.
This commit is contained in:
Guillem Arias Fauste
committed by
GitHub
GitHub
parent
f45c7b33fd
commit
c429f20a77
@@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
.hw-combobox__label {
|
||||
@apply block text-xs text-gray-500 peer-disabled:text-gray-400;
|
||||
@apply block text-xs text-secondary peer-disabled:text-subdued;
|
||||
}
|
||||
|
||||
.hw-combobox__option {
|
||||
@@ -155,12 +155,12 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d6d6d6;
|
||||
background: var(--color-gray-300);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
background: var(--color-gray-400);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -170,12 +170,12 @@
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d6d6d6;
|
||||
background: var(--color-gray-300);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
background: var(--color-gray-400);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<% end %>
|
||||
|
||||
<div class="form-group row">
|
||||
<%= f.label :name, class: "col-sm-2 col-form-label font-weight-bold" %>
|
||||
<%= f.label :name, class: "col-sm-2 col-form-label font-bold" %>
|
||||
<div class="col-sm-10">
|
||||
<%= f.text_field :name, class: "form-control #{ 'is-invalid' if application.errors[:name].present? }", required: true %>
|
||||
<%= doorkeeper_errors_for application, :name %>
|
||||
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<%= f.label :redirect_uri, class: "col-sm-2 col-form-label font-weight-bold" %>
|
||||
<%= f.label :redirect_uri, class: "col-sm-2 col-form-label font-bold" %>
|
||||
<div class="col-sm-10">
|
||||
<%= f.text_area :redirect_uri, class: "form-control #{ 'is-invalid' if application.errors[:redirect_uri].present? }" %>
|
||||
<%= doorkeeper_errors_for application, :redirect_uri %>
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<%= f.label :confidential, class: "col-sm-2 form-check-label font-weight-bold" %>
|
||||
<%= f.label :confidential, class: "col-sm-2 form-check-label font-bold" %>
|
||||
<div class="col-sm-10">
|
||||
<%= f.check_box :confidential, class: "checkbox #{ 'is-invalid' if application.errors[:confidential].present? }" %>
|
||||
<%= doorkeeper_errors_for application, :confidential %>
|
||||
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<%= f.label :scopes, class: "col-sm-2 col-form-label font-weight-bold" %>
|
||||
<%= f.label :scopes, class: "col-sm-2 col-form-label font-bold" %>
|
||||
<div class="col-sm-10">
|
||||
<%= f.text_field :scopes, class: "form-control #{ 'has-error' if application.errors[:scopes].present? }" %>
|
||||
<%= doorkeeper_errors_for application, :scopes %>
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h4><%= t(".application_id") %>:</h4>
|
||||
<p><code class="bg-light" id="application_id"><%= @application.uid %></code></p>
|
||||
<p><code class="bg-surface" id="application_id"><%= @application.uid %></code></p>
|
||||
|
||||
<h4><%= t(".secret") %>:</h4>
|
||||
<p>
|
||||
<code class="bg-light" id="secret">
|
||||
<code class="bg-surface" id="secret">
|
||||
<% secret = flash[:application_secret].presence || @application.plaintext_secret %>
|
||||
<% if secret.blank? && Doorkeeper.config.application_secret_hashed? %>
|
||||
<span class="bg-light font-italic text-uppercase text-muted"><%= t(".secret_hashed") %></span>
|
||||
<span class="bg-surface italic uppercase text-subdued"><%= t(".secret_hashed") %></span>
|
||||
<% else %>
|
||||
<%= secret %>
|
||||
<% end %>
|
||||
@@ -21,17 +21,17 @@
|
||||
|
||||
<h4><%= t(".scopes") %>:</h4>
|
||||
<p>
|
||||
<code class="bg-light" id="scopes">
|
||||
<code class="bg-surface" id="scopes">
|
||||
<% if @application.scopes.present? %>
|
||||
<%= @application.scopes %>
|
||||
<% else %>
|
||||
<span class="bg-light font-italic text-uppercase text-muted"><%= t(".not_defined") %></span>
|
||||
<span class="bg-surface italic uppercase text-subdued"><%= t(".not_defined") %></span>
|
||||
<% end %>
|
||||
</code>
|
||||
</p>
|
||||
|
||||
<h4><%= t(".confidential") %>:</h4>
|
||||
<p><code class="bg-light" id="confidential"><%= @application.confidential? %></code></p>
|
||||
<p><code class="bg-surface" id="confidential"><%= @application.confidential? %></code></p>
|
||||
|
||||
<h4><%= t(".callback_urls") %>:</h4>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<% @application.redirect_uri.split.each do |uri| %>
|
||||
<tr>
|
||||
<td>
|
||||
<code class="bg-light"><%= uri %></code>
|
||||
<code class="bg-surface"><%= uri %></code>
|
||||
</td>
|
||||
<td>
|
||||
<%= link_to t("doorkeeper.applications.buttons.authorize"), oauth_authorization_path(client_id: @application.uid, redirect_uri: uri, response_type: "code", scope: @application.scopes), class: "btn btn-success", target: "_blank" %>
|
||||
@@ -49,7 +49,7 @@
|
||||
<% end %>
|
||||
</table>
|
||||
<% else %>
|
||||
<span class="bg-light font-italic text-uppercase text-muted"><%= t(".not_defined") %></span>
|
||||
<span class="bg-surface italic uppercase text-subdued"><%= t(".not_defined") %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="bg-container border border-primary rounded-xl p-6 sm:p-8 shadow-sm">
|
||||
<div class="text-center">
|
||||
<h1 class="text-xl sm:text-2xl font-bold text-primary mb-4"><%= t(".heading") %></h1>
|
||||
<p class="text-sm sm:text-base text-muted"><%= t(".placeholder") %></p>
|
||||
<p class="text-sm sm:text-base text-subdued"><%= t(".placeholder") %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<%= icon "alert-triangle", class: "w-8 h-8 text-red-600" %>
|
||||
</div>
|
||||
<h1 class="text-xl sm:text-2xl font-bold text-primary mb-2">Redis Configuration Required</h1>
|
||||
<p class="text-sm sm:text-base text-muted">Your self-hosted Sure installation needs Redis to be properly configured.</p>
|
||||
<p class="text-sm sm:text-base text-subdued">Your self-hosted Sure installation needs Redis to be properly configured.</p>
|
||||
</div>
|
||||
|
||||
<!-- Explanation -->
|
||||
@@ -36,14 +36,14 @@
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
) %>
|
||||
<p class="text-sm text-muted">Follow our complete Docker setup guide to configure Redis</p>
|
||||
<p class="text-sm text-subdued">Follow our complete Docker setup guide to configure Redis</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary CTA -->
|
||||
<div class="pt-6 border-t border-primary">
|
||||
<div class="text-center space-y-3">
|
||||
<p class="text-sm text-muted">Once you've configured Redis, refresh this page to continue.</p>
|
||||
<p class="text-sm text-subdued">Once you've configured Redis, refresh this page to continue.</p>
|
||||
<%= render DS::Button.new(
|
||||
text: "Refresh Page",
|
||||
variant: "secondary",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="bg-container border border-primary rounded-xl p-6 sm:p-8 shadow-sm">
|
||||
<div class="text-center">
|
||||
<h1 class="text-xl sm:text-2xl font-bold text-primary mb-4"><%= t(".heading") %></h1>
|
||||
<p class="text-sm sm:text-base text-muted"><%= t(".placeholder") %></p>
|
||||
<p class="text-sm sm:text-base text-subdued"><%= t(".placeholder") %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
savings_rate = @summary_metrics[:current_income].amount > 0 ? ((@summary_metrics[:net_savings].amount / @summary_metrics[:current_income].amount) * 100).round(0) : 0
|
||||
%>
|
||||
<% if savings_rate != 0 %>
|
||||
<span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.summary.of_income", percent: savings_rate) %></span>
|
||||
<span class="tufte-metric-card-change text-secondary"><%= t("reports.print.summary.of_income", percent: savings_rate) %></span>
|
||||
<% end %>
|
||||
<% if has_sparkline_data?(@trends_data) %>
|
||||
<svg width="60" height="20" viewBox="0 0 60 20" style="display:block;margin-top:6px;">
|
||||
@@ -65,7 +65,7 @@
|
||||
<div class="tufte-metric-card tufte-metric-card-sm">
|
||||
<span class="tufte-metric-card-label"><%= t("reports.print.summary.budget") %></span>
|
||||
<span class="tufte-metric-card-value"><%= @summary_metrics[:budget_percent] %>%</span>
|
||||
<span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.summary.used") %></span>
|
||||
<span class="tufte-metric-card-change text-secondary"><%= t("reports.print.summary.used") %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -213,12 +213,12 @@
|
||||
<div class="tufte-metric-card tufte-metric-card-sm">
|
||||
<span class="tufte-metric-card-label"><%= t("reports.print.investments.contributions") %></span>
|
||||
<span class="tufte-metric-card-value tufte-income"><%= format_money(@investment_metrics[:period_contributions]) %></span>
|
||||
<span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.investments.this_period") %></span>
|
||||
<span class="tufte-metric-card-change text-secondary"><%= t("reports.print.investments.this_period") %></span>
|
||||
</div>
|
||||
<div class="tufte-metric-card tufte-metric-card-sm">
|
||||
<span class="tufte-metric-card-label"><%= t("reports.print.investments.withdrawals") %></span>
|
||||
<span class="tufte-metric-card-value tufte-expense"><%= format_money(@investment_metrics[:period_withdrawals]) %></span>
|
||||
<span class="tufte-metric-card-change" style="color: #666;"><%= t("reports.print.investments.this_period") %></span>
|
||||
<span class="tufte-metric-card-change text-secondary"><%= t("reports.print.investments.this_period") %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<li><strong>Base URL:</strong> Mercury API URL (optional, defaults to https://api.mercury.com/api/v1)</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-sm text-muted-foreground mt-2">
|
||||
<p class="text-sm text-subdued mt-2">
|
||||
<strong>Note:</strong> For sandbox testing, use <code>https://api-sandbox.mercury.com/api/v1</code> as the Base URL.
|
||||
Mercury requires IP whitelisting - make sure to add your IP in the Mercury dashboard.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user