Replace stray image_tag instances and remove colorize class

This commit is contained in:
Andy Smith
2025-04-02 14:32:21 -05:00
parent b8a1acefd8
commit 51d907fca3
11 changed files with 24 additions and 40 deletions
-16
View File
@@ -54,22 +54,6 @@
}
}
.colorize--white {
filter: invert(1);
@media (prefers-color-scheme: dark) {
filter: invert(0);
}
}
.colorize--black {
filter: invert(0);
@media (prefers-color-scheme: dark) {
filter: invert(1);
}
}
.color-picker {
--panel-border-color: var(--bubble-color);
--panel-border-radius: 2em;
+3 -3
View File
@@ -11,7 +11,7 @@
<div class="flex align-center gap">
<div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
<%= tag.button class: "btn", data: { action: "dialog#open" } do %>
<%= image_tag "qr-code.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
<%= icon_tag "qr-code" %>
<span class="for-screen-reader">Show join link QR code</span>
<% end %>
@@ -28,12 +28,12 @@
</div>
<%= button_to_copy_to_clipboard(url) do %>
<%= image_tag "copy-paste.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
<%= icon_tag "copy-paste" %>
<span class="for-screen-reader">Copy join link</span>
<% end %>
<%= button_to account_join_code_path, method: :put, class: "btn btn--regenerate" do %>
<%= image_tag "refresh.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
<%= icon_tag "refresh" %>
<span class="for-screen-reader">Regenerate join link</span>
<% end %>
</div>
+1 -1
View File
@@ -11,7 +11,7 @@
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<%= image_tag "check.svg", size: 20, class: "toggler__visible-when-on colorize--black flex-item-no-shrink", aria: { hidden: "true" } %>
<%= icon_tag "check", class: "toggler__visible-when-on" %>
<label class="switch toggler__visible-when-off flex-item-no-shrink">
<%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil %>
+1 -1
View File
@@ -32,7 +32,7 @@
<%= access_menu_tag @bucket do %>
<li class="flex align-center gap margin-none">
<figure class="avatar flex-item-no-shrink" style="--avatar-border-radius: 0; --avatar-size: 4ch;">
<%= image_tag "everyone.svg", aria: { hidden: "true" }, class: "colorize--black" %>
<%= icon_tag "everyone" %>
<span class="for-screen-reader">Everyone</span>
</figure>
+3 -3
View File
@@ -10,9 +10,9 @@
<%= local_datetime_tag comment.created_at, style: :shortdate, class: "txt-ink translucent" %>
<% end %>
<%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment),
<%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment),
class: "comment__edit btn btn--plain txt-xx-small fill-transparent translucent flex-item-justify-end" do %>
<%= image_tag "menu-dots-horizontal.svg", class: "colorize--black" %>
<%= icon_tag "menu-dots-horizontal" %>
<span class="for-screen-reader">Edit this comment</span>
<% end %>
</div>
@@ -23,4 +23,4 @@
<%= render "comments/reactions/reactions", comment: comment %>
</div>
<% end %>
<% end %>
<% end %>
+3 -3
View File
@@ -5,7 +5,7 @@
class: "event panel center center-block flex-inline align-start justify-start gap position-relative",
style: "--bubble-color: #{ bubble.color }; background-color: color-mix(in srgb, var(--bubble-color) 10%, var(--color-bg));
color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));",
data: { related_element_target: "related",
data: { related_element_target: "related",
related_element_group_value: bubble.id,
action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
<div class="avatar txt-x-small flex-item-no-shrink">
@@ -19,8 +19,8 @@
</strong>
<% if event_column(event) == 2 %>
<span class="event__icon flex-item-justify-end">
<%= image_tag "#{event_action_icon(event)}.svg", size: 24, aria: { hidden: true }, class: "colorize--white" %>
<span class="event__icon flex-item-justify-end txt-reversed">
<%= icon_tag event_action_icon(event) %>
</span>
<% end %>
</div>
+3 -3
View File
@@ -8,7 +8,7 @@
<%= translation_button :user_name %>
<label class="flex align-center gap input input--actor txt-large">
<%= form.text_field :name, class: "input", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
<%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "person", class: "txt-large" %>
</label>
</div>
@@ -16,7 +16,7 @@
<%= translation_button :email_address %>
<label class="flex align-center gap input input--actor txt-large">
<%= form.email_field :email_address, class: "input", autocomplete: "username", placeholder: "Email address", required: true %>
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "email", class: "txt-large" %>
</label>
</div>
@@ -24,7 +24,7 @@
<%= translation_button :password %>
<label class="flex align-center gap input input--actor txt-large">
<%= form.password_field :password, class: "input", autocomplete: "new-password", placeholder: "Password", required: true, maxlength: 72 %>
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "password", class: "txt-large" %>
</label>
</div>
<button type="submit" id="log_in" class="btn btn--reversed center">
+2 -2
View File
@@ -8,7 +8,7 @@
<%= translation_button :email_address %>
<label class="flex align-center gap input input--actor">
<%= form.email_field :email_address, required: true, class: "input full-width", autofocus: true, autocomplete: "username", placeholder: "Enter your email address" %>
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "email", class: "txt-large" %>
</label>
</div>
@@ -16,7 +16,7 @@
<%= translation_button :password %>
<label class="flex align-center gap input input--actor">
<%= form.password_field :password, required: true, class: "input full-width", autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72 %>
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "password", class: "txt-large" %>
</label>
</div>
+2 -2
View File
@@ -13,7 +13,7 @@
<div class="flex align-center gap">
<div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
<%= tag.button class: "btn", data: { action: "dialog#open" } do %>
<%= image_tag "qr-code.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
<%= icon_tag "qr-code" %>
<span class="for-screen-reader">Show auto-login QR code</span>
<% end %>
@@ -30,7 +30,7 @@
</div>
<%= button_to_copy_to_clipboard(url) do %>
<%= image_tag "copy-paste.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
<%= icon_tag "copy-paste" %>
<span class="for-screen-reader">Copy auto-login link</span>
<% end %>
</div>
+3 -3
View File
@@ -35,21 +35,21 @@
<%= translation_button :user_name %>
<label class="flex align-center gap input input--actor">
<%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true, action: "keydown.esc@document->form#cancel" } %>
<%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "person", class: "txt-large" %>
</label>
</div>
<div class="flex align-center gap">
<%= translation_button :email_address %>
<label class="flex align-center gap input input--actor">
<%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "email", class: "txt-large" %>
</label>
</div>
<div class="flex align-center gap">
<%= translation_button :password %>
<label class="flex align-center gap input input--actor">
<%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: false, maxlength: 72 %>
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "password", class: "txt-large" %>
</label>
</div>
<button type="submit" id="log_in" class="btn btn--reversed center">
+3 -3
View File
@@ -16,21 +16,21 @@
<%= translation_button :user_name %>
<label class="flex align-center gap input input--actor">
<%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
<%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "person", class: "txt-large" %>
</label>
</div>
<div class="flex align-center gap">
<%= translation_button :email_address %>
<label class="flex align-center gap input input--actor">
<%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "email", class: "txt-large" %>
</label>
</div>
<div class="flex align-center gap">
<%= translation_button :password %>
<label class="flex align-center gap input input--actor">
<%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: true, maxlength: 72 %>
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
<%= icon_tag "password", class: "txt-large" %>
</label>
</div>
<button type="submit" id="log_in" class="btn btn--reversed center">