diff --git a/packages/core/src/layout/Header/Burst.js b/packages/core/src/layout/Header/Burst.js deleted file mode 100644 index 558419cb00..0000000000 --- a/packages/core/src/layout/Header/Burst.js +++ /dev/null @@ -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 ( -
-
-
- ); -}; - -export default Burst; diff --git a/packages/core/src/layout/Header/Header.js b/packages/core/src/layout/Header/Header.js index 7f715e5996..1370a654bf 100644 --- a/packages/core/src/layout/Header/Header.js +++ b/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 => (
- +
{this.typeFragment()} {this.titleFragment()} diff --git a/packages/core/src/layout/Header/Waves.js b/packages/core/src/layout/Header/Waves.js new file mode 100644 index 0000000000..d65af195c5 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Waves; diff --git a/packages/core/src/layout/Page/PageThemeProvider.ts b/packages/core/src/layout/Page/PageThemeProvider.ts index 4c792ef900..b04a799128 100644 --- a/packages/core/src/layout/Page/PageThemeProvider.ts +++ b/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 = { 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, }, };