[docs] Add Diamond Sponsors

docs/src/modules/components/AppDrawer.js

@@ -9,6 +9,7 @@ import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Divider from '@material-ui/core/Divider';
 import Hidden from '@material-ui/core/Hidden';
 import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
+import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 import Link from 'docs/src/modules/components/Link';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -160,6 +161,7 @@ function AppDrawer(props) {
         </div>
       </div>
       <Divider />
+      <DiamondSponsors />
       {renderNavItems({ props, pages, activePage, depth: 0, t })}
     </PersistScroll>
   );

docs/src/modules/components/DiamondSponsors.js

@@ -0,0 +1,54 @@
+/* eslint-disable material-ui/no-hardcoded-labels */
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import { makeStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& a': {
+      display: 'block',
+      marginTop: theme.spacing(1),
+    },
+    '& img': {
+      width: 125,
+    },
+  },
+  placeholder: {
+    width: 125,
+    height: 35,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.divider,
+    border: `1px dashed ${theme.palette.divider}`,
+    transition: theme.transitions.create(['color', 'border-color']),
+    '&&': {
+      display: 'flex',
+    },
+    '&:hover': {
+      borderColor: 'currentColor',
+      color: theme.palette.text.secondary,
+    },
+  },
+}));
+
+export default function DiamondSponsors() {
+  const classes = useStyles();
+  return (
+    <Box mx={3} my={2} className={classes.root}>
+      <Typography variant="caption" color="textSecondary" display="block">
+        Diamond Sponsors
+      </Typography>
+      <a
+        className={classes.placeholder}
+        rel="noopener noreferrer"
+        target="_blank"
+        href="https://www.patreon.com/oliviertassinari"
+      >
+        <AddIcon />
+      </a>
+    </Box>
+  );
+}