Shiny glow

2 files changed, 23 insertions, 2 deletions

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index d0b2b0b..0c65ec9 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -38,3 +38,21 @@
     @apply btn bg-orange-900 text-orange-100;
   }
 }
+
+@layer utilities {
+  .shiny-glow {
+    animation: shiny-glow 1s infinite;
+  }
+}
+
+@keyframes shiny-glow {
+  0% {
+    box-shadow: 0 0 20px #ffa928;
+  }
+  50% {
+    box-shadow: 0 0 40px #ffa928;
+  }
+  100% {
+    box-shadow: 0 0 20px #ffa928;
+  }
+}
diff --git a/app/views/pokedex_entries/_entry.html.erb b/app/views/pokedex_entries/_entry.html.erb
index 992aa69..1c7f0ed 100644
--- a/app/views/pokedex_entries/_entry.html.erb
+++ b/app/views/pokedex_entries/_entry.html.erb
@@ -1,10 +1,13 @@
 <div class="flex space-x-2 items-center">
   <div class="flex justify-around bg-white h-[60px] w-[60px] border border-orange-900
-              p-1 rounded shadow">
+              p-1 rounded shadow <%= "shiny-glow" if entry.shiny? %>">
     <%= image_tag entry.pokemon.sprite_path(shiny: entry.shiny?) %>
   </div>
   <div>
-    <div><%= "Shiny " if entry.shiny? %><%= entry.pokemon.name %></div>
+    <div>
+      <% "Shiny " if entry.shiny? %>
+      <%= entry.pokemon.name %>
+    </div>
     <div class="text-sm">Recorded by
       <%= link_to entry.user.name || "???", user_path(entry.user) %> @ <%= entry.recorded_at %>
     </div>