lilith/platform-codebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

ui(announcements): 💄 Update AnnouncementModal styling in marketplace feature

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Lilith 2026-02-28 16:20:14 -08:00
parent aeb2337f29
commit c258ef5ce9
1 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.styles.ts
View file

@ -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);
}
}