Browse Source

chore(profiling): Update profiling landing empty state image (#48101)

Update the profiling landing page empty state image to use the new
profiling specific one.

# Screenshots at different view ports


![image](https://user-images.githubusercontent.com/10239353/234974843-df947f30-94b0-48ec-b72d-339acff032cd.png)


![image](https://user-images.githubusercontent.com/10239353/234974876-5f0ceaa3-f9b8-4efc-b783-b9ac1a1cb3ea.png)


![image](https://user-images.githubusercontent.com/10239353/234974924-d70a91cb-4df4-4437-91ee-63c9d9832dbd.png)
Tony Xiao 1 year ago
parent
commit
2d1eb5f6f6
1 changed files with 10 additions and 4 deletions
  1. 10 4
      static/app/views/profiling/profilingOnboardingPanel.tsx

+ 10 - 4
static/app/views/profiling/profilingOnboardingPanel.tsx

@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import emptyStateImg from 'sentry-images/spot/performance-empty-state.svg';
+import emptyStateImg from 'sentry-images/spot/profiling-empty-state.svg';
 
 import ButtonBar from 'sentry/components/buttonBar';
 import OnboardingPanel from 'sentry/components/onboardingPanel';
@@ -46,13 +46,19 @@ const HeroImage = styled('img')`
   }
 
   @media (min-width: ${p => p.theme.breakpoints.large}) {
-    transform: translateX(-30%);
+    transform: translateX(-55%);
+    width: 300px;
+    min-width: 300px;
+  }
+
+  @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
+    transform: translateX(-60%);
     width: 380px;
     min-width: 380px;
   }
 
-  @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
-    transform: translateX(-30%);
+  @media (min-width: ${p => p.theme.breakpoints.xxlarge}) {
+    transform: translateX(-60%);
     width: 420px;
     min-width: 420px;
   }