Skip to content

Apply design system to views #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
frogr wants to merge 1 commit into
base: feature/styles-part-two
Choose a base branch
from
Draft

Apply design system to views #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 40 additions & 40 deletions app/views/admin/users/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,67 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="<%= DesignSystemHelper::CONTAINER_WIDE %> py-20">
<div class="mb-6">
<%= link_to "← Back to User", admin_user_path(@user), class: "text-indigo-600 hover:text-indigo-900" %>
<%= link_to "← Back to User", admin_user_path(@user), class: DesignSystemHelper::LINK_SUBTLE %>
</div>
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-6">Edit User</h3>

<div class="<%= DesignSystemHelper::CARD %>">
<div class="<%= DesignSystemHelper::CARD_BODY %>">
<h3 class="<%= DesignSystemHelper::TEXT_SUBHEADING %> <%= DesignSystemHelper::TEXT_PRIMARY %> mb-6">Edit User</h3>

<%= form_with model: @user, url: admin_user_path(@user), method: :patch do |form| %>
<div class="space-y-6">
<div>
<%= form.label :email, class: "block text-sm font-medium text-gray-700" %>
<%= form.email_field :email, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
<%= form.label :email, class: DesignSystemHelper::FORM_LABEL %>
<%= form.email_field :email, class: DesignSystemHelper::FORM_INPUT %>
</div>

<div>
<%= form.check_box :admin, class: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" %>
<%= form.label :admin, "Administrator", class: "ml-2 text-sm font-medium text-gray-700" %>
<%= form.check_box :admin, class: "h-4 w-4 text-accent-500 focus:ring-accent-500 border-primary-600 rounded" %>
<%= form.label :admin, "Administrator", class: "ml-2 #{DesignSystemHelper::TEXT_BODY_SM} #{DesignSystemHelper::TEXT_SECONDARY}" %>
</div>

<div>
<%= form.submit "Update User", class: "bg-indigo-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-indigo-700" %>
<%= form.submit "Update User", class: btn_accent(:sm) %>
</div>
</div>
<% end %>
</div>
</div>
<div class="bg-white shadow sm:rounded-lg mt-8">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-6">Manage Subscription</h3>

<div class="<%= DesignSystemHelper::CARD %> mt-8">
<div class="<%= DesignSystemHelper::CARD_BODY %>">
<h3 class="<%= DesignSystemHelper::TEXT_SUBHEADING %> <%= DesignSystemHelper::TEXT_PRIMARY %> mb-6">Manage Subscription</h3>

<% if @user.subscription %>
<div class="mb-4 p-4 bg-gray-50 rounded-md">
<p class="text-sm text-gray-700">
Current plan: <strong><%= @user.subscription.plan.name %></strong>
<div class="mb-4 p-4 bg-primary-700/20 rounded-md">
<p class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">
Current plan: <strong><%= @user.subscription.plan.name %></strong>
(<%= @user.subscription.status.humanize %>)
</p>
<% if @user.subscription.trial_ends_at %>
<p class="text-sm text-gray-700 mt-1">
<p class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %> mt-1">
Trial ends: <%= @user.subscription.trial_ends_at.strftime("%B %d, %Y") %>
</p>
<% end %>
</div>
<% else %>
<div class="mb-4 p-4 bg-yellow-50 rounded-md">
<p class="text-sm text-yellow-800">User has no active subscription</p>
<div class="mb-4 <%= DesignSystemHelper::ALERT_WARNING %>">
<p>User has no active subscription</p>
</div>
<% end %>

<%= form_with url: update_subscription_admin_user_path(@user), method: :patch do |form| %>
<div class="space-y-4">
<div>
<%= form.label :plan_id, "Plan", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :plan_id,
<%= form.label :plan_id, "Plan", class: DesignSystemHelper::FORM_LABEL %>
<%= form.select :plan_id,
options_from_collection_for_select(@plans, :id, :name, @user.subscription&.plan_id),
{ prompt: "Select a plan" },
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
class: DesignSystemHelper::FORM_INPUT %>
</div>

<div>
<%= form.label :status, "Status", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :status,
<%= form.label :status, "Status", class: DesignSystemHelper::FORM_LABEL %>
<%= form.select :status,
options_for_select([
["Trialing", "trialing"],
["Active", "active"],
Expand All @@ -70,19 +70,19 @@
["Unpaid", "unpaid"]
], @user.subscription&.status),
{ prompt: "Select status" },
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
class: DesignSystemHelper::FORM_INPUT %>
</div>

<div>
<%= form.label :trial_ends_at, "Trial End Date (optional)", class: "block text-sm font-medium text-gray-700" %>
<%= form.datetime_field :trial_ends_at,
<%= form.label :trial_ends_at, "Trial End Date (optional)", class: DesignSystemHelper::FORM_LABEL %>
<%= form.datetime_field :trial_ends_at,
value: @user.subscription&.trial_ends_at,
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
<p class="mt-1 text-xs text-gray-500">Leave blank to keep current trial end date</p>
class: DesignSystemHelper::FORM_INPUT %>
<p class="<%= DesignSystemHelper::TEXT_CAPTION %> <%= DesignSystemHelper::TEXT_MUTED %> mt-1">Leave blank to keep current trial end date</p>
</div>

<div>
<%= form.submit "Update Subscription", class: "bg-green-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-green-700" %>
<%= form.submit "Update Subscription", class: btn_primary(:sm) %>
</div>
</div>
<% end %>
Expand Down
101 changes: 45 additions & 56 deletions app/views/admin/users/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,42 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="<%= DesignSystemHelper::CONTAINER_WIDE %> py-20">
<div class="mb-6">
<%= link_to "← Back to Users", admin_users_path, class: "text-indigo-600 hover:text-indigo-900" %>
<%= link_to "← Back to Users", admin_users_path, class: DesignSystemHelper::LINK_SUBTLE %>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">

<div class="<%= DesignSystemHelper::CARD %>">
<div class="<%= DesignSystemHelper::CARD_HEADER %>">
<h3 class="<%= DesignSystemHelper::TEXT_SUBHEADING %> <%= DesignSystemHelper::TEXT_PRIMARY %>">
User Information
</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">
<p class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">
Personal details and subscription information
</p>
</div>
<div class="border-t border-gray-200">
<div class="border-t border-primary-700/50">
<dl>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Email</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"><%= @user.email %></dd>
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/10','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Email</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2"><%= @user.email %></dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Admin</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/5','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Admin</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2">
<% if @user.admin? %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
Yes
</span>
<span class="<%= DesignSystemHelper::BADGE_PRIMARY %>">Yes</span>
<% else %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
No
</span>
<span class="<%= DesignSystemHelper::BADGE_WARNING %>">No</span>
<% end %>
</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Created</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/10','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Created</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2">
<%= @user.created_at.strftime("%B %d, %Y at %l:%M %p") %>
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Stripe Customer ID</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/5','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Stripe Customer ID</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2">
<%= @user.stripe_customer_id || "Not created" %>
</dd>
</div>
Expand All @@ -49,50 +45,44 @@
</div>

<% if @user.subscription %>
<div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<div class="<%= DesignSystemHelper::CARD %> mt-8">
<div class="<%= DesignSystemHelper::CARD_HEADER %>">
<h3 class="<%= DesignSystemHelper::TEXT_SUBHEADING %> <%= DesignSystemHelper::TEXT_PRIMARY %>">
Subscription Details
</h3>
</div>
<div class="border-t border-gray-200">
<div class="border-t border-primary-700/50">
<dl>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Plan</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/10','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Plan</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2">
<%= @user.subscription.plan.name %>
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Status</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/5','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Status</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2">
<% if @user.subscription.trialing? %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
Trial (<%= @user.subscription.days_remaining_in_trial %> days left)
</span>
<span class="<%= DesignSystemHelper::BADGE_WARNING %>">Trial (<%= @user.subscription.days_remaining_in_trial %> days left)</span>
<% elsif @user.subscription.active? %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Active
</span>
<span class="<%= DesignSystemHelper::BADGE_SUCCESS %>">Active</span>
<% else %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<%= @user.subscription.status.humanize %>
</span>
<span class="<%= DesignSystemHelper::BADGE_PRIMARY %>"><%= @user.subscription.status.humanize %></span>
<% end %>
</dd>
</div>
<% if @user.subscription.trial_ends_at %>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Trial Ends</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/10','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Trial Ends</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2">
<%= @user.subscription.trial_ends_at.strftime("%B %d, %Y at %l:%M %p") %>
</dd>
</div>
<% end %>
<% if @user.subscription.current_period_end %>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Current Period End</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="px-8 py-6 sm:grid sm:grid-cols-3 sm:gap-4 <%= cycle('bg-primary-700/5','bg-transparent') %>">
<dt class="<%= DesignSystemHelper::TEXT_BODY_SM %> <%= DesignSystemHelper::TEXT_SECONDARY %>">Current Period End</dt>
<dd class="mt-1 <%= DesignSystemHelper::TEXT_BODY %> <%= DesignSystemHelper::TEXT_PRIMARY %> sm:mt-0 sm:col-span-2">
<%= @user.subscription.current_period_end.strftime("%B %d, %Y") %>
</dd>
</div>
Expand All @@ -101,13 +91,12 @@
</div>
</div>
<% else %>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mt-8">
<p class="text-yellow-800">This user does not have a subscription.</p>
<div class="mt-8 <%= DesignSystemHelper::ALERT_WARNING %>">
<p>This user does not have a subscription.</p>
</div>
<% end %>

<div class="mt-6 flex space-x-4">
<%= link_to "Edit User", edit_admin_user_path(@user),
class: "bg-indigo-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-indigo-700" %>
<%= link_to "Edit User", edit_admin_user_path(@user), class: btn_secondary(:sm) %>
</div>
</div>
Loading
Loading