From c258ef5ce9d7ee6238b54b83183fbb081d6cf64c Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Sat, 28 Feb 2026 16:20:14 -0800
Subject: [PATCH] =?UTF-8?q?ui(announcements):=20=F0=9F=92=84=20Update=20An?=
 =?UTF-8?q?nouncementModal=20styling=20in=20marketplace=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../announcements/AnnouncementModal.styles.ts | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.styles.ts b/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.styles.ts
index d2966d344..df94ec580 100644
--- a/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.styles.ts
+++ b/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.styles.ts
@@ -166,8 +166,8 @@ export const IconContainerBase = styled.div<AccentProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 80px;
-  height: 80px;
+  width: 110px;
+  height: 110px;
   border-radius: 50%;
   background: linear-gradient(
     135deg,
@@ -193,13 +193,13 @@ export const IconContainerBase = styled.div<AccentProps>`
   }
 
   @media (min-width: 768px) and (min-height: 600px) {
-    width: 100px;
-    height: 100px;
+    width: 130px;
+    height: 130px;
   }
 
   @media (max-height: 500px) {
-    width: 60px;
-    height: 60px;
+    width: 80px;
+    height: 80px;
     &::before { inset: -2px; }
   }
 `;
@@ -210,25 +210,25 @@ export const AnnouncementIconWrapper = styled.div<{ $accentColor: AnnouncementCo
   justify-content: center;
 
   svg {
-    width: 40px;
-    height: 40px;
+    width: 52px;
+    height: 52px;
     color: ${props => resolveColor(props.theme, props.$accentColor)};
-    animation: ${floatAnimation} 3s ease-in-out infinite;
+    transition: transform 0.4s ease-out;
     filter: drop-shadow(0 0 8px ${props => resolveColor(props.theme, props.$accentColor)}80);
   }
 
   @media (min-width: 768px) and (min-height: 600px) {
     svg {
-      width: 48px;
-      height: 48px;
+      width: 60px;
+      height: 60px;
       filter: drop-shadow(0 0 10px ${props => resolveColor(props.theme, props.$accentColor)}80);
     }
   }
 
   @media (max-height: 500px) {
     svg {
-      width: 32px;
-      height: 32px;
+      width: 40px;
+      height: 40px;
       filter: drop-shadow(0 0 6px ${props => resolveColor(props.theme, props.$accentColor)}80);
     }
   }