Merge pull request #202 from spotify/patriko/waves

core/layout: replace burst with waves

packages/core/src/layout/Header/Burst.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  burst: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: '100%',
-    width: '100%',
-    'z-index': -1,
-  },
-  /* base style of burst shape SVGs */
-  burstShape: {
-    position: 'absolute',
-    right: 0,
-    height: '100%',
-    'background-repeat': 'no-repeat',
-    'background-size': 'cover',
-    opacity: 0.1,
-  },
-}));
-
-const Burst = ({ theme }) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.burst} style={{ backgroundImage: theme.gradient }}>
-      <div className={classes.burstShape} style={theme.burstShape} />
-    </div>
-  );
-};
-
-export default Burst;

packages/core/src/layout/Header/Header.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Typography, withStyles, Tooltip } from '@material-ui/core';
 import { Theme } from '../Page/Page';
 // import { Link } from 'shared/components';
-import Burst from './Burst';
+import Waves from './Waves';
 import Helmet from 'react-helmet';
 
 class Header extends Component {
@@ -83,7 +83,7 @@ class Header extends Component {
         <Theme.Consumer>
           {theme => (
             <header style={style} className={classes.header}>
-              <Burst theme={theme} />
+              <Waves theme={theme} />
               <div className={classes.leftItemsBox}>
                 {this.typeFragment()}
                 {this.titleFragment()}

packages/core/src/layout/Header/Waves.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  wave: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    'z-index': -1,
+  },
+});
+
+const Waves = ({ theme }) => {
+  const classes = useStyles();
+  const [color1, color2] = theme.gradient.colors;
+
+  return (
+    <svg
+      viewBox="0 0 1440 94"
+      preserveAspectRatio="xMinYMin slice"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classes.wave}
+    >
+      <rect width="1440" height="94" fill="url(#paint0_linear)" />
+      <g opacity="0.8">
+        <mask
+          id="mask0"
+          mask-type="alpha"
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="1440"
+          height="94"
+        >
+          <rect width="1440" height="94" fill={color1} />
+        </mask>
+        <g mask="url(#mask0)">
+          <path
+            d="M710.947 14.3685C605.39 154.457 195.464 165.759 92 154.301V210.649L2330 287V222.126C1516.52 222.126 1394.17 80.1091 1161.6 -40.9544C926.122 -163.528 768.278 -61.7182 710.947 14.3685Z"
+            fill="url(#paint1_linear)"
+          />
+          <path
+            d="M1163.25 124.34C1058.49 -16.113 651.678 -27.4441 549 -15.9565V-72.4504L2770 -149V-83.9579C1962.69 -83.9579 1841.28 58.4283 1610.47 179.806C1376.79 302.698 1220.14 200.624 1163.25 124.34Z"
+            fill="url(#paint2_linear)"
+          />
+          <path
+            d="M-104.701 -5.00477C-224.644 62.3106 -690.435 67.7413 -808 62.2356V89.3117L1735 126V94.827C810.651 94.827 671.63 26.5849 407.363 -31.5885C139.798 -90.4876 -39.557 -41.5659 -104.701 -5.00477Z"
+            fill="url(#paint3_linear)"
+          />
+          <path
+            d="M-247.511 -32.6315C-338.493 107.457 -691.821 118.759 -781 107.301V163.649L1148 240V175.126C446.833 175.126 341.378 33.1091 140.917 -87.9544C-62.0447 -210.528 -198.095 -108.718 -247.511 -32.6315Z"
+            fill="url(#paint4_linear)"
+          />
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear"
+          x1="7.21415e-07"
+          y1="61"
+          x2="1649"
+          y2="59.5001"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color1} />
+          <stop offset="1" stopColor={color2} />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear"
+          x1="1318.25"
+          y1="-285.884"
+          x2="1311.42"
+          y2="241.925"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color2} stopOpacity="0.72" />
+          <stop offset="1" stopColor={color2} stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear"
+          x1="1765.93"
+          y1="425.372"
+          x2="1759.02"
+          y2="-103.806"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color2} stopOpacity="0.72" />
+          <stop offset="1" stopColor={color2} stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear"
+          x1="585.365"
+          y1="-149.282"
+          x2="583.977"
+          y2="104.375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color2} stopOpacity="0.72" />
+          <stop offset="1" stopColor={color2} stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear"
+          x1="275.941"
+          y1="-332.884"
+          x2="268.016"
+          y2="194.894"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color2} stopOpacity="0.72" />
+          <stop offset="1" stopColor={color2} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default Waves;

packages/core/src/layout/Page/PageThemeProvider.ts

@@ -1,64 +1,107 @@
 export const gradients = {
-  blue: 'linear-gradient(135deg, #2D46B9 0%, #509BF5 100%)',
-  darkBlue: 'linear-gradient(44deg, #1E3264 0%, #A0C3D2 100%)',
-  brown: 'linear-gradient(44deg, #674638 0%, #C39887 100%)',
-  green: 'linear-gradient(-90deg, #1DB954 0%, #006350 100%)',
-  orangeYellow: 'linear-gradient(37deg, #FF6437 0%, #FFC864 100%)',
-  redOrange: 'linear-gradient(37deg, #A72525 0%, #E6542D 100%)',
-  pinkOrange: 'linear-gradient(43deg, #F13DA2 0%, #FF8A48 100%)',
-  purpleBlue: 'linear-gradient(-137deg, #4100F4 0%, #AF2996 100%)',
-  tealGreen: 'linear-gradient(-137deg, #19E68C 0%, #1D7F6E 100%)',
-  violetPeach: 'linear-gradient(44deg, #B39AC8 0%, #FCCBD3 100%)',
-  violetGreen: 'linear-gradient(44deg, #4302F4 0%, #C3EFC8 100%)',
-  purple: 'linear-gradient(-90deg, #a186bd 0%, #7c5c92 100%)',
-  eveningSea: 'linear-gradient(-137deg, #00FFF2 0%, #035355 100%)',
-  royalBlue:
-    'linear-gradient(45deg, #000044 0%, #0000DD 61.47%, #0033DD 74%, #4B80D4 100%)',
-  grey: 'linear-gradient(45deg, #111111 0%, #777777 100%)',
-  sunset: 'linear-gradient(148deg, #cf8022 0%, #4e6ec7 100%)',
-  sky: 'linear-gradient(135deg, #69B9FF 0%, #ACCEEC 100%)',
+  blue: {
+    colors: ['#2D46B9', '#509BF5'],
+    style: 'linear-gradient(135deg, #2D46B9 0%, #509BF5 100%)',
+  },
+  darkBlue: {
+    colors: ['#1E3264', '#A0C3D2'],
+    style: 'linear-gradient(44deg, #1E3264 0%, #A0C3D2 100%)',
+  },
+  brown: {
+    colors: ['#674638', '#C39887'],
+    style: 'linear-gradient(44deg, #674638 0%, #C39887 100%)',
+  },
+  green: {
+    colors: ['#1DB954', '#006350'],
+    style: 'linear-gradient(-90deg, #1DB954 0%, #006350 100%)',
+  },
+  orangeYellow: {
+    colors: ['#FF6437', '#FFC864'],
+    style: 'linear-gradient(37deg, #FF6437 0%, #FFC864 100%)',
+  },
+  redOrange: {
+    colors: ['#A72525', '#E6542D'],
+    style: 'linear-gradient(37deg, #A72525 0%, #E6542D 100%)',
+  },
+  pinkOrange: {
+    colors: ['#F13DA2', '#FF8A48'],
+    style: 'linear-gradient(43deg, #F13DA2 0%, #FF8A48 100%)',
+  },
+  purpleBlue: {
+    colors: ['#4100F4', '#AF2996'],
+    style: 'linear-gradient(-137deg, #4100F4 0%, #AF2996 100%)',
+  },
+  tealGreen: {
+    colors: ['#19E68C', '#1D7F6E'],
+    style: 'linear-gradient(-137deg, #19E68C 0%, #1D7F6E 100%)',
+  },
+  violetPeach: {
+    colors: ['#B39AC8', '#FCCBD3'],
+    style: 'linear-gradient(44deg, #B39AC8 0%, #FCCBD3 100%)',
+  },
+  violetGreen: {
+    colors: ['#4302F4', '#C3EFC8'],
+    style: 'linear-gradient(44deg, #4302F4 0%, #C3EFC8 100%)',
+  },
+  purple: {
+    colors: ['#a186bd', '#7c5c92'],
+    style: 'linear-gradient(-90deg, #a186bd 0%, #7c5c92 100%)',
+  },
+  eveningSea: {
+    colors: ['#00FFF2', '#035355'],
+    style: 'linear-gradient(-137deg, #00FFF2 0%, #035355 100%)',
+  },
+  royalBlue: {
+    colors: ['#000044', '#4B80D4'],
+    style:
+      'linear-gradient(45deg, #000044 0%, #0000DD 61.47%, #0033DD 74%, #4B80D4 100%)',
+  },
+  grey: {
+    colors: ['#111111', '#777777'],
+    style: 'linear-gradient(45deg, #111111 0%, #777777 100%)',
+  },
+  sunset: {
+    colors: ['#cf8022', '#4e6ec7'],
+    style: 'linear-gradient(148deg, #cf8022 0%, #4e6ec7 100%)',
+  },
+  sky: {
+    colors: ['#69B9FF', '#ACCEEC'],
+    style: 'linear-gradient(135deg, #69B9FF 0%, #ACCEEC 100%)',
+  },
 };
 
 export type PageTheme = {
   activeNavLinkColor: string;
-  gradient: string;
-  burstShape: any;
+  gradient: { colors: string[]; style: string };
 };
 
 export const pageTheme: Record<string, PageTheme> = {
   service: {
     activeNavLinkColor: '#1D7F6E',
     gradient: gradients.tealGreen,
-    burstShape: null,
   },
   website: {
     activeNavLinkColor: '#765d90',
     gradient: gradients.purple,
-    burstShape: null,
   },
   home: {
     activeNavLinkColor: '#00814e',
     gradient: gradients.green,
-    burstShape: null,
   },
   org: {
     activeNavLinkColor: '#6044ef',
     gradient: gradients.violetGreen,
-    burstShape: null,
   },
   documentation: {
     activeNavLinkColor: '#04c2ba',
     gradient: gradients.eveningSea,
-    burstShape: null,
   },
   tool: {
     activeNavLinkColor: '#04c2ba',
     gradient: gradients.purpleBlue,
-    burstShape: null,
   },
   library: {
     activeNavLinkColor: '#B39AC8',
     gradient: gradients.sunset,
-    burstShape: null,
   },
 };