fix(releases): update and fix dreamy bugs (#12572)

* update package with bugfixes and fix some layout bugs

* use space

* support for smaller viewports

package.json

@@ -82,7 +82,7 @@
     "react-virtualized": "^9.20.1",
     "reflux": "0.4.1",
     "scroll-to-element": "^2.0.0",
-    "sentry-dreamy-components": "^1.0.0",
+    "sentry-dreamy-components": "^1.0.1",
     "sprintf-js": "1.0.3",
     "style-loader": "^0.23.1",
     "svg-sprite-loader": "^3.8.0",

src/sentry/static/sentry/app/views/releases/list/shared/releaseLanding.jsx

@@ -17,9 +17,13 @@ import withApi from 'app/utils/withApi';
 import ReleaseLandingCard from './releaseLandingCard';
 
 const StyledSuggestedAssignees = styled(SuggestedAssignees)`
-  width: 150px;
-  height: 150px;
-  padding-left: 250px;
+  width: 70px;
+  height: 70px;
+  margin-left: 250px;
+
+  @media (max-width: 1150px) {
+    margin-left: 100px;
+  }
 `;
 
 const cards = [

src/sentry/static/sentry/app/views/releases/list/shared/releaseLandingCard.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'react-emotion';
-import {Box} from 'grid-emotion';
+import space from 'app/styles/space';
 import {t} from 'app/locale';
 
 import Button from 'app/components/button';
@@ -30,42 +30,67 @@ class ReleaseLandingCard extends React.Component {
     const CardComponent = card.component;
     const finalStep = step === cardsLength - 1;
     return (
-      <div className="row">
-        <div className="col-md-6">
-          <StyledBox>
+      <Container>
+        <IllustrationContainer>
+          <CardComponentContainer>
             <CardComponent />
-          </StyledBox>
-        </div>
+          </CardComponentContainer>
+        </IllustrationContainer>
 
-        <div className="col-md-6">
-          <StyledBox>
-            <h3>{card.title}</h3>
-            <p>{card.message}</p>
-            {finalStep ? (
-              <StyledButton
-                href={'https://docs.sentry.io/learn/releases/'}
-                onClick={this.props.onClick}
-              >
-                {this.getMessage()}
-              </StyledButton>
-            ) : (
-              <StyledButton onClick={this.props.onClick}>
-                {this.getMessage()}
-              </StyledButton>
-            )}
-          </StyledBox>
-        </div>
-      </div>
+        <StyledBox>
+          <h3>{card.title}</h3>
+          <p>{card.message}</p>
+          {finalStep ? (
+            <Button
+              href={'https://docs.sentry.io/learn/releases/'}
+              onClick={this.props.onClick}
+            >
+              {this.getMessage()}
+            </Button>
+          ) : (
+            <Button onClick={this.props.onClick}>{this.getMessage()}</Button>
+          )}
+        </StyledBox>
+      </Container>
     );
   }
 }
 
-const StyledBox = styled(Box)`
-  padding: 80px;
+const Container = styled('div')`
+  display: flex;
   align-items: center;
+  justify-content: center;
+  height: 450px;
+  padding: ${space(1)};
 `;
 
-const StyledButton = styled(Button)`
-  align-items: left;
+const StyledBox = styled('div')`
+  flex: 1;
+  padding: 40px;
 `;
+
+const IllustrationContainer = styled(StyledBox)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const CardComponentContainer = styled('div')`
+  width: 450px;
+
+  img {
+    vertical-align: baseline;
+  }
+
+  @media (max-width: 1150px) {
+    font-size: 14px;
+    width: 350px;
+  }
+
+  @media (max-width: 1000px) {
+    font-size: 12px;
+    width: 280px;
+  }
+`;
+
 export default ReleaseLandingCard;

yarn.lock

@@ -12286,10 +12286,10 @@ send@0.16.2:
     range-parser "~1.2.0"
     statuses "~1.4.0"
 
-sentry-dreamy-components@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/sentry-dreamy-components/-/sentry-dreamy-components-1.0.0.tgz#e15a3f896e086961b43b611e3a1bb95481b98d01"
-  integrity sha512-8Ls2feP9yAjm/CCgByBNuSToky/rI0xWaqHpyCUXJ6EMELqyJWOlmOOVM50ODp1iKxEioGbalJHqHeUQb7w6Cw==
+sentry-dreamy-components@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sentry-dreamy-components/-/sentry-dreamy-components-1.0.1.tgz#ffa58fb5590a7f28f8979d470d6381f6024b4424"
+  integrity sha512-O4EWxxKVuAA4JAtcydt9cwuZqeEUsJnmByJk+80/ITzVoOodIhVan6aGAggvleNrzRLD+stp94KAtatcrD3SVQ==
 
 serialize-javascript@^1.4.0:
   version "1.5.0"