From 6b1e332bb5296d735253fc24b631c849e6fad5ba Mon Sep 17 00:00:00 2001
From: Rohan Agarwal <rohan.agarwal@sentry.io>
Date: Fri, 22 Nov 2024 10:01:39 -0800
Subject: [PATCH 1/2] Snowfall stars

---
 .../streamline/solutionsHubDrawer.tsx         | 46 +++++++++++++------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx b/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx
index 11bbbcbcd724c3..d74957600b66dc 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: 55, 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 (
     <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>
@@ -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')`

From 7ce6ca36972fb8b67e7c1c5fc6f21d112547d332 Mon Sep 17 00:00:00 2001
From: Rohan Agarwal <rohan.agarwal@sentry.io>
Date: Fri, 22 Nov 2024 10:02:40 -0800
Subject: [PATCH 2/2] Snowfall stars

---
 static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx b/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx
index d74957600b66dc..19df1bab464e2a 100644
--- a/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx
+++ b/static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx
@@ -57,7 +57,7 @@ function AutofixStartBox({onSend, groupId}: AutofixStartBoxProps) {
     {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: 55, top: 75, rotation: 45, opacity: 0.7},
+    {size: 28, left: 50, top: 75, rotation: 45, opacity: 0.7},
     {size: 26, left: 80, top: 72, rotation: 25, opacity: 0.7},
   ];