mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 06:25:19 +02:00
Maybe Design System Updates (#1856)
* Add geist font * Design system css file * Add cursor ui/ux rules * Add shadows and shadow borders * Replace primitives with tokens for common text and backgrounds * Organize css * Update switch and checkbox class names * Add back global color variables
This commit is contained in:
Zach Gollwitzer
GitHub
parent
c0e290a07e
commit
849c58dd3e
193 changed files with 1356 additions and 1073 deletions
|
|
@ -1,17 +1,17 @@
|
|||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2 p-2">
|
||||
<%= link_to previous_path, class: "flex items-center gap-1 text-gray-900 font-medium text-sm" do %>
|
||||
<%= lucide_icon "chevron-left", class: "w-5 h-5 text-gray-500" %>
|
||||
<%= link_to previous_path, class: "flex items-center gap-1 text-primary font-medium text-sm" do %>
|
||||
<%= lucide_icon "chevron-left", class: "w-5 h-5 text-secondary" %>
|
||||
<span>Back</span>
|
||||
<% end %>
|
||||
<%= link_to previous_path, class: "uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-gray-500 shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
|
||||
<%= link_to previous_path, class: "uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
|
||||
esc
|
||||
<% end %>
|
||||
</div>
|
||||
<nav class="space-y-4">
|
||||
<section class="space-y-2">
|
||||
<div class="flex items-center gap-2 px-3">
|
||||
<h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".general_section_title") %></h3>
|
||||
<h3 class="uppercase text-secondary font-medium text-xs"><%= t(".general_section_title") %></h3>
|
||||
<div class="h-px bg-alpha-black-100 w-full"></div>
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
<section class="space-y-2">
|
||||
<div class="flex items-center gap-2 px-3">
|
||||
<h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".transactions_section_title") %></h3>
|
||||
<h3 class="uppercase text-secondary font-medium text-xs"><%= t(".transactions_section_title") %></h3>
|
||||
<div class="h-px bg-alpha-black-100 w-full"></div>
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<section class="space-y-2">
|
||||
<div class="flex items-center gap-2 px-3">
|
||||
<h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".other_section_title") %></h3>
|
||||
<h3 class="uppercase text-secondary font-medium text-xs"><%= t(".other_section_title") %></h3>
|
||||
<div class="h-px bg-alpha-black-100 w-full"></div>
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<%# locals: path, direction, title %>
|
||||
<%= link_to path, class: "w-full bg-white hover:bg-gray-50 rounded-xl border border-alpha-black-25 shadow-xs p-4 flex items-center justify-between" do %>
|
||||
<% if direction == 'previous' %>
|
||||
<div class="w-5 h-5 text-gray-500">
|
||||
<div class="w-5 h-5 text-secondary">
|
||||
<%= lucide_icon("arrow-left") %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="<%= "grow" if direction == "next" %> <%= "text-right" if direction == "previous" %>">
|
||||
<span class="block text-sm text-gray-500"><%= t(".#{direction}") %></span>
|
||||
<span class="block text-sm font-medium text-gray-900"><%= title %></span>
|
||||
<span class="block text-sm text-secondary"><%= t(".#{direction}") %></span>
|
||||
<span class="block text-sm font-medium text-primary"><%= title %></span>
|
||||
</div>
|
||||
<% if direction == 'next' %>
|
||||
<div class="w-5 h-5 text-gray-500">
|
||||
<div class="w-5 h-5 text-secondary">
|
||||
<%= lucide_icon("arrow-right") %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<%# locals: (title:, subtitle: nil, content:) %>
|
||||
<section class="bg-white border border-alpha-black-25 shadow-xs rounded-xl p-4 space-y-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-medium text-gray-900"><%= title %></h2>
|
||||
<h2 class="text-lg font-medium text-primary"><%= title %></h2>
|
||||
<% if subtitle.present? %>
|
||||
<p class="text-gray-500 text-sm mt-1"><%= subtitle %></p>
|
||||
<p class="text-secondary text-sm mt-1"><%= subtitle %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<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">
|
||||
<%= lucide_icon "image-plus", class: "w-6 h-6 text-gray-500" %>
|
||||
<%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
data-profile-image-preview-target="clearBtn"
|
||||
data-action="click->profile-image-preview#clearFileInput"
|
||||
class="<%= user.profile_image.attached? ? "" : "hidden" %> cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
|
||||
<%= lucide_icon "x", class: "w-4 h-4 text-gray-500" %>
|
||||
<%= lucide_icon "x", class: "w-4 h-4 text-secondary" %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
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-gray-900 rounded-md text-sm font-medium",
|
||||
class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",
|
||||
data: {
|
||||
profile_image_preview_target: "input",
|
||||
action: "change->profile-image-preview#showFileInputPreview"
|
||||
|
|
|
|||
|
|
@ -3,22 +3,22 @@
|
|||
<% end %>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<%= settings_section title: t(".subscription_title"), subtitle: t(".subscription_subtitle") do %>
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 shadow-xs bg-white border border-alpha-black-200 rounded-lg flex justify-between items-center">
|
||||
<div class="p-3 shadow-xs bg-white border border-secondary rounded-lg flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
|
||||
<%= lucide_icon "gem", class: "w-5 h-5 text-gray-500" %>
|
||||
<%= lucide_icon "gem", class: "w-5 h-5 text-secondary" %>
|
||||
</div>
|
||||
|
||||
<div class="text-sm space-y-1">
|
||||
<% if @user.family.subscribed? || subscription_pending? %>
|
||||
<p class="text-gray-900">You are currently subscribed to <span class="font-medium">Maybe+</span></p>
|
||||
<p class="text-gray-500">Manage your billing settings here.</p>
|
||||
<p class="text-primary">You are currently subscribed to <span class="font-medium">Maybe+</span></p>
|
||||
<p class="text-secondary">Manage your billing settings here.</p>
|
||||
<% else %>
|
||||
<p class="text-gray-900">You are currently <span class="font-medium">not subscribed</span></p>
|
||||
<p class="text-gray-500">Once you subscribe to Maybe+, you’ll see your billing settings here.</p>
|
||||
<p class="text-primary">You are currently <span class="font-medium">not subscribed</span></p>
|
||||
<p class="text-secondary">Once you subscribe to Maybe+, you’ll see your billing settings here.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,19 +26,19 @@
|
|||
<% if @user.family.subscribed? || subscription_pending? %>
|
||||
<%= link_to subscription_path, class: "btn btn--secondary flex items-center gap-1" do %>
|
||||
<span>Manage</span>
|
||||
<%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-gray-500" %>
|
||||
<%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-secondary" %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= link_to new_subscription_path, class: "btn btn--secondary flex items-center gap-1" do %>
|
||||
<span>Subscribe</span>
|
||||
<%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-gray-500" %>
|
||||
<%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-secondary" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<%= image_tag "stripe-logo.svg", class: "w-5 h-5 shrink-0" %>
|
||||
<p class="text-gray-500 text-sm">Managed via Stripe</p>
|
||||
<p class="text-secondary text-sm">Managed via Stripe</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm"><%= t(".title") %></p>
|
||||
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
|
||||
<p class="text-secondary text-sm"><%= t(".description") %></p>
|
||||
</div>
|
||||
|
||||
<%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
|
||||
<div class="relative inline-block select-none">
|
||||
<%= form.check_box :require_invite_for_signup, class: "sr-only peer", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "input", disabled: !Current.user.admin? %>
|
||||
<%= form.label :require_invite_for_signup, " ".html_safe, class: "maybe-switch" %>
|
||||
<%= form.label :require_invite_for_signup, " ".html_safe, class: "switch" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -16,13 +16,13 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm"><%= t(".email_confirmation_title") %></p>
|
||||
<p class="text-gray-500 text-sm"><%= t(".email_confirmation_description") %></p>
|
||||
<p class="text-secondary text-sm"><%= t(".email_confirmation_description") %></p>
|
||||
</div>
|
||||
|
||||
<%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
|
||||
<div class="relative inline-block select-none">
|
||||
<%= form.check_box :require_email_confirmation, class: "sr-only peer", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "input", disabled: !Current.user.admin? %>
|
||||
<%= form.label :require_email_confirmation, " ".html_safe, class: "maybe-switch" %>
|
||||
<%= form.label :require_email_confirmation, " ".html_safe, class: "switch" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -30,12 +30,12 @@
|
|||
<% if Setting.require_invite_for_signup %>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<span class="text-gray-900 text-base font-medium"><%= t(".generated_tokens") %></span>
|
||||
<span class="text-primary text-base font-medium"><%= t(".generated_tokens") %></span>
|
||||
</div>
|
||||
<div>
|
||||
<%= button_to invite_codes_path,
|
||||
method: :post,
|
||||
class: "flex gap-1 bg-gray-50 text-gray-900 text-sm rounded-lg px-3 py-2" do %>
|
||||
class: "flex gap-1 bg-gray-50 text-primary text-sm rounded-lg px-3 py-2" do %>
|
||||
<span><%= t(".generate_tokens") %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
|
||||
<div class="space-y-4">
|
||||
<h2 class="font-medium mb-1"><%= t(".title") %></h2>
|
||||
<p class="text-gray-500 text-sm mb-4"><%= t(".description") %></p>
|
||||
<p class="text-secondary text-sm mb-4"><%= t(".description") %></p>
|
||||
<%= form.url_field :render_deploy_hook, label: t(".render_deploy_hook_label"), placeholder: t(".render_deploy_hook_placeholder"), value: Setting.render_deploy_hook, data: { "auto-submit-form-target" => "auto" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="space-y-4">
|
||||
<div>
|
||||
<h2 class="font-medium mb-1"><%= t(".title") %></h2>
|
||||
<p class="text-gray-500 text-sm mb-4"><%= t(".description") %></p>
|
||||
<p class="text-secondary text-sm mb-4"><%= t(".description") %></p>
|
||||
</div>
|
||||
|
||||
<%= styled_form_with model: Setting.new,
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<% if @synth_usage.present? && @synth_usage.success? %>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-secondary">
|
||||
<%= t(".api_calls_used",
|
||||
used: number_with_delimiter(@synth_usage.used),
|
||||
limit: number_with_delimiter(@synth_usage.limit),
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-100 rounded-md px-1.5 py-0.5 w-fit">
|
||||
<p class="text-xs font-medium text-gray-500 uppercase">
|
||||
<p class="text-xs font-medium text-secondary uppercase">
|
||||
<%= t(".plan", plan: @synth_usage.plan) %>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
<% if ENV["HOSTING_PLATFORM"] == "render" %>
|
||||
<div>
|
||||
<h2 class="font-medium mb-1"><%= t(".title") %></h2>
|
||||
<p class="text-gray-500 text-sm mb-4"><%= t(".description") %></p>
|
||||
<p class="text-secondary text-sm mb-4"><%= t(".description") %></p>
|
||||
|
||||
<%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<%= form.radio_button :upgrades_setting, "manual", checked: Setting.upgrades_mode == "manual", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
|
||||
<%= form.label :upgrades_mode_manual, t(".manual_title"), class: "text-gray-900 text-sm" do %>
|
||||
<%= form.label :upgrades_mode_manual, t(".manual_title"), class: "text-primary text-sm" do %>
|
||||
<span class="font-medium"><%= t(".manual_title") %></span>
|
||||
<br>
|
||||
<span class="text-gray-500">
|
||||
<span class="text-secondary">
|
||||
<%= t(".manual_description") %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<%= form.radio_button :upgrades_setting, "release", checked: Setting.upgrades_mode == "auto" && Setting.upgrades_target == "release", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
|
||||
<%= form.label :upgrades_mode_release, t(".latest_release_title"), class: "text-gray-900 text-sm" do %>
|
||||
<%= form.label :upgrades_mode_release, t(".latest_release_title"), class: "text-primary text-sm" do %>
|
||||
<span class="font-medium"><%= t(".latest_release_title") %></span>
|
||||
<br>
|
||||
<span class="text-gray-500">
|
||||
<span class="text-secondary">
|
||||
<%= t(".latest_release_description") %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<%= form.radio_button :upgrades_setting, "commit", checked: Setting.upgrades_mode == "auto" && Setting.upgrades_target == "commit", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
|
||||
<%= form.label :upgrades_mode_commit, t(".latest_commit_title"), class: "text-gray-900 text-sm" do %>
|
||||
<%= form.label :upgrades_mode_commit, t(".latest_commit_title"), class: "text-primary text-sm" do %>
|
||||
<span class="font-medium"><%= t(".latest_commit_title") %></span>
|
||||
<br>
|
||||
<span class="text-gray-500">
|
||||
<span class="text-secondary">
|
||||
<%= t(".latest_commit_description") %>
|
||||
</span>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<% end %>
|
||||
|
||||
<div class="space-y-4 pb-32">
|
||||
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".title") %></h1>
|
||||
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".title") %></h1>
|
||||
|
||||
<%= settings_section title: t(".general") do %>
|
||||
<div class="space-y-6">
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm"><%= t(".title") %></p>
|
||||
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
|
||||
<p class="text-secondary text-sm"><%= t(".description") %></p>
|
||||
<% if self_hosted? %>
|
||||
<p class="text-xs italic text-gray-500"><%= t(".self_host_disclaimer") %></p>
|
||||
<p class="text-xs italic text-secondary"><%= t(".self_host_disclaimer") %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<%= form.hidden_field :redirect_to, value: "preferences" %>
|
||||
<%= form.fields_for :family do |family_form| %>
|
||||
<%= family_form.check_box :data_enrichment_enabled, class: "sr-only peer", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "input" %>
|
||||
<%= family_form.label :data_enrichment_enabled, " ".html_safe, class: "maybe-switch" %>
|
||||
<%= family_form.label :data_enrichment_enabled, " ".html_safe, class: "switch" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<% end %>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<%= settings_section title: t(".general_title"), subtitle: t(".general_subtitle") do %>
|
||||
<div>
|
||||
<%= styled_form_with model: @user, class: "space-y-4", data: { controller: "auto-submit-form" } do |form| %>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{ label: t(".country") },
|
||||
{ data: { auto_submit_form_target: "auto" } } %>
|
||||
|
||||
<p class="text-xs italic pl-2 text-gray-500">Please note, we are still working on translations for various languages. Please see the <%= link_to "I18n issue", "https://github.com/maybe-finance/maybe/issues/1225", target: "_blank", class: "underline" %> for more information.</p>
|
||||
<p class="text-xs italic pl-2 text-secondary">Please note, we are still working on translations for various languages. Please see the <%= link_to "I18n issue", "https://github.com/maybe-finance/maybe/issues/1225", target: "_blank", class: "underline" %> for more information.</p>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<%= render "settings/nav" %>
|
||||
<% end %>
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<div class="space-y-4">
|
||||
<%= settings_section title: t(".profile_title"), subtitle: t(".profile_subtitle") do %>
|
||||
<%= styled_form_with model: @user, url: user_path(@user), class: "space-y-4" do |form| %>
|
||||
|
|
@ -38,16 +38,16 @@
|
|||
<% end %>
|
||||
<div class="bg-gray-25 rounded-xl p-1">
|
||||
<div class="px-4 py-2">
|
||||
<p class="uppercase text-xs text-gray-500 font-medium"><%= Current.family.name %> · <%= Current.family.users.size %></p>
|
||||
<p class="uppercase text-xs text-secondary font-medium"><%= Current.family.name %> · <%= Current.family.users.size %></p>
|
||||
</div>
|
||||
<% @users.each do |user| %>
|
||||
<div class="flex gap-2 items-center bg-white p-4 border border-alpha-black-25 rounded-lg">
|
||||
<div class="w-9 h-9 shrink-0">
|
||||
<%= render "settings/user_avatar", user: user %>
|
||||
</div>
|
||||
<p class="text-gray-900 font-medium text-sm"><%= user.display_name %></p>
|
||||
<p class="text-primary font-medium text-sm"><%= user.display_name %></p>
|
||||
<div class="rounded-md bg-gray-100 px-1.5 py-0.5">
|
||||
<p class="uppercase text-gray-500 font-medium text-xs"><%= user.role %></p>
|
||||
<p class="uppercase text-secondary font-medium text-xs"><%= user.role %></p>
|
||||
</div>
|
||||
<% if Current.user.admin? && user != Current.user %>
|
||||
<div class="ml-auto">
|
||||
|
|
@ -74,23 +74,23 @@
|
|||
<div class="text-white w-full h-full bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= invitation.email[0] %></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p class="text-gray-900 font-medium text-sm"><%= invitation.email %></p>
|
||||
<p class="text-primary font-medium text-sm"><%= invitation.email %></p>
|
||||
<div class="rounded-md bg-gray-100 px-1.5 py-0.5">
|
||||
<p class="uppercase text-gray-500 font-medium text-xs"><%= t(".pending") %></p>
|
||||
<p class="uppercase text-secondary font-medium text-xs"><%= t(".pending") %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<% if self_hosted? %>
|
||||
<div class="flex items-center gap-2" data-controller="clipboard">
|
||||
<p class="text-gray-500 text-sm"><%= t(".invitation_link") %></p>
|
||||
<p class="text-secondary text-sm"><%= t(".invitation_link") %></p>
|
||||
<span data-clipboard-target="source" class="hidden"><%= accept_invitation_url(invitation.token) %></span>
|
||||
<input type="text"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
value="<%= accept_invitation_url(invitation.token) %>"
|
||||
class="text-sm bg-gray-50 px-2 py-1 rounded border border-gray-200 w-72">
|
||||
<button data-action="clipboard#copy" class="text-gray-500 hover:text-gray-700">
|
||||
<button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
|
||||
<span data-clipboard-target="iconDefault">
|
||||
<%= lucide_icon "copy", class: "w-5 h-5" %>
|
||||
</span>
|
||||
|
|
@ -119,9 +119,9 @@
|
|||
<% end %>
|
||||
<% if Current.user.admin? %>
|
||||
<%= link_to new_invitation_path,
|
||||
class: "bg-gray-100 flex items-center justify-center gap-2 text-gray-500 mt-1 hover:bg-gray-200 rounded-lg px-4 py-2 w-full text-center",
|
||||
class: "bg-gray-100 flex items-center justify-center gap-2 text-secondary mt-1 hover:bg-gray-200 rounded-lg px-4 py-2 w-full text-center",
|
||||
data: { turbo_frame: :modal } do %>
|
||||
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
|
||||
<%= lucide_icon("plus", class: "w-5 h-5 text-secondary") %>
|
||||
<%= t(".invite_member") %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
@ -131,8 +131,8 @@
|
|||
<%= settings_section title: t(".danger_zone_title") do %>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900"><%= t(".delete_account") %></h3>
|
||||
<p class="text-gray-500 text-sm"><%= t(".delete_account_warning") %></p>
|
||||
<h3 class="font-medium text-primary"><%= t(".delete_account") %></h3>
|
||||
<p class="text-secondary text-sm"><%= t(".delete_account_warning") %></p>
|
||||
</div>
|
||||
<%=
|
||||
button_to t(".delete_account"), user_path(@user), method: :delete,
|
||||
|
|
|
|||
|
|
@ -3,22 +3,22 @@
|
|||
<% end %>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
|
||||
<%= settings_section title: t(".mfa_title"), subtitle: t(".mfa_description") do %>
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 shadow-xs bg-white border border-alpha-black-200 rounded-lg flex justify-between items-center">
|
||||
<div class="p-3 shadow-xs bg-white border border-secondary rounded-lg flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
|
||||
<%= lucide_icon "shield-check", class: "w-5 h-5 text-gray-500" %>
|
||||
<%= lucide_icon "shield-check", class: "w-5 h-5 text-secondary" %>
|
||||
</div>
|
||||
|
||||
<div class="text-sm space-y-1">
|
||||
<% if Current.user.otp_required? %>
|
||||
<p class="text-gray-900">Two-factor authentication is <span class="font-medium text-green-600">enabled</span></p>
|
||||
<p class="text-gray-500">Your account is protected with an additional layer of security.</p>
|
||||
<p class="text-primary">Two-factor authentication is <span class="font-medium text-green-600">enabled</span></p>
|
||||
<p class="text-secondary">Your account is protected with an additional layer of security.</p>
|
||||
<% else %>
|
||||
<p class="text-gray-900">Two-factor authentication is <span class="font-medium text-red-600">disabled</span></p>
|
||||
<p class="text-gray-500">Enable 2FA to add an extra layer of security to your account.</p>
|
||||
<p class="text-primary">Two-factor authentication is <span class="font-medium text-red-600">disabled</span></p>
|
||||
<p class="text-secondary">Enable 2FA to add an extra layer of security to your account.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,4 +42,4 @@
|
|||
<% end %>
|
||||
|
||||
<%= settings_nav_footer %>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue