diff --git a/app/assets/images/golden-ticket.svg b/app/assets/images/golden-ticket.svg new file mode 100644 index 000000000..99d44fdf8 --- /dev/null +++ b/app/assets/images/golden-ticket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/star.svg b/app/assets/images/star.svg deleted file mode 100644 index 281a18051..000000000 --- a/app/assets/images/star.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 8dc17b990..4711ea25d 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -31,6 +31,7 @@ --lch-blue: 54% 0.15 255; --lch-blue-light: 95% 0.03 255; --lch-blue-dark: 80% 0.08 255; + --lch-golden: 83% 0.1128 72.43; --lch-orange: 70% 0.2 44; --lch-red: 51% 0.2 31; --lch-green: 65.59% 0.234 142.49; @@ -58,6 +59,7 @@ --color-always-black: oklch(var(--lch-always-black)); --color-always-white: oklch(var(--lch-always-white)); --color-container: oklch(var(--lch-light-blue)); + --color-golden: oklch(var(--lch-golden)); @media (prefers-color-scheme: dark) { --lch-black: 100% 0 0; diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index b8f36e67c..1a8325e45 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -98,7 +98,14 @@ } .card--golden { - outline: 5px solid orange; + --border-color: var(--color-bg) !important; + + background-color: var(--color-bg); + background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%); + box-shadow: + 0 0 0.5em 0.2em var(--color-golden), + 0 0 1em 0.4em var(--color-golden) !important; + outline: 1px solid var(--color-golden); } .card__actions { @@ -251,12 +258,6 @@ display: inline-flex; margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33); padding: var(--padding-block) var(--padding-inline); - - &:has(.card__star-input:checked) { - .card { - outline: 4px solid var(--color-negative); - } - } } .card__container--pointing { diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index 1f3d193dc..987210def 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -38,6 +38,7 @@ .icon--everyone { --svg: url("everyone.svg "); } .icon--filter { --svg: url("filter.svg "); } .icon--globe { --svg: url("globe.svg "); } + .icon--golden-ticket { --svg: url("golden-ticket.svg "); } .icon--home { --svg: url("home.svg "); } .icon--logout { --svg: url("logout.svg "); } .icon--menu { --svg: url("menu.svg "); } @@ -61,7 +62,6 @@ .icon--rename { --svg: url("rename.svg "); } .icon--settings { --svg: url("settings.svg "); } .icon--share { --svg: url("share.svg "); } - .icon--star { --svg: url("star.svg "); } .icon--tag { --svg: url("tag.svg "); } .icon--thumb-up { --svg: url("thumb-up.svg "); } .icon--trash { --svg: url("trash.svg "); } diff --git a/app/views/cards/_golden_toggle.html.erb b/app/views/cards/_golden_toggle.html.erb index f04e14355..3456bea4b 100644 --- a/app/views/cards/_golden_toggle.html.erb +++ b/app/views/cards/_golden_toggle.html.erb @@ -1,11 +1,11 @@ <% if card.golden? %> <%= button_to card_goldeness_path(card), method: :delete, class: "btn btn--reversed" do %> - <%= icon_tag "star" %> + <%= icon_tag "golden-ticket" %> Demote to normal <% end %> <% else %> <%= button_to card_goldeness_path(card), class: "btn" do %> - <%= icon_tag "star" %> + <%= icon_tag "golden-ticket" %> Promote to golden <% end %> <% end %>