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 %>