fix(ImageCard): Update gradient stops & add overlay opacity

ticketmaster · Jun 14, 2018 · 65c2602 · 65c2602
1 parent 98ec13c
commit 65c2602
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/ImageCard/__tests__/__snapshots__/index.spec.js.snap b/src/components/ImageCard/__tests__/__snapshots__/index.spec.js.snap
@@ -20,6 +20,7 @@ exports[`ImageCard renders card without overlay 1`] = `
   left: 0;
   right: 0;
   bottom: 0;
+  opacity: 0.8;
   background-image: transparent;
   display: -webkit-box;
   display: -webkit-flex;
@@ -80,7 +81,8 @@ exports[`ImageCard renders standard card 1`] = `
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: linear-gradient(to bottom,rgba(0,0,0,0),#000000);
+  opacity: 0.8;
+  background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -140,7 +142,8 @@ exports[`ImageCard renders type = half 1`] = `
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: linear-gradient(to bottom,rgba(0,0,0,0),#000000);
+  opacity: 0.8;
+  background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -247,7 +250,8 @@ exports[`ImageCard renders with custom image 1`] = `
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: linear-gradient(to bottom,rgba(0,0,0,0),#000000);
+  opacity: 0.8;
+  background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -354,7 +358,8 @@ exports[`ImageCard renders with title & subtitle 1`] = `
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: linear-gradient(to bottom,rgba(0,0,0,0),#000000);
+  opacity: 0.8;
+  background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -460,7 +465,8 @@ exports[`ImageCard renders with title & subtitle, extra content 1`] = `
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: linear-gradient(to bottom,rgba(0,0,0,0),#000000);
+  opacity: 0.8;
+  background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

diff --git a/src/components/ImageCard/index.js b/src/components/ImageCard/index.js
@@ -19,9 +19,10 @@ const Overlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
+  opacity: 0.8;
   background-image: ${props =>
     props.withOverlay
-      ? "linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000)"
+      ? "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) 9%, rgba(0, 0, 0, 0.06) 19%, rgba(0, 0, 0, 0.12) 28%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.29) 48%, rgba(0, 0, 0, 0.39) 57%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.61) 74%, rgba(0, 0, 0, 0.71) 81%, rgba(0, 0, 0, 0.8) 88%, rgba(0, 0, 0, 0.88) 93%, rgba(0, 0, 0, 0.95) 97%, rgba(0, 0, 0, 0.98) 99%, #000000);"
       : "transparent"};
   display: flex;
   align-items: flex-end;