refactored banner and discover banner (#26374)

static/app/components/banner.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import ButtonBar from 'app/components/buttonBar';
 import {IconClose} from 'app/icons/iconClose';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
@@ -32,11 +33,7 @@ class Banner extends React.Component<Props> {
     } = this.props;
 
     return (
-      <BannerWrapper
-        backgroundComponent={backgroundComponent}
-        backgroundImg={backgroundImg}
-        className={className}
-      >
+      <BannerWrapper backgroundImg={backgroundImg} className={className}>
         {backgroundComponent}
         {isDismissable ? (
           <StyledIconClose aria-label={t('Close')} onClick={onCloseClick} />
@@ -44,7 +41,7 @@ class Banner extends React.Component<Props> {
         <BannerContent>
           <BannerTitle>{title}</BannerTitle>
           <BannerSubtitle>{subtitle}</BannerSubtitle>
-          <BannerActions>{children}</BannerActions>
+          <StyledButtonBar gap={1}>{children}</StyledButtonBar>
         </BannerContent>
       </BannerWrapper>
     );
@@ -66,77 +63,52 @@ const BannerWrapper = styled('div')<BannerWrapperProps>`
           background-position: center center;
         `
       : css`
-          background: ${p.theme.gray500};
+          background-color: ${p.theme.gray500};
         `}
-
-  ${p =>
-    p.backgroundComponent &&
-    css`
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    `}
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  margin-bottom: ${space(3)};
+  margin-bottom: ${space(2)};
   box-shadow: ${p => p.theme.dropShadowLight};
   border-radius: ${p => p.theme.borderRadius};
+  height: 180px;
   color: ${p => p.theme.white};
+
+  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+    height: 220px;
+  }
 `;
 
 const BannerContent = styled('div')`
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  display: grid;
+  justify-items: center;
+  grid-template-rows: repeat(3, max-content);
   text-align: center;
   padding: ${space(4)};
-
-  @media (max-width: ${p => p.theme.breakpoints[0]}) {
-    padding: ${space(0)};
-  }
 `;
 
 const BannerTitle = styled('h1')`
-  margin-bottom: ${space(0.25)};
+  margin: 0;
 
-  @media (max-width: ${p => p.theme.breakpoints[0]}) {
-    font-size: 24px;
-  }
-
-  @media (min-width: ${p => p.theme.breakpoints[1]}) {
-    margin-top: ${space(2)};
-    margin-bottom: ${space(0.5)};
-    font-size: 42px;
+  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+    font-size: 40px;
   }
 `;
 
 const BannerSubtitle = styled('div')`
-  font-size: ${p => p.theme.fontSizeMedium};
+  margin: 0;
 
-  @media (max-width: ${p => p.theme.breakpoints[0]}) {
-    font-size: ${p => p.theme.fontSizeSmall};
-  }
-  @media (min-width: ${p => p.theme.breakpoints[1]}) {
+  @media (min-width: ${p => p.theme.breakpoints[0]}) {
     font-size: ${p => p.theme.fontSizeExtraLarge};
-    margin-bottom: ${space(1)};
-    flex-direction: row;
-    min-width: 650px;
   }
 `;
 
-const BannerActions = styled('div')`
-  display: flex;
-  justify-content: center;
-  width: 100%;
-
-  @media (min-width: ${p => p.theme.breakpoints[1]}) {
-    width: auto;
-  }
+const StyledButtonBar = styled(ButtonBar)`
+  margin-top: ${space(2)};
+  width: fit-content;
 `;
 
 const StyledIconClose = styled(IconClose)`

static/app/views/eventsV2/backgroundSpace.tsx

@@ -36,7 +36,9 @@ export default function BackgroundSpace() {
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 1160.08 280.01"
-      preserveAspectRatio="none"
+      preserveAspectRatio="xMinYMin slice"
+      height="100%"
+      width="100%"
     >
       <defs>
         <linearGradient

static/app/views/eventsV2/banner.tsx

@@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import tourAlert from 'sentry-images/spot/discover-tour-alert.svg';
 import tourExplore from 'sentry-images/spot/discover-tour-explore.svg';
 import tourFilter from 'sentry-images/spot/discover-tour-filter.svg';
@@ -13,7 +11,6 @@ import FeatureTourModal, {
   TourText,
 } from 'app/components/modals/featureTourModal';
 import {t} from 'app/locale';
-import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 
@@ -103,7 +100,7 @@ function DiscoverBanner({organization, resultsUrl, isSmallBanner, onHideBanner}:
   }
 
   return (
-    <StyledBanner
+    <Banner
       title={t('Discover Trends')}
       subtitle={t(
         'Customize and save queries by search conditions, event fields, and tags'
@@ -111,7 +108,7 @@ function DiscoverBanner({organization, resultsUrl, isSmallBanner, onHideBanner}:
       backgroundComponent={<BackgroundSpace />}
       onCloseClick={onHideBanner}
     >
-      <StarterButton
+      <Button
         size={isSmallBanner ? 'xsmall' : undefined}
         to={resultsUrl}
         onClick={() => {
@@ -123,7 +120,7 @@ function DiscoverBanner({organization, resultsUrl, isSmallBanner, onHideBanner}:
         }}
       >
         {t('Build a new query')}
-      </StarterButton>
+      </Button>
       <FeatureTourModal
         steps={TOUR_STEPS}
         doneText={t('View all Events')}
@@ -132,7 +129,7 @@ function DiscoverBanner({organization, resultsUrl, isSmallBanner, onHideBanner}:
         onCloseModal={onCloseModal}
       >
         {({showModal}) => (
-          <StarterButton
+          <Button
             size={isSmallBanner ? 'xsmall' : undefined}
             onClick={() => {
               trackAnalyticsEvent({
@@ -144,23 +141,11 @@ function DiscoverBanner({organization, resultsUrl, isSmallBanner, onHideBanner}:
             }}
           >
             {t('Get a Tour')}
-          </StarterButton>
+          </Button>
         )}
       </FeatureTourModal>
-    </StyledBanner>
+    </Banner>
   );
 }
 
 export default DiscoverBanner;
-
-const StyledBanner = styled(Banner)`
-  max-height: 220px;
-
-  @media (min-width: ${p => p.theme.breakpoints[3]}) {
-    max-height: 260px;
-  }
-`;
-
-const StarterButton = styled(Button)`
-  margin: ${space(1)};
-`;