From 8d28d2c98448f3a77add6997c31fa2535b932dc3 Mon Sep 17 00:00:00 2001
From: Remi <remi.d45@gmail.com>
Date: Fri, 4 Dec 2020 16:35:18 +0100
Subject: [PATCH] feat(storybook-drawer): use theme spacing

---
 .../src/components/Drawer/Drawer.stories.tsx  | 54 ++++++++++---------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/components/Drawer/Drawer.stories.tsx b/packages/core/src/components/Drawer/Drawer.stories.tsx
index 9bb60c78a4..b399cfed8e 100644
--- a/packages/core/src/components/Drawer/Drawer.stories.tsx
+++ b/packages/core/src/components/Drawer/Drawer.stories.tsx
@@ -21,6 +21,8 @@ import {
   Typography,
   makeStyles,
   IconButton,
+  createStyles,
+  Theme,
 } from '@material-ui/core';
 import Close from '@material-ui/icons/Close';
 
@@ -29,31 +31,35 @@ export default {
   component: Drawer,
 };
 
-const useDrawerStyles = makeStyles({
-  paper: {
-    width: '50%',
-    justifyContent: 'space-between',
-    padding: '20px',
-  },
-});
+const useDrawerStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    paper: {
+      width: '50%',
+      justifyContent: 'space-between',
+      padding: theme.spacing(2.5),
+    },
+  }),
+);
 
-const useDrawerContentStyles = makeStyles({
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  icon: {
-    fontSize: 20,
-  },
-  content: {
-    height: '80%',
-    backgroundColor: '#EEEEEE',
-  },
-  secondaryAction: {
-    marginLeft: '20px',
-  },
-});
+const useDrawerContentStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    icon: {
+      fontSize: 20,
+    },
+    content: {
+      height: '80%',
+      backgroundColor: '#EEEEEE',
+    },
+    secondaryAction: {
+      marginLeft: theme.spacing(2.5),
+    },
+  }),
+);
 
 /* Example content wrapped inside the Drawer component */
 const DrawerContent = ({