mirror of
https://github.com/we-promise/sure.git
synced 2026-05-09 05:35:00 +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.
62 lines
3.0 KiB
Plaintext
62 lines
3.0 KiB
Plaintext
<%# locals: (form:, user:) %>
|
|
|
|
<div class="flex flex-col items-center gap-4" data-controller="profile-image-preview">
|
|
<div class="relative">
|
|
<button type="button"
|
|
data-profile-image-preview-target="clearBtn"
|
|
data-action="click->profile-image-preview#clearFileInput"
|
|
class="<%= user.profile_image.attached? ? "" : "hidden" %> z-50 cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-surface-inset rounded-full flex justify-center items-center border border-white border-2">
|
|
<%= icon "x", size: "sm" %>
|
|
</button>
|
|
|
|
<div class="relative flex justify-center items-center bg-surface-inset size-26 md:size-24 rounded-full border-primary border border-dashed overflow-hidden">
|
|
<%# The image preview once user has uploaded a new file %>
|
|
<div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
|
|
<img src="" alt="Preview" class="w-full h-full rounded-full object-cover">
|
|
</div>
|
|
|
|
<%# The placeholder image for empty avatar field %>
|
|
<div data-profile-image-preview-target="placeholderImage"
|
|
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
|
|
<div class="h-full w-full flex justify-center items-center bg-surface-inset">
|
|
<%= icon "image-plus", size: "lg" %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# The attached image if user has already uploaded one %>
|
|
<div data-profile-image-preview-target="attachedImage"
|
|
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "" : "hidden" %>">
|
|
<% if user.profile_image.attached? %>
|
|
<div class="h-full w-full">
|
|
<%= render "settings/user_avatar", avatar_url: user.profile_image.url %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>
|
|
|
|
<%= form.label :profile_image, class: "px-3 py-2 rounded-lg text-sm hover:bg-surface-hover border border-secondary inline-flex items-center gap-2 cursor-pointer", data: { profile_image_preview_target: "uploadButton" } do %>
|
|
<%= icon "camera", data: { profile_image_preview_target: "cameraIcon" } %>
|
|
<span data-profile-image-preview-target="uploadText">
|
|
<%= t(".choose") %> <span class="text-secondary"><%= t(".choose_label") %></span>
|
|
</span>
|
|
<span data-profile-image-preview-target="changeText" class="hidden" aria-hidden="true">
|
|
<%= t(".change") %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<p class="mt-2 text-xs text-secondary"><%= t(".accepted_formats") %></p>
|
|
|
|
<%= form.file_field :profile_image,
|
|
accept: "image/png, image/jpeg",
|
|
class: "hidden px-3 py-2 bg-surface-inset text-primary rounded-md text-sm font-medium",
|
|
data: {
|
|
profile_image_preview_target: "input",
|
|
action: "change->profile-image-preview#showFileInputPreview"
|
|
} %>
|
|
</div>
|
|
</div>
|