d87537ab29
* Fix accessibility concerns in settings UI * Update nav aria-labels Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * Add hidden labels for color selectors Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
35 lines
1.9 KiB
Text
35 lines
1.9 KiB
Text
<div class="grid gap-6 m:grid-cols-2">
|
|
<div class="grid gap-6">
|
|
<% account.bg_color_hex = user_colors(account)[:bg] if account.bg_color_hex.blank? %>
|
|
<% account.text_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
|
|
<div class="crayons-field">
|
|
<%= f.label :bg_color_hex, "Brand color 1", class: "crayons-field__label" %>
|
|
<p class="crayons-field__description">Used for backgrounds, borders etc.</p>
|
|
<div class="flex items-center">
|
|
<%= f.text_field :bg_color_hex, placeholder: "#000000", class: "crayons-textfield mr-2", id: "bg-color-textfield" %>
|
|
<label class="hidden" for="bg-color-colorfield">
|
|
Brand color 1 color select
|
|
</label>
|
|
<input id="bg-color-colorfield" type="color" class="crayons-color-selector" aria-label="Brand color 1 color selector">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crayons-field">
|
|
<% account.bg_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
|
|
<%= f.label :text_color_hex, "Brand color 2", class: "crayons-field__label" %>
|
|
<p class="crayons-field__description">Used for texts (usually put on <em>Brand color 1</em>).</p>
|
|
<div class="flex items-center">
|
|
<%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "crayons-textfield mr-2", id: "text-color-textfield" %>
|
|
<label class="hidden" for="text-color-colorfield">
|
|
Brand color 2 color select
|
|
</label>
|
|
<input id="text-color-colorfield" type="color" class="crayons-color-selector" aria-label="Brand color 2 color selector">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crayons-card crayons-card--secondary flex-1 p-6">
|
|
<p class="text-uppercase color-base-50 mb-4 fs-s ff-monospace">Preview:</p>
|
|
<%= inline_svg_tag("preview-logo.svg", id: "color-select-preview-logo", class: "p-4 radius-default", title: "App logo") %>
|
|
</div>
|
|
</div>
|