diff --git a/public/images/supporters/adzuna.png b/public/images/supporters/adzuna.png new file mode 100644 index 000000000..409ae214e Binary files /dev/null and b/public/images/supporters/adzuna.png differ diff --git a/public/images/supporters/zeplin.png b/public/images/supporters/zeplin.png new file mode 100644 index 000000000..058d7639e Binary files /dev/null and b/public/images/supporters/zeplin.png differ diff --git a/src/components/SponsorSlider/SponsorSlider.js b/src/components/SponsorSlider/SponsorSlider.js index b809384b9..6429f9fab 100644 --- a/src/components/SponsorSlider/SponsorSlider.js +++ b/src/components/SponsorSlider/SponsorSlider.js @@ -4,7 +4,7 @@ import Carousel from 'nuka-carousel' import { ThemeContext } from '../../store/ThemeProvider' import { FaSlack, FaGoogle, FaGithub } from 'react-icons/fa' import { SiReplit } from 'react-icons/si' -import { Contentful, Fem, Vercel } from '../../icons' +import { AdzunaLogo, Contentful, Fem, Vercel, Zeplin } from '../../icons' const baseSettlings = { autoplay: true, @@ -122,6 +122,34 @@ const elements = [ }, }, }, + { + href: 'https://www.adzuna.com/', + label: 'Link to Adzuna', + title: 'Adzuna', + // /image is in the public folder + lightElement: '/images/supporters/adzuna.png', + darkElement: { + component: AdzunaLogo, + props: { + size: 60, + color: '#ffffff', + }, + }, + }, + { + href: 'https://zeplin.io/', + label: 'Link to Zeplin', + title: 'Zeplin', + // /image is in the public folder + lightElement: '/images/supporters/zeplin.png', + darkElement: { + component: Zeplin, + props: { + size: 60, + color: '#ffffff', + }, + }, + }, ] function SponsorSlider() { @@ -186,7 +214,7 @@ function SponsorSlider() { return ( {colorMode === 'light' ? lightElements() : darkElements()} diff --git a/src/icons/AdzunaLogo.js b/src/icons/AdzunaLogo.js new file mode 100644 index 000000000..2d472d65e --- /dev/null +++ b/src/icons/AdzunaLogo.js @@ -0,0 +1,13 @@ +function SvgAdzunaLogo() { + return ( + + + + + ) +} + +export default SvgAdzunaLogo diff --git a/src/icons/Zeplin.js b/src/icons/Zeplin.js new file mode 100644 index 000000000..af471a683 --- /dev/null +++ b/src/icons/Zeplin.js @@ -0,0 +1,46 @@ +import PropTypes from 'prop-types' + +function SvgZeplin() { + return ( + + + + + + + + + + + + + + + ) +} + +SvgZeplin.propTypes = { + size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + color: PropTypes.string, + style: PropTypes.string, +} + +export default SvgZeplin diff --git a/src/icons/index.js b/src/icons/index.js index b7c2e95b1..75747e260 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -2,3 +2,5 @@ export { default as Contentful } from './Contentful' export { default as Fem } from './Fem' export { default as Adzuna } from './Adzuna' export { default as Vercel } from './Vercel' +export { default as AdzunaLogo } from './AdzunaLogo' +export { default as Zeplin } from './Zeplin' diff --git a/tests/components/__snapshots__/SponsorSlider.test.js.snap b/tests/components/__snapshots__/SponsorSlider.test.js.snap index b89319e61..f6891e0ad 100644 --- a/tests/components/__snapshots__/SponsorSlider.test.js.snap +++ b/tests/components/__snapshots__/SponsorSlider.test.js.snap @@ -17,7 +17,7 @@ exports[` should render correctly 1`] = ` style="box-sizing: border-box; cursor: pointer; display: block; height: 0px; margin: 0px 0px; padding: 0px; width: 0px;" >
should render correctly 1`] = `
should render correctly 1`] = `
should render correctly 1`] = `
should render correctly 1`] = `
should render correctly 1`] = `
should render correctly 1`] = `
should render correctly 1`] = `
+
+
+ + + + + + +
+
+