Merge branch 'style' into development

src/features/badges/components/badge-showcase.tsx

@@ -58,6 +58,28 @@ export const BadgeIcon = ({ badge, filled, size = 48 }: BadgeIconProps & { size?
 };
 
 
+const badgeTileCss = `
+.flxn-badge-tile {
+  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+@media (hover: hover) {
+  .flxn-badge-tile:hover {
+    transform: translateY(-2px);
+  }
+}
+.flxn-badge-tile:active {
+  transform: scale(0.97);
+}
+@media (prefers-reduced-motion: reduce) {
+  .flxn-badge-tile,
+  .flxn-badge-tile:hover,
+  .flxn-badge-tile:active {
+    transition: none;
+    transform: none;
+  }
+}
+`;
+
 const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
   const { user } = useAuth();
   const { data: badgeProgress } = usePlayerBadges(playerId);
@@ -139,6 +161,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
 
   return (
     <Box mb="lg">
+      <style href="flxn-badge-tile" precedence="medium">
+        {badgeTileCss}
+      </style>
       <Box
         px="md"
         style={{
@@ -168,9 +193,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
               <Popover key={display.badge.id} width={280} position="top" withArrow shadow="md" withinPortal>
                 <Popover.Target>
                   <Box
+                    className="flxn-badge-tile"
                     style={{
                       cursor: "pointer",
-                      transition: 'all 0.2s ease',
                       position: 'relative',
                     }}
                   >