From 622a00cc112ce2fd4469575739b044480580638e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 26 Jan 2020 23:03:18 +0100
Subject: [PATCH] [docs] Polish typography demos

---
 .../typography/CustomResponsiveFontSizes.js          | 10 ++++------
 .../typography/CustomResponsiveFontSizes.tsx         | 10 ++++------
 .../customization/typography/TypographyVariants.js   |  8 ++++----
 .../customization/typography/TypographyVariants.tsx  |  8 ++++----
 .../src/pages/customization/typography/typography.md | 12 +++++++-----
 5 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
index f78c597234e9eb..787a5d55b64eb1 100644
--- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
+++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
@@ -14,12 +14,10 @@ theme.typography.h3 = {
   },
 };
 
-export default function ResponsiveFontSizes() {
+export default function CustomResponsiveFontSizes() {
   return (
-    <div>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h3">Responsive h3</Typography>
-      </ThemeProvider>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Typography variant="h3">Responsive h3</Typography>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
index f78c597234e9eb..787a5d55b64eb1 100644
--- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
+++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
@@ -14,12 +14,10 @@ theme.typography.h3 = {
   },
 };
 
-export default function ResponsiveFontSizes() {
+export default function CustomResponsiveFontSizes() {
   return (
-    <div>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h3">Responsive h3</Typography>
-      </ThemeProvider>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Typography variant="h3">Responsive h3</Typography>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js
index af5ab349fa90fe..26a48739646398 100644
--- a/docs/src/pages/customization/typography/TypographyVariants.js
+++ b/docs/src/pages/customization/typography/TypographyVariants.js
@@ -19,12 +19,12 @@ const theme = createMuiTheme({
 
 export default function TypographyVariants() {
   return (
-    <ThemeProvider theme={theme}>
-      <div>
+    <div>
+      <ThemeProvider theme={theme}>
         <Typography variant="subtitle1">subtitle</Typography>
         <Typography>body1</Typography>
         <Button>Button</Button>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </div>
   );
 }
diff --git a/docs/src/pages/customization/typography/TypographyVariants.tsx b/docs/src/pages/customization/typography/TypographyVariants.tsx
index af5ab349fa90fe..26a48739646398 100644
--- a/docs/src/pages/customization/typography/TypographyVariants.tsx
+++ b/docs/src/pages/customization/typography/TypographyVariants.tsx
@@ -19,12 +19,12 @@ const theme = createMuiTheme({
 
 export default function TypographyVariants() {
   return (
-    <ThemeProvider theme={theme}>
-      <div>
+    <div>
+      <ThemeProvider theme={theme}>
         <Typography variant="subtitle1">subtitle</Typography>
         <Typography>body1</Typography>
         <Button>Button</Button>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </div>
   );
 }
diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md
index 9194a61d6dd26a..2bd30a21f19812 100644
--- a/docs/src/pages/customization/typography/typography.md
+++ b/docs/src/pages/customization/typography/typography.md
@@ -56,7 +56,7 @@ const raleway = {
 Next, you need to change the theme to use this new font.
 In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
 
-```js
+```jsx
 const theme = createMuiTheme({
   typography: {
     fontFamily: 'Raleway, Arial',
@@ -71,10 +71,12 @@ const theme = createMuiTheme({
 });
 
 // ...
-<ThemeProvider theme={theme}>
-  <CssBaseline />
-  {children}
-</ThemeProvider>;
+return (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+);
 ```
 
 ## Font size