fix(autofix): New star decoration (#81192)

Make the stars on the start screen more like snowfall rather than a
trail.

Before:
<img width="753" alt="Screenshot 2024-11-14 at 9 02 36 AM"
src="https://github.com/user-attachments/assets/d6cce369-a16c-41ee-860e-d965015688f9">

After:
<img width="668" alt="Screenshot 2024-11-22 at 10 02 32 AM"
src="https://github.com/user-attachments/assets/8badc3e9-24f1-4689-a69c-cb03904bc13d">

Author: roaga

static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx

@@ -39,6 +39,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);
@@ -47,13 +65,18 @@ function AutofixStartBox({onSend, groupId}: AutofixStartBoxProps) {
   return (
     <StartBox>
       <StarTrail>
-        {[...Array(8)].map((_, i) => (
+        {stars.map((star, i) => (
           <TrailStar
             key={i}
             src={starImage}
-            index={i}
-            size={14 + i * 2}
-            offset={(i % 2) * 50 - 15}
+            style={{
+              left: `${star.left}%`,
+              top: `${star.top}%`,
+              width: `${star.size}px`,
+              height: `${star.size}px`,
+              opacity: star.opacity,
+              transform: `rotate(${star.rotation}deg)`,
+            }}
           />
         ))}
       </StarTrail>
@@ -389,26 +412,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')`