From 0a61f9bf68cb3771275725b2292770e5b6769b72 Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Sat, 4 Oct 2025 16:41:35 +0200 Subject: [PATCH] Use DaisyUI for styling the Family feature --- app/views/families/edit.html.erb | 63 +++++++------ app/views/families/index.html.erb | 22 ++--- app/views/families/new.html.erb | 62 ++++++------- app/views/families/show.html.erb | 74 ++++++++-------- app/views/family_invitations/index.html.erb | 20 ++--- app/views/family_invitations/show.html.erb | 98 ++++++++++----------- 6 files changed, 167 insertions(+), 172 deletions(-) diff --git a/app/views/families/edit.html.erb b/app/views/families/edit.html.erb index 28595887..dbd28303 100644 --- a/app/views/families/edit.html.erb +++ b/app/views/families/edit.html.erb @@ -1,76 +1,74 @@
-
+
-

+

<%= t('families.edit.title', default: 'Edit Family') %>

<%= link_to family_path(@family), - class: "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 font-medium" do %> + class: "btn btn-ghost" do %> <%= t('families.edit.back', default: '← Back to Family') %> <% end %>
<%= form_with model: @family, local: true, class: "space-y-6" do |form| %> <% if @family.errors.any? %> -
-
-
-

- <%= t('families.edit.error_title', default: 'There were problems with your submission:') %> -

-
-
    - <% @family.errors.full_messages.each do |message| %> -
  • <%= message %>
    • - <% end %> -
-
+
+
+

+ <%= t('families.edit.error_title', default: 'There were problems with your submission:') %> +

+
+
    + <% @family.errors.full_messages.each do |message| %> +
  • <%= message %>
    • + <% end %> +
<% end %>
- <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" %> + <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "label label-text font-medium mb-2" %> <%= form.text_field :name, - class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", + class: "input input-bordered w-full", placeholder: t('families.form.name_placeholder', default: 'Enter your family name') %> -

+

<%= t('families.edit.name_help', default: 'Choose a name that all family members will recognize.') %>

-
-

+
+

<%= t('families.edit.family_info', default: 'Family Information') %>

-
+
<%= t('families.edit.creator', default: 'Created by') %>
-
<%= @family.creator.email %>
+
<%= @family.creator.email %>
-
+
<%= t('families.edit.created_on', default: 'Created on') %>
-
<%= @family.created_at.strftime('%B %d, %Y') %>
+
<%= @family.created_at.strftime('%B %d, %Y') %>
-
+
<%= t('families.edit.members_count', default: 'Members') %>
-
+
<%= pluralize(@family.members.count, 'member') %>
-
+
<%= t('families.edit.last_updated', default: 'Last updated') %>
-
<%= @family.updated_at.strftime('%B %d, %Y') %>
+
<%= @family.updated_at.strftime('%B %d, %Y') %>
@@ -78,9 +76,9 @@
<%= form.submit t('families.edit.save_changes', default: 'Save Changes'), - class: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-6 py-2 rounded-md font-medium transition-colors duration-200" %> + class: "btn btn-primary" %> <%= link_to family_path(@family), - class: "bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-6 py-2 rounded-md font-medium transition-colors duration-200" do %> + class: "btn btn-neutral" do %> <%= t('families.edit.cancel', default: 'Cancel') %> <% end %>
@@ -89,7 +87,8 @@ <%= link_to family_path(@family), method: :delete, data: { confirm: 'Are you sure you want to delete this family? This action cannot be undone.', turbo_confirm: 'Are you sure you want to delete this family? This action cannot be undone.' }, - class: "text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 font-medium" do %> + class: "btn btn-outline btn-error" do %> + <%= icon 'trash-2', class: "inline-block w-4 h-4 mr-2 -mt-1" %> Delete Family <% end %> <% end %> diff --git a/app/views/families/index.html.erb b/app/views/families/index.html.erb index fb5c0e43..9a4443e3 100644 --- a/app/views/families/index.html.erb +++ b/app/views/families/index.html.erb @@ -1,44 +1,44 @@
-

+

<%= t('families.index.title', default: 'Family Management') %>

-

+

<%= t('families.index.description', default: 'Create or join a family to share your location data with loved ones.') %>

-
-

+
+

<%= t('families.index.create_family', default: 'Create Your Family') %>

<%= form_with model: Family.new, local: true, class: "space-y-4" do |form| %>
- <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %> + <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "label label-text font-medium mb-1" %> <%= form.text_field :name, placeholder: t('families.form.name_placeholder', default: 'Enter your family name'), - class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %> + class: "input input-bordered w-full" %>
<%= form.submit t('families.form.create', default: 'Create Family'), - class: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-6 py-2 rounded-md font-medium transition-colors duration-200" %> + class: "btn btn-primary" %>
<% end %>
-

+

<%= t('families.index.have_invitation', default: 'Have an invitation?') %>

-

+

<%= t('families.index.invitation_instructions', default: 'If someone has invited you to join their family, you should have received an email with an invitation link.') %>

-
+
<%= t('families.index.invitation_help', default: 'Check your email for an invitation link that looks like: ') %> - + <%= "#{request.base_url}/invitations/..." %>
diff --git a/app/views/families/new.html.erb b/app/views/families/new.html.erb index 0ea14062..50c23c83 100644 --- a/app/views/families/new.html.erb +++ b/app/views/families/new.html.erb @@ -1,62 +1,62 @@
-

+

<%= t('families.new.title', default: 'Create Your Family') %>

-

+

<%= t('families.new.description', default: 'Create a family to share your location data with your loved ones.') %>

-
+
<%= form_with model: @family, local: true, class: "space-y-6" do |form| %> <% if @family.errors.any? %> -
-
-
-

- <%= t('families.new.error_title', default: 'There were problems with your submission:') %> -

-
-
    - <% @family.errors.full_messages.each do |message| %> -
  • <%= message %>
    • - <% end %> -
-
+
+
+

+ <%= t('families.new.error_title', default: 'There were problems with your submission:') %> +

+
+
    + <% @family.errors.full_messages.each do |message| %> +
  • <%= message %>
    • + <% end %> +
<% end %>
- <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" %> + <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "label label-text font-medium mb-2" %> <%= form.text_field :name, - class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", + class: "input input-bordered w-full", placeholder: t('families.form.name_placeholder', default: 'Enter your family name') %> -

+

<%= t('families.new.name_help', default: 'Choose a name that all family members will recognize, like "The Smith Family" or "Our Travel Group".') %>

-
-

- <%= t('families.new.what_happens_title', default: 'What happens next?') %> -

-
    -
  • • <%= t('families.new.what_happens_1', default: 'You will become the family owner') %>
    • -
  • • <%= t('families.new.what_happens_2', default: 'You can invite others to join your family') %>
    • -
  • • <%= t('families.new.what_happens_3', default: 'Family members can view shared location data') %>
    • -
  • • <%= t('families.new.what_happens_4', default: 'You can manage family settings and members') %>
    • -
+
+
+

+ <%= t('families.new.what_happens_title', default: 'What happens next?') %> +

+
    +
  • • <%= t('families.new.what_happens_1', default: 'You will become the family owner') %>
    • +
  • • <%= t('families.new.what_happens_2', default: 'You can invite others to join your family') %>
    • +
  • • <%= t('families.new.what_happens_3', default: 'Family members can view shared location data') %>
    • +
  • • <%= t('families.new.what_happens_4', default: 'You can manage family settings and members') %>
    • +
+
<%= form.submit t('families.new.create_family', default: 'Create Family'), - class: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-6 py-2 rounded-md font-medium transition-colors duration-200" %> + class: "btn btn-primary" %> <%= link_to families_path, - class: "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 font-medium" do %> + class: "btn btn-ghost" do %> <%= t('families.new.back', default: '← Back') %> <% end %>
diff --git a/app/views/families/show.html.erb b/app/views/families/show.html.erb index 1cbde3e1..a551281e 100644 --- a/app/views/families/show.html.erb +++ b/app/views/families/show.html.erb @@ -1,11 +1,11 @@
-
+
-

<%= @family.name %>

-

+

<%= @family.name %>

+

<%= t('families.show.created_by', default: 'Created by') %> <%= @family.creator.email %> <%= t('families.show.on_date', default: 'on') %> @@ -16,7 +16,7 @@

<% if policy(@family).update? %> <%= link_to edit_family_path(@family), - class: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" do %> + class: "btn btn-outline btn-info" do %> <%= icon 'square-pen', class: "inline-block w-4 h-4 mr-2 -mt-1" %> <%= t('families.show.edit', default: 'Edit') %> <% end %> @@ -26,7 +26,7 @@ <%= link_to leave_family_path(@family), method: :delete, data: { confirm: 'Are you sure you want to leave this family?', turbo_confirm: 'Are you sure you want to leave this family?' }, - class: "bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" do %> + class: "btn btn-outline btn-warning" do %> Leave Family <% end %> <% end %> @@ -35,7 +35,7 @@ <%= link_to family_path(@family), method: :delete, data: { confirm: 'Are you sure you want to delete this family? This action cannot be undone.', turbo_confirm: 'Are you sure you want to delete this family? This action cannot be undone.' }, - class: "bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" do %> + class: "btn btn-outline btn-error" do %> <%= icon 'trash-2', class: "inline-block w-4 h-4 mr-2 -mt-1" %> Delete <% end %> @@ -45,11 +45,11 @@
-
+
-

+

<%= t('families.show.members_title', default: 'Family Members') %> - (<%= @members.count %>) + (<%= @members.count %>)

@@ -164,25 +164,25 @@
-
+
-

+

<%= t('families.show.invitations_title', default: 'Pending Invitations') %> - (<%= @pending_invitations.count %>) + (<%= @pending_invitations.count %>)

<% if @pending_invitations.any? %>
<% @pending_invitations.each do |invitation| %> -
+
-
<%= invitation.email %>
-
+
<%= invitation.email %>
+
<%= t('families.show.invited_on', default: 'Invited') %> <%= invitation.created_at.strftime('%b %d, %Y') %>
-
+
<%= t('families.show.expires_on', default: 'Expires') %> <%= invitation.expires_at.strftime('%b %d, %Y at %I:%M %p') %>
@@ -191,7 +191,7 @@ <%= link_to family_invitation_path(@family, invitation), method: :delete, data: { confirm: 'Are you sure you want to cancel this invitation?', turbo_confirm: 'Are you sure you want to cancel this invitation?' }, - class: "text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 text-sm font-medium" do %> + class: "text-error hover:brightness-90 text-sm font-medium" do %> Cancel <% end %> <% end %> @@ -199,7 +199,7 @@ <% end %>
<% else %> -

+

<%= t('families.show.no_pending_invitations', default: 'No pending invitations') %>

<% end %> @@ -207,44 +207,40 @@ <% if policy(@family).invite? && @family.can_add_members? %>
-

+

<%= t('families.show.invite_member', default: 'Invite New Member') %>

<%= form_with model: [@family, FamilyInvitation.new], url: family_invitations_path(@family), local: true, class: "space-y-3" do |form| %>
- <%= form.label :email, t('families.show.email_label', default: 'Email Address'), class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %> + <%= form.label :email, t('families.show.email_label', default: 'Email Address'), class: "label label-text font-medium mb-1" %> <%= form.email_field :email, placeholder: t('families.show.email_placeholder', default: 'Enter email address'), - class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %> + class: "input input-bordered w-full" %>
<%= form.submit t('families.show.send_invitation', default: 'Send Invitation'), - class: "bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" %> + class: "btn btn-primary" %>
<% end %>
<% elsif policy(@family).invite? %>
-
-
-
- - - -
-
-

- Family at Capacity -

-
-

- Your family has reached the maximum of <%= @family.class::MAX_MEMBERS %> members (including pending invitations). - Cancel existing invitations or wait for them to expire to invite new members. -

-
+
+ + + +
+

+ Family at Capacity +

+
+

+ Your family has reached the maximum of <%= @family.class::MAX_MEMBERS %> members (including pending invitations). + Cancel existing invitations or wait for them to expire to invite new members. +

diff --git a/app/views/family_invitations/index.html.erb b/app/views/family_invitations/index.html.erb index 1c7082af..5d53eac3 100644 --- a/app/views/family_invitations/index.html.erb +++ b/app/views/family_invitations/index.html.erb @@ -1,12 +1,12 @@
-
+
-

+

<%= t('family_invitations.index.title', default: 'Family Invitations') %>

<%= link_to family_path(@family), - class: "bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" do %> + class: "btn btn-neutral" do %> <%= t('family_invitations.index.back_to_family', default: 'Back to Family') %> <% end %>
@@ -14,14 +14,14 @@ <% if @pending_invitations.any? %>
<% @pending_invitations.each do |invitation| %> -
+
-
<%= invitation.email %>
-
+
<%= invitation.email %>
+
<%= t('family_invitations.index.invited_on', default: 'Invited') %> <%= invitation.created_at.strftime('%B %d, %Y') %>
-
+
<%= t('family_invitations.index.expires_on', default: 'Expires') %> <%= invitation.expires_at.strftime('%B %d, %Y at %I:%M %p') %>
@@ -29,7 +29,7 @@
<%= link_to public_invitation_path(invitation.token), - class: "text-blue-600 hover:text-blue-800 text-sm font-medium" do %> + class: "btn btn-ghost btn-sm text-info" do %> <%= t('family_invitations.index.view_invitation', default: 'View') %> <% end %> @@ -37,7 +37,7 @@ <%= link_to family_invitation_path(@family, invitation), method: :delete, confirm: t('family_invitations.index.cancel_confirm', default: 'Are you sure you want to cancel this invitation?'), - class: "text-red-600 hover:text-red-800 text-sm font-medium" do %> + class: "btn btn-ghost btn-sm text-error" do %> <%= t('family_invitations.index.cancel', default: 'Cancel') %> <% end %> <% end %> @@ -47,7 +47,7 @@
<% else %>
-

+

<%= t('family_invitations.index.no_invitations', default: 'No pending invitations') %>

diff --git a/app/views/family_invitations/show.html.erb b/app/views/family_invitations/show.html.erb index 43a1da90..a7ec0fa7 100644 --- a/app/views/family_invitations/show.html.erb +++ b/app/views/family_invitations/show.html.erb @@ -1,93 +1,93 @@ -
+
-
- <%= icon 'users', class: "h-12 w-12 text-white" %> +
+ <%= icon 'users', class: "h-12 w-12 text-primary-content" %>
-

+

Join <%= @invitation.family.name %>!

-

- You've been invited by <%= @invitation.invited_by.email %> to join their family. Create your account to accept the invitation and start sharing location data. +

+ You've been invited by <%= @invitation.invited_by.email %> to join their family. Create your account to accept the invitation and start sharing location data.

-
- <%= icon 'info', class: "h-5 w-5 text-blue-600 dark:text-blue-400 mr-2" %> - +
+ <%= icon 'info', class: "h-5 w-5 mr-2" %> + Your email (<%= @invitation.email %>) will be used for this account
-
-

+
+

What benefits does joining a family bring?

-
+
-
- <%= icon 'map-pin', class: "h-6 w-6 text-white" %> +
+ <%= icon 'map-pin', class: "h-6 w-6 text-info-content" %>
-

+

Share Location Data

-

+

Share your location history with family members and see where they are

-
+
-
- <%= icon 'chart-column', class: "h-6 w-6 text-white" %> +
+ <%= icon 'chart-column', class: "h-6 w-6 text-secondary-content" %>
-

+

Track your location history

-

+

Access interactive maps and personal travel statistics

-
+
-
- <%= icon 'heart', class: "h-6 w-6 text-white" %> +
+ <%= icon 'heart', class: "h-6 w-6 text-success-content" %>
-

+

Stay Connected

-

+

Keep track of your loved ones' travels and adventures in real-time

-
+
-
- <%= icon 'shield-check', class: "h-6 w-6 text-white" %> +
+ <%= icon 'shield-check', class: "h-6 w-6 text-warning-content" %>
-

+

Full Control & Privacy

-

+

You control what and how long you share and can leave the family anytime

@@ -95,24 +95,24 @@
-
-

Invitation Details

+
+

Invitation Details

- Family: - <%= @invitation.family.name %> + Family: + <%= @invitation.family.name %>
- Invited by: - <%= @invitation.invited_by.email %> + Invited by: + <%= @invitation.invited_by.email %>
- Your email: - <%= @invitation.email %> + Your email: + <%= @invitation.email %>
- Expires: - <%= @invitation.expires_at.strftime('%b %d, %Y') %> + Expires: + <%= @invitation.expires_at.strftime('%b %d, %Y') %>
@@ -123,38 +123,38 @@ <%= link_to accept_family_invitation_path(@invitation.family, @invitation), method: :post, - class: "block w-full bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-200 shadow-lg hover:shadow-xl text-center" do %> + class: "btn btn-success btn-lg w-full text-lg shadow-lg" do %> ✓ Accept Invitation & Join Family <% end %> -

+

Logged in as <%= current_user.email %> · - <%= link_to destroy_user_session_path, method: :delete, class: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300" do %> + <%= link_to destroy_user_session_path, method: :delete, class: "link link-info" do %> Logout <% end %>

<% else %> <%= link_to new_user_registration_path(invitation_token: @invitation.token), - class: "block w-full bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-200 shadow-lg hover:shadow-xl text-center" do %> + class: "btn btn-primary btn-lg w-full text-lg shadow-lg" do %> Create Account & Join Family → <% end %>
-

+

Already have an account?

<%= link_to new_user_session_path(invitation_token: @invitation.token), - class: "inline-block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium" do %> + class: "link link-info font-medium" do %> Sign in to accept invitation <% end %>
<% end %> -
-

+

+

Not interested? You can simply close this page.