From 0b26321e2fa3261825a765287d60fa45ca7c9447 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Thu, 29 Apr 2021 07:29:14 -0400
Subject: [PATCH 1/2] Migrate CustomizedTimeline to emotion

---
 .../components/timeline/CustomizedTimeline.js | 31 +++++--------------
 .../timeline/CustomizedTimeline.tsx           | 31 +++++--------------
 2 files changed, 16 insertions(+), 46 deletions(-)

diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.js b/docs/src/pages/components/timeline/CustomizedTimeline.js
index bca3f6734448a4..8082a658af9c29 100644
--- a/docs/src/pages/components/timeline/CustomizedTimeline.js
+++ b/docs/src/pages/components/timeline/CustomizedTimeline.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Timeline from '@material-ui/lab/Timeline';
 import TimelineItem from '@material-ui/lab/TimelineItem';
 import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
@@ -13,26 +12,12 @@ import HotelIcon from '@material-ui/icons/Hotel';
 import RepeatIcon from '@material-ui/icons/Repeat';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  timelineContent: {
-    padding: '12px 16px',
-  },
-  secondaryTail: {
-    backgroundColor: theme.palette.secondary.main,
-  },
-  verticallyCenterContent: {
-    margin: 'auto 0',
-  },
-}));
-
 export default function CustomizedTimeline() {
-  const classes = useStyles();
-
   return (
     <Timeline position="alternate">
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           align="right"
           variant="body2"
           color="text.secondary"
@@ -46,7 +31,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Eat
           </Typography>
@@ -55,7 +40,7 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           variant="body2"
           color="text.secondary"
         >
@@ -68,7 +53,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Code
           </Typography>
@@ -81,9 +66,9 @@ export default function CustomizedTimeline() {
           <TimelineDot color="primary" variant="outlined">
             <HotelIcon />
           </TimelineDot>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Sleep
           </Typography>
@@ -92,13 +77,13 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineSeparator>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
           <TimelineDot color="secondary">
             <RepeatIcon />
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Repeat
           </Typography>
diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.tsx b/docs/src/pages/components/timeline/CustomizedTimeline.tsx
index bca3f6734448a4..8082a658af9c29 100644
--- a/docs/src/pages/components/timeline/CustomizedTimeline.tsx
+++ b/docs/src/pages/components/timeline/CustomizedTimeline.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Timeline from '@material-ui/lab/Timeline';
 import TimelineItem from '@material-ui/lab/TimelineItem';
 import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
@@ -13,26 +12,12 @@ import HotelIcon from '@material-ui/icons/Hotel';
 import RepeatIcon from '@material-ui/icons/Repeat';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  timelineContent: {
-    padding: '12px 16px',
-  },
-  secondaryTail: {
-    backgroundColor: theme.palette.secondary.main,
-  },
-  verticallyCenterContent: {
-    margin: 'auto 0',
-  },
-}));
-
 export default function CustomizedTimeline() {
-  const classes = useStyles();
-
   return (
     <Timeline position="alternate">
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           align="right"
           variant="body2"
           color="text.secondary"
@@ -46,7 +31,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Eat
           </Typography>
@@ -55,7 +40,7 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           variant="body2"
           color="text.secondary"
         >
@@ -68,7 +53,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Code
           </Typography>
@@ -81,9 +66,9 @@ export default function CustomizedTimeline() {
           <TimelineDot color="primary" variant="outlined">
             <HotelIcon />
           </TimelineDot>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Sleep
           </Typography>
@@ -92,13 +77,13 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineSeparator>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
           <TimelineDot color="secondary">
             <RepeatIcon />
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ p: '12px 16px' }}>
           <Typography variant="h6" component="span">
             Repeat
           </Typography>

From 76153748bdfb777c4c4cfb07b91caa483dc3dfaa Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Thu, 29 Apr 2021 07:36:28 -0400
Subject: [PATCH 2/2] Use shorhands

---
 docs/src/pages/components/timeline/CustomizedTimeline.js  | 8 ++++----
 docs/src/pages/components/timeline/CustomizedTimeline.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.js b/docs/src/pages/components/timeline/CustomizedTimeline.js
index 8082a658af9c29..d689e6412ec563 100644
--- a/docs/src/pages/components/timeline/CustomizedTimeline.js
+++ b/docs/src/pages/components/timeline/CustomizedTimeline.js
@@ -31,7 +31,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Eat
           </Typography>
@@ -53,7 +53,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Code
           </Typography>
@@ -68,7 +68,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Sleep
           </Typography>
@@ -83,7 +83,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Repeat
           </Typography>
diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.tsx b/docs/src/pages/components/timeline/CustomizedTimeline.tsx
index 8082a658af9c29..d689e6412ec563 100644
--- a/docs/src/pages/components/timeline/CustomizedTimeline.tsx
+++ b/docs/src/pages/components/timeline/CustomizedTimeline.tsx
@@ -31,7 +31,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Eat
           </Typography>
@@ -53,7 +53,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Code
           </Typography>
@@ -68,7 +68,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Sleep
           </Typography>
@@ -83,7 +83,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent sx={{ p: '12px 16px' }}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Repeat
           </Typography>