diff --git a/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx b/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx index 11bbbcbcd724c3..19df1bab464e2a 100644 --- a/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx +++ b/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx @@ -43,6 +43,24 @@ interface AutofixStartBoxProps { function AutofixStartBox({onSend, groupId}: AutofixStartBoxProps) { const [message, setMessage] = useState(''); + const stars = [ + {size: 10, left: 20, top: 5, rotation: 30, opacity: 0.15}, + {size: 12, left: 50, top: 8, rotation: 45, opacity: 0.2}, + {size: 10, left: 80, top: 12, rotation: 15, opacity: 0.2}, + {size: 14, left: 15, top: 20, rotation: 60, opacity: 0.3}, + {size: 16, left: 45, top: 25, rotation: 30, opacity: 0.35}, + {size: 14, left: 75, top: 22, rotation: 45, opacity: 0.3}, + {size: 18, left: 25, top: 35, rotation: 20, opacity: 0.4}, + {size: 20, left: 60, top: 38, rotation: 50, opacity: 0.45}, + {size: 18, left: 85, top: 42, rotation: 35, opacity: 0.4}, + {size: 22, left: 15, top: 55, rotation: 25, opacity: 0.5}, + {size: 24, left: 40, top: 58, rotation: 40, opacity: 0.55}, + {size: 22, left: 70, top: 52, rotation: 30, opacity: 0.5}, + {size: 26, left: 30, top: 70, rotation: 35, opacity: 0.65}, + {size: 28, left: 50, top: 75, rotation: 45, opacity: 0.7}, + {size: 26, left: 80, top: 72, rotation: 25, opacity: 0.7}, + ]; + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); onSend(message); @@ -51,13 +69,18 @@ function AutofixStartBox({onSend, groupId}: AutofixStartBoxProps) { return ( - {[...Array(8)].map((_, i) => ( + {stars.map((star, i) => ( ))} @@ -437,26 +460,21 @@ const ResourcesHeader = styled('div')` `; const StarTrail = styled('div')` - height: 400px; + height: 450px; width: 100%; - display: flex; - justify-content: center; position: absolute; - bottom: 7rem; + bottom: 5rem; left: 0; right: 0; z-index: -1; pointer-events: none; + overflow: hidden; `; -const TrailStar = styled('img')<{index: number; offset: number; size: number}>` +const TrailStar = styled('img')` position: absolute; - width: ${p => p.size}px; - height: ${p => p.size}px; - top: ${p => p.index * 50}px; - transform: translateX(${p => p.offset}px) rotate(${p => p.index * 40}deg); - opacity: ${p => Math.min(1, 0.2 + p.index * 0.1)}; filter: sepia(1) saturate(3) hue-rotate(290deg); + transition: all 0.2s ease-in-out; `; const HeaderContainer = styled('div')`