Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-10 07:55:21 +02:00
Code Issues Releases Activity Actions

feat(user-avatar-field): enhance responsiveness and update design to align with Figma mockups

Browse source
This commit is contained in:
oliver 2025-04-10 18:12:57 -06:00
parent 52d170e36c
commit b8e2024dfc
1 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/views/settings/_user_avatar_field.html.erb
View file

@ -1,6 +1,6 @@
<%# locals: (form:, user:) %>
<div class="flex items-center gap-4" data-controller="profile-image-preview">
<div class="flex flex-col sm:flex-row items-center gap-4" data-controller="profile-image-preview">
<div class="relative flex justify-center items-center bg-gray-50 w-24 h-24 rounded-full border-alpha-black-300 border border-dashed">
<%# The image preview once user has uploaded a new file %>
@ -34,13 +34,19 @@
</button>
</div>
<div>
<div class="flex flex-col justify-center items-center gap-2">
<%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>
<p class="mb-3"><%= t(".accepted_formats") %></p>
<p class="order-last md:order-1 text-sm sm:text-md text-subdued"><%= t(".accepted_formats") %></p>
<%= form.label :profile_image, class: "btn btn--outline flex flex-row items-center gap-2" do %>
<%= lucide_icon "camera", class: "w-4 h-4 shrink-0" %>
<div>
<span><%= t(".choose") %></span>
<span class="text-subdued">(<%= t(".optional") %>)</span>
</div>
<% end %>
<%= form.label :profile_image, t(".choose"),
class: "btn btn--outline inline-block" %>
<%= form.file_field :profile_image,
accept: "image/png, image/jpeg",
class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",