From 125f3db635f75f9c785022a31c295b4b69d15e1a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 7 Jul 2021 00:33:56 +0200
Subject: [PATCH] [docs] Polish banner effects

---
 docs/pages/index.js                               | 2 +-
 docs/src/modules/components/AppTableOfContents.js | 6 +++---
 docs/src/modules/components/MarkdownDocs.js       | 2 +-
 docs/src/modules/components/MarkdownElement.js    | 2 +-
 docs/src/pages/landing/Pro.js                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/pages/index.js b/docs/pages/index.js
index fbff2d6a116423..6de6fa3ade40da 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -39,7 +39,7 @@ const useStyles = makeStyles(
       flex: '1 0 100%',
     },
     hero: {
-      paddingTop: theme.spacing(8) + 30,
+      paddingTop: theme.spacing(8) + 36,
       color: theme.palette.primary.main,
     },
     content: {
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index 4f6112048489a2..e6bc305657a93c 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -11,13 +11,13 @@ import PageContext from 'docs/src/modules/components/PageContext';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    top: 100,
+    top: 70 + 36,
     // Fix IE 11 position sticky issue.
-    marginTop: 100,
+    marginTop: 70 + 36,
     width: 175,
     flexShrink: 0,
     position: 'sticky',
-    height: 'calc(100vh - 70px)',
+    height: 'calc(100vh - 70px - 36px)',
     overflowY: 'auto',
     padding: theme.spacing(2, 2, 2, 0),
     display: 'none',
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 6dade237871463..70a062c958b8f9 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -48,7 +48,7 @@ function findIndex(array, comp) {
 const styles = (theme) => ({
   root: {
     width: '100%',
-    paddingTop: 30,
+    paddingTop: 36,
   },
   container: {
     position: 'relative',
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index aec0cd4105b34f..0171152e70bbc8 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -9,7 +9,7 @@ const styles = (theme) => ({
     color: theme.palette.text.primary,
     wordBreak: 'break-word',
     '& .anchor-link': {
-      marginTop: -96, // Offset for the anchor.
+      marginTop: -(96 + 36), // Offset for the anchor.
       position: 'absolute',
     },
     '& pre': {
diff --git a/docs/src/pages/landing/Pro.js b/docs/src/pages/landing/Pro.js
index 9d31808fc2496a..9ad32e43173e1b 100644
--- a/docs/src/pages/landing/Pro.js
+++ b/docs/src/pages/landing/Pro.js
@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux';
 const useStyles = makeStyles(
   (theme) => ({
     root: {
-      marginTop: 30,
+      marginTop: 36,
       padding: theme.spacing(1, 2, 1, 2),
       right: 0,
       left: 0,