diff --git a/assets/css/elements/forms.css b/assets/css/elements/forms.css index 1b002730..a74ef49a 100644 --- a/assets/css/elements/forms.css +++ b/assets/css/elements/forms.css @@ -92,16 +92,21 @@ textarea { margin-bottom: 6px; } -.whats-this-button, -.whats-this-button * { - /* font-size: 0.9em; */ +.field-help-button, +.field-help-button * { font-style: italic; cursor: pointer; } -.whats-this-button { +.field-help-button { + margin-left: 6px; + font-size: 0.8em; color: var(--foreground-half-color); - margin-left: 10px; + border-color: var(--foreground-half-color); + border-style: dashed; + border-width: 1px; + border-radius: 10px; + padding: 4px; /* We want this to behave like a button, so double clicking on it @@ -110,7 +115,7 @@ textarea { user-select: none; } -.whats-this-content { +.field-help-content { color: var(--foreground-half-color); margin: 10px auto; font-style: italic; diff --git a/assets/js/settings.ts b/assets/js/settings.ts index a940fdf2..b12e8226 100644 --- a/assets/js/settings.ts +++ b/assets/js/settings.ts @@ -51,7 +51,7 @@ function setupHelpExpansions() { return; } - const helpButton = event.target.closest('.whats-this-button'); + const helpButton = event.target.closest('.field-help-button'); if (!helpButton || !helpButton.nextElementSibling) { return; diff --git a/lib/philomena_web/views/setting_view.ex b/lib/philomena_web/views/setting_view.ex index 281cf4a6..a9a82a5d 100644 --- a/lib/philomena_web/views/setting_view.ex +++ b/lib/philomena_web/views/setting_view.ex @@ -44,13 +44,13 @@ defmodule PhilomenaWeb.SettingView do children |> Enum.intersperse(" ") |> Enum.concat([ - content_tag :span, class: "whats-this-button" do + content_tag :span, class: "field-help-button" do [ content_tag(:i, "", class: "fa-regular fa-question-circle"), - " What's this?" + " Help" ] end, - content_tag :div, class: "whats-this-content hidden" do + content_tag :div, class: "field-help-content hidden" do [ title, tag(:hr)