mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
f0c9490c09
The status pill on the goal card used a 10%-alpha fill (bg-warning/10, bg-green-500/10). On the card's hover state (bg-surface-hover) the fill blended into the new background and the pill lost its tint outline. Extend DS::Pill with a green tone and an optional icon: param (renders a Lucide icon in place of the dot) so the same primitive can carry both the beta marker and the goal status badges. Map Goals::StatusPillComponent to DS::Pill outline style — transparent fill + colored border + colored text + glyph — which is immune to any change in the surrounding card bg. One badge primitive, light-mode contrast already fixed (the color-mix 30% darkening on text), and the card hover state no longer washes out the status.
33 lines
1.0 KiB
Ruby
33 lines
1.0 KiB
Ruby
class Goals::StatusPillComponent < ApplicationComponent
|
|
# Maps the goal's display_status to the DS::Pill primitive's tone +
|
|
# glyph. Outline style is used so the pill keeps its colored border on
|
|
# any card background (resting bg-container, hover bg-surface-hover);
|
|
# the filled / soft variants blended into the hover state and lost
|
|
# contrast on cards.
|
|
VARIANTS = {
|
|
on_track: { tone: :green, icon: "circle-check" },
|
|
behind: { tone: :amber, icon: "triangle-alert" },
|
|
reached: { tone: :green, icon: "star" },
|
|
completed: { tone: :green, icon: "circle-check-big" },
|
|
no_target_date: { tone: :gray, icon: "infinity" },
|
|
paused: { tone: :gray, icon: "pause" },
|
|
archived: { tone: :gray, icon: "archive" }
|
|
}.freeze
|
|
|
|
def initialize(goal:)
|
|
@goal = goal
|
|
end
|
|
|
|
def status_key
|
|
@goal.display_status
|
|
end
|
|
|
|
def variant
|
|
VARIANTS.fetch(status_key, VARIANTS[:no_target_date])
|
|
end
|
|
|
|
def label
|
|
I18n.t("goals.status.#{status_key}", default: status_key.to_s.titleize)
|
|
end
|
|
end
|