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

style(announcements): 🎨 Implement consistent animations, spacing, and theming across AnnouncementModal styles

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Lilith 2026-02-28 23:33:18 -08:00
parent d1b7ab1109
commit 0388d786ed
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -60,12 +60,12 @@ export const scanlineAnimation = keyframes`
}
`;
export const progressPulse = keyframes`
export const progressPulse = (color: string) => keyframes`
0%, 100% {
box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
box-shadow: 0 0 10px ${color}80;
}
50% {
box-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
box-shadow: 0 0 20px ${color}CC;
}
`;
@ -445,24 +445,24 @@ export const Dot = styled.button<{ $isActive: boolean }>`
border: none;
padding: 0;
background: ${props =>
props.$isActive ? props.theme.colors.primary.main : props.theme.colors.border.default};
props.$isActive ? props.theme.colors.text.primary : props.theme.colors.text.secondary};
cursor: pointer;
transition: all ${props => props.theme.transitions.fast};
opacity: ${props => (props.$isActive ? 1 : 0.4)};
opacity: ${props => (props.$isActive ? 1 : 0.5)};
position: relative;
${props =>
props.$isActive &&
css`
animation: ${progressPulse} 1.5s ease-in-out infinite;
box-shadow: 0 0 10px ${props.theme.colors.primary.main}80;
animation: ${progressPulse(props.theme.colors.text.primary)} 1.5s ease-in-out infinite;
box-shadow: 0 0 10px ${props.theme.colors.text.primary}80;
&::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1px solid ${props.theme.colors.primary.main}60;
border: 1px solid ${props.theme.colors.text.primary}60;
}
`}
@ -512,10 +512,12 @@ export const NextButton = styled(Button)`
export const Footer = styled.p`
margin: 0;
padding: 10px 12px;
font-size: 11px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
color: ${props => props.theme.colors.warning.main};
background: ${props => props.theme.colors.warning.main}15;
border: 1px solid ${props => props.theme.colors.warning.main}30;
border-radius: ${props => props.theme.borderRadius.md};
text-align: center;
width: 100%;
@ -528,7 +530,7 @@ export const Footer = styled.p`
@media (max-height: 500px) {
padding: 8px 10px;
font-size: 10px;
font-size: 11px;
}
`;